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 문서

9.5

Edge와 Node.js Runtimes

Runtime은 일반적으로 프로그램이 실행되는 동안 필요한 시스템 및 소프트웨어 환경을 의미합니다. 그리고 Next.js 관점에서의 Runtime은 Next.js 애플리케이션의 코드가 실행 되는 환경을 의미한다고 이해하면 됩니다. Next.js의 Runtime으로는 Edge Runtime과 Node.js Runtime이 있습니다. 지금부터 각 Runtime에 대해서 하나씩 살펴보도록 하겠습니다.

9.5.1 Edge Runtime

Edge Runtime은 Web API를 기반으로 한 실행 환경입니다. Node.js API의 일부를 지원하며, 사용자들에게 빠른 속도로 동적인 컨텐츠를 제공하고 싶을 경우에 적합합니다. Edge Runtime은 코드의 용량이나 사용할 수 있는 API 등에 제약이 있기 때문에 모든 시나리오에 대해서 사용할 수는 없습니다. 예를 들면, Edge Runtime에서 지원하지 않는 Node.js의 API를 사용하는 라이브러리는 사용할 수 없습니다. 하지만 Edge Runtime으로 개발이 가능한 경우에는, 사용하면 빠르게 컨텐츠를 제공할 수 있다는 이점이 있습니다. 그래서 각 상황에 맞게 Runtime을 잘 선택해서 사용하는 것이 중요합니다.

Next.js에서 Edge Runtime를 사용하기 위해서는 아래 예시 코드와 같이 페이지나 레이아웃 파일에 runtime이라는 상수 값을 edge로 설정하여 named export 하면 됩니다.

// app/page.tsx
export const runtime = 'edge';  // 'nodejs' (기본값) | 'edge'

// app/layout.tsx
export const runtime = 'edge';  // 'nodejs' (기본값) | 'edge'

9.5.2 Node.js Runtime

Node.js Runtime은 이름 그대로 Node.js를 기반으로 한 실행 환경입니다. Node.js의 모든 API를 지원하며, 연관된 라이브러리들도 모두 사용이 가능합니다. Node.js Runtime은 Edge Runtime에 비해서 무겁기 때문에 속도면에서는 상대적으로 느리고, 서버 인프라 관리나 운영에 대한 비용도 상대적으로 높을 수밖에 없습니다.

그래서 Node.js Runtime을 사용하면서도 인프라 관리에 대한 비용을 낮출 수 있게 해주는 것이 바로 Serverless Node.js라는 것입니다. Serverless Node.js는 서버리스 환경에서 Node.js 코드를 실행할 수 있게 해주며, 확장이나 비용 측면에서는 이득이 있지만 함수가 처음 실행될 때 일정 시간 동안 준비(Cold Start)가 필요하다는 단점이 있습니다. 참고로 Vercel에서 제공하는 Serverless Function이 바로 Serverless Node.js입니다.

이러한 각 런타임의 특징을 잘 이해하고 상황에 따라 유연하게 적용하는 것이 필요합니다.

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

logo

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

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

On this page