코드로 대화하기

안녕하세요! 오늘은 pre-rendering과 data fetching에 관련된 지식들을 알아보겠습니다. Pre-rendering? nextjs에서 가장 중요한 개념 중 하나인 Pre-rendering을 먼저 얘기해보겠습니다. nextjs는 클라이언트 측에서 자바스크립트로 모든 작업을 실행하는 대신 각 페이지에 대한 HTML을 미리 생성하는데 이것이 pre-redering(사전 렌더링)입니다. 사전 렌더링을 하면 렌더링 성능과 SEO가 향상됩니다. * 기본적으로 next.js는 모든 페이지를 사전 렌더링 합니다. 그림을 통해 더 자세히 알아보겠습니다. Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워집니다. 반면 Pre-rendering..

안녕하세요! 이전 글에서 다이나믹 라우팅에 대해 살펴보았는데요. 오늘은 넥스트에서 페이지 전환할 때 사용하는 방법인 Link, Router에 대하여 알아보겠습니다. 페이지를 이동할 때 a태그를 사용한다면 전체 새로고침이 되며 다시 정보들을 새롭게 가져오게 됩니다. 이는 흰 화면이 보일 수도 있고 매번 통신을 새롭게 하다 보니 사용자 경험 측면에서도 떨어집니다. 1. Link import Link from "next/link"; ... // path item name // object item name * Link 태그에 href 속성을 추가하여 가고자 하는 주소를 넣습니다. (a 태그의 href와 동일합니다.) * 안쪽에는 a 태그로 감싸줍니다. * className과 같은 속성들을 a 태그에 추가합니다..

안녕하세요! 오늘은 Next.js의 Dynamic Routes, Error Page에 대하여 알아보겠습니다. 리액트에서는 react-router-dom을 설치하고 여러 세팅들을 하였습니다. 반면 넥스트는 폴더와 파일 단위로 라우팅을 합니다. pages 안에 있는 폴더와 파일들을 읽어 라우팅을 하고 url 주소가 생성됩니다. 1. pages, dynamic routes pages └── about.tsx -> localhost:3000/about pages 폴더안에 about.tsx가 있다면 따로 더 설정할 필요 없이 url 주소는 "localhost:3000/about" 이 됩니다. pages ├── detail │ └─ [id].tsx -> localhost:3000/detail/1, localhost..

안녕하세요! 오늘은 Next.js의 _app과 _document에 대하여 알아보겠습니다. next.js를 처음 설치하면 pages 폴더 안에 _app파일이 보이실 겁니다. _document가 없을 경우 따로 만드시면 됩니다. 저는 타입스크립트여서 .tsx 입니다. 1. _app 가장 먼저 실행되는 컴포넌트로, 모든 페이지는 _app을 통해 실행됩니다. 다음과 같은 특성들이 있습니다. 1. 페이지가 변경되어도 레이아웃과 상태 값을 유지합니다. 2. "componentDidCatch"를 통해 에러 핸들링이 가능합니다. 3. 페이지에 추가적인 데이터를 삽입할 수 있습니다. 4. Global CSS는 이곳에 추가합니다. 5. 헤더와 푸터같이 공통적으로 사용하는 레이아웃은 이곳에 추가합니다. import '../..

안녕하세요. 오늘은 nextjs를 시작해보겠습니다. 타입스크립트로 프로젝트를 진행하겠습니다. 1. 초기 세팅 설치 npx create-next-app --ts # or yarn create next-app --typescript 명령어를 입력하면 "What is your project named?"와 함께 프로젝트 이름을 입력하라고 나옵니다. 실행 # 개발자 모드 npm run dev # 릴리즈 모드 npm run build npm run start ESLint, Prettier세팅 ESLint와 Prettier 세팅을 해줍니다. 저번 글에 자세한 설명이 있으니 참고해주시면 감사하겠습니다. .eslintrc module.exports = { root: true, env: { browser: true, n..

안녕하세요. 오늘은 Next.js에 대해 알아보겠습니다. Next.js? Next.js란 Verceld에서 만든 React 프레임워크입니다. SSR, SEO 등 많은 특징들을 가지고 있습니다. 쫌 더 자세히 알아보겠습니다. 1. Server Side Rendering (SSR) 넥스트의 가장 대표적인 특징은 SSR입니다. 리액트는 CSR로 SSR에 비해 초기 페이지 로딩이 오래 걸리고 SEO가 어렵다는 단점이 있습니다. 반면 SSR은 서버에서 완성된 HTML을 보내주기 때문에 렌더링 속도가 빨라 로드 시간이 짧고 SEO가 좋습니다. CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있다는 단점이 있습니다. 2. Search Engine Optimization (SEO) 1번 특징에서 ..