# next
Next - getStaticProps
Next - 공식 홈페이지 getStaticProps https://nextjs.org/docs/basic-features/data-fetching/get-static-props https://nextjs.org/docs/api-reference/data-fetchi
[Next] 상황에 따라 다르게 env파일 사용하기
개발하면서 빌드하고 실제 서버를 돌려보면 어떻게 되나? 하고 궁금할 때가 있다. 그럴 때는 보통 테스트 서버를 만들어서 체크해보는데, 이 때 env파일을 그때그때 바꾸기가 귀찮아 package.json의 명령어를 커스텀해서 상황에 따라 다르게 env파일을 사용하곤 한다
ContextAPI에서 useState로 관리하는 값을 Provider로 내려주기
오늘은 간단하게 To fix this consider wrapping it in a useMemo hook 에러를 해결하는 방법을 알아보자.
[Next] 에러 getServerSideProps의 query에서 'json', 'version' return
getServerSideProps의 query를 console.log로 찍어보니 저런 괴랄한 return이 나오고 계속 반복해서 찍힌다...발생 이유는 결국 못찾았다. port를 3000에서 30001로 바꿔보니 안 나는데...하.. 일단 나중에라도 또 같은 에러가 발
Next.js 테마 적용
만약, 컬러시스템이 없다면, 수백 개나 되는 파일에 일일이 접근해서 색상을 수정하고 있어야할 것입니다. 그렇기에 컬러 시스템은 현대 앱에서는 매우 필요한 시스템입니다.
무한 스크롤 구현하는 방법과 고려할 사항
무한 스크롤 구현과 최적화를 위해 display none을 사용하면 브라우저의 렌더링 동작 방식에서 어떤 문제점이 있는지 알아보자.
React Query에서 버튼 클릭시에 데이터를 요청하는 방법 (feat. useQuery)
프로젝트를 설계하다가 특정 이벤트를 발생할 경우 데이터를 요청하는 구조가 필요했다. useQuery를 이용하여 무지성으로 구현하는 방법과 정석으로 구현하는 방법을 알아보자.
[Next] getStaticPaths fallback 설정 사용
이번에 Next에서 동적라우팅으로 getStaticPaths가 존재한다는걸 확인하고 사용하다 중요한 설정인 fallback관련을 확실히 구별해서 작성해보려합니다.Next 에서 기존 동적라우팅 방법말고, getStaticPaths를 이용하면 빌드타임에 해당 페이지를 생성
Front-End(feat. React)에서 서버 상태 관리
Redux, Mobx같은 전역 상태 관리 라이브러리를 많이 사용하고 있었을 것이다. 해당 라이브러리들은 비동기 작업을 하기 위해선 추가적으로 작성해야하는 코드 양이 늘어난다.배보다 배꼽이 더 큰 상황이 되는 것이다.예로 redux-saga 코드를 작성해 보았다.Reac
CSR & SSR
이번 포스트에서는 프론트엔드의 대표적인 렌더링 방식인 CSR(Client Side Renering)과 SSR(Server Side Rendering)에 특징과 어떤 시기에 사용해야 가장 좋은지에 알아보겠다.
Jest + react-testing-library 환경에서 TODO 프로젝트 TDD로 설계하기
지원 자격에 테스트 보고 뒤로가기 부터 누른다면?? 지금이라도 기초를 쌓아보자!!
[Next] router previous url 가져오기
next의 router에는 back()이라는 함수가 있어서 이전 페이지로 이동시킬 수 있다.문제는 유저가 만약 해당 페이지를 처음으로 접근하게 되면 이전 페이지가 없어서 돌아갈 수가 없다는 것..next에서 간단한 custom hook으로 previous url을 접근
Next.js + TypeScript 환경에서 Jest와 react-testing-library 셋팅하기
Jest + React Testing Library를 Next.js에서 사용할 수 있도록 셋팅을 해보자.
[Next] NextJS 페이지간 query 데이터 이동방법 (Link, next/router)
Next에서 페이지를 전환하면서 간단하게 데이터를 전송하는 방법을 알아보려고 합니다. 대표적으로 두가지 방법이 존재합니다 Link 태그를 이용하는 방법과 router객체를 이용하는 방법입니다.Next 에서 클라이언트 사이드에서 경로간의 이동은 Link컴포넌트를 통해 이
[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러
Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과..중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나
Next CSR vs SSR vs SSG vs ISR
Next js를 사용한다! 라고 하면 자연스레 SSR을 통한 SEO 최적화를 생각하기 마련이다. 하지만 Next는 SSR만 제공하지 않는다. 오히려 Link 를 이용하면 CSR처럼 작동하기도 한다. Next를 사용한 다는 것은 미리 생성된 html (pre-render
[Next] npx create-next-app 에러
최근 컴퓨터를 바꾸면서 create-next-app을 설정해줄 때 제대로 동작되지 않는 이슈를 확인하였다. 찾다가 나의 비슷한 문제의 글을 발견해서 참고해서 해결하였다.참고링크간단하게 설명하자면 내가 지금 만드려는 디렉터리 상위에 package.json 파일이 존재함으