Next.js
1.Next.js - SSR, CSR, Next.js를 사용하는 이유
next.js는 React의 프레임워크로 SSR(Server Side Rendering)을 쉽게 구현하게 해주며, SEO(Search Engine Optimization)등의 여러기능을 제공한다. 또한 기본적으로 React에서 흔히 사용되는 CSR(Client Side
2.Next.js - Image Optimization
next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다. Image 컴포넌트를 사용하면 다음과 같은 기능들을 이용하여 최적화된 이미지를 사용하여 성능을 향상할 수 있고, 더 나은 사용자 경험을 만들 수 있다. 최신 이미지 형식을 사용하여 항상 각 기기
3.Next.js - Data Fetching
getStaticProps, getServerSideProps 는 next.js에서 data를 fetching 방식으로 이 방식들을 알아보기 전 Pre-rendering 개념을 살펴보자. Pre-rendering 앞에서 배웠듯이 next.js는 페이지를 이동 할 때
4.Next.js - Routing
next.js 에서는 Routing을 쉽게 할 수 있도록 지원하고 있다. pages 폴더에 파일시스템 방식으로 파일, 폴더를 만들면 자동으로 파일, 폴더 이름을 기반으로 Routing을 지원한다. >pages/index.js → / pages/posts/first-p
5.Next.js - next/head
NextJS의 장점인 SEO를 최대한 활용하기 위해 next/head 로 부터 <HEAD> 태그를 사용하여 이 페이지의 정보를 웹 크롤러가 알 수 있게 한다.기본적으로 크롤러는 html 문서를 읽는다고 알고 있다. 문서를 로딩한 뒤에 자바스크립트가 실행되는데 이
6.Next.js - next.config.js
next를 좀 더 커스텀하게 사용하기 위해 next.config.js 파일에서 기본 설정을 할 수 있다. next.config.js 는 JSON 파일이 아닌 일반 Node 모듈이고 next 서버 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다. next.con
7.Next.js - 카카오 로그인 구현
이번 프로젝트에서 로그인 부분을 담당하게 되었다. 카카오 로그인과 이메일 로그인을 구현해야 하는데, 이미 백엔드 개발자분께서 만들어 놓으신 api가 있어서 쉽게 할 수 있을 것 같았지만... 중간에 내가 알고있는 방식대로 되지 않아 새로운 방식을 찾아서 하느라 고생을