FrontOverflow logo

FrontOverflow

Q&A
문서
강의
영상
매거진
채용

처음 만난 Next.js

0. 준비하기

0.1

TypeScript

0.2

(실습) Node.js와 npm 설치하기

0.3

(실습) VS Code 설치하기

0.4

마치며

1. Next.js 소개

1.1

React와 Next.js

1.2

CSR vs SSR

1.3

SSG (Static Site Generation)

1.4

Next.js의 탄생 배경

1.5

마치며

2. Next.js 시작하기

2.1

(실습) 직접 Next.js 앱 생성

2.2

(실습) create-next-app을 사용해서 Next.js 앱 생성

2.3

(실습) Global Styles 설정 및 ESLint 규칙 변경

2.4

마치며

3. Routing

3.1

Routing 기초

3.2

Pages Router

3.3

App Router

3.4

Linking 및 Navigating

3.5

(실습) Routes 구성하기

3.6

(실습) Parallel Routes 사용하기

3.7

(실습) Intercepting Routes 사용하기

3.8

마치며

4. Pages와 Layouts

4.1

Pages

4.2

Layouts

4.3

Templates

4.4

Metadata

4.5

(실습) Root Layout 만들기

4.6

(실습) Feed Layout 만들기

4.7

(실습) Template 적용해보기

4.8

(실습) Static Metadata 사용해보기

4.9

(실습) Dynamic Metadata 사용해보기

4.10

(실습) 동적으로 Open Graph 이미지 생성하기

4.11

마치며

5. Route Handlers

5.1

Pages Router의 API Routes

5.2

App Router의 Route Handlers

5.3

Route Handlers 사용 예시

5.4

(실습) Route Handlers를 활용하여 API 만들어보기

5.5

마치며

6. Middleware

6.1

Middleware란?

6.2

Next.js의 Middleware

6.3

(실습) Middleware 사용해보기

6.4

마치며

7. Date Fetching

7.1

fetch

7.2

Server Actions

7.3

(실습) 서버에서 데이터 받아오기

7.4

(실습) Server Actions 사용해보기

7.5

마치며

8. SWR

8.1

SWR 소개 및 역할

8.2

Data Fetching

8.3

Mutation & Revalidation

8.4

(실습) SWR 사용해보기

8.5

마치며

9. Rendering

9.1

Rendering Fundamentals

9.2

Server Components

9.3

Client Components

9.4

Server와 Client Composition Patterns

9.5

Edge와 Node.js Runtimes

9.6

(실습) Server Components 사용해보기

9.7

마치며

10. Caching

10.1

Request Memoization

10.2

Data Cache

10.3

Full Route Cache

10.4

Client-side Router Cache

10.5

Cache Interactions

10.6

캐싱 관련 API

10.7

캐싱 요약

10.8

(실습) 캐싱 동작 확인해보기

10.9

마치며

11. Styling

11.1

CSS Modules와 Global Styles

11.2

Tailwind CSS

11.3

CSS-in-JS

11.4

Sass

11.5

(실습) Tailwind CSS 사용해보기

11.6

마치며

12. Optimizing

12.1

Image Optimization

12.2

Fonts

12.3

Scripts

12.4

Lazy Loading

12.5

Static Assets

12.6

(실습) Image 최적화 적용하기

12.7

(실습) Font 최적화 적용하기

12.8

(실습) Lazy Loading 적용하기

12.9

마치며

13. Configuring

13.1

next.config.js 파일

13.2

환경 변수 설정

13.3

(실습) 환경 변수 사용해보기

13.4

(실습) Redirect 적용하기

13.5

(실습) Rewrite 적용하기

13.6

마치며

14. Testing

14.1

프론트엔드 테스트의 종류

14.2

Vitest

14.3

Jest

14.4

Playwright

14.5

Cypress

14.6

(실습) Jest로 테스팅하기

14.7

(실습) Playwright로 테스팅하기

14.8

마치며

15. Build & Deploying

15.1

Build의 개념

15.2

Next.js 애플리케이션 빌드

15.3

(실습) Next.js 애플리케이션 빌드해보기

15.4

마치며

16. Mini Project

16.1

미니 커뮤니티 기획하기

16.2

(실습) Next.js 애플리케이션 생성하기

16.3

(실습) 폴더 구성하기

16.4

(실습) 페이지 생성하기

16.5

(실습) Routes 구성하기

16.6

(실습) Shadcn UI 및 Tailwind CSS 연동하기

16.7

(실습) 데이터베이스 설계하기

16.8

(실습) Turso 데이터베이스 생성하기

16.9

(실습) Drizzle ORM 연동 및 데이터베이스 schema 생성

16.10

(실습) NextAuth 연동하기

16.11

(실습) Route Handlers로 API 만들기

16.12

(실습) 클라이언트 API 호출을 위한 함수 구현하기

16.13

(실습) SWR 연동하기

16.14

(실습) Header 컴포넌트 구현하기

16.15

(실습) Route Groups를 사용하여 여러 RootLayout 구현하기

16.16

(실습) SignInPage 구현하기

16.17

(실습) SignUpPage 구현하기

16.18

(실습) MainPage 구현하기

16.19

(실습) PostWritePage 구현하기

16.20

(실습) PostViewPage 구현하기

16.21

(실습) Middleware 만들기

16.22

(실습) 로컬에서 애플리케이션 작동 테스트

16.23

(실습) Vercel 배포하기

16.24

(실습) 배포된 애플리케이션 작동 테스트

처음 만난 Next.js 문서

12.9

마치며

이번 장에서 배운 내용은 아래와 같습니다.

  • Image Optimization
    • Next.js에는 이미지 최적화를 위한 Image 컴포넌트가 내장되어 있음
    • HTML <img> element를 확장하여 자동 이미지 최적화 기능을 제공
  • Fonts
    • next/font 패키지
      • 자동으로 폰트를 최적화(커스텀 폰트 포함)
      • 외부 네트워크 요청을 제거하여 개인정보 보호와 성능을 향상 시킴
      • 모든 폰트 파일에 대해 내장된 자동 셀프 호스팅 기능을 포함
        • CSS와 폰트 파일은 빌드 시 다운로드 되며, 나머지 정적 자산과 함께 셀프 호스팅 됨
    • Google Fonts
      • next/font/google에서 사용하려는 폰트를 import해서 사용
    • Local Fonts
      • next/font/local 패키지를 import 하고, src 속성에 글꼴 파일의 경로를 지정해서 사용
  • Scripts
    • Application Scripts
      • 모든 route에 대해 서드파티 스크립트를 로드하고 싶을 경우
      • Root Layout에서 next/script를 사용하여 스크립트를 직접 포함시키면 됨
      • 사용자가 여러 페이지 사이를 이동하더라도 스크립트가 한 번만 로드되도록 보장
      • 성능에 영향을 최소화하기 위해 실제로 해당 스크립트를 사용하는 페이지나 레이아웃에만 서드파티 스크립트를 포함하는 것이 좋음
    • Layout Scripts
      • 동일한 레이아웃 내의 여러 route에 대해 서드파티 스크립트를 로드할 경우
      • next/script를 사용하여 레이아웃 컴포넌트에 스크립트를 직접 포함시키면 됨
      • 동일한 레이아웃 내에서 여러 경로를 탐색하더라도 스크립트가 한 번만 로드되도록 보장
    • strategy 속성을 사용하여 로딩 동작을 세밀하게 조정할 수 있음
  • Lazy Loading
    • 필요한 시점에만 데이터를 불러오는 기술
    • 초기 로딩 시간을 줄이고, 사용자 경험과 성능을 향상시키는 데 도움이 됨
    • Next.js에서 Lazy Loading 적용 방법
      • next/dynamic을 사용한 동적 import
        • React.lazy()와 Suspense를 합친 것
      • React.lazy()와 Suspense 사용
  • Static Assets
    • 루트 디렉토리에 public 폴더를 만들어 정적 파일을 제공할 수 있음
    • public 폴더 내부의 파일은 기본 URL (/)에서 시작하여 코드에서 참조 가능

개발자를 위한 슬라이드 작성 도구

logo

마지막 업데이트: 2025년 10월 24일 02시 50분

이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.

On this page

  • 12.9 마치며