khakha's dev log

Next.js app 라우터 버전에서 layout 파일은 다음과 같은 역할을 한다.여러 route 간에 공유되는 UI페이지 이동시 state를 유지하고 interactive 요소를 유지하며 리렌더링이 일어나지 않는다.레이아웃은 중첩해서 존재할 수 있다.레이아웃은 기본적으로 layout.js 파일에서 React 컴포넌트를 정의하게 된다.해당 컴포넌트는 렌더링 중에 자식 레이아웃(존재하는 경우)이나 페이지로 채워질 children prop을 허용해주어야 한다.📦 app├── 📄 layout.tsx│ └── 📂 dashboard │ ├── 📄 layout.tsx│ ├── 📄 page.tsx│ └── 📂 settings└────────────└──📄 page...

invalidateQueries는 POST, PATCH, DELETE, .. 등의 요청이 완료된 이후 새롭게 데이터를 페칭해야할 때 캐싱된 쿼리를 무효화하는 메서드입니다. 기본적으로 queryKey와 일치하는 모든 쿼리를 즉시 유효하지 않은 것으로 표시하고 active한 상태의 쿼리는 refetch합니다. 무효화시키고 싶은 queryKey를 매칭해주는 방식은 여러가지 존재합니다. 아래 방식으로 적절하게 키를 지정해줘야 정확하게 쿼리를 무효화할 수 있습니다. 키는 hierarchy 구조이기 때문에, 이를 활용해서 화면 영역을 분리하는 용도로도 키를 설정할 수 있습니다. 1. prefix 무효화하고 싶은 접두사로 시작하는 모든 쿼리를 무효화할 수 있습니다. import { useQuery, useQueryC..

컴포넌트 렌더링 중에 상태를 업데이트하려고 시도했기 때문에 발생한 경고이다. 워닝 문구 마지막에 Github issue에서처럼 에러가 발생한 부분을 확인하라고 알려주고 있다. Kanban.tsx const { data, isLoading, isSuccess } = useQuery('fetchKanbanList', fetchKanbanList); if (!isLoading && isSuccess) { const kanbanList = data.data; dispatch(setApplications(kanbanList)); } useQuery훅이 렌더링중에 호출되고, 데이터가 잘 받아와지면 dispatch를 호출하여 스토어 상태를 업데이트하도록하였다. 이는 렌더링 중에 상태를 업데이트하는 것인데, 잘못된 패..

코드 분할 Bundling 대부분 React 앱들은 Webpack, Rollup등을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드할 수 있다. Code-splitting 번들링은 좋은 기능이지만, 큰 규모의 서드파티 라이브러리를 추가하게 되거나 앱이 점점 커질수록 즉, 번들이 커질수록 코드를 읽는 시간이 길어질 수 있다. 번들이 커지는 것을 방지하기 위해 좋은 방법은 번들을 "나누는" 것. Code-splitting이란 런타임환경에서 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup 등의 번들러가 지원하는 기능이다. 코드분할은 앱을 lazy loading(지연 로딩) 하게 도와주고 사용자에게 더 좋은 성능을 가져다줄 수 있다...

관심사의 분리(Seperation of Concerns) "관심사"란 간단히 말하면 하나의 모듈이 수행하고자 하는 목적이다. 여기서 모듈이란 함수, 클래스 등의 단위로 해석할 수 있다. 따라서, "관심사의 분리"란 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것을 의미한다. 이는 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 관심사를 분리하는 이유 관심사를 분리하는 이유는 소프트웨어의 특정 부분이 변경되는 이유를 한 가지로 제한하기 위해서이다. 관심사를 분리하면 하나의 모듈은 하나의 목적만 갖게 된다. 이 말은 곧 해당 코드가..

axiosInstance를 만든 경우 비동기 통신 성공, 실패(에러발생)시 공통적으로 처리해주는 로직을 interceptor에 작성할 수 있다. 아래는 response.error 쪽 코드이다. spamAxios.interceptors.response.use( response => { // 생략 }, error => { console.log(error, error.response, 'interceptor error'); if (error.status === 401) { const mail_url = localStorage.getItem('mail_url'); if (mail_url) { window.location.href = mail_url; localStorage.clear(); } else { win..

Suspense React.lazy와 함께 사용하면 가져오기가 로드되는 동안 폴백 로딩 상태를 렌더링하도록 리액트에 지시할 수 있다. props - children : 렌더링하려는 실제 UI - fallback : loading 상태일 때, 실제 UI 대신 렌더링할 대체 UI. 보통 로딩 스피너나 스켈레톤 UI로 대체한다. children 컴포넌트가 로딩이 완료될 때까지 fallback 컴포넌트를 보여준다. 아래와 같이 여러 Suspense 구성 요소를 중첩하여 로딩 시퀀스를 만들 수도 있다. 1. 가 loading 상태이면, 전체 콘텐츠 영역이 로 대체된다. 2. loading이 완료되면 는 사라지고, 로딩이 완료된 컨텐츠가 렌더링 된다. 3. 가 loading 상태이면, 와 영역이 로 대체된다. 4...

Next.js에서 페이지간 이동 방법으로 1. 2. useRouter() 훅 두 가지가 있다. 는 HTML tag를 확장하여 경로 간 prefetch 및 클라이언트 탐색을 제공하는 내장 요소이다. 시멘틱 태그를 생성하기 때문에 SEO가 필요한 경우에 사용하면 좋다. useRouter() window.location() 과 유사하게 동작하며, tag를 생성하진 않기 때문에 SEO에는 좋지 않다. 는 클릭시 바로 페이지가 전환되지만, router.push()는 특정 로직을 수행한 후 원하는 시점에 전환이 가능하기 때문에 SEO가 필요하지 않다면, 활용도가 높은 훅이다.

next.js에서는 최초 SSR 하면서 서버에서 해시 + 클래스명으로 생성하고, sc-gueWre eZMVMG 이후 클라이언트에서 CSR 하면서 클라이언트의 해시 + 클래스명으로 생성되기 때문에 sc-beqWul izLkDJ 이를 맞춰주는 작업이 필요하다. 플러그인을 설치하고 바벨 설정파일을 지정하는 것으로 간단하게 맞춰줄 수 있다. 1. babel-plugin 설치 npm i -D babel-plugin-styled-components 2. .babelrc { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }

import axios from "axios"; const axiosInstance = axios.create(); let isRefresh = false; // access token을 refresh 했는지 여부 let failedQueue = []; // token 갱신을 대기 중인 요청을 모아두는 배열 // 실패한 요청을 다시 실행하는 함수 function processQueue(error, token = null) { failedQueue.forEach((fq) => { if (error) { fq.reject(error); } else { fq.resolve(token); } }); failedQueue = []; } axiosInstance.interceptors.request.use( fun..