[Next.js] 인프런 "[손에 익는 Next.js] 공식 문서 훑어보기" 학습 내용 정리

이 포스팅은 인프런의 "[손에 익는 Next.js] 공식 문서 훑어보기"를 학습하면서 필요한 내용을 정리한 것이다. 이 강의는 Next.js 13 버전에 대한 것으로서 새로운 라우팅 시스템인 App Router,  서버 컴포넌트(Server Component), 데이터 페칭(Data Fetching), 캐싱(Caching) 그리고 재검증(Revalidating)을 다룬다.

---

1. 문제 해결 과정에서 탄생

JavaScript > 복잡한 요구사항, 다양해진 브라우저의 종류 > jQuery > UI 요소들에 사용되는 데이터 관리 어려움 > AngularJS > 양방향 데이터 바인딩이 효과적이었지만 프로젝트가 크고 복잡할수록 복잡도가 급격하게 증가 > React.js > 단반향 바인딩으로 복잡한 문제 해결했지만 CSR의 단점인 초기 로딩 시간 길고, 검색 엔진 최적화 불가능 > Next.js로 SSR 가능, React.js 한계 극복함

 

2. 노드 버전을 관리하는 nvm

나는 윈도우 운영체제를 사용하고 있기 때문에 nvm windows를 설치하였다. 깃허브에서 nvm-windows를 다운로드하면 된다. 주요 명령어는 다음과 같다.

• nvm 버전 확인 : nvm version
• 설치 가능한 node 버전 리스트 : nvm list available
• 현재 설치된 node 리스트 : nvm ls
• node 18.17.0 설치 : nvm install 18.17.0
• node 18.17.0 사용(기본값) : nvm use 18.17.0 --default

 

3. 프로젝트 열기

vscode 터미널에서 열기를 원하는 프로젝트 폴더에서 다음 명령어를 입력하면 새창에 프로젝트가 열린다.

code .

 

4. 리스트 태그 생성

ul > li*3

 

5. 주의

• onClick은 서버 컴포넌트에서 허용 안된다. 따라서 'use client'를 추가해야 한다.
• useRouter는 "next/navigation"에서 가져와 임폴트해야 한다.

 

6. 팁

• 날씨 API 사이트 가입 : https://www.weatherapi.com/
• json을 TypeScript로 변환 : https://transform.tools/json-to-typescript
• 시간정보 API : https://timeapi.io/

 

7. 환경 변수

page.tsx에 다음과 같이 작성한다.

const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

 

.env.local 파일을 생성하고 NEXT_PUBLIC_API_KEY에 키를 할당한다.

 

8. error 컴포넌트

Next.js가 제공하는 error 컴포넌트는 클라이언트 컴포넌트여야 한다.

 

9. 데이터 재검증(Revalidating)

API를 호출하면 데이터가 캐시 되어 있는 상태이다. 페이지 새로고침 하면 API를 갱신하는 것이 아니라 캐시 되어 있는 데이터를 화면에 렌더링 한다. revalidateTag()를 이용해 캐시 비우기 한 후에 페이지를 새로고침 하면 변경된 데이터가 렌더링 된다.

 

10. 동적 메타 데이터 처리

상세 페이지로 이동했을 때 메타 데이터가 동적으로 변경되도록 하면 더욱 좋을 것이다. 아래는 Path Variable과 Query string이 있는 링크이다.

<Link href="/busan?name=부산">부산</Link>

 

Path Variable은 Props의 params로, Query string은 Props의 searchParams로 받아 사용한다. 아래는 디테일 컴포넌트에서 정의한 Props 타입이다. param, searchParams를 이용해 동적인 메타 데이터를 적용할 수 있다.

type Props = {
  params: {
    location: string;
  };
  searchParams: { name: string };
};

 

11. 마무리

강사께서 다음과 같은 멘트로 강좌를 마무리하셨다. 곱씹을만한 표현이다!

 

서비스는 단순한 코드와 당연해 보이는 논리가 엮이면서 고도화되는 것이다!

 

자신만의 서비스를 가지고 있는 것이 채용시장에서 진정으로 어필할 수 있는 방법이다!