injae

앞서 페이지네이션과 관련된 내용들을 정리한 이전 글에 이어서 현재 미션중인 스프린트에서 페이지네이션을 구현해보려고한다.페이지네이션의 개념을 알고 시작하고 싶다면 아래 링크 참조https://injaeee.tistory.com/19 아래 사진은 미션의 피그마이다.  아래 사진처럼 페이지네이션을 구현하려면 이전 글에서 더보기 버튼을 눌러가며 추가적으로 데이터를 가져왔던 방식과는 다르게 전체 데이터의 수를 받아와서 화면에 띄울 페이지버튼의 숫자를 계산하는 로직이 필요했다.  아래 사진은 이번 미션의 백엔드 주소인데 상품들을 GET하는 api에서 정렬기준(orderBy), 페이지 번호(page), 한 페이지 당 화면에 띄울 상품 수(pageSize)를 요청할 수 있는 쿼리가 존재했다. 백엔드 주소에 맞춰서 이런..

우선 Router란?Router는 React 애플리케이션에서 클라이언트 측 라우팅을 처리하여 여러 페이지를 구현할 수 있게 해주는 라이브러리이며, 각 경로에 적절한 컴포넌트를 매핑해 사용자가 특정 URL로 이동할 때 해당 URL에 해당하는 컴포넌트를 렌더링해준다. 이러한 router를 공부하면서 Link 컴포넌트와 useNavigater를 이용하여 페이지를 리로드하지 않고 경로를 변경할 수 있는 방법을 알게 되었다. Link와 useNavigate는 모두 React Router 라이브러리에서 제공하는 내비게이션 도구인데 문득 수행 역할은 같은 것 같은데 어떤 부분에서 차이가 있는 것인지가 궁금하여 다시 이 둘을 정의할겸, 차이점까지 정리해보려한다. LinkReact-Router-Dom 이 제공하는 컴포넌..

리액트 생명주기(life cycle)란?리액트 컴포넌트는 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 생명주기(life cycle)이 있다.컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는데 이러한 리액트의 생명주기는 클래스 컴포넌트에서만 사용할 수 있으며,함수 컴포넌트에선 사용할수 없다. 사용하고 싶을 경우 리액트 Hook인 useEffect를 이용하여 비슷하게 작업을 할 수 있다. 출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/  앞서 위의 시점에서 발생하는 클래스 컴포넌트의 생명주기를 알아보자. 마운트(mount)컴포넌트가 처음 실행될때 생성단계..

Promise의 요청상태대기상태 (pending)이행상태 (fulfilled)거부상태 (rejected)대기 상태비동기 처리가 수행되기 이전의 상태를 의미하며 이행하지도 거부하지도 않은 상태를 의미한다.const newPromise = () => { return new Promise(); };​이행 상태Promise를 통하여서 비동기 호출을 하였을 때, '성공’적으로 호출이 된 경우new Promise (function (resolve, reject)){ resolve(); }​거부 상태Promise를 통하여 비동기 호출을 하였으나 호출이 ‘실패’ 된 경우new Promise(function(resolve, reject) { reject(); });​than의 두번째 인수로 오류처리 = catchfetc..

페이지네이션이란?사이트에서 렌더링을 할때 만약 수많은 모든 데이터를 한 번에 받아온다면 접속할 때 시간이 어마어마하게 걸릴 것이다. 그러한 부분을 해결하기 위해 렌더링할때 필요한 데이터만 가져온 후 그 다음부터는 스크롤, 더보기, 페이지 버튼 등을 이용해 데이터를 추가적으로 받아오도록 데이터를 조금씩 나눠 가져 오는 걸 페이지네이션(pagination)이라고 한다. 책 페이지처럼 데이터를 나눠서 제공하는 방식이기에 붙여진 이름이며 많은 양의 데이터를 가져올 때 적합한 방식이다. 코드잇 강의에서는 페이지네이션의 오프셋(지금까지 받아온 개수) 방식을 배울수 있었다. 아래처럼 offset값과 limit값을 요청(Request)하면 서버는 리스폰스로 데이터를 보내주는데,  받아온 데이터의 개수를 기준으로 추가적..

최근에 코드잇 부트캠프로 리액트를 공부하며 VSCode를 사용하다가 알아두면 아주 유용한 단축키들을 배웠는데, 자꾸 잊어버리고 활용하지 못해서 여기에 정리해두고 손에 익을 때까지 찾아보려한다.자동완성예시로 handleIconClick 이라는 단어를 입력할 때단어의 앞 부분인 hand 만 입력하거나 단어의 이니셜인 hic 만 입력하면 VSCode는 툴팁으로 단어를 추천해주는데여기서 원하는 단어를 선택한 다음 Enter나 Tab 키를 눌러 단어를 완성할 수 있다.단축키멀티 커서 선택하기텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고,텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅되는데이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있다.윈도우맥Ctrl +..

React Hook  이란?리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. Hook의 규칙반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀) 대표적인 React Hook?1. useState상태(state)값을 추가하고 setter을 이용해 변경할 수 있도록 하는 대표적인 기능입니다.const [state, setState] = useState(initialSta..

Virtual DOMVirtual은 말 그대로 가상이라는 뜻, DOM은 Document Object Model의 약자로 문서 객체 모델을 의미합니다. 즉 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미합니다.개발을 하면서 자주보게 되는 div, input, a 등이 DOM에 해당하며, 실제 돔은 아닌 복사본으로 실제 돔과 같은 내용을 담고JS객체 형태로 메모리안에 저장되어 있습니다.  기존의 DOM은 HTML을 직접적으로 업데이트하며 새로운 element가 업데이트된 경우 새로운 DOM을 생성하기에 업데이트 속도가 느리고 메모리 낭비가 심한 반면, Virtual DOM은 HTML을 직접적으로 업데이트 하지않고 새로운 element가 업데이트 된..

렉시컬 스코프란(Lexical Scope)란?직역해석하자면 어휘적 범위라고 하는데 매끄러운 느낌은 아니라 정적 범위, 정적스코프라고 해석하고 , "정의된 특정 구역 내에서 사용하는 스코프" 라고 이해하는 것이 제일 편한 것 같았습니다. 렉시컬 스코프란, 함수를 어디서 호출하는지가 아닌 어디에 선언하였는지에 따라 결정되는 것을 말합니다.즉, 함수를 어디서 선언하였나에 따라 상위 스코프를 결정한다는 것을 뜻합니다. 아래 코드를 보며 더욱 자세히 알아봅시다.var x = 1;function foo() { console.log(x); }function bar(){ var x = 10; foo();}bar(); // ?​x는 1로 출력 됩니다.bar안에서 foo를 호출했으니, x 값을 bar안에서 찾는 것이 아..

앞서 이벤트 등록이란?이벤트 등록은 웹 에서 사용자의 입력을 받기 위해 필요합니다. 자세하게 말하자면  웹 개발자들이 화면에 동적인 기능을 추가하여, 사용자의 입력에 따라 추가 동작을 구현할 수 있게 해주는데 이벤트의 예시로는 마우스 클릭, 움직이기, 키보드 누르기 등이 있습니다. 여기서 브라우자가 이벤트를 감지하는 방식에 관하여 아래에 자세히 얘기해보도록 하겠습니다.1. 이벤트 버블링 - Event Bubbling이벤트는 개발자가 추가한 요소 뿐 아니라 다른 요소에도 전파가 되는 특성을 가지고 있는데,이벤트 버블링(Event Bubbling)이란 어떤 요소에서 이벤트가 발생할 때 해당 요소에 등록된 이벤트가 동작하는 것뿐 아니라 해당 이벤트가  부모 요소 (상위요소)로 이벤트가 전달되어 가는 특성을 말..