nextjs (2) 썸네일형 리스트형 (짧) Tree Shaking과 이를 사용하는 곳에서 해야할 일 흔히 말하는 Tree Shaking은 사실 Tree Shaking과 Dead Code Elimination이 존재하는데, Tree Shaking은 정적 분석을 통해 필요한 코드만을 추가하는 방식이고 Dead Code Elimination은 정적 분석을 진행한 후 사용하지 않는 것을 제거하는 방식이다. 따라서 Dead Code Elimination 방식을 사용하는 Webpack의 경우 사용하지 않는 코드를 제거해주는 Terser가 필요한 것이다. 또한 외부 라이브러리에서 트리셰이킹을 열어주는 방법으로는 package.json의 sideEffect을 false로 지정하는 것과 cjs, esm 방식으로 접근할때의 exports를 제대로 명시해주는 방법이 있는데, 이와 별개로 사용하는 곳에서도 잘 사용해주어야.. Tanstack Query의 Refresh Hydration과 Navigate Hydration의 차이 개요 사내 프로젝트를 진행하는 과정에서 Nextjs 14의 Page Router와 Tanstack Query v4를 함께 사용하고 있었다. 그러던 와중에 특정 쿼리를 추가했고 쿼리를 Server Side에서도 활용하기 위해 queryClient의 fetchQuery 메서드를 활용했고, 개발 과정에서 코드를 추가한 뒤 해당 지면에서 refresh를 수행하며 디버깅을 했을때에는 문제없이 Hydration이 잘 수행되었다. 하지만 추가적인 테스트를 진행하면서 다른 지면에서 해당 지면으로 Navigate할때의 Hydration이 원활하게 동작하지 않아 이에 대해 알아보게 되어 그 과정에 대해 정리하고자 한다. 본론으로 들어가기 전 먼저 이러한 상황이 발생한 시점 queryClient의 defaultOpt.. 이전 1 다음
