코딩을 잘하고 싶은 코린이 동토니

Next.js에서 현재 route에 접근하거나 다른 route로 이동하는 등 라우터에 대한 접근이 필요할 때 next/router패키지를 사용하게 됩니다 (page router 기준)해당 모듈은 다음과 같은 방법들로 사용할 수 있습니다. useRouter 훅 사용 default로 export되는 Router 싱글톤 객체를 사용하기 Next.js에서는 싱글톤 객체 사용 방법은 현재 사라진 상태이며 useRouter를 이용하는것을 권장하고 있습니다. Next.js 동작 방식우선 next/router에 대해서 알아보기전에 Next.js 동작방식에 대해서 이해할 필요가 있습니다.SSG (Static Site Generation) : 빌드 타임에 HTML 생성 & 캐싱된 HTML을 기반으로 매 요청마다 재사용SS..

최근 Next.js를 도입하는 기업들이 많아졌다. 그 이유는 뭘까? 나는 당연코 Server Side 방식의 지원이라고 생각한다. 그러면 Server Side는 무엇일까? 먼저 Server Side를 살펴보기 전에 이와 상반되는 개념인 Client Side Rendering (이하 CSR)에 대해서 알아볼 필요가 있다. Client Side Rendering (CSR) CSR은 말그대로 클라이언트 측에서 렌더링이 시작되는 개념이다. 즉 클라이언트가 페이지에 들어오고 브라우저는 이를감지하고 HTML 다운로드 => JavaScript 다운로드 => JavaScript 실행 => Data 호출 => 화면 노출 의 순으로 렌더링이 진행된다. 간단하게 요약하면 클라이언트가 그린다 그린다? : 데이터를 가져와서 그..

React-Query와 Next.js를 연결해보자 최근 회사에서 Next의 SSR을 극대화 시키는 방법으로 React-query의 initial data기능을 사용하기 시작했다. 우선 react-query의 initial data에 대해 먼저 알아보면 특정 쿼리가 client에서 데이터를 요청하기 전에 처음부터 가지고 있을 데이터를 미리 설정해두고 뿌려주는 기능이다 먼저 React-query의 공식문서 예시를 한번 살펴보자 function Todos() { const result = useQuery(['todos'], () => fetch('/todos'), { initialData: initialTodos, }) } 생김새는 기존의 useQuery와 똑같고 단지 마지막에 initialData라는 옵션에..

회사에 들어온 후 React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때 신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점..