위코드 기업협업을 진행하며 정리 & 회고 한 내용입니다.
Next.js 를 써야 해서 관련 개념을 조금 찾아보았다. 새로운 언어는 아니고 리액트를 더 편리하게 쓸 수 있는 도구의 느낌. 약간만 살펴보아도 Next.js 를 꼭 써야 겠다는 생각이 든다. 서버사이드 렌더링 개념은 자세한 공부가 필요하다.
찾아본 것
- Next.js 는 하나의 단일 기술이 아니다.
- 자바스크립트 커뮤니티에서 웹을 구현할 때 사용하는 여러 기술들을 영리하게 섞어놓은 기술이다.
- React, Express.js, React-Router-Dom, Server Side Rendering 의 기능들을 쉽게 사용할 수 있게 모았다.
- 주요 명령어, 개발환경실행 - npm run dev / 배포 파일 생성 - npm run build / 서비스 시작 - npm run start (react 에서 npm start 를 썼다면 여기서는 npm run dev 해야 함)
- next.js 는 React 로 만든 서버사이드 렌더링 프레임 워크
- 서버사이드 렌더링을 하면 서버에서 자바스크립트를 로딩해서 클라이언트 측 로딩 시간을 줄여줌. 기존 클라이언트 렌더링은 모든 js 파일을 로드하고 사용자에게 웹을 보여주므로 대기 시간이 더 길다.
- 클라이언트 측 탐색이 가능. 브라우저가 전체 페이지를 로드하지 않고 클라이언트 측 탐색을 작동해 페이지 전화이 더 빠름
- 코드 분할 자동으로 수행. 각 페이지는 해당 페이지에 필요한 것만 로드. 홈페이지 로드 시 다른 페이지 코드는 처음에 제공하지 않음.
- 프리패치. Link 요소로 연결된 페이지의 코드를 미리 가져와서 링크를 클릭할 때 대상 페이지의 코드가 백그라운드에서 이미 로드되어 즉각적인 열람 가능
- SEO 문제도 해결. 검색엔진이 자바스크립트를 읽는 것이 아니라 서버측에서 자바스크립트, html, css 로 만든 게시글을 업로드해서 검색엔진에 걸리게 한다.
- 기존 클라이언트 사이드의 경우 자바스크립트가 로드되지 않으면 아무런 정보가 보이지 않음
- hot reloading - 개발 중 저장되는 코드는 자동 새로고침
- automatic routing - pages 폴더의 파일은 해당 이름으로 라우팅 가능
- typescript - 타입스크립트 활용을 위해 웹팩, 바벨을 만질 필요가 없음. 타입스크립트를 설치하고 실행하면 tsconfig, next-end.d.ts 가 생성되어 타입스크립트 코딩 가능
출처
Today I Learned