주력인 React 와 더불어 쓰이는 프레임워크를 공부해보고자 Next.js 를 배워보자 한다.
강의는 생활코딩 Next.js 13 을 통해 이틀 내에 끝내려 한다.
Next.js
그렇다면, Next.js 란 무엇일까?
공식 홈페이지에는 React 을 기반으로 한 full stack web application framework라 정의되어 있다.
다시 말해, Web Application 을 만들어주는 React (front) + Expressjs(end) 가 합쳐진 full stack 을 지원하는 큰 뼈대를 만들어주는 framework 라고 보면 된다.
추가적으로, Next.js 가 매력적인 것은 바로 SSR (Server Side Rendering) 렌더링 방식을 이용한다는 것이다.
SSR과 다르게 CSR(Client Side Rendering) 은 클라이언트쪽에서 렌더링을 담당하는 방식으로, 자바스크립트 기반의 어플리케이션은 자바스크립트가 다운로드된 후 브라우저에서 자바스크립트를 실행하여 화면에 UI 가 표시된다.
SSR 방식은 클라이언트가 아닌 서버측에서 자바스크립트를 실행하는 방식으로, 브라우저에서는 단지 완성된 HTML 만을 전송하여 다운로드한 직후에 실행되므로 자바스크립트를 실행할 수 없는 환경에서도 잘 동작할 수 있어 검색 엔진에도 최적화되고 사용자입장에서도 빠르게 느껴질 수 있다.
설치 및 실행
-
VSCode 와 Node.js (LTS version) 으로 설치한다.
Node.js 가 설치 유무에 대해 알고 싶다면 터미널에서
node -v라는 node.js 버전을 확인하는 명령어를 통해 알 수 있다. -
설치가 완료가 되면 VSCode 에서 폴더를 만든다.
nextapp -
nextapp폴더 내 터미널에서 개발 환경을 설치해준다.
npx create-next-app@latest .(npx 명령어를 이용하여 현재 폴더에서 최신 버전의 next app 을 생성한다는 의미)
명령어를 입령하면 다음과 같이 설정을 해준다.
TypeScript: No / ESLink: Yes / Tailwind CSS: Yes / src/directory: Yes / App Router: Yes(node.js 13 버전을 기준으로 Page Router에서 App Router로 변경됨) / import alias: No -
개발 환경이 다 갖추어지면
npm run dev명령어를 통해 실행시킨다.
로컬http://localhost:30003000 번 포트에 접속한다.
빌드 및 배포
npm run dev 를 통해 로컬 포트로 접속하면 개발단계로 실행 중인 어플리케이션을 볼 수 있다. 이때, 네트워크 창의 하단부분에서 6.7MB 리소스 부분을 볼 수 있다. 이는 서버에서 클라이언트로 전송한 데이터를 의미한다. 단지 설치와 실행만 했을 뿐인데 저 용량이면 꽤 크다고 할 수 있다. 리소스 용량을 줄여 실생활에 최적화된 버전이 필요하다.
package.json 파일은 node.js 를 기반으로 되어있고, 파일 내 scripts 속성은 어플리케이션이 유지보수하기 위한 여러 명령들이 내포되어 있다.
이 중 dev 는 개발 환경을 실행하는 명령어로 이미 사용해보았다.
build 는 실서버를 위하는 명령어로 실행시키면 사용자에게 서비스되는 배포판이 .next 폴더에 저장이 된다.
그 후 start 는 .next 폴더에 저장된 배포판이 서비스하는 명령어이다.
말했던 것과 같이 npm run build 후, npm run start 를 하고 다시 한번 네트워크 창 하단을 살펴보면 321KB 리소스 로 이전보다 약 20배 정도 줄어든 것을 볼 수 있다. 즉, 배포가 되면 훨씬 줄어든 용량으로 사용자에게 더 밀도있고 효율적으로 사용할 수 있게 된다.
마치며
긴 강의는 아니지만, 정확히 이 프레임워크가 뭔지, 어떤 역할을 하는지에 대해서는 빠짝 익히고 싶다!
