프론트엔드/Next.js

useSWR(CSR) 사용하기

useSWR Data Feching 라이브러리로써 배워볼 기회가 생겨 사용법을 작성합니다 SWR는 데이터를 가져오는데 특화되어 있는 라이브러리이며 axios를 대체할 수도 없고 useEffect안에서 사용할 수 없기에 막 사용하기도 힘듭니다(사실 그냥 쓰기만 해도 useEffect처럼 동작합니다) 결국 axios를 버리고 SWR만 사용할 순 없지만 충분히 매력적이고 좋은 기능이 많은 라이브러리라고 생각됩니다 기능 SWR 함수는 2개의 인자를 필수적으로 받습니다 화면에 포커싱이 되면 자동으로 SWR이 Data Fetch를 해서 실시간으로 변화시켜줍니다 주기적인 호출가능 위처럼 포커싱 됬을때 데이터 갱신이 되긴하지만 설정에 따라 원하는 순간에 revalidate할 수도 일정 시간 간격으로 revalidate..

Next.js 설치 및 초기세팅

Next.js vercel 기능 SSR지원 페이지 기반 클라이언트 사이드 라우팅 Hot Module Replacement를 통한 개발 환경에서 코드 자동 적용 코드 스플릿팅을 통한 빠른 페이지 로드 SPA에 단점인 보고싶은 페이지를 불러올때 모든 페이지에 대한 정보가 받아지는 것을 개선한 것으로써 보고싶은 페이지에 대한 정보만 불러오게 유동적으로 해결해주는 방법입니다 Babel / Webpack 환경설정 및 커스터마이징 가능 Express나 Node.js 서버와 함께 사용 가능 setting yarn add react react-dom next // 타입스크립트 버전 yarn create next-app --typescript 추가적인 Sass 설치 npm i sass 설치 후 package.json 수..