끄적이는 개발노트

이번 포스트에서는 페이지와 라우팅에 대해 알아본다. 아래에 사용될 코드들은 예제의 부분을 따로 떼어내서 개념 설명에만 사용할 예정으로, 직접적인 예제 실습을 원하면 공식 문서의 예제를 따라하는 것을 권장한다. https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static w..

이번 포스트에서부터는 공식 문서를 따라하며, 기본 사용법을 알아본다. https://nextjs.org/docs/getting-started Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 1. 설치 우선, Node.js의 버전이 12.0 이상이어야 한다. $> npx create-next-app --typescript 뒤에 붙은 --typescript는 타입스크립트의 사용여부에 따라 추가하면되는 옵션이다. 위 명령어를 실행하면 프로젝트 명을 묻는데 이 때 설정해도 되고 명령어 뒤에 추가를 해도 된다. 2. packag..

이번 포스트에서는 Next.js에 대해 간단히 알아본다. Next.js는 React.js의 서버사이드 렌더링을 쉽게 구현할 수 있게 도와주는 프레임워크다. 기존의 React.js는 SPA(Single Page Application)으로, url이 달라져도 새로운 html을 다시 만들지 않아 화면의 리로딩이 줄어든다. 또한, CSR(Client Side Rendering) 방식으로 작동하여, 서버에서는 비어있는 html을 응답하고 클라이언트 쪽에서 화면을 채운다. 이 때, 발생하는 문제점이, 앱의 규모가 커지면 클라이언트 쪽에서 html을 채워주는 내용이 많아져, 첫 로딩이 굉장히 느려진다. 또한, html을 기반으로 요소를 찾는 검색엔진에서 비어있는 html 파일로 인해 SEO(Search Engine ..