[강의] 한 입 크기로 잘라먹는 Next.js #3. (1)

Onion·2025년 8월 12일
next.js

Next.js 공부

목록 보기
2/11

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

Page Router 핵심 정리

1. Page Router를 소개합니다

1) Page Router

현재 많은 기업에서 사용되고 있는 안정적인 라우터
React Router처럼 페이지 라우팅 기능 제공

Pages라는 이름의 폴더를 기준으로 페이지를 라우팅

  • Pages 이름의 폴더 아래에 JS 파일이 있다면 파일의 경로와 이름에 따라 페이지 라우팅 제공
  • 파일명 기반의 페이지 라우팅 가능
  • 폴더명 기반의 페이지 라우팅도 가능
  • 동적 경로를 갖는 페이지의 라우팅도 간단히 설정 가능
    : 파일명을 대괄호([])로 묵어주게 되면 자동으로 동적 경로로 인식하여 매핑 가능

    동적 경로(Dynamic Routes): 경로 상에 어떠한 가변적인 값을 포함하고 있는 경로

2) Page Router 버전의 Next App 생성하기

a. 디렉토리 생성 및 실행

  1. 원하는 위치에 프로젝트 폴더 생성
    나의 폴더 위치: .../onebite-next/

  2. vscode로 열기
    vscode를 열어서 생성한 폴더 열기

  3. 터미널에서 section2 폴더 생성
    vscode에서 터미널을 열어서 npx create-next-app@14 section02 명령어 실행
    → Ok to proceed에서 y 입력
    → 타입스크립트를 사용할 거냐는 질문에 Yes 선택 후 엔터
    → ESLint를 사용할 거냐는 질문에 Yes 선택 후 엔터
    → Tailwind CSS를 사용할 거냐는 질문에 No 선택 후 엔터
    → src/ 디렉토리를 사용할 거냐는 질문에 Yes 선택 후 엔터
    → App Router를 사용할 거냐는 질문에 No 선택 후 엔터
    → import alias를 사용할 거냐는 질문에 No 선택 후 엔터

import alias: 임포트 문을 사용할 때 절대 경로를 사용해서 값을 불러올 수 있게 하는 그러한 기능

  • npx 명령어
    • node-package-execute
    • npmjs.com에 실제로 올라가 있는 등록되어 있는 라이브러리들의 최신 버전의 노드 패키지를 다운로드 없이 바로 실행
  • create-next-app 명령어
    • Next.js 공식 문서에서 안내하고 있는 새로운 Next.App을 생성하는 노드.js 패키지
  • @14 명렁어
    • 현재 설치하려는 Next App을 14 버전으로 설치하겠다는 뜻
    • 현재 가장 최신 버전과는 약간 차이가 있지만, 페이지 라우터에 존재하는 모든 기능들은 14 버전에서 안정적으로 모두 다 사용 가능
  1. 개발 모드로 넥스트 앱 실행
    생성된 section02 폴더로 vscode에서 다시 열기
    → vscode의 터미널 열기
    → npm run dev 명령어 실행
    → http://localhost:3000/ 로 이동하면 확인 가능
    → (종료 시에는) Ctrl+D나 Ctrl+C 입력

b. pages 폴더 살펴보기

  1. Pages 폴더의 index.tsx 확인
    Home 컴포넌트가 사용되고 있는 것을 확인 가능

  2. /src/pages/test.tsx 파일 새로 생성
    https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter01/src/pages/test.tsx
    → http://localhost:3000/test 로 이동하면 화면에 TEST가 출력되는 것을 확인 가능

  3. Pages 폴더의 _app.tsx, _document.tsx 확인
    Pages 폴더 밑에 있긴 하지만 페이지 역할을 하는 파일은 아님
    Next.js 앱의 모든 페이지에 공통적으로 적용될 로직이나 공통적으로 적용될 레이아웃 또는 데이터를 다루기 위해 필요한 파일

  • _app.tsx
    • 리액트에서의 App 컴포넌트와 동일한 역할
    • 모든 컴포넌트들의 부모 컴포넌트 역할
    • 모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트 역할 수행
    • 아래 코드에서
      Component 매개변수: 현재 페이지 역할을 할 컴포넌트를 받음
      pageProps 매개변수: Component 매개변수에게 전달될 페이지의 프롭스들을 모두 객체로 보관한 것
      export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <header>글로벌 헤더</header>
      <Component {...pageProps} />
    </>
  );
}
  • _document.tsx
    • 모든 페이지에 공통적으로 적용되어야 하는 Next.js 앱의 HTML 코드를 설정하는 컴포넌트
    • 리액트 앱의 index.html과 비슷한 역할

  1. next.config.mjs 파일
    넥스트 앱의 설정을 관리하는 파일
    기본적으로 reatStrictMode가 true로 켜져 있는데, false로 수정 (실습시 디버깅 용이함을 위해)

    /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

export default nextConfig;

 

2. 페이지 라우팅 설정하기

1) 앞으로 구현할 프로젝트

한입 북스(Onebite Books) 프로젝트

  • Index 페이지
    • 인덱스 경로(/)에 해당하는 페이지
    • 등록된 도서의 리스트를 볼 수 있음
  • Search 페이지
    • 서치 경로(/search)에 해당하는 페이지
    • 제목, 저자 별로 검색 결과를 볼 수 있음
  • Book 페이지
    • /book/{book_id} 경로의 페이지
    • 특정 도서의 상세 정보 확인 가능

2) 실습 진행을 위한 환경 세팅

3) 검색을 위한 페이지 생성

+ 쿼리 스트링 설정

  • 경로의 끝에 물음표와 함께 명시되는 값이므로 페이지 경로 자체에는 영향을 주지 않음
    = 폴더 구조를 따로 변경해야 하지는 않음

  • 단, 사용을 위해서는 파일의 최상단에 useRouter라는 훅을 Next Router라는 패키지로부터 불러오면 됨
    import { useRouter } from "next/router";

  • Next.js는 전달한 쿼리 스트링을 읽는 과정 중에서 컴포넌트를 한 번 더 렌더링 함
    → 한 번 더 렌더링 할 때 쿼리 스트링을 읽어옴

  • 쿼리 스트링을 읽는 방법
    const { q } = router.query;
    const { id } = router.query;

4) 상세한 정보 조회를 위한 페이지 생성

5) 존재하지 않는 경로로 접속했을 때 트는 페이지 생성

 

3. 네비게이팅

Key Point: 어떻게 하면 클라이언트 사이드 렌더링 방식으로 페이지를 이동시킬 수 있는가?

1) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

2) 네비게이션 바 생성

 

4. 프리페칭(Pre-Fetching)

1) Pre-Fetching...?

"사전에 미리 불러온다"

Next.js의 프리페칭

  • 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는 기능
  • 사용자들이 다른 페이지로 이동할 때, 페이지 이동을 매운 빠른 속도로 지체 없이 처리해주기 위한 것

▼ 아래의 동작 과정은 현재 페이지에 대해서만 동작하는 것

▼ 최종 동작 과정


웹에서 프리패칭 확인 방법

  • F12 - 네트워크를 통해 페이지를 이동시키면 불러오는 JS 코드들을 확인 가능

2) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run build로 서버 열기

  • npm run dev로 개발 모드를 가동해놓고 있을 때에는 프리패칭 동작 X
    → 프리패칭 동작을 확인하려면 빌드에서 실행하는 프로덕션 모드로 실행 시켜야 함

3) 링크 컴포넌트가 아니어도 프리패칭 가능하도록 수정

/src/pages/_app.tsx 코드에서와 같이 <Link> 컴포넌트로 명시된 경로가 아니라면 프리패칭이 이루어지지 않음

그렇다면 어떻게 해야 하는가?
→ 앱 컴포넌트가 화면에 마운트 되었을 때, 라우터 객체의 특정 메서드를 통해 프로그래메틱하게 테스트 페이지를 프리매칭 하도록 코드 작성하면 됨

4) 프리패칭이 자동으로 가능하더라도 기능하지 않도록 수정

▼ 아래와 같이 수정하면 됨

<Link href={"/search"} prefetch={false}>
    search
</Link>

 

5. API Routes

1) API Routes...?

Next.js에서 API를 구축할 수 있게 해주는 기능

API Routes 공식 문서
https://nextjs.org/docs/pages/building-your-application/routing/api-routes

사실상 자주 사용되는 기능은 아니기 때문에... 우선 있다 정도로만 알고 있기

2) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

3) API 동작 폴더 확인

  • /src/pages/api/ 아래에서 동작하는 파일은...
    • 웹페이지가 아닌 API 라우터로써, 즉 API 응답을 정의하는 파일로써 자동으로 설정
    • API의 경로는 폴더 구조에 맞춰서 갖게 됨

4) 자체 API 제작

 

6. 스타일링

1) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

2) Next.js 앱의 스타일링

  • 리액트의 컴포넌트 스타일을 설정하는 과정과 동일

  • 앱 컴포넌트가 아니라면 css 파일을 그대로 불러오는 것은 제한
    WHY? css 충돌 방지를 위해

  • 그렇다면 css는 어떻게 불러와야 할까?
    → Next.js가 기본적으로 제공하는 CSS 모듈 기능 활용 가능
    : 기존의 css 파일을 마치 모듈처럼 사용할 수 있도록 돕는 기능
    : CSS 파일에 작성해둔 클래스 네임들이 다른 css 파일과 중복되지 않도록 자동으로 클래스 네임들을 유니크한 이름으로 파일마다 변환시켜주는 기능

3) 스타일링 설정

 

7. 글로벌 레이아웃 설정하기

1) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

2) 완성본 데모 살펴보기

완성본 데모 사이트
https://onebite-books-page-woad.vercel.app/

3) 글로벌 레이아웃 설정

글로벌 레이아웃 설정을 위해서는 Next.js 앱의 모든 페이지의 부모 컴포넌트 역할을 하는 루트 컴포넌트인 _app.tsx 컴포넌트의 레이아웃을 적용시켜주면 됨

 

8. 페이지별 레이아웃 설정하기

1) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

2) 완성본 데모 살펴보기

완성본 데모 사이트
https://onebite-books-page-woad.vercel.app/

3) 페이지별 레이아웃 설정

일부 페이지에만 존재하는 레이아웃을 설정하는 방법 알아보기

당연하게도 일부 페이지에만 존재하려면 /src/pages/_app.tsx에 컴포넌트를 추가하면 안 됨
→ 제작한 컴포넌트가 추가되길 원하는 페이지의 파일에 (자체 제작한) getLayout() 메서드를 추가해서 활용

함수와 메서드 관련 보충 자료
https://reactjs.winterlood.com/0f33b159-6b19-433b-8db4-68d6b4a122e0

a. 검색 레이아웃

 

9. 한입북스 UI 구현하기

다시 듣기

1) 실습 진행을 위한 환경 세팅

  • vscode로 section02 폴더 열기
    → vscode 터미널을 열어서 npm run dev로 서버 열기

2) 인덱스 페이지 구현하기

profile
Onion
눈물이 나도 코드를 계속 까보는 양파
이전 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #1~2.

다음 포스트

[강의] 한 입 크기로 잘라먹는 Next.js #3. (2)

0개의 댓글