Next.js 폴더 구조 pages index.js => index.js는 특별한 파일로 경로를 읽지 않는다. 동적 경로 활용하기 pages/[project].js 파일을 만들면 URL에서 pages에 어떠한 값이 들어와도 [project].js 파일을 인식한다. pages/someting...

Next.js Data 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져오지만, next.js에서는 다른 방법을 사용한다. 사용 용도에 따라 방법이 나뉜다. getStaticProps Static Generation으로 빌드할 때 데이터를 불러온다. getStaticProps 함수를 async로 export하면,...

Next.js Next.js 소개 리액트 기반의 서버 사이드 렌더링 프레임 워크이다. Next.js는 검색 엔진 최적화(SEO)에 유리하며, 서버 사이드 렌더링으로 모든 페이지에 대한 HTML 마크업이 서버에서 생성된다. 페이지가 완전히 로드되기 전에 사용자에게 보여지는 컨텐츠가 있기 때문에 사용자 경험을 높이고, 초기 로딩 시간을 단...

React React Query Eslint-plugin React 훅을 검사하는 플러그인이다 (useState, useEffect, useContext, useCallback 등). 훅들을 올바르게 사용하고 있는지 검사한다. npm install eslint-plugin-react-hooks --save-dev React ...

React React Query 1. useInfiniteQuery useInfiniteQuery는 무한 스크롤과 같은 데이터 로딩에 사용하는 ReactQuery의 훅이다. 이전 페이지의 데이터를 가져와 새로운 데이터와 병합하는 방식이다. getNextPageParam 등의 옵션으로 다음 페이지의 데이터를 가져오기 위한 파라미터를 반...

React TO-Do List 링크 리팩토링 너무 오랜만에 남기는 거라 작성해야 될 게 많이 남았지만 현재 작성하고 있는 부분까지만 작성해본다. useQuery 사용하기 Login.tsx npm install react-query를 설치한다. 타입스크립트의 타입을 위해 npm install @types/react-q...

React React Query 1. Pagenation 이전 글에서 작동했던 것처럼 의존성 배열을 추가하여, 데이터를 가진 페이지의 번호가 바뀔 때마다 새로운 데이터들을 불러오도록 지정하여 button에 대한 이벤트를 처리할 수 있다. async function fetchPosts() { const response = await f...

React React Query 설치하기 서버에서 받아온 데이터의 캐시와 업데이트를 쉽게 관리할 수 있다. 리액트 쿼리를 설치한다. npm i react-query npm i @types/react-query // 타입스크립트 리액트 쿼리 사용법 1. QueryClientProvider 리액트 쿼리를 설치했으면 쿼리를 사...

Git Git branch 다루기 처음에 GitHub Repository를 생성하면 나오는 main 브랜치에서만 작업을 하다가 새로운 기능 개발을 위해 feature 브랜치를 새로 생성하는 경우, 기존 main 브랜치에서의 작업은 유지하고 새로운 feature 브랜치에서 자유롭게 코드를 추가 및 삭제할 수 있습니다. 브랜치 생성하기/변경...

Interview JavaScript Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요. 호이스팅은 var, let, const, function, class 키워드 등을 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다....