프로그래밍 인강 강의 찾아 듣는 게 취미인 사람. 😋 오늘은 유튜브 코딩앙마님의 Next.js 강의를 들어보았습니다. 강의 후기와 강의 하면서 필기한 것들도 같이 첨부했으니 강의 들을 생각이 있다면 한번 확인해보세요!

00 Overview

강의 정보

강사 : 코딩앙마
언어 : 한국어
금액 : 무료
강의 주소 :
- https://www.youtube.com/watch?v=Ujjdn2wMIew&list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP
깃허브(소스코드) :
- https://github.com/coding-angma/nextjs-tutorial/tree/lesson/2

강의 후기

약 1년 전에 올라온 코딩앙마님의 Next.js 강의. 다른 기본 강의들을 많이 들어보고 나중에 듣게 된 강의라 하나하나 코드를 따라 치진 않았다.

설명하다보면 내용이 장황하게 길어질 수도 있는데, 짧게 축약해서 정리하는 능력이 돋보이는 강의였다. 길이가 길지 않아 쭉 들으면서 알고 있는 내용을 확인하고 복기하는 용도로 듣기 좋았고, 처음 접하는 사람도 전반적인 개념을 익히기 좋을 것 같았다.

아래는 간단하게 정리해본 필기이다. (강의 내용이 잘 정리가 되어 있어 필기 노트 작성도 수월했다. 😋)

01 Intro, Page layout

npx create-next-app
- 컴파일과 번들링이 자동 (webpack 과 babel)
- 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영
- 서버사이드 렌더링 지원
- 정적 파일을 지원
시맨틱 ui 리액트
- https://react.semantic-ui.com/shorthand-props
_document.js (커스텀 document)
- https://nextjs.org/docs/advanced-features/custom-document
- html, body 태그 보강
- 서버에서만 렌더링(onclick이벤트 적용X, css X)
- head 태그가 있지만 활용X (근데 작성은 되긴 함)
_app.js
- https://nextjs.org/docs/advanced-features/custom-app
- 글로벌 css 적용, 레이아웃을 잡는 데 이용
- head 커스텀 가능

02 Dynamic Routes, next

axios

const API_URL = "URL"
function getData() {
Axios.get(API_URL)
	.then(res => {
		console.log(res);
	});
}

03 Server-side Rendering

[정적 생성]
- 프로젝트가 빌드하는 시점에 html파일들이 생성
- 모든 요청에 재사용
- 퍼포먼스 이유로, 넥스트 js는 정적 생성을 권고
- 정적 생성된 페이지들은 CDN에 캐시
- getStaticProps / getStaticPaths
[서버사이드 렌더링]
- 매 요청마다 html 을 생성
- 항상 최신 상태 유지
- getServerSideProps
정적 생성과 SSR 해야할 지 구분하는 기준
- 카카오톡 등으로 주소를 공유했을 때
next/link
- a태그나 location.href는 페이지를 새로고침함
- next/link는 페이지를 새로고침하지 않고 라우터 이동 가능

04 Error page(404), 환경변수

에러 핸들링
- 404.js
  - 클라이언트 에러, static으로 제공
- _error.js
  - 서버 측 에러 staticX(서버측으로 에러 전송해야하기 때문)
환경변수
- 개발 & 프로덕션 파일 분리
  - .env.development
  - .env.production
- 환경변수 사용법
  - node js : process.env.변수명
    - getServerSideProps 에서 동작
  - browser : process.env.NEXT_PUBLIC_변수명
  - ```
  // .env.development
  name=development
  NEXT_PUBLIC_API_URL=[URL입력]
  
  // .env.production
  name=development
  NEXT_PUBLIC_API_URL=[URL입력]
```

// 브라우저
const API_URL = process.env.NEXT_PUBLIC_API_URL;

// 노드 js(getServerSideProps)
const name = process.env.name;

// 알아서 development, production 구분하여 적용한다

05 Pre-rendering

Next js의 사전 렌더링
- Static Generation과 Server-side Rendering
- 기본적으로 모든 페이지를 pre-render
- 사전에 html 파일 생성
- 퍼포먼스 향상, SEO
- 페이지별로 SG와 SSR구분 해서 사용할 수 있음
정적 생성이 더 적합한 경우
- 마케팅 페이지
- 블로그 게시물
- 제품목록
- 도움말, 문서
SSR이 더 적합한 경우
- 항상 최신상태 유지
- 관리자 페이지
- 분석 차트

getStaticPath

Dynamic Route를 이용했을 때에 html 파일을 생성하는 방법
https://nextjs.org/docs/api-reference/data-fetching/get-static-paths

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id:'1' } } // 렌더링할 페이지 이름, 파일명과 일치해야[id].js
    ],
    fallback: true, false or "blocking"
  };
}

- fallback
  - false : 목록에 없는 페이지에 접근했을 때 404리턴
  - true : 처음 접속 했을 때 html파일 생성
next/link
- prefetch
  - 기본은 true
  - 화면에 Link가 등장하면 href로 연결된 페이지를 프리 로드(정적 생성함)

06 `isFallback`, `getStaticPaths`

isFallback
- 프로덕션 모드에서는 한번 파일을 만들면 만든 html을 뿌려주지만, 개발환경은 매번 폴백 화면 볼 수 있음
- useRouter 이용하여 폴백 상태 확인
- ```
const router = useRouter();
console.log(router.isFallback);
// false : 페이지 없는 상태
// true : 페이지 생성된 상태
```

getStaticPaths

리스트를 코드로 생성
slice를 이용해 일부만 생성하는 것도 가능

export async function getStaticPaths() {
	const apiUrl = process.env.apiUrl;
	const res = await Axios.get(apiUrl);
	const data = res.data;

  return {
    paths: data.slice(0, 9).map(item => ({
			params: {
				id:item.id.toString(),
			}
		})),
    fallback: true, false or "blocking"
  };
}

07 API Route & 간단 로그인 기능

api도 동일하게 다이나믹 라우트 설정 가능
api를 활용한 로그인 기능 구현. 브라우저 쿠키를 체크하는 간단한 버전(실제 활용X)

송송은 오늘도 열심히 코딩 하네

송송 DEV

코딩앙마 Next.js 강좌 후기

00 Overview

강의 정보

강의 후기

01 Intro, Page layout

02 Dynamic Routes, next

03 Server-side Rendering

04 Error page(404), 환경변수

05 Pre-rendering

06 `isFallback`, `getStaticPaths`

07 API Route & 간단 로그인 기능

티스토리툴바

송송 DEV

코딩앙마 Next.js 강좌 후기

00 Overview

강의 정보

강의 후기

01 Intro, Page layout

02 Dynamic Routes, next

03 Server-side Rendering

04 Error page(404), 환경변수

05 Pre-rendering

06 isFallback, getStaticPaths

07 API Route & 간단 로그인 기능

STUDY/REVIEW 관련 글 목록

티스토리툴바

06 `isFallback`, `getStaticPaths`