# Next.js 애플리케이션 배포하는 방법

Next.js 앱 개발을 끝내고 배포할 준비가 됐다면, 크게 두 가지 방법이 있어요. 하나는 관리형 인프라 제공업체(Managed Infrastructure Provider)를 이용하는 거고, 다른 하나는 직접 서버를 세팅해서 호스팅하는 방법이죠.

## 관리형 인프라 제공업체 이용하기

관리형 플랫폼은 Next.js 앱 배포할 때 꽤 편리한 선택이에요. 이 업체들은 호스팅부터 서버 설정, 스케일링(트래픽에 맞춰 서버 용량 자동 조절)까지 알아서 해주기 때문에 개발자는 코드에만 집중할 수 있거든요.

예를 들어, Vercel, Netlify, AWS Amplify 같은 곳이 대표적이에요. 특히 Next.js를 만든 회사가 운영하는 Vercel은 Next.js 최적화가 잘 돼 있어서 배포가 아주 간편하죠.

관리형 플랫폼의 장점은:

- 별도의 서버 관리 없이 빠른 배포 가능
- 트래픽 변화에 따라 자동으로 스케일링
- HTTPS, CDN 등 보안과 퍼포먼스도 기본 제공  
- CI/CD (코드 변경 시 자동 배포)도 쉽게 설정할 수 있어요

사실 초보자나 소규모 프로젝트에는 관리형 플랫폼이 가장 추천되는 방법입니다. 물론 비용은 트래픽과 사용량에 따라 달라지니 참고하세요!

---

다음은 직접 서버를 세팅해서 호스팅하는 방법도 있는데, 그 부분도 궁금하면 알려드릴게요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Vercel은 Next.js의 제작자이자 유지 관리자이며, 별도의 설정 없이도 풀 기능을 지원하는 애플리케이션 배포를 할 수 있게 도와줍니다.

- Vercel에서 Next.js에 대해 더 알아보기  
- Vercel에서 템플릿을 배포해 Next.js를 직접 사용해보기  

그리고 커뮤니티에서 관리하는 배포 템플릿도 준비되어 있는데요, 다음 플랫폼들을 지원합니다:

| 플랫폼 이름    | 설명                   |
|---------------|------------------------|
| Deno          | 최신 자바스크립트와 타임스크립트 런타임 |
| Flightcontrol | 서버리스 배포 관리 도구 |
| Railway       | 간편한 클라우드 인프라 서비스 |
| Render        | 풀 매니지드 클라우드 플랫폼 |
| SST           | 서버리스 스택 개발 프레임워크 |

Vercel을 이용하면 복잡한 설정 없이도 Next.js 앱뿐만 아니라, 다양한 환경에서 쉽게 배포할 수 있어서 개발 생산성이 쑥쑥 올라가요. 특히 요즘처럼 빠르게 웹 애플리케이션을 배포하고 테스트해야 할 때는 정말 유용하니 한 번 써보시길 추천합니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js를 사용할 때, 각 클라우드 제공업체마다 지원하는 기능들이 조금씩 다르니 꼭 해당 업체의 문서를 참고하는 게 좋아요.

## 직접 호스팅(Self-Hosting)이란?

직접 호스팅은 서버를 직접 준비하고, 컨테이너를 관리하며, 트래픽에 맞춰 확장하는 모든 걸 직접 책임져야 한다는 뜻이에요. 직접 호스팅하는 방법은 크게 세 가지가 있어요:

| 직접 호스팅 방식        | 설명                                           |
|------------------|----------------------------------------------|
| Node.js 서버       | Next.js 앱을 직접 Node.js 서버에서 실행해요.        |
| Docker 컨테이너    | Next.js 앱을 Docker 컨테이너 안에서 실행해 관리해요.    |
| 정적 내보내기(Static Export) | Next.js를 정적 사이트로 빌드해, 서버 없이도 배포해요.     |

이 중에서 어떤 방식을 선택하느냐는 프로젝트의 필요와 리소스에 따라 달라져요. 예를 들어, 실시간 데이터 처리나 서버 사이드 렌더링이 필요하면 Node.js 서버나 Docker를 사용하는 게 좋고, 콘텐츠가 주로 정적인 경우라면 정적 내보내기를 고려해볼 수 있겠죠.

참고로 Docker를 사용하면 배포가 좀 더 일관되고, 확장하거나 환경을 맞추기도 쉬워서 최근 많이 선호되는 편이에요. 혹시 직접 서버 세팅이 부담된다면, 서버리스(서버 없는) 플랫폼들도 있으니 다음에 다뤄볼게요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

커뮤니티에서 관리하는 다양한 셀프 호스팅 예제들이 있어요. 아래는 대표적인 셀프 호스팅 제공업체들이에요:

- DigitalOcean
- Fly.io
- GitHub Pages
- Google Cloud Run

그리고 참고할 만한 영상도 추천해드릴게요! Next.js를 셀프 호스팅하는 방법을 45분 동안 자세히 알려주는 유튜브 영상이에요. 직접 셀프 호스팅에 도전해보고 싶다면 꼭 한번 보세요! 🎥

---
셀프 호스팅을 하면서 각 플랫폼마다 특징이 조금씩 달라요. 예를 들어, DigitalOcean은 가상 서버를 직접 관리하는 느낌이고, Fly.io는 글로벌 엣지 네트워크를 활용할 수 있어서 빠른 응답 속도를 자랑합니다. GitHub Pages는 정적 사이트 배포에 딱 좋고, Google Cloud Run은 컨테이너 기반 서비스라 자동 확장에 유리하답니다.

혹시 셀프 호스팅이 처음이라면, 본인이 원하는 서비스 규모와 관리 난이도에 맞는 플랫폼 선택이 중요해요. 또, 배포 자동화를 위해 GitHub Actions나 CI/CD 도구들을 같이 사용하는 것도 좋은 팁이니 참고해보세요!

Next.js 15 웹사이트 배포하는 5가지 방법

Next.js 15에서 메타데이터 추가 및 OG 이미지 생성하는 방법

# 에러 처리하는 법

에러는 크게 두 가지로 나눌 수 있어요: 예상 가능한 에러와 잡히지 않은 예외(uncaught exceptions)죠. 이번 글에서는 Next.js 앱에서 이런 에러들을 어떻게 다룰 수 있는지 쉽게 알려드릴게요.

## 예상 가능한 에러 처리하기

예상 가능한 에러는 앱이 정상적으로 작동하는 중에 발생할 수 있는 에러예요. 예를 들어 서버 쪽 폼 검증에서 실패할 때나, API 요청이 실패하는 경우죠. 이런 에러들은 명확하게 처리해서 클라이언트한테 적절하게 전달해줘야 해요.

사실 이런 에러들은 사용자 경험에도 영향을 많이 주기 때문에, 단순히 ‘문제가 발생했습니다’라고 하는 것보단, 어떤 문제가 있는지 구체적으로 알려주는 게 중요해요. 예를 들어, 폼에서 이메일 형식이 맞지 않으면 "이메일 형식이 올바르지 않습니다"라고 바로 알려주면 사용자가 수정할 수 있잖아요?

Next.js에서는 서버 사이드 코드에서 이런 에러들을 try-catch 문으로 잡아서, 적절한 HTTP 상태 코드와 메시지로 응답을 줄 수 있어요. 클라이언트 쪽에서는 그 응답을 받아서 UI에 에러 메시지를 띄우거나, 특정 행동을 유도하도록 하면 됩니다.

혹시 에러를 다루는 게 처음이라면, ‘에러 핸들링 레이어’를 따로 만들어서 코드를 깔끔하게 관리하는 것도 추천해요. 그래야 에러 처리 로직이 여러 군데 흩어지지 않고, 수정도 편리해요.

다음에는 잡히지 않은 예외, 즉 예기치 않은 오류가 발생했을 때 어떻게 대처하는지도 알려드릴게요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 서버 함수에서 예상 에러 처리하기

서버 함수(Server Functions)를 작성할 때, 예상되는 에러를 다루는 방법에 대해 이야기해볼게요. 보통 자바스크립트에서 에러가 발생하면 try/catch로 잡거나 `throw`를 해서 에러를 던지죠? 그런데 서버 함수에서는 이런 방식보다는 **예상 가능한 에러를 반환값(return value)**으로 모델링하는 게 좋아요.

예를 들어, 아래와 같이 `createPost`라는 서버 함수를 만들었을 때, API 호출이 실패하는 경우를 생각해볼게요.

```js
"use server";

export async function createPost(prevState: any, formData: FormData) {
  const title = formData.get("title");
  const content = formData.get("content");

  const res = await fetch("https://api.vercel.app/posts", {
    method: "POST",
    body: { title, content },
  });
  const json = await res.json();

  if (!res.ok) {
    return { message: "Failed to create post" };
  }
}
```

여기서 실패하면 그냥 `throw` 대신 `{ message: 'Failed to create post' }`라는 객체를 반환하고 있죠? 이렇게 하면 클라이언트 쪽에서 이 반환값을 이용해 에러 메시지를 쉽게 표시할 수 있어요.

#### 팁!

- 서버에서 에러를 `throw`하면 클라이언트 입장에선 뭘 잘못했는지 알기 어려울 수 있어요. 그래서 예상 가능한 에러들은 명확하게 데이터로 내려주는 게 UX에도 더 좋아요.
- 반대로, 정말 예상하지 못한 시스템 에러는 그대로 `throw`해서 호출 스택에서 잡히게 하는 게 관리하기 편합니다.
- 그리고, `useActionState` 훅을 사용하면 이런 반환값을 쉽게 받아서 처리할 수 있으니 한번 써보세요!

이런 스타일은 점점 더 많은 React 서버 컴포넌트 기반 환경에서 권장되는 패턴이니, 앞으로 서버 함수 작성할 때 참고하면 좋아요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번 시간에는 React의 `useActionState` 훅을 이용해서 폼 제출 시 발생할 수 있는 에러 메시지를 화면에 표시하는 방법을 함께 알아보겠습니다.

기본적으로 `useActionState`는 액션(action)의 상태를 추적할 수 있도록 도와줘서, 성공 여부나 에러 발생 시 상태를 쉽게 관리할 수 있답니다.

---

## 예제 코드 살펴보기

```jsx
"use client";

import { useActionState } from "react";
import { createPost } from "@/app/actions";

const initialState = {
  message: "",
};

export function Form() {
  // useActionState 훅 호출, createPost 액션을 인자로 전달
  const { state, pending } = useActionState(createPost);

  return (
    <form action={createPost}>
      <label htmlFor="title">Title</label>
      <input type="text" id="title" name="title" required />

      <label htmlFor="content">Content</label>
      <textarea id="content" name="content" required />

      <button disabled={pending}>Create Post</button>

      {/* 에러 메시지가 있다면 화면에 표시 */}
      {state?.message && <p style={{ color: "red" }}>{state.message}</p>}
    </form>
  );
}
```

- `useActionState(createPost)`를 호출하면 액션의 현재 상태(`state`)와 제출 진행 중 여부(`pending`)를 반환해줍니다.
- `state.message`에 에러 메시지가 담겨 있다면, 이를 사용자에게 보여줄 수 있죠.
- `button`은 제출하는 동안 중복 전송을 방지하기 위해 `disabled` 처리됩니다.

---

## Server Component에서 에러 핸들링

서버 컴포넌트에서 데이터를 불러올 때도 에러 처리는 중요하죠! 거기서는 서버에서 받은 응답을 활용해 조건부 렌더링을 하거나, 필요시 리다이렉션을 할 수 있습니다.

예를 들어:

```jsx
export default async function Page() {
  try {
    const data = await fetchData(); // 서버에서 데이터 가져오기
    return <DisplayData data={data} />;
  } catch (error) {
    // 에러 발생 시 에러 메시지 또는 리다이렉션 처리
    return <p>데이터를 불러오는 중 오류가 발생했습니다.</p>;
  }
}
```

이처럼 서버 컴포넌트 내부에서 `try-catch` 문으로 에러를 잡아서 사용자에게 피드백을 줄 수 있습니다.

---

## 정리하자면

- **useActionState** 훅을 활용하면 클라이언트 컴포넌트 내에서 액션 상태를 쉽게 관리하고, 에러 메시지를 화면에 표시할 수 있습니다.
- 제출 버튼에 진행 상태를 반영해 사용자 경험도 개선할 수 있죠.
- **서버 컴포넌트**에서는 데이터를 비동기로 가져올 때 에러를 잡아서 적절히 처리해야 하며, 이때 사용자에게 친절하게 에러를 알리는 UI를 만드는 게 중요합니다.

---

혹시 더 자세한 액션 상태 관리나 서버-클라이언트 간 에러 핸들링에 관해 궁금한 점이 있으면 언제든지 물어보세요! 여러분이 더 쉽게 React와 Next.js를 활용할 수 있도록 돕겠습니다 :)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

자, 이번에는 Next.js에서 데이터를 가져오고, 만약 데이터가 없다면 404 페이지를 띄우는 방법에 대해 이야기해볼게요.

먼저, fetch API를 사용해서 데이터를 비동기로 가져오는 기본 예제부터 봅시다.

```js
export default async function Page() {
  const res = await fetch(`https://...`);
  const data = await res.json();

  if (!res.ok) {
    return "There was an error."; // 에러 발생 시 간단한 메시지 반환
  }

  return "..."; // 데이터를 성공적으로 받아오면 원하는 UI 반환
}
```

여기서 핵심은 서버 API를 호출하고, 응답이 제대로 오지 않으면 에러 메시지를 보여주는 거예요. 그런데, 만약 해당 페이지나 데이터가 없을 때는 ‘404 페이지’를 보여주는 방법도 필요하겠죠?

Next.js에서는 `notFound()` 함수를 이용해서 이런 상황을 처리할 수 있어요. 예를 들어, 블로그 포스트를 주소로 찾는 상황을 가정해보죠.

```js
import { notFound } from "next/navigation";
import { getPostBySlug } from "@/lib/posts";

export default async function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
  const post = getPostBySlug(slug);

  if (!post) {
    notFound(); // 데이터가 없으면 404 페이지로 이동
  }

  return <div>{post.title}</div>; // 포스트 타이틀 출력
}
```

여기서 중요한 점 몇 가지 짚고 넘어가면:

| 항목            | 설명                                                                                                                                         |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `notFound()`    | Next.js가 제공하는 내장 함수로, 호출 시 해당 페이지 대신 404 UI를 보여줘요. 그냥 반환하는 게 아니라 실제로 404 상태로 페이지가 렌더링됩니다. |
| `getPostBySlug` | 여긴 예시로 작성한 함수인데, 실제로는 슬러그(게시물 주소)를 기준으로 데이터를 찾아오는 로직입니다. 만약 없으면 `undefined` 혹은 `null` 반환  |
| `params`        | 동적 라우팅에서 URL 파라미터를 받을 때 사용해요. 예를 들어 `/posts/hello-world` 라면 slug는 `hello-world` 가 되겠죠                          |

추가로, `not-found.js` 또는 `not-found.tsx` 파일을 프로젝트에 만들어서 404 페이지의 UI를 커스터마이징 할 수도 있어요.

```jsx
export default function NotFound() {
  return (
    <div>
      <h1>페이지를 찾을 수 없어요 ㅠㅠ</h1>
      <p>요청하신 페이지가 존재하지 않거나 삭제되었습니다.</p>
    </div>
  );
}
```

이렇게 하면 프로젝트 전반에서 공통으로 쓰이는 404 페이지가 알아서 뜹니다.

정리해보면, 데이터가 없거나 잘못된 URL을 요청했을 때 사용자에게 잘못된 접근임을 알려주는 방법으로 `notFound()` 호출과 맞춤형 404 페이지를 함께 사용하면 훨씬 깔끔한 사용자 경험을 만들 수 있다는 점! 꼭 기억하세요~



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```jsx
export default function NotFound() {
  return <div>404 - Page Not Found</div>;
}
```

## 처리하지 않은 예외(uncaught exceptions) 다루기

처리하지 않은 예외란, 애플리케이션의 정상적인 흐름에서는 발생하지 말아야 할 예상치 못한 오류를 뜻해요. 이런 예외들은 보통 에러를 던져서(error throwing) 처리하는데, 이 에러를 '에러 바운더리(Error Boundary)'에서 잡아내서 적절히 대응해주는 방식이 일반적입니다.

에러 바운더리는 리액트 컴포넌트에서 흔히 사용되는데, UI가 깨지지 않고 사용자에게 친절한 에러 메시지를 보여주거나, 로그를 남기거나, 대체 UI로 전환하는 데 활용할 수 있답니다.

### 중첩된 에러 바운더리(Nested error boundaries)

에러 바운더리를 한 군데만 두는 것보다, 애플리케이션 구조에 따라 여러 단계로 중첩시켜서 중요한 UI 부분별로 별도의 에러 처리 영역을 만드는 게 좋아요. 예를 들어, 페이지 전체를 감싸는 바운더리가 있고, 그 안에 각각의 위젯이나 컴포넌트 단위로 또 다른 바운더리가 존재하면, 특정 위젯에서 문제가 생겨도 페이지 전체가 깨지지 않고 해당 위젯 부분만 에러 UI로 교체할 수 있거든요.

이렇게 하면 사용자 경험도 개선되고, 디버깅할 때도 어떤 컴포넌트에서 문제가 발생했는지를 좀 더 명확히 파악할 수 있습니다.

---

참고로, 리액트에서 에러 바운더리를 구현할 때는 다음과 같은 라이프사이클 메서드를 활용해요:

- `static getDerivedStateFromError(error)`: 에러가 발생했을 때 상태를 업데이트하여 대체 UI를 렌더할 준비를 함
- `componentDidCatch(error, info)`: 에러 로깅 등 부가 작업 수행

그리고 함수형 컴포넌트만 쓴다면 `Error Boundary`는 아직 클래스 컴포넌트로 작성해야 한다는 점 기억하세요!  
리액트가 앞으로 훅 기반 에러 바운더리를 지원하면 훨씬 편리해지겠죠?

필요하면 에러 바운더리 예제도 공유해 드릴게요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서는 에러 바운더리(Error Boundaries)를 이용해 예기치 못한 에러를 잡아냅니다. 에러 바운더리는 자식 컴포넌트에서 발생한 오류를 잡아내서, 부러진 컴포넌트 트리 대신에 대체 UI(일종의 에러 화면)를 보여주게 해주죠.

이걸 구현하려면, 라우트 세그먼트(route segment) 안에 `error.js` 파일을 만들고 React 컴포넌트를 내보내면 됩니다. 예시는 아래와 같아요:

```js
'use client' // 에러 바운더리는 클라이언트 컴포넌트여야 합니다

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // 에러 리포팅 서비스에 로그를 보낸다고 생각해보세요
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>문제가 발생했어요!</h2>
      <button
        onClick={
          // 다시 렌더링 시도해서 복구를 노립니다
          () => reset()
        }
      >
        다시 시도
      </button>
    </div>
  )
}
```

여기서 핵심은 `reset` 함수예요. 이 버튼을 누르면 해당 세그먼트를 다시 렌더링하면서 문제가 해결됐는지 재시도합니다.

그리고 재미있는 점! 에러는 가장 가까운 상위 에러 바운더리로 올라가서 처리돼요. 덕분에, 라우트 트리 계층별로 `error.js`를 여러 개 둬서 세밀하게 에러 처리를 할 수 있습니다. 예를 들어, 특정 페이지에서만 보여줄 맞춤형 에러 화면도 가능하다는 뜻이죠.

---

추가로 알려드리자면, Next.js에서는 페이지나 레이아웃 단위로 에러를 다룰 수 있어서 사용자 경험을 더 세련되게 만드는 데 큰 도움이 됩니당. 단, 에러 바운더리는 무조건 클라이언트 컴포넌트여야 하는 점은 꼭 기억해주세요!

꼭 한 가지 깜빡하지 말아야 할 팁은, 에러 바운더리 안에서도 에러는 다시 던져지지 않으니, 중요한 로그나 오류 추적(예: Sentry 같은 도구 활용)은 `useEffect` 같은 곳에서 해주는 게 베스트입니다.

필요할 때마다 `error.js` 만들어서 우아한 에러 처리를 해보세요! 사용자도, 개발자도 모두 행복해질 거예요 :)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/TIL/assets/img/2025-04-22-Howtohandleerrors_0.png" />

### 전역 에러 처리하기 (Global errors)

에러 처리하면 보통 각 컴포넌트 단위에서 하게 되지만, root 레이아웃 단계에서 전역적으로 에러를 잡고 싶을 때가 있어요. 이런 경우에는 `app` 루트 디렉터리에 `global-error.js` 파일을 만들어서 처리할 수 있습니다. 특히 다국어 지원 같은 국제화(i18n)를 적용해도 똑같이 쓸 수 있다는 점도 참고하세요.

이 전역 에러 UI 컴포넌트는 root 레이아웃이나 템플릿을 완전히 대체하는 역할을 하기 때문에, 직접 `html`과 `body` 태그를 포함해야 해요. 없으면 브라우저가 제대로 렌더링하지 않기 때문에 꼭 넣어줘야 합니다.

```js
'use client' // 에러 바운더리는 클라이언트 컴포넌트여야 합니다

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>문제가 발생했어요!</h2>
        <button onClick={() => reset()}>다시 시도</button>
      </body>
    </html>
  )
}
```

### 핵심 포인트

- `'use client'` 선언으로 클라이언트 컴포넌트로 만들어야 에러 경계(Error Boundaries)가 정상 동작해요.
- 에러를 화면에 보여주고, 사용자가 다시 시도할 수 있도록 reset 함수도 전달받아 꼭 활용하세요.
- 전역 에러 UI는 root 레이아웃을 완전히 대체하므로 `html, body` 태그를 반드시 포함!

### 살짝 더!

만약 이 전역 에러 화면에 스타일을 입히고 싶다면, 전역 CSS를 불러오거나 `style` 태그를 넣는 방법이 있어요. 그리고 모던 웹 앱에서는 에러가 발생했을 때 단순히 메시지 보여주는 것 말고, 사용자 피드백을 받아 서버로 리포트 하거나, 자동 리프레시 기능을 추가하는 것도 생각해볼 만합니다.

즉, 전역 에러 처리는 앱 안정성을 향상시키는 훌륭한 도구니 적극 활용해보세요!

TypeScript와 ReactJS에서 에러 처리하는 5가지 방법

# 데이터 업데이트하는 방법

Next.js에서 데이터를 업데이트할 때는 React의 Server Functions를 활용할 수 있어요. 이번 글에서는 Server Functions를 어떻게 만들고, 호출하는지 쉽고 간단하게 살펴볼게요.

## Server Functions 만들기

Server Function은 `use server`라는 지시어(directive)를 사용해서 정의할 수 있어요. `async` 함수 맨 위에 `use server`를 적으면 그 함수가 Server Function으로 인식돼요. 또는 파일 맨 위에 `use server`를 적으면, 그 파일이 내보내는(export) 모든 함수들이 Server Function으로 동작하게 돼요.

---

> 예를 들어, 아래처럼 쓸 수 있습니다.

```js
'use server'

export async function updateData() {
  // 서버에서 실행할 로직
}
```

---

이렇게 하면 프론트엔드에서 API를 호출하는 느낌 대신, 마치 서버 안에서 직접 호출하는 것처럼 데이터를 처리할 수 있어요. 서버에서 실행되기 때문에 보안이나 성능 측면에서도 이점이 크고, 코드도 깔끔해집니다.

혹시 여기서 `use server`가 뭔지 궁금할 수도 있는데, 이건 Next.js 13 이후에 도입된 기능으로, React 컴포넌트 내에서 서버 전용 함수를 만드는데 사용하는 문법이에요. 쉽게 말해 서버에서만 실행되는 함수임을 표시하는 태그라고 생각하면 됩니다.

다음엔 이 Server Function을 실제 컴포넌트에서 어떻게 호출하는지도 보여드릴게요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번 글에서는 Next.js 13부터 새롭게 도입된 Server Actions, 즉 서버에서 직접 실행되는 함수 작성법에 대해 살펴볼게요. 특히, Server Functions를 어떻게 작성하고, 이걸 Server Component 안에 어떻게 쉽게 넣을 수 있는지 가볍게 정리해봤습니다.

---

### Server Functions 기본 작성법

예를 들어, 게시글을 생성하거나 삭제하는 함수를 작성할 때 아래처럼 `FormData`를 받아서 처리할 수 있어요.

```js
export async function createPost(formData: FormData) {
  'use server'   // 여기가 포인트! 이 지시어로 서버에서 실행됨을 명시
  const title = formData.get('title')
  const content = formData.get('content')

  // 여기서 데이터베이스에 글 저장하거나,
  // 혹은 캐시를 재검증(revalidate)하는 작업을 할 수 있죠
}

export async function deletePost(formData: FormData) {
  'use server'
  const id = formData.get('id')

  // 삭제 처리 및 캐시 갱신
}
```

`'use server'`를 함수 맨 위에 적으면, 이 함수가 클라이언트가 아닌 서버에서 실행될 함수임을 명확히 하게 됩니다. 이게 Next.js가 Server Actions를 인식하고 별도로 처리하게 만들어주죠.

---

### Server Functions를 Server Component 안에 작성하기

서버 컴포넌트 내부에 이런 Server Action 함수를 바로 써도 OK인데요, 이런 식으로 함수 위에 `'use server'` 지시어를 붙이면 됩니다.

```js
export default function Page() {
  // 서버에서 실행될 함수 (Server Action)
  async function createPost(formData: FormData) {
    'use server'
    // ...게시글 생성 로직
  }

  return <></>
}
```

이렇게 하면 해당 함수를 컴포넌트 바깥으로 따로 빼지 않아도 되고, 컴포넌트와 함수의 관계를 내비치기 좋아요.

---

### 알아두면 좋은 팁

- Server Actions로 넘겨받는 `formData`는 `<form>`에서 전송한 데이터를 쉽게 받아서 쓸 수 있어서, API 엔드포인트 없이도 폼 제출을 깔끔하게 처리할 수 있어요.
- 서버 함수는 클라이언트 코드에 포함되지 않으니, 보안상 민감한 작업을 하기에 좋아요.
- 데이터 변경 후에는 꼭 필요한 경우 `revalidatePath()` 같은 Next.js의 캐시 재검증 함수를 호출해 UI에 최신 상태가 반영되게 만들어야 해요.

---

다음 포스팅에서는 Server Actions를 실제 폼과 연동해서 구현하는 간단한 예시도 준비해볼게요. 서버와 클라이언트 경계를 넘나드는 작업이 점점 더 좋아지고 있어 기대해 주세요! 😊


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 클라이언트 컴포넌트(Client Components)

서버 함수(Server Functions)는 클라이언트 컴포넌트 안에서 직접 정의할 수는 없어요. 하지만 서버 함수가 담긴 파일에 `'use server'`라는 지시어를 맨 위에 붙여서 내보내면, 클라이언트 컴포넌트에서 이 함수를 불러와서 실행할 수 있답니다!

예를 들어, 이런 식으로 서버 함수가 정의되어 있어요:

```js
'use server'

export async function createPost() {
  // 서버에서 처리할 로직
}
```

그리고 클라이언트 컴포넌트에서는 이렇게 import해서 사용할 수 있죠:

```js
'use client'

import { createPost } from '@/app/actions'

export function Button() {
  return <button formAction={createPost}>Create</button>
}
```

여기서 핵심은, `createPost` 같은 함수는 실제로는 서버에서 작동하지만, 클라이언트 컴포넌트가 그 함수를 호출하는 이벤트를 연결해준다는 점이에요. 덕분에 UI는 클라이언트에서 매끄럽게 돌아가면서도, 중요한 데이터 처리나 DB 작업 등은 안전하게 서버에서 수행할 수 있죠.

추가로 알아두면 좋은 점!
- `'use server'` 디렉티브가 있는 파일은 Next.js가 서버 전용이라는 걸 인지해서 클라이언트 번들에서 제외해줘서 코드가 더 깔끔해져요.
- `formAction` prop을 사용하면 폼 제출 시 서버 함수를 바로 트리거할 수 있어서 React의 상태 관리 없이도 서버와 통신하기 편해요.
- 이렇게 Server Function을 클라이언트 컴포넌트에서 활용하면, 복잡한 API 라우트 없이도 양방향 데이터 흐름을 간단히 구현할 수 있습니다.

이 방식 덕분에 Next.js에서 서버/클라이언트 코드 구분이 더 명확하고, 개발자는 로직을 더 효율적으로 나눌 수 있답니다!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 서버 함수 호출하기

서버 함수를 호출하는 방법은 크게 두 가지가 있어요:

- 서버 컴포넌트와 클라이언트 컴포넌트에서의 폼(form) 사용
- 클라이언트 컴포넌트에서 이벤트 핸들러 사용

### 폼(Form)이용하기

폼 태그는 HTML에서 서버와 데이터를 주고받을 때 가장 기본적인 방법 중 하나인데요, Next.js 같은 프레임워크에서 서버 컴포넌트나 클라이언트 컴포넌트 내에서 쉽게 사용할 수 있어요. 폼이 제출되면 지정한 서버 함수가 호출되고, 그 서버 함수 안에서 데이터를 처리할 수 있죠.

예를 들어, 간단한 로그인 폼을 만들어 서버 함수로 데이터를 보내는 경우를 생각해보면 이해가 쉬워요. 폼 안에 input 필드를 넣고, submit 버튼을 누르면 서버 함수가 자동으로 실행되는 거죠.

또한, 요즘은 fetch API나 axios 같은 클라이언트 사이드 호출 방식을 많이 쓰긴 하지만, 폼을 이용한 방법은 여전히 직관적이고 간단하게 서버에 데이터를 보내는 좋은 방법이에요. 특히 서버 컴포넌트가 지원되는 환경에서는 폼을 통해 자연스럽게 서버 함수를 호출할 수 있다는 점 꼭 기억하세요!

필요하면 다음에 폼 예제 코드를 공유할게요.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

React에서 `form` 태그를 확장해서 Server Function을 HTML `action` 속성으로 바로 호출할 수 있다는 사실, 알고 계셨나요?

보통 우리가 폼을 제출할 때는 프론트엔드에서 이벤트 핸들러를 따로 만들어서 처리하곤 하죠. 하지만 React에서는 폼의 `action` 속성에 서버에서 실행할 함수를 직접 연결할 수 있어요. 이 함수는 폼 제출 시 자동으로 `FormData` 객체를 받아서 안에 담긴 값들을 쉽게 꺼내 쓸 수 있답니다.

예를 들어, 아래처럼 `createPost`라는 서버 함수를 `action`에 할당하면, 폼이 제출될 때 자동으로 `createPost`가 호출되면서 제출한 데이터가 `FormData` 형태로 전달돼요.

```jsx
import { createPost } from '@/app/actions'

export function Form() {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="content" />
      <button type="submit">Create</button>
    </form>
  )
}
```

서버 함수는 이렇게 작성할 수 있습니다:

```js
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // 여기서 DB에 저장하거나, 캐시를 재검증하는 작업을 할 수 있어요.
}
```

### 조금 더 알아두면 좋은 팁!

- `FormData.get()` 메서드는 반환값이 `FormDataEntryValue | null`이기 때문에, 실제 값이 문자열인지 확인하거나 기본값을 설정하는 게 좋습니다.
- 서버 함수 내에서는 서버 전용 코드(ex. 데이터베이스 쿼리, 파일 시스템 접근)를 자유롭게 사용할 수 있어요.
- 클라이언트에서 별도의 API 호출 없이도 서버로 데이터를 보낼 수 있어서 코드가 더 깔끔해지고 유지보수가 쉬워집니다.
- 물론, 복잡한 폼 유효성 검사나 사용자가 바로 피드백을 받아야 하는 경우엔 클라이언트 측에서 미리 체크하는 걸 추천합니다.

이 방식은 특히 Next.js 같은 React 기반 프레임워크에서 유용하게 쓰이는데요, 서버 함수와 폼을 연동하는 새로운 흐름을 경험해보고 싶다면 한 번 시도해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 참고할 점: action prop에 전달될 때 Server Functions는 Server Actions라고도 불러요.

### 이벤트 핸들러(Event Handlers)

클라이언트 컴포넌트에서 서버 기능(Server Function)을 호출할 때는 onClick 같은 이벤트 핸들러를 활용할 수 있어요. 예를 들어, 좋아요 버튼을 만들고 클릭할 때마다 서버에 좋아요 수를 업데이트하는 기능을 구현해볼게요.

```jsx
'use client'

import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <>
      <p>Total Likes: {likes}</p>
      <button
        onClick={async () => {
          // 서버에 좋아요 증가 요청을 보내고, 업데이트 된 좋아요 수를 받아서 상태를 갱신해요
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}
```

여기서 중요한 점은, 클라이언트 컴포넌트 내부에서 직접 서버 사이드 코드를 호출할 수 없기 때문에, `incrementLike` 같은 서버 기능을 `actions`라는 별도의 파일에서 정의해두고 import해서 사용한다는 거예요. 그리고 비동기 처리를 위해 `async/await`를 활용한 점도 기억해두면 좋아요.

또한, 이렇게 서버 함수 호출 시 상태를 업데이트하는 패턴은 사용자 인터랙션에 실시간 피드백을 주는 데 아주 유용합니다. 만약 서버 함수 호출 중에 로딩 상태 표시가 필요하다면, `useState`로 로딩 상태를 관리해서 버튼을 비활성화하거나 스피너를 보여주는 것도 좋은 UX를 위한 팁이에요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 예시

### 대기 상태 표시하기

서버 함수를 실행하는 동안, React의 `useActionState` 훅을 사용해서 로딩 인디케이터를 보여줄 수 있어요. 이 훅은 `pending`이라는 불리언 값을 반환하는데, 이 값이 `true`일 때는 작업이 진행 중임을 뜻하죠.

예를 들어, 게시글 생성 버튼을 눌렀을 때 로딩 스피너를 보여주는 컴포넌트 코드는 아래와 같습니다:

```js
'use client'

import { useActionState } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
  const [state, action, pending] = useActionState(createPost, false)

  return (
    <button onClick={async () => action()}>
      {pending ? <LoadingSpinner /> : 'Create Post'}
    </button>
  )
}
```

여기서 중요한 점은 `pending` 값 덕분에 사용자에게 작업이 진행 중이라는 피드백을 줄 수 있다는 거예요. 보통 서버와의 통신이 느릴 때는 이렇게 대기 상태를 표시해주는 게 UX 측면에서 정말 중요하답니다.

또 한 가지 팁을 드리자면, 이 훅은 작업이 끝난 후 결과값이나 에러 상태도 함께 관리할 수 있어서, 로딩뿐만 아니라 성공, 실패 상태에 따른 UI 업데이트도 함께 처리할 수 있어요. 필요에 따라 `state`를 활용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 캐시 재검증하기

데이터를 업데이트한 뒤, Next.js 캐시를 재검증(revalidate)해서 최신 데이터를 보여주고 싶을 때가 있죠? 그럴 땐 Server Function 내부에서 `revalidatePath`나 `revalidateTag` 함수를 사용하면 간편하게 해결할 수 있어요.

```js
import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  'use server'
  
  // 데이터 업데이트 작업 수행
  // ...
  
  // 특정 경로에 대한 캐시를 재검증해서 최신 데이터 반영
  revalidatePath('/posts')
}
```

위 예제처럼, 글을 새로 만들거나 수정한 뒤 `/posts` 경로의 캐시를 재검증하면 사용자에게 항상 최신 게시물 목록을 보여줄 수 있답니다.

> 추가 팁!  
> 비슷하게 `revalidateTag`를 사용하면 태그 단위로 캐시를 재검증할 수도 있는데, 이 방법은 특정 데이터 그룹을 관리할 때 유용해요. 상황에 맞게 선택해서 사용해보세요.

### 리다이렉트하기

서버 함수에서 작업을 마친 후 사용자를 다른 페이지로 이동시키고 싶을 때는 어떻게 할까요? Next.js에서는 `redirect` 함수를 활용하면 쉽게 처리할 수 있답니다.

예를 들어, 글 작성 후 게시물 목록 페이지로 이동시키고 싶을 때:

```js
import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  'use server'
  
  // 데이터 생성 로직
  // ...
  
  // 작업 후 /posts 페이지로 리다이렉트
  redirect('/posts')
}
```

`redirect` 함수를 호출하면, 클라이언트가 자동으로 지정한 경로로 이동하게 됩니다. 이 방법 덕분에 별도의 클라이언트 사이드 코드 없이도 깔끔한 흐름 제어가 가능해요.

---

이처럼 Next.js의 Server Function 내에서 캐시 재검증과 리다이렉트를 함께 활용하면, 데이터 일관성을 유지하면서 사용자 경험도 한층 좋아지니 꼭 알아두세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

업데이트 작업을 수행한 후에 사용자를 다른 페이지로 이동시키고 싶을 때가 있죠? 그럴 때는 Next.js의 Server Function 안에서 `redirect` 함수를 사용할 수 있어요.

아래 예시 코드를 한 번 볼게요!

```js
'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  // 데이터 업데이트 작업 수행
  // ...
  
  // 업데이트 후 /posts 페이지로 리디렉션
  redirect('/posts')
}
```

여기서 포인트는, `redirect`가 호출되면 그 즉시 클라이언트에게 지정한 URL로 이동하라고 지시한다는 점이에요. 그래서 서버 함수 내에서 업데이트가 끝난 뒤에 자연스럽게 다른 페이지로 사용자를 안내할 수 있죠.

또 한 가지 팁! `redirect`를 사용할 때, 이 함수는 호출과 동시에 훅을 멈추고 이동을 처리하기 때문에 그 이후 코드는 실행되지 않는다는 점 기억해주세요. 만약 안전하게 특정 조건에서만 리디렉션을 하고 싶다면, 조건문 안에 넣어서 사용하면 돼요.

요약하자면, Next.js 13 이상의 서버 함수에서 업데이트 후 바로 페이지 전환을 원할 땐 `redirect`를 활용해보세요. 페이지 새로고침 없이 부드럽게 이동할 수 있어서 사용자 경험도 좋아진답니다!

nextjs 15 서버 컴포넌트에서 데이터 업데이트 하는 방법 

Next.js 15에서 데이터 fetch하는 방법

2025년 ReactJS와 Next.js에서 CSS를 가장 쉽게 사용하는 방법

# 이미지와 폰트 최적화하는 방법

Next.js는 이미지와 폰트 최적화를 자동으로 지원해줘요. 이 글에서는 어떻게 이 기능들을 활용할 수 있는지 쉽게 알려드릴게요.

## 이미지 최적화하기

Next.js의 `Image` 컴포넌트는 기본 HTML의 `img` 태그를 확장한 건데요, 여기에는 여러 가지 좋은 점이 있어요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이미지 최적화는 웹 성능 향상에 정말 중요한 부분인데요! Next.js의 `next/image` 컴포넌트를 사용하면 여러 가지 유용한 기능들을 쉽게 활용할 수 있습니다.

- **크기 최적화 (Size optimization)**: 각 디바이스에 맞게 자동으로 적절한 크기의 이미지를 제공해주고, WebP 같은 최신 이미지 포맷도 지원해서 용량을 줄여줘요.
- **시각적 안정성 (Visual stability)**: 이미지가 로딩되는 동안 레이아웃이 흔들리거나 이동하지 않도록 자동으로 잡아줍니다.
- **빠른 페이지 로드 (Faster page loads)**: 뷰포트에 들어올 때까지 이미지를 로드하지 않는 '네이티브 지연 로딩(lazy loading)'을 사용하며, 옵션으로 흐릿한 블러(blur-up) 플레이스홀더도 추가할 수 있어요.
- **유연한 자산 관리 (Asset flexibility)**: 로컬 이미지뿐만 아니라 원격 서버에 있는 이미지도 필요에 따라 크기를 조절하며 불러올 수 있습니다.

시작하려면 `next/image`에서 `Image`를 import하고, 컴포넌트 안에서 이렇게 사용해보세요.

```js
import Image from "next/image";

export default function Page() {
  return <Image src="" alt="" />;
}
```

- `src` 속성에는 로컬 이미지 경로나 외부 URL 모두 들어갈 수 있어요.
- `alt` 속성은 이미지 설명으로 SEO와 접근성에 매우 중요하니 꼭 넣어주세요!

---

### 추가 팁!

- `width`와 `height`를 명시해주면 레이아웃이 더 안정적이라 로딩 시 레이아웃 이동(Cumulative Layout Shift)을 방지할 수 있어요.
- 원격 이미지 URL을 써야 하면 `next.config.js`에 `domains` 설정을 해줘야 로딩이 허용됩니다.

```js
// next.config.js
module.exports = {
  images: {
    domains: ["example.com"], // 허용할 원격 이미지 도메인
  },
};
```

- `placeholder="blur"` 옵션을 주면 흐릿한 이미지가 먼저 보이면서 자연스러운 로딩 경험을 줄 수도 있고, 특히 느린 네트워크에서 효과적입니다.

이렇게만 활용해도 페이지 퍼포먼스와 사용자 경험이 꽤 개선될 거예요! 앞으로 프로젝트에 멋지게 적용해 보세요 :)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 로컬 이미지 사용하기

Next.js에서는 이미지나 폰트 같은 정적 파일을 프로젝트 루트 디렉터리에 `public`이라는 폴더를 만들어서 관리할 수 있어요. 이렇게 `public` 폴더 안에 저장한 파일들은 코드에서 기본 URL(`/`)부터 시작해서 쉽게 불러올 수 있답니다.

예를 들어, `public/assets/img/2025-04-22-Howtooptimizeimagesandfonts_0.png`라는 이미지가 있다면 HTML에서는 이렇게 사용할 수 있어요:

```html
<img src="/TIL/assets/img/2025-04-22-Howtooptimizeimagesandfonts_0.png" />
```

---

더 나아가 Next.js에서 권장하는 방법인 `next/image` 컴포넌트를 써보면 이렇게 됩니다:

```jsx
import Image from "next/image";
import profilePic from "./me.png";

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} 자동으로 제공됨
      // height={500} 자동으로 제공됨
      // blurDataURL="data:..." 자동 제공 (로딩 시 블러 효과)
      // placeholder="blur" // 로딩 중에 흐릿하게 미리보기 하는 옵션 (선택 사항)
    />
  );
}
```

`next/image`를 쓰면 이미지 크기 최적화, 자동 레이지 로딩(lazy loading), 웹 최적화 포맷 변환 등 다양한 이점을 누릴 수 있어서 성능 개선에 특히 좋아요.

> TIP: `next/image`는 이미지를 직접 `import`로 불러와야 제대로 작동하니, 프로젝트 내 이미지 파일 경로를 정확히 지정해 주세요!  
> 그리고 `public` 폴더 내 이미지 파일을 사용할 땐 `src`에 문자열 경로(`/assets/img/example.png`)를 직접 넣으면 되고, import해서 사용하는 경우는 외부나 프로젝트 내부 파일을 가리킬 때 주로 쓰입니다.

이렇게 하면 로컬 이미지 자원을 깔끔하게 관리하면서 Next.js의 최적화 기능도 빵빵하게 사용할 수 있으니 꼭 활용해보세요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js는 이미지 파일을 가져올 때, 이미지의 고유 너비와 높이를 자동으로 판단해줘요. 이 값을 이용해서 이미지 비율을 정하고, 이미지가 로딩되는 동안 발생할 수 있는 레이아웃 흔들림(Cumulative Layout Shift)을 막아줍니다. 덕분에 사용자 경험이 훨씬 좋아지죠.

### 원격 이미지 사용하기

로컬 이미지뿐만 아니라, 원격 서버에 있는 이미지도 사용할 수 있어요. 이때는 `src` 속성에 이미지 URL을 바로 넣어주면 됩니다.

```js
import Image from "next/image";

export default function Page() {
  return (
    <Image src="https://s3.amazonaws.com/my-bucket/profile.png" alt="Picture of the author" width={500} height={500} />
  );
}
```

> 참고로, 원격 이미지 URL을 사용할 때도 `width`와 `height`를 꼭 명시해주셔야 합니다. 이렇게 하면 Next.js가 이미지 공간을 미리 확보해서 페이지가 흔들리지 않도록 해주거든요.

혹시 원격 이미지 도메인이 반복적으로 쓰인다면, `next.config.js` 파일에서 도메인을 허용해주는 설정도 해주시면 좋아요. 예를 들어:

```js
// next.config.js
module.exports = {
  images: {
    domains: ["s3.amazonaws.com"],
  },
};
```

이 설정을 해줘야 Next.js가 해당 도메인의 이미지를 최적화하고 사용할 수 있으니 꼭 기억하세요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js를 사용할 때, 빌드 과정에서 원격(remote) 이미지 파일에 직접 접근할 수 없기 때문에, 이미지 컴포넌트에 width, height 그리고 선택적으로 blurDataURL 같은 속성들을 직접 지정해줘야 해요. 이 width와 height 정보는 이미지가 로딩되면서 화면이 깜빡이거나 레이아웃이 순간적으로 바뀌는 현상(layout shift)을 막아주고, 올바른 비율(aspect ratio)을 유지하는 데 도움이 되죠.

그리고 원격 서버에서 이미지를 안전하게 불러오려면, next.config.js 파일에서 허용할 원격 이미지 URL 패턴을 정확하게 명시해줘야 해요. 이렇게 구체적으로 지정하는 이유는 보안상 악의적인 URL이 들어오는 걸 막기 위함입니다. 예를 들어 아래와 같이 특정 AWS S3 버킷에서만 이미지를 불러오도록 설정할 수 있어요:

```js
import { NextConfig } from "next";

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "s3.amazonaws.com",
        port: "",
        pathname: "/my-bucket/**",
        search: "",
      },
    ],
  },
};

export default config;
```

위처럼 설정하면 s3.amazonaws.com 도메인의 /my-bucket 경로 밑에 있는 이미지들만 Next.js 이미지 최적화 기능을 통해 불러올 수 있게 돼요.

---

### 추가로 알려드리는 팁!

- 원격 이미지의 크기를 정확히 알기 어렵다면, 개발자 도구나 디자인 툴에서 미리 가로, 세로 크기를 측정해 넣는 걸 추천합니다.
- `blurDataURL` 속성은 낮은 해상도의 이미지 베이스64 데이터를 넣어 이미지가 로딩될 때 부드럽게 보여주는 효과를 줍니다. 사용자 경험을 개선하는 데 특히 유용해요.
- 때로는 이미지를 캐싱하기 위해 CDN을 사용합니다. 이럴 때도 해당 CDN 도메인에 맞게 remotePatterns 설정을 해줘야 하니 참고하세요.

---

## 폰트 최적화하기 (Optimizing Fonts)

Next.js는 기본적으로 디폴트 폰트를 빠르게 로딩하기 위한 몇 가지 기능을 제공하는데요, 웹폰트를 최적화하면 페이지 로딩 속도를 개선하고, 불필요한 폰트 파일 다운로드를 줄일 수 있습니다. 이 주제에 대해서도 곧 상세하게 다뤄볼게요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

next/font 모듈은 폰트를 자동으로 최적화해주고, 외부 네트워크 요청을 없애서 개인정보 보호와 성능을 동시에 잡아줍니다.

이 모듈은 폰트 파일을 자체 호스팅하는 기능도 내장하고 있어요. 덕분에 웹 폰트를 불러올 때 레이아웃이 흔들리는 현상(레이아웃 시프트) 없이 깔끔하게 로딩할 수 있답니다.

사용법도 간단해요! next/font에서 제공하는 `local` 혹은 `google` 폰트 모듈을 불러오고, 필요한 옵션을 주면서 함수를 호출해서 폰트를 적용할 엘리먼트의 `className`에 할당하면 됩니다.

아래는 구체적인 예시 코드인데요, 제가 좀 더 완성된 형태로 정리해봤어요.

```js
// 예를 들어 구글 폰트를 불러올 땐 이렇게!
import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["400", "700"],
  style: ["normal", "italic"],
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body className={roboto.className}>{children}</body>
    </html>
  );
}
```

여기서 `Roboto`는 구글에서 제공하는 대표적인 구글 폰트 중 하나입니다. 옵션으로는 `subsets` (영문 등 문자 범위), `weight` (폰트 굵기), `style` (normal, italic 등)를 지정할 수 있어요.

- **장점!**
  - 폰트가 페이지에서 필요한 부분에만 로딩되어 초기 로딩 속도가 빨라집니다.
  - 폰트를 외부 서버에서 가져오는 대신 자체 서버에서 제공해 개인정보도 안심!
  - CSS에서 자주 발생하는 폰트 관련 CLS (Layout Shift) 문제를 예방할 수 있어요.

간단하게 `next/font`를 사용하는 방법 알려드렸는데, 실제 프로젝트에 도입해 보면 성능 개선이 꽤 느껴진답니다. 혹시 직접 폰트 파일을 프로젝트에 추가해서 쓰고 싶다면 `next/font/local` 모듈을 참고해보세요. `next/font/google`처럼 쓰되, 폰트 파일 경로를 지정해서 불러올 수 있습니다.

새 프로젝트에 폰트 적용 고민 중이라면, 이 방법 꼭 한 번 써보시길 추천드려요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 구글 폰트 자동 호스팅하기

웹사이트에 예쁜 글꼴을 적용할 때 구글 폰트를 많이 사용하시죠? 근데 여러분, 구글 폰트를 그냥 링크 걸어서 쓰면 사용자의 브라우저가 구글 서버에 직접 요청을 보내서 폰트를 가져오거든요. 이러면 약간 속도가 느려질 수도 있고, 개인정보 측면에서 꺼려질 수도 있죠.

그런데 Next.js에서는 구글 폰트를 배포할 때 자동으로 내 서버에서 직접 호스팅해서 폰트를 제공할 수 있어요. 이렇게 하면 사용자가 우리 사이트에 접속할 때 구글 서버로 요청이 나가지 않고, 우리 도메인에서 바로 폰트를 받으니 더 빠르고 깔끔해집니다.

아래처럼 간단하게 `next/font/google`에서 원하는 폰트를 import하고 설정해주면 끝!

```js
import { Geist } from "next/font/google";

const geist = Geist({
  subsets: ["latin"],
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  );
}
```

- `subsets` 옵션은 폰트에서 사용할 문자의 범위를 설정해요. 예를 들어 `latin`은 영어권 문자에 해당하고, 한국어는 `korean` 서브셋을 따로 지원하는 폰트가 많으니 필요하면 추가해주면 됩니다.
- 이렇게 하면 폰트 파일들이 빌드 때 내 사이트에 포함되고, 별도 요청 없이 바로 렌더링되어 속도도 좋아져요.

참고로, 커스텀 폰트를 쓰거나 구글 폰트 말고 다른 외부 폰트를 사용할 때도 비슷하게 직접 호스팅하는 걸 추천합니다. 사이트 속도도 개선하고, 외부 서버 의존도를 낮출 수 있으니까요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

변수 폰트(variable fonts)를 사용하는 걸 추천해요! 성능도 좋고 유연하게 폰트를 조절할 수 있어서요. 만약 변수 폰트를 쓸 수 없는 상황이라면, 폰트의 굵기(weight)를 꼭 지정해줘야 해요.

예를 들어, Google 폰트인 Roboto를 Next.js에서 사용할 때는 이렇게 작성해요:

```js
import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}
```

위 코드에서 `Roboto`는 변수 폰트로 불러와서, 원하는 굵기나 스타일을 쉽게 조절할 수 있답니다.

---

### 로컬 폰트 사용하는 방법

로컬에 저장된 폰트를 사용하고 싶을 땐 `next/font/local`에서 폰트를 임포트하면 돼요. 그리고 폰트 파일(src)의 경로를 꼭 지정해줘야 해요.

```js
import localFont from "next/font/local";

const myFont = localFont({
  src: "./fonts/MyFont.woff2",
  weight: "400",
  style: "normal",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}
```

여기서 주의할 점은, 로컬 폰트를 쓸 땐 폰트 파일의 형식(woff, woff2, ttf 등)에 따라 브라우저 호환성이 달라질 수 있으니 여러 형식을 같이 넣어주는 것도 좋은 방법이에요.

---

추가로, 변수 폰트를 쓰면 파일 사이즈도 줄일 수 있는데, 왜냐하면 한 파일 내에서 여러 굵기와 스타일을 다룰 수 있기 때문이죠. 기존엔 굵기별로 따로 폰트 파일을 불러와야 했거든요. 그래서 성능 최적화에도 큰 도움이 돼요!

궁금한 점 있으면 댓글로 남겨주세요~



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 `localFont`를 사용해서 로컬 폰트를 불러오는 방법에 대해 이야기해볼게요. 폰트를 프로젝트 안에 직접 넣고 사용할 때 정말 유용한 기능인데요, 예를 들어 아래처럼 간단히 사용할 수 있어요.

```js
import localFont from "next/font/local";

const myFont = localFont({
  src: "./my-font.woff2",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}
```

이 코드의 핵심은 `localFont`가 폰트 파일 경로를 받아서 내부적으로 `@font-face`를 생성해주고, 관련 CSS 클래스를 제공합니다. `myFont.className`을 html 태그에 넣으면 페이지 전체에 해당 폰트가 적용돼요.

그리고 보통 하나의 폰트 패밀리에는 다양한 스타일과 두께가 있기 마련이죠? 예를 들면 일반체, 이탤릭, 굵은 글씨 등등. 이런 경우에는 `src`를 배열 형태로 넘겨서 각각의 스타일과 무게를 지정할 수 있습니다.

```js
const roboto = localFont({
  src: [
    {
      path: "./Roboto-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./Roboto-Italic.woff2",
      weight: "400",
      style: "italic",
    },
    {
      path: "./Roboto-Bold.woff2",
      weight: "700",
      style: "normal",
    },
    {
      path: "./Roboto-BoldItalic.woff2",
      weight: "700",
      style: "italic",
    },
  ],
});
```

이렇게 하면 폰트를 사용할 때 보통 CSS에서 하는 `font-weight`, `font-style` 같은 속성들도 그대로 적용되니 굉장히 편리해요. 페이지에서 `<p style={{ fontWeight: '700', fontStyle: 'italic' }}>` 이런 식으로 쓰면 `Roboto-BoldItalic.woff2`가 적용되는 거죠.

추가 팁으로, 이 방법은 폰트 파일을 직접 관리하기 때문에 구글 폰트 CDN과 달리 네트워크 지연이나 외부 서비스 의존이 없어서 성능 면에서도 좋고, 개인정보 보호에도 유리하답니다!

### 요약

| 특징                                 | 설명                                              |
| ------------------------------------ | ------------------------------------------------- |
| `localFont` 사용법                   | 폰트를 로컬에서 직접 불러옴                       |
| 단일 파일 폰트 지정                  | `src`에 한 개의 폰트 파일 경로 지정               |
| 여러 스타일/두께 폰트 지정           | `src`를 배열로 주고 각각의 `weight`, `style` 지정 |
| 자동으로 클래스 및 `@font-face` 생성 | 폰트를 클래스 이름으로 쉽게 적용 가능             |
| 성능 및 개인정보 보호                | 외부 호출 없이 빠르고 안전함                      |

Next.js 프로젝트에서 폰트를 더 세밀하게 컨트롤하고 싶다면, 이렇게 `localFont` 사용을 적극 추천해요!

Nextjs 15에서 이미지와 폰트 최적화하는 방법

# 레이아웃과 페이지 만드는 방법

Next.js는 파일 시스템 기반 라우팅을 사용해요. 즉, 폴더와 파일 구조를 활용해서 라우트를 정의할 수 있다는 거죠. 이번 글에서는 레이아웃과 페이지를 어떻게 만들고 서로 링크하는지 쉽게 알려드릴게요.

## 페이지 만들기

페이지란 특정 경로에서 렌더링되는 UI를 뜻해요. 페이지를 만들려면 `app` 디렉토리 안에 파일을 추가하고, 그 파일에서 React 컴포넌트를 기본 내보내기(default export) 하면 됩니다. 예를 들어, 인덱스 페이지(`/`)를 만들고 싶으면 아래처럼 하면 돼요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

아래 이미지는 Next.js에서 페이지를 간단하게 만드는 예시 코드와 관련된 내용입니다.

```js
export default function Page() {
  return <h1>Hello Next.js!</h1>;
}
```

위 예시처럼 기본적으로 Next.js에서는 함수를 작성해서 간단한 페이지를 만들 수 있어요.

---

## 레이아웃 만들기 (Creating a layout)

레이아웃(layout)이란 여러 페이지에서 공통으로 쓰이는 UI를 의미해요. 예를 들어 네비게이션 바, 사이드 메뉴, 푸터 같은 부분들이 여기에 해당하겠죠.

Next.js의 장점 중 하나는 네비게이션을 할 때 레이아웃이 다시 렌더링되지 않고, 상태를 유지하며 대화형을 계속 유지한다는 점이에요. 덕분에 페이지가 바뀌어도 빠르고 자연스러운 사용자 경험을 제공할 수 있어요.

> **추가 팁!**  
> 레이아웃을 만들 땐 `app/layout.js` 파일을 활용하면 좋아요. 이 파일에 공통 UI를 정의하면, 그 하위에 있는 모든 페이지에서 레이아웃이 자동으로 적용됩니다. 그래서 중복 코드를 줄이고, 전체 애플리케이션의 구조를 깔끔하게 관리할 수 있답니다.

---

여기까지 Next.js에서 어떻게 간단한 페이지를 만들고, 공통 UI를 위해 레이아웃을 활용하는지 살펴봤어요. 다음에는 레이아웃을 실제로 구현하는 방법에 대해 더 깊게 다뤄볼게요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

리액트에서 레이아웃(Layout)을 정의하는 방법에 대해 이야기해볼게요. 기본적으로 레이아웃 파일에서 React 컴포넌트를 default export 하면 레이아웃으로 사용할 수 있어요. 이 컴포넌트는 꼭 `children` prop을 받아야 하는데요, 이 `children`이 바로 각각의 페이지나 다른 레이아웃이 될 수 있답니다.

예를 들어, `app` 디렉토리 안에 레이아웃 파일을 만들어서, 그 안에 index 페이지를 자식으로 받는 레이아웃을 만들어보는 거죠.

아래 코드를 보면 어떻게 구성되는지 감이 잡히실 거예요.

```jsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* 레이아웃 UI 영역 */}
        {/* 여기에 children을 넣어서 페이지나 중첩된 레이아웃을 렌더링 */}
        <main>{children}</main>
      </body>
    </html>
  );
}
```

이렇게 레이아웃 컴포넌트를 만들면, `DashboardLayout`이 감싸는 모든 페이지는 이 레이아웃 UI 안에 렌더링됩니다. 즉, 공통적으로 적용하고 싶은 UI(헤더, 사이드바, 푸터 등)를 레이아웃 컴포넌트 안에 넣으면 유지보수가 훨씬 편해지죠.

더불어, Next.js 13 이상에서는 `app` 폴더 기반 라우팅 시스템에서 이런 레이아웃 정의가 기본으로 사용되니 꼭 익혀두면 좋아요!

참고로, `children`에 들어가는 값이 또 다른 레이아웃일 수도 있어서, 레이아웃을 중첩해서 사용할 수 있다는 점도 기억해두세요.

필요하다면, 레이아웃에 헤더, 네비게이션 바 등을 넣어 사용자 경험이 일관되게 만들어주는 용도로 아주 유용하답니다!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

위에 나오는 레이아웃을 '루트 레이아웃(root layout)'이라고 부르는데요, 그 이유는 앱 디렉토리의 최상단(루트)에 정의되기 때문이에요. 루트 레이아웃은 앱에 꼭 필요하고, html 태그와 body 태그를 반드시 포함해야 한다는 점도 기억하세요.

## 중첩 네스트드 라우트(Nested Route) 만들기

네스트드 라우트는 여러 URL 세그먼트로 구성된 경로를 의미해요. 쉽게 말해, URL이 여러 부분으로 나뉘어 있는 구조죠. 예를 들어서, `/blog/[slug]` 라우트는 세 개의 세그먼트로 이루어져 있어요:

| 세그먼트 종류 | 설명                                | 예시     |
| ------------- | ----------------------------------- | -------- |
| 루트 세그먼트 | 최상위 경로                         | `/`      |
| 중간 세그먼트 | 중간 디렉토리경로                   | `blog`   |
| 리프 세그먼트 | 마지막 세그먼트(동적 세그먼트 포함) | `[slug]` |

여기서 `[slug]`는 동적 세그먼트를 의미하는데, 예를 들어 특정 블로그 글의 고유 주소 부분을 표현할 때 사용돼요.

추가로, 중첩 라우팅을 활용하면 UI를 더 효율적으로 구성할 수 있어요. 예를 들어 공통 레이아웃을 중간 세그먼트인 `blog` 아래에 두고, 각 글은 그 레이아웃 안에서 화면에 표시하는 식이죠. Next.js나 React 기반 프레임워크에서 이런 네스트드 라우팅을 지원해주니까 활용해보시면 좋아요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 라우트를 어떻게 만들고 관리하는지 간단하게 알려줄게요!

---

### Next.js 라우팅 기본 개념

- **폴더**: URL 경로(segment)를 정의하는 역할을 해요.
- **파일**: 예를 들어 `page.tsx`나 `layout.tsx` 같은 파일은 해당 경로(segment)에 보여질 UI를 담당해요.

---

### 중첩 라우트 만드는 법

중첩 라우트를 만들고 싶으면 폴더 안에 폴더를 계속 넣으면 돼요.

예를 들어, `/blog` 라는 경로를 만들고 싶다고 하면,  
`app` 폴더 안에 `blog`라는 폴더를 만들면 됩니다.

그리고 `/blog` 경로에서 보여줄 페이지를 만들려면, `blog` 폴더 안에 `page.tsx` 파일을 만들어야 해요.  
이 `page.tsx`가 실제로 `/blog` 경로에서 렌더링될 UI를 담당하죠.

---

### 구조 예시

| 경로                | 설명                                  |
| ------------------- | ------------------------------------- |
| `app/blog/`         | `/blog` 경로(라우트)의 폴더           |
| `app/blog/page.tsx` | `/blog` 경로에 보여질 페이지 컴포넌트 |

---

### 추가 꿀팁!

- Next.js 13부터는 `app` 디렉토리 기반의 라우팅이 기본이에요. 이전의 `pages` 폴더 스타일보다 훨씬 직관적이고, 레이아웃 관리도 편해졌어요.
- `layout.tsx` 파일을 같은 위치 혹은 상위 폴더에 두면, 그 경로에 공통으로 적용되는 레이아웃을 만들 수 있답니다.
- 예를 들어, `app/blog/layout.tsx`를 만들면 `/blog` 아래 모든 페이지가 공통 레이아웃을 가지게 되죠.

---

이미지로 보면 이런 느낌이에요!

![폴더 구조와 page.tsx](/TIL/assets/img/2025-04-22-Howtocreatelayoutsandpages_2.png)  
(※ 실제 이미지 주소가 다르다면 알맞게 수정해 주세요.)

---

Next.js로 라우팅 구조 짤 때는 folder = URL segment, 그리고 그 segment에 보여줄 UI는 파일로 관리한다!  
이 공식만 기억하면 중첩 라우팅도 쉽게 할 수 있으니까 꼭 익혀두세요! 😊



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

계속해서 중첩 폴더를 만들어 경로를 중첩해서 관리할 수 있어요. 예를 들어, 블로그 개별 포스트 페이지를 만들고 싶다면 `blog` 폴더 안에 `[slug]`라는 이름의 폴더를 새로 만들고, 그 안에 `page.js` 파일을 추가하면 됩니다.

아래처럼 기본적으로 `generateStaticParams` 함수를 만들어서 어떤 슬러그들이 있을지 미리 정의해줄 수도 있어요.

```js
function generateStaticParams() {
  // 예: 블로그 글 슬러그들을 담아 리턴
  return [{ slug: "my-first-post" }, { slug: "hello-world" }];
}

export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>;
}
```

이런 식으로 슬러그를 동적으로 받아서 각각의 블로그 포스트 페이지를 만들 수 있답니다.

---

📌 여기서 잠깐!  
`[slug]` 폴더명에서 대괄호(`[]`)는 동적 라우트를 의미해요. 즉, URL 경로에 따라 달라지는 부분을 변수처럼 처리한다는 거죠. 예를 들어 `/blog/my-first-post`나 `/blog/hello-world` 같은 주소가 들어오면 각각에 맞는 슬러그 값을 받아 페이지를 렌더링하는 식이에요.

정리하면, 폴더 구조가 URL 구조와 일치하므로 직관적으로 관리하고, 동적 라우팅 덕분에 다양한 경로를 손쉽게 처리할 수 있어요.

이걸 응용하면 포트폴리오, 쇼핑몰 상품 페이지, 유저 프로필 등 여러 상황에 딱 맞는 동적 페이지를 편하게 만들 수 있겠죠? 😄

---

### 추가 팁: `generateStaticParams` 활용하기

- 이 함수는 빌드 시점에 호출되어, 미리 생성할 정적 경로를 알려줍니다.
- 블로그 글처럼 내용이 자주 바뀌지 않는 경우 미리 정적으로 빌드해두면 성능이 엄청 좋아져요.
- 반대로 동적으로 내용을 자주 바꾸는 경우엔 서버 사이드 렌더링이나 ISR(Incremental Static Regeneration) 등의 기법도 고려해보세요!

이상으로 Next.js 앱 라우팅에서 중첩 폴더와 동적 라우트 설정하는 법을 간단히 알아봤어요. 궁금한 점 있으면 언제든 질문 주세요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

폴더 이름을 대괄호([])로 감싸면 예를 들어 [slug]처럼, 이 부분이 동적 라우트 세그먼트(dynamic route segment)가 돼서 데이터 기반으로 여러 페이지를 쉽게 만들어줄 수 있어요. 블로그 포스트나 상품 페이지처럼 같은 구조지만 내용이 다른 여러 페이지를 만들 때 정말 유용하답니다.

## 레이아웃 중첩(Nesting layouts)

기본적으로 폴더 구조에 따라 레이아웃도 중첩돼요. 즉, 부모 레이아웃이 자식 레이아웃을 children 프로퍼티로 감싸는 형태라는 뜻이죠. 이걸 활용해서 특정 라우트(폴더)마다 레이아웃을 따로 지정할 수 있어요.

예를 들어, `/blog` 경로를 위한 레이아웃을 만들고 싶다면 blog 폴더 안에 layout 파일을 추가하면 됩니다. 이렇게 하면 `/blog`와 그 하위 페이지에만 적용되는 레이아웃을 별도로 관리할 수 있어서 더 체계적이고 유지보수도 쉬워져요.

더 덧붙이자면, 이 방식은 여러 페이지의 공통 UI(예: 네비게이션 바, 푸터 등)를 재사용할 때 아주 효과적이에요. 레이아웃을 잘 설계해 놓으면 페이지 개발 속도가 확실히 빨라지고, UI 일관성도 자연스럽게 유지할 수 있답니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

앱을 만들 때 레이아웃을 중첩해서 사용하는 경우가 많아요. 위 코드에서는 `BlogLayout`이라는 컴포넌트를 정의했는데요, 이 컴포넌트가 `children`을 받아서 `<section>` 태그로 감싸고 있죠. 이건 블로그 관련 페이지만 따로 꾸밀 때 유용해요.

예를 들어, 루트 레이아웃인 `app/layout.js`가 전체 앱을 감싸고, 그 안에 `app/blog/layout.js`(즉, 위에서 정의한 `BlogLayout`)가 블로그 관련 페이지를 감싸는 구조라고 생각하면 됩니다. 그리고 실제 블로그 메인 페이지(`app/blog/page.js`)와 개별 포스트 페이지(`app/blog/[slug]/page.js`)가 그 안에 들어가는 식이죠.

이렇게 하면 기본 레이아웃은 유지하면서도, 특정 섹션(여기서는 블로그)만 별도로 스타일이나 구성을 다르게 할 수 있어서 훨씬 관리하기 편해집니다.

---

## 페이지 간 링크 연결하기

페이지들을 만들었으면 이제 서로 연결해줘야겠죠? Next.js에서는 `<Link>` 컴포넌트를 사용해서 페이지 간 이동을 쉽게 할 수 있어요. 예를 들어 블로그 리스트에서 각각의 포스트 페이지로 이동하고 싶을 때 이렇게 할 수 있습니다:

```jsx
import Link from "next/link";

export default function BlogList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}
```

위 예제는 간단한 블로그 리스트 컴포넌트인데요, `posts` 배열을 받아서 각 포스트 제목에 맞게 링크를 걸어줍니다. 이렇게 하면 Next.js가 자동으로 사전 렌더링과 클라이언트 측 네비게이션을 최적화해줘서 사용자 경험이 훨씬 좋아져요.

---

### 팁!

- 중첩 레이아웃을 쓸 때는 각 레이아웃 파일 이름과 위치가 중요해요. 예를 들어 `app/blog/layout.js`는 `/blog` 경로 하위 모든 페이지에 자동으로 적용됩니다.
- 레이아웃 안에 헤더나 푸터를 넣어서 반복되는 UI를 한 번만 작성해도 효율적입니다.
- 링크를 걸 때는 가능한 `next/link`를 써주세요. `<a>` 태그만 쓰면 페이지 전환 시 전체가 새로고침돼서 느릴 수 있어요.

이제 여러분도 레이아웃을 중첩해서 더 구조화된 Next.js 앱을 쉽게 만들 수 있어요! 혹시 더 궁금한 점 있으면 언제든 질문해 주세요~



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 페이지 간 이동을 할 때는 `Link` 컴포넌트를 사용하면 아주 편리해요. `Link`는 HTML의 기본 `a` 태그를 확장한 컴포넌트로, 미리 페이지를 불러오는(prefetching) 기능과 클라이언트 사이드 네비게이션을 지원해줘서 사용자 경험을 훨씬 부드럽게 만들어줍니다.

예를 들어, 블로그 글 목록을 만들고 싶다면, `next/link`에서 `Link`를 임포트(import)한 다음, 각 글의 경로를 `href` 속성에 넘겨주면 돼요.

```js
import Link from "next/link";

export default async function PostList() {
  const posts = await getPosts();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/posts/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}
```

여기서 주목할 점은, `Link` 컴포넌트는 내부적으로 HTML의 `<a>` 태그를 사용하지만, Next.js가 최적화해주는 사전 로딩과 클라이언트 사이드 라우팅 기능을 추가로 제공한다는 것이에요.

> 참고로, Next.js의 공식 문서에서는 페이지 이동 시 `Link`를 쓰는 것을 권장합니다. 하지만 더 세밀한 라우팅 제어가 필요할 때는 `useRouter` 훅을 사용해 프로그래밍 방식으로 라우팅할 수도 있어요.

더불어 `Link` 내부에 `<a>` 태그를 직접 감싸는 예전 방식도 있었는데, Next.js 13버전부터는 `href`를 바로 `Link`에 넘겨주고 텍스트나 요소를 자식으로 넣는 방식이 표준이에요. 혹시 이전 문서를 참고한다면 이 부분 조금 헷갈릴 수 있으니 주의하세요!

간단하게 정리하면:

| 특징                         | 설명                                                   |
| ---------------------------- | ------------------------------------------------------ |
| Link 컴포넌트                | HTML `<a>` 태그에 라우팅 기능이 추가된 컴포넌트        |
| prefetching                  | 화면에 보이기 전에 미리 페이지를 불러와 빠른 이동 지원 |
| 클라이언트 사이드 네비게이션 | 전체 페이지 새로고침 없이 부드럽게 라우팅              |
| useRouter 훅 사용            | 프로그래밍 방식으로 라우팅을 제어할 때 활용 가능       |

이처럼 Next.js에서는 기본적으로 `Link`를 활용해 사용자에게 자연스러운 페이지 전환 경험을 제공하는 게 가장 깔끔한 방법입니다!

Next.js 15에서 레이아웃과 페이지 쉽게 만드는 방법

Next.js 15 프로젝트 폴더 설계 방법

# 새로운 Next.js 프로젝트 설정 방법

## 시스템 요구 사항

시작하기 전에, 시스템이 다음 요구 사항을 충족하는지 확인하세요:

| 요구 사항 | 설명                                 |
| --------- | ------------------------------------ |
| Node.js   | 18.18 버전 이상                      |
| 운영 체제 | macOS, Windows(WSL 포함), 또는 Linux |



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 자동 설치

새로운 Next.js 앱을 가장 빠르게 만드는 방법은 create-next-app을 사용하는 것입니다. 이 도구가 모든 설정을 자동으로 해줍니다. 프로젝트를 생성하려면 다음 명령어를 실행하세요:

```js
npx create-next-app@latest
```

설치 중에 다음과 같은 프롬프트가 나타납니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

| 질문                                                             | 선택지   |
| ---------------------------------------------------------------- | -------- |
| What is your project named?                                      | my-app   |
| Would you like to use TypeScript?                                | No / Yes |
| Would you like to use ESLint?                                    | No / Yes |
| Would you like to use Tailwind CSS?                              | No / Yes |
| Would you like your code inside a `src/` directory?              | No / Yes |
| Would you like to use App Router? (recommended)                  | No / Yes |
| Would you like to use Turbopack for `next dev`?                  | No / Yes |
| Would you like to customize the import alias (`@/*` by default)? | No / Yes |
| What import alias would you like configured?                     | @/\*     |

프로젝트 생성 후, create-next-app이 프로젝트 이름으로 된 폴더를 만들고 필요한 의존성들을 설치해 줍니다.

## 수동 설치

Next.js 앱을 수동으로 새로 만들고 싶다면, 필요한 패키지를 설치하세요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

| 스크립트명 | 설명                                      |
| ---------- | ----------------------------------------- |
| dev        | 개발 서버를 실행합니다.                   |
| build      | 프로덕션용으로 애플리케이션을 빌드합니다. |
| start      | 빌드된 애플리케이션을 실행합니다.         |
| lint       | 코드 린팅을 실행합니다.                   |

위 명령어들은 애플리케이션 개발의 각 단계를 위한 스크립트들이에요. `npm install`로 최신 버전의 Next.js와 React를 설치한 뒤, `package.json`에 이 스크립트들을 추가하면 다양한 개발 작업을 쉽게 실행할 수 있답니다!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- next dev: 개발 서버를 시작합니다.
- next build: 애플리케이션을 프로덕션용으로 빌드합니다.
- next start: 프로덕션 서버를 시작합니다.
- next lint: ESLint를 실행합니다.

### 앱 디렉토리 만들기

Next.js는 파일 시스템 라우팅을 사용해, 애플리케이션의 라우트가 파일 구조에 따라 결정됩니다.

`app` 폴더를 만드세요. 그리고 `app` 폴더 안에 `layout.tsx` 파일을 만드세요. 이 파일이 루트 레이아웃이고 꼭 필요하며, `html`과 `body` 태그를 포함해야 합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

홈 페이지 app/page.tsx를 다음과 같이 초기 콘텐츠와 함께 만들어 주세요:

```js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}
```

사용자가 애플리케이션의 루트 경로 (/)를 방문하면 layout.tsx와 page.tsx 두 파일이 모두 렌더링됩니다.

| 파일명     | 역할                                       |
| ---------- | ------------------------------------------ |
| layout.tsx | HTML 구조와 공통 레이아웃 정의             |
| page.tsx   | 루트 경로에 표시할 초기 페이지 콘텐츠 제공 |

친절하게 궁금한 점 있으면 언제든지 물어보세요!



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="/TIL/assets/img/2025-04-22-HowtosetupanewNextjsproject_0.png" />

> 알아두면 좋은 점:
> 루트 레이아웃(root layout) 파일을 만들지 않아도, next dev 명령어로 개발 서버를 실행할 때 Next.js가 자동으로 이 파일을 생성해 줍니다.  
> 프로젝트 루트에 src 디렉터리를 만들어 애플리케이션 코드를 구성 파일과 분리해서 관리할 수도 있습니다.

### public 폴더 생성하기 (선택 사항)

프로젝트 루트에 public 폴더를 만들어 이미지, 폰트 등 정적 자산을 저장해 보세요.  
public 폴더 안에 있는 파일들은 기본 URL(/)부터 참조할 수 있습니다.

| 폴더명 | 설명                                       |
| ------ | ------------------------------------------ |
| public | 정적 자산(이미지, 폰트 등)을 저장하는 폴더 |



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

자산은 루트 경로(/)를 사용해 참조할 수 있습니다. 예를 들어, public/profile.png 파일은 /profile.png로 참조할 수 있습니다:

```js
import Image from "next/image";

export default function Page() {
  // 여기에 컴포넌트 내용을 작성하세요
}
```

## 개발 서버 실행하기

- npm run dev 명령어로 개발 서버를 시작하세요.
- http://localhost:3000 에 접속해 애플리케이션을 확인하세요.
- app/page.tsx 파일을 수정하고 저장하면 브라우저에서 변경된 결과를 즉시 볼 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## TypeScript 설정하기

> 최소 TypeScript 버전: v4.5.2

Next.js는 TypeScript를 기본적으로 지원합니다. 프로젝트에 TypeScript를 추가하려면 파일 이름을 `.ts` 또는 `.tsx`로 변경하고 `next dev`를 실행하세요. 그러면 Next.js가 필요한 종속성을 자동으로 설치하고, 권장 설정이 포함된 `tsconfig.json` 파일을 추가합니다.

### IDE 플러그인



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js는 VSCode와 다른 코드 편집기에서 고급 타입 검사와 자동 완성을 사용할 수 있도록 맞춤형 TypeScript 플러그인과 타입 체크 기능을 포함하고 있어요.

VS Code에서 플러그인을 활성화하려면 다음 단계를 따라 주세요:

- 명령 팔레트 열기 (Ctrl/⌘ + Shift + P)
- "TypeScript: Select TypeScript Version" 검색하기
- "Use Workspace Version" 선택하기

| 단계 | 설명                                         |
| ---- | -------------------------------------------- |
| 1    | 명령 팔레트 열기 (Ctrl/⌘ + Shift + P)        |
| 2    | "TypeScript: Select TypeScript Version" 검색 |
| 3    | "Use Workspace Version" 선택                 |

<img src="/TIL/assets/img/2025-04-22-HowtosetupanewNextjsproject_1.png" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

TypeScript 참고 페이지에서 더 많은 정보를 확인할 수 있어요.

## ESLint 설정하기

Next.js는 내장 ESLint를 제공합니다. create-next-app으로 새 프로젝트를 만들면 필요한 패키지를 자동으로 설치하고 적절한 설정을 구성해 줘요.

기존 프로젝트에 ESLint를 수동으로 추가하려면 package.json에 다음과 같이 next lint 스크립트를 추가하면 됩니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
{
  "scripts": {
    "lint": "next lint"
  }
}
```

그런 다음, `npm run lint` 명령어를 실행하면 설치 및 설정 과정을 안내받을 수 있습니다.

```js
npm run lint
```

다음과 같은 프롬프트가 나타날 거예요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

> ? ESLint를 어떻게 설정하시겠어요?
> ❯ 엄격 모드 (권장)
> 기본 모드
> 취소

| 옵션      | 설명                                                                                                                                  |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| 엄격 모드 | Next.js의 기본 ESLint 설정에 더 엄격한 Core Web Vitals 규칙 세트가 포함됩니다. ESLint를 처음 설정하는 개발자에게 권장되는 설정입니다. |
| 기본 모드 | Next.js의 기본 ESLint 설정이 포함됩니다.                                                                                              |
| 취소      | 설정을 건너뜁니다. 직접 커스텀 ESLint 설정을 할 계획이라면 이 옵션을 선택하세요.                                                      |

엄격 모드나 기본 모드를 선택하면, Next.js가 자동으로 eslint와 eslint-config-next를 애플리케이션의 종속성으로 설치하고, 프로젝트 루트에 선택한 설정이 포함된 `.eslintrc.json` 파일을 생성합니다.

이제 `next lint` 명령어를 실행하여 ESLint로 오류를 점검할 수 있습니다. ESLint 설정이 완료되면, 빌드할 때마다 (`next build`) 자동으로 ESLint가 실행됩니다. 오류가 있을 경우 빌드가 실패하며, 경고는 빌드에 영향을 주지 않습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ESLint 플러그인 페이지에서 더 많은 정보를 확인할 수 있어요.

## 절대 경로 및 모듈 경로 별칭 설정하기

Next.js는 tsconfig.json과 jsconfig.json 파일의 "paths"와 "baseUrl" 옵션을 기본적으로 지원해요.

이 옵션들을 통해 프로젝트 디렉터리를 절대 경로로 별칭(alias) 설정할 수 있어서, 모듈을 더 쉽고 깔끔하게 임포트할 수 있답니다. 예를 들어:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

| Before                                                    | After                                              |
| --------------------------------------------------------- | -------------------------------------------------- |
| js<br>import { Button } from '../../../components/button' | js<br>import { Button } from '@/components/button' |

절대 경로(import)를 설정하려면 tsconfig.json 또는 jsconfig.json 파일에 baseUrl 설정 옵션을 추가하세요. 예를 들어:

```js
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}
```

baseUrl 경로를 설정하는 것 외에도 "paths" 옵션을 사용해 모듈 경로에 별칭(alias)을 지정할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

예를 들어, 다음 설정은 @/components/*를 components/*에 매핑합니다:

```js
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}
```

"paths"에 있는 경로들은 모두 baseUrl 위치를 기준으로 한 상대 경로입니다.