# github

github 을 사용하다보면 회사와 개인 계정이 분리되어있어서 사용하는데 번거로운 경우가 있는데요. 
로컬에서 push 하거나 pull할 때 저장소 권한이 없어서 막히는 경우가 있습니다. 


github에 로그인 하는 방법이 https와 ssh 가 있는데 이 중에서 ssh 를 사용하면 편리하게 할 수 있습니다. 
https를 사용하지 않는 이유는 매번 회사 혹은 개인 깃헙 계정으로 웹 사이트 로그인을 해야하기 때문입니다. 

## ssh 자동화 스크립트

ssh 를 이용하여 회사와 개인 깃 계정을 분리하는 자동 스크립트를 만들었습니다. 
아래에 이름 바꾸는 부분만 바꿔주신 후 사용하시면 됩니다. 


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

```sh
#!/bin/bash

# 이름만 바꿔주면 돼요
PERSONAL_EMAIL="you@example.com"
WORK_EMAIL="you@company.com"
PERSONAL_NAME="yourusername"
WORK_NAME="yourcompany"

# 1. SSH 키 생성
echo "🔑 Generating SSH keys..."
ssh-keygen -t ed25519 -C "$PERSONAL_EMAIL" -f ~/.ssh/id_ed25519_personal -N ""
ssh-keygen -t ed25519 -C "$WORK_EMAIL" -f ~/.ssh/id_ed25519_work -N ""

# 2. SSH Config 파일에 Host alias 추가
echo "⚙️ Updating ~/.ssh/config..."
cat <<EOF >> ~/.ssh/config

# Personal GitHub
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal
  IdentitiesOnly yes

# Work GitHub
Host github-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_work
  IdentitiesOnly yes
EOF

# 3. SSH Agent 등록 (macOS/Linux 공통)
echo "🚀 Adding SSH keys to ssh-agent..."
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519_personal
ssh-add ~/.ssh/id_ed25519_work

# 4. 키 확인 안내
echo "📋 Copy the following keys and add them to GitHub:"

echo "🔐 Personal:"
cat ~/.ssh/id_ed25519_personal.pub
echo ""
echo "🔐 Work:"
cat ~/.ssh/id_ed25519_work.pub
echo ""
echo "👉 Add these keys at https://github.com/settings/keys (각 계정마다 로그인해서)"

# 5. gh auth login 안내
echo ""
echo "🧪 Now login to GitHub CLI for each account:"
echo "👉 Personal account: gh auth login --hostname github-personal"
echo "👉 Work account: gh auth login --hostname github-work"

```


### 사용 방법 

1. 실행 권한 부여 

```bash
nano setup_ssh_accounts.sh
# 붙여넣기 후 저장 (Ctrl+O, Enter → Ctrl+X)

```

2. 실행

```bash
./setup_ssh_accounts.sh 
```

3. ssh 생성
위 파일 실행으로 생성된 ssh 키들을 회사와 개인 계정에 접속해 
https://github.com/settings/keys 페이지로 들어가서 new SSH key 를 클릭해 새로운 ssh key를 만들어줍니다. 

![github ssh setting](/TIL/assets/img/2025-04-22-github-ssh-multi-login-0.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>

3. remote 저장소 url 변경

```bash
// 개인 
git remote set-url origin git@github-personal:yourusername/my-repo.git

// 회사
git remote set-url origin git@github-work:yourcompany/project.git
```

이제 각 저장소에서 기존에 https 로 remote 저장소가 연결되어있던 부분들을 ssh 형태의 remote url로 바꿔줍니다. 


4. 확인 

이렇게 한 후에 정상적으로 ssh가 적용되었는지 확인하려면 아래 명령어를 입력합니다. 

```bash
ssh -T git@github.com
```

아래와 같이 나오면 정상 적용된 것입니다. 
만약 Permission denied가 뜬다면 → GitHub와 연결이 안 된 것입니다.

```bash
Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.
```

올바른 키가 등록되어 있는지 확인하려면

```bash
ssh-add -l
```

이 결과에 id_ed25519_personal 또는 id_ed25519_work 가 없으면 아래 명령으로 추가해 주세요:

```bash
ssh-add ~/.ssh/id_ed25519_personal
ssh-add ~/.ssh/id_ed25519_work
```

~/.ssh/config에 alias 설정 제대로 했는지 확인하려면

```bash
cat ~/.ssh/config
```


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

아래처럼 나오면 정상 적용된 것입니다. 

```bash
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal
  IdentitiesOnly yes
```

여기까지하면 회사 계정과 개인 계정을 동시에 사용할 수 있지만 만약 회사가 SSO 로그인을 하도록 설정되어있다면 아래와 같은 에러가 발생합니다. 

```bash
ERROR: The 'organization' organization has enabled or enforced SAML SSO.
To access this repository, you must use the HTTPS remote with a personal access token or SSH with an SSH key and passphrase that has been authorized for this organization.
Visit https://docs.github.com/articles/authenticating-to-a-github-organization-with-saml-single-sign-on/ for more information.

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```


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

이런 경우에는 회사 organization에서 ssh를 승인 해야합니다. 

[https://github.com/settings/keys](https://github.com/settings/keys) 다시 key 페이지로 들어가서 아래 사진의 configure SSO를 클릭한 후 authorize를 눌러서 활성화를 시켜줍니다. 

![github ssh authorize](/TIL/assets/img/2025-04-22-github-ssh-multi-login-1.png)

github 회사 개인 계정 등록해서 동시에 사용하기

Next.js 15에서 Edge Runtime 사용하는 방법



# CLI

Next.js에는 두 가지 커맨드 라인 인터페이스(CLI) 도구가 있어요:

| 도구 이름           | 설명                                                                                              |
|-----------------|-------------------------------------------------------------------------------------------------|
| create-next-app | 기본 템플릿이나 공개된 GitHub 저장소의 예제를 사용해서 빠르게 새로운 Next.js 애플리케이션을 만들 수 있어요.      |
| next            | Next.js 개발 서버를 실행하거나, 애플리케이션을 빌드하는 등 다양한 작업을 할 때 사용돼요.                          |

조금 더 풀어서 설명하자면, `create-next-app`은 Next.js 프로젝트를 시작할 때 아주 유용해요. 여러 설정을 신경 쓸 필요 없이 명령 한 줄로 기본 뼈대를 뚝딱 만들어 주니까요. 반면에 `next` 명령어는 개발하면서 서버를 실행하거나 실제 배포용 빌드하는 등 프로젝트의 생명주기를 관리하는 데 사용돼요.

개발자라면 이 두 가지 CLI 명령어는 Next.js 작업에서 꼭 익숙해져야 할 기본 도구라고 할 수 있죠. 다음 글에서는 이 CLI들을 실제로 어떻게 쓰는지, 또 숨겨진 팁들도 알려드릴게요!

nextjs CLI(Command Line Interface)도구 사용하기

# create-next-app

Next.js로 새로운 프로젝트를 시작할 때 가장 간편한 방법 중 하나가 바로 create-next-app CLI를 사용하는 거예요. 이 도구는 기본 템플릿이나 GitHub에 공개된 여러 예제들을 바탕으로 새로운 Next.js 애플리케이션을 빠르게 만들어 줍니다.

### 기본 사용법

터미널에서 아래 명령어를 입력하면 돼요:

```bash
npx create-next-app@latest [프로젝트명] [옵션]
```

예를 들어, `my-next-app`이라는 이름의 프로젝트를 만들고 싶다면:

```bash
npx create-next-app@latest my-next-app
```

이렇게 입력만 하면 Next.js 환경이 자동으로 세팅되고, 곧바로 개발을 시작할 수 있어요.

---

### 추가 팁!

- **다양한 템플릿 사용 가능**  
  기본 템플릿뿐 아니라 Next.js 공식 GitHub 예제들을 템플릿으로 사용할 수 있어요. 예를 들어, `with-tailwindcss` 템플릿을 쓰고 싶다면 다음과 같이 명령어를 입력하면 됩니다:

  bash
  npx create-next-app@latest my-next-app --example with-tailwindcss
  

- **TypeScript 프로젝트 생성**  
  기본 JavaScript가 아니라 TypeScript 프로젝트를 만들고 싶을 때도 옵션 하나로 해결돼요:

  bash
  npx create-next-app@latest my-next-app --typescript
  

- **npm, yarn, pnpm 선택 가능**  
  프로젝트 생성 시 사용할 패키지 매니저를 직접 지정할 수도 있어요:

  bash
  npx create-next-app@latest my-next-app --use-npm
  

---

create-next-app 덕분에 복잡한 설정 없이 바로 Next.js 개발환경을 만들어 볼 수 있어서 미리 환경을 고민하는 시간을 줄여준답니다. 아직 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>

## 참고 자료

아래에 사용할 수 있는 옵션들이 정리되어 있어요:

| 옵션 | 설명 |
| --- | --- |
| `-h` 또는 `--help` | 사용 가능한 모든 옵션을 보여 줍니다 |
| `-v` 또는 `--version` | 버전 번호를 출력합니다 |
| `--no-*` | 기본 옵션을 반대로 설정합니다. 예: `--no-eslint` (ESLint 비활성화) |
| `--ts` 또는 `--typescript` | TypeScript 프로젝트로 초기화 (기본값) |
| `--js` 또는 `--javascript` | JavaScript 프로젝트로 초기화 |
| `--tailwind` | Tailwind CSS 설정으로 초기화 (기본값) |
| `--eslint` | ESLint 설정으로 초기화 |
| `--app` | App Router 프로젝트로 초기화 |
| `--api` | 라우트 핸들러만 포함하는 프로젝트 초기화 |
| `--src-dir` | `src/` 디렉토리 내부에서 초기화 |
| `--turbopack` | 개발용으로 기본 Turbopack 활성화 |
| `--import-alias <별칭>` | import 별칭 지정 (기본값은 `"@/*"`) |
| `--empty` | 빈 프로젝트로 초기화 |
| `--use-npm` | npm으로 부트스트랩을 명시적으로 실행 |
| `--use-pnpm` | pnpm으로 부트스트랩을 명시적으로 실행 |
| `--use-yarn` | Yarn으로 부트스트랩을 명시적으로 실행 |
| `--use-bun` | Bun으로 부트스트랩을 명시적으로 실행 |
| `-e` 또는 `--example [이름] [깃허브-URL]` | 예제 프로젝트로 부트스트랩 |
| `--example-path <예제-경로>` | 예제 프로젝트 경로를 별도로 지정 |
| `--reset-preferences` | 저장된 환경설정을 초기화 |
| `--skip-install` | 패키지 설치를 건너뜀 |
| `--yes` | 이전 환경설정이나 기본값을 모든 옵션에 사용 |

---

### 조금 더 알아보기!

- `--no-eslint` 처럼 `--no-` 접두어를 붙이면 기본적으로 활성화된 설정을 끌 수 있다는 점이 유용해요.
- 패키지 매니저를 직접 지정하는 옵션 (`--use-npm` 등)을 잘 활용하면 팀이나 개인 환경에 맞게 부트스트랩 방식을 제어할 수 있습니다.
- `--example` 옵션을 쓰면 이미 만들어진 예제 프로젝트를 기반으로 신속하게 시작할 수 있으니 참고하세요.

이 옵션들을 적절히 조합하면 원하는 환경에 딱 맞는 프로젝트 세팅이 가능합니다. 다음에 예제도 함께 살펴볼게요!


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

### 기본 템플릿으로 새 앱 만들기

기본 템플릿을 사용해서 새 앱을 만들고 싶다면, 터미널에 아래 명령어를 입력해 주세요:

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

이후 아래와 같은 질문들이 차례로 나올 거예요:

| 질문 내용                    | 설명                                   |
|-----------------------------|------------------------------------|
| 프로젝트 이름을 어떻게 할까요?   | 새로 만들 앱의 이름을 정합니다.                |
| TypeScript를 사용할 건가요?      | TypeScript 사용 여부를 묻습니다.                  |
| ESLint를 설정하겠어요?          | 코드 품질을 유지하기 위해 ESLint 설정 여부를 물어봐요.       |
| Tailwind CSS를 추가할까요?      | 스타일링에 Tailwind CSS를 넣을지 선택합니다.           |
| `src/` 디렉터리를 사용할까요?   | 소스 코드가 들어갈 디렉터리 구조를 `src/`로 할지 묻습니다. |
| 테스트 라이브러리 설정할까요?    | Jest 등 테스트 도구 설정 여부를 확인해요.             |
| Git 저장소를 초기화할까요?       | 새 프로젝트에 Git 저장소를 초기화할지 묻습니다.          |

이렇게 여러 가지 옵션을 선택한 후에, Next.js 프로젝트가 자동으로 세팅되어 바로 개발을 시작할 수 있게 됩니다.

---

> 참고로, 선택 항목들은 프로젝트 성격에 따라 다르게 설정하면 좋아요. 예를 들어 TypeScript를 쓰면 안정성이 높아지고, Tailwind CSS는 빠른 스타일링에 도움을 주죠. 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>

앞으로 Next.js 프로젝트를 시작할 때, 아래와 같은 질문들을 만나게 될 거예요. 이 질문들에 답하면 여러분 취향대로 딱 맞는 프로젝트 세팅이 자동으로 만들어집니다!

```js
프로젝트 이름이 뭐에요?  my-app
TypeScript를 사용하시겠어요?  아니오 / 예
ESLint를 함께 쓰시겠어요?  아니오 / 예
Tailwind CSS를 넣을까요?  아니오 / 예
코드를 `src/` 폴더 안에 넣을까요?  아니오 / 예
App Router를 사용하실래요? (추천)  아니오 / 예
next dev 명령어에 Turbopack을 쓸까요?  아니오 / 예
import alias를 커스터마이징 하실래요? (`@/*`가 기본값이에요)  아니오 / 예
```

이렇게 질문에 답변하고 나면, 내가 원하는 설정이 반영된 새 프로젝트가 뚝딱 생성됩니다. 정말 편하죠?

---

### 공식 Next.js 예제를 기반으로 새 앱 만들기

Next.js에서 제공하는 공식 예제를 쓰고 싶다면 `--example` 플래그를 사용하시면 돼요. 예를 들어서:

```bash
npx create-next-app@latest --example with-tailwindcss my-app
```

위명령은 Tailwind CSS가 미리 세팅된 예제로 프로젝트를 만들어줘요. 공식 문서나 GitHub에 다양한 예제가 준비되어 있으니 내 프로젝트에 꼭 맞는 템플릿을 찾아 활용해보세요.

---

추가 팁을 드리자면, `App Router`는 Next.js 13에서 도입된 최신 라우팅 방식인데요. 기존의 `pages` 폴더 기반 라우팅과 다르게 훨씬 직관적이고, 서버 컴포넌트라는 개념 덕분에 퍼포먼스도 좋아졌어요. 가능하다면 꼭 사용해 보시길 추천합니다!

그리고 `Turbopack`은 Next.js의 차세대 번들러로, webpack 보다 훨씬 빠르게 빌드해준답니다. 아직 실험적인 기능이라 큰 프로젝트에서는 조금 더 지켜보는 게 좋지만, 작은 프로젝트나 개발환경에서는 꽤 유용해요.

필요하다면 나중에 설정을 바꾸는 것도 어렵지 않으니 너무 걱정 마시고, 편한 방향으로 선택해보세요!


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

```bash
npx create-next-app@latest --example [example-name] [your-project-name]
```

이 명령어는 Next.js 공식 저장소에 있는 다양한 예제 중 하나를 골라 새로운 프로젝트를 만들 때 사용해요. 예제 이름([example-name])을 넣고, 프로젝트 이름([your-project-name])도 같이 정해주면 끝!

### Next.js 공식 예제 리스트 보기

Next.js 깃허브 저장소에 가면, 사용할 수 있는 예제들과 그 설정 방법이 잘 정리되어 있으니 참고하시면 좋아요.

### 공개된 깃허브 예제로 만들기

만약 Next.js 공식 예제뿐만 아니라, 깃허브에 공개된 다른 예제를 가져와서 프로젝트를 만들고 싶다면, `--example` 옵션에 깃허브 저장소 URL을 넣어주면 돼요.

예를 들어:
```bash
npx create-next-app@latest --example https://github.com/vercel/next.js/tree/canary/examples/with-redux my-redux-app
```
위 명령어는 Next.js 공식 깃허브 저장소 중 "with-redux" 예제를 다운로드해서 `my-redux-app`이라는 이름으로 프로젝트를 생성해줍니다.

---

제가 한 가지 팁을 더 드리자면, 이렇게 예제로 시작하면 기본 구축된 구조를 한눈에 보고 바로 개발에 돌입할 수 있어서 꽤 편리해요. 특히 Next.js에는 다양한 상황별 예제가 많으니, 내가 만들고 싶은 기능과 비슷한 걸 먼저 선택해서 로드맵을 짜보는 건 어떨까요? 예제를 활용하면 처음부터 코드를 직접 작성하는 부담도 줄어들고, 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 프로젝트를 깔끔하게 시작하고 싶을 때 공식 템플릿이나 다른 깃허브 예제 레포를 바로 가져오는 방법이 있는데, 바로 `create-next-app` 명령어를 활용하는 거예요.

```bash
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]
```

이 명령어를 풀어보자면,

- `npx create-next-app@latest` : 최신 버전의 `create-next-app`을 실행하는 거고,
- `--example "https://github.com/.../"` : 내가 원하는 예제 템플릿이 있는 깃허브 URL을 직접 지정할 수 있어요.
- `[your-project-name]` : 새로 만들 프로젝트의 폴더 이름이 됩니다.

예를 들어, 누군가가 만든 멋진 Next.js 템플릿이 있다면 그 깃허브 주소를 위 예제 자리에 넣고 프로젝트를 바로 시작할 수 있죠. 덕분에 기본 템플릿부터 내가 원하는 커스텀 구조까지 손쉽게 빠르게 셋업 가능!

추가 팁을 조금 드리자면, 만약 자주 쓰는 예제가 있다면 이렇게 한번 설치해 놓고 그 뒤엔 그냥 `next dev` 해서 바로 개발 스타트할 수 있어서 개발 속도가 꽤 빨라집니다. 또 공식 템플릿 말고 커뮤니티에서 공유하는 여러가지 스타터들이 있으니 여러 가지 테스트 해보면서 맞는 걸 골라보는 것도 좋아요.

요약해서, 직접 깃허브에서 예제를 불러와 손쉽게 Next.js 프로젝트 시작하는 법이니 꼭 기억해두시면 좋아요!

Nextjs 15로 배우는 create-next-app 설치 방법

Next.js 15 CLI 사용하는 방법

Next.js와 React 프로젝트에 ESLint Plugin 추가하는 방법

# webVitalsAttribution

웹 바이탈(Web Vitals) 문제를 디버깅할 때, 문제의 원인을 정확히 파악할 수 있다면 훨씬 도움이 되죠. 예를 들어, Cumulative Layout Shift(CLS) 같은 경우, 가장 큰 레이아웃 이동을 일으킨 최초의 요소가 무엇인지 알고 싶을 때가 있어요. 또는 Largest Contentful Paint(LCP)라면, 페이지에서 LCP에 해당하는 요소가 무엇인지 식별하고 싶을 때가 있죠. 특히 LCP 요소가 이미지인 경우, 이미지 리소스의 URL을 알면 어느 자산을 최적화해야 할지 찾기가 훨씬 수월해집니다.

이렇듯 Web Vitals 점수에 가장 큰 영향을 준 요소를 ‘attribution(기여 요소 파악)’이라고 하는데요, 이 기능을 사용하면 PerformanceEventTiming, PerformanceNavigationTiming, PerformanceResourceTiming 같은 좀 더 상세한 실시간 성능 로그 정보를 얻을 수 있습니다.

참고로 Next.js에서는 attribution 기능이 기본적으로 꺼져 있습니다. 필요할 때 특정 메트릭에 대해 아래처럼 next.config.js 파일에 설정해서 켤 수 있어요.

```js
// next.config.js
module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP', 'FID'], // 원하는 메트릭만 지정 가능합니다.
  },
}
```

---

### 추가 팁

- attribution 기능을 켜면 좀 더 상세한 데이터가 들어오기 때문에 성능 분석에 큰 도움이 되지만, 동시에 약간의 오버헤드가 발생할 수 있으니 개발이나 디버깅 환경에서 주로 사용하는 걸 추천해요.
- 다양한 툴(예: Lighthouse, Chrome DevTools 등)에서도 Web Vitals를 측정할 수 있지만, Next.js와 같은 프레임워크에서 attribution을 활용하면 문제의 근원을 더 빠르게 찾는 데 큰 도움이 됩니다.
- LCP 같은 경우 이미지라면 로딩 최적화(예: webp 변환, 사이즈 조절, lazy loading 등)를 우선 고려해보는 것도 좋겠죠?

웹 바이탈 디버깅을 좀 더 똑똑하게 하는 기본 팁으로 기억해두세요!


<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에서 웹 성능 지표(Web Vitals)를 추적할 때 `experimental.webVitalsAttribution` 옵션을 사용해보셨나요? 

예를 들어, 아래와 같이 `next.config.js` 파일에 설정할 수 있어요:

```js
module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP'],
  },
}
```

이 설정은 CLS(Cumulative Layout Shift)와 LCP(Largest Contentful Paint) 지표에 대한 Attribution(원인 추적)을 활성화합니다. 

참고로, `webVitalsAttribution`에 들어갈 수 있는 값들은 Next.js가 정의한 `NextWebVitalsMetric` 타입에 명시된 모든 웹 바이탈(Web Vitals) 메트릭들이에요. 대표적으로는 다음과 같답니다:

| 메트릭           | 설명                                         |
| ---------------- | -------------------------------------------- |
| CLS              | 누적 레이아웃 이동 (시각적 안정성)            |
| LCP              | 가장 큰 콘텐츠 페인트 (페이지 로딩 성능)       |
| FID              | 첫 입력 지연 (사용자 반응성)                   |
| FCP              | 첫 콘텐츠 페인트 (첫 번째 의미 있는 화면 출력) |
| TTFB             | 첫 바이트까지 시간 (네트워크 지연 측정)        |

이 설정은 아직 'experimental' 단계라서, 지속적으로 업데이트될 수 있다는 점 참고해주세요. 그리고 웹 바이탈 지표 중 어떤 것이 내 앱에 가장 중요한지 고민해보고, 필요한 것만 골라서 추적하는 게 좋아요.

혹시 이 옵션을 활성화하면, Next.js가 어떻게 성능 데이터를 수집하고, 어디에 어떻게 보여주는지 궁금하다면 알려주세요! 다음글에서는 실제 수집된 성능 데이터를 분석하고 최적화하는 방법에 대해 같이 얘기해 볼게요.

webVitalsAttribution을 활용한 웹 성능 지표 측정 및 분석 방법

# 커스텀 Webpack 설정하기

> 참고할 점: Webpack 설정을 변경하는 건 버전 규칙(semver)에 포함되지 않으니, 변경 시에 신중하게 진행하세요!

Next.js에 커스텀 Webpack 설정을 추가하기 전에, 먼저 Next.js가 이미 여러분의 요구사항을 기본적으로 지원하고 있는지 확인해보는 게 좋아요. 기본적으로 다음 기능들은 Next.js에서 지원하고 있습니다:

- CSS 가져오기 (CSS imports)
- CSS 모듈 (CSS modules)
- Sass/SCSS 가져오기 (Sass/SCSS imports)
- Sass/SCSS 모듈 (Sass/SCSS modules)

이 기능들은 Next.js에서 별도의 설정 없이도 바로 사용할 수 있어서, 간단한 스타일링 작업이라면 따로 Webpack 설정을 건드릴 필요가 없답니다.

만약 여러분이 좀 더 특별한 설정이 필요하거나, Next.js가 기본적으로 지원하지 않는 로더(loader)나 플러그인(plugin)을 추가하려는 경우에만 커스텀 Webpack 설정 작업을 하시면 돼요.  

그러니, Webpack 설정을 건드리기 전에 항상 공식 문서나 Next.js의 최신 지원사항을 꼭 먼저 살펴보세요! 그래야 불필요한 고민과 에러를 줄일 수 있습니다.  

추가로, Webpack 설정을 수정할 때는 프로젝트 전체 빌드에 영향을 주기 때문에 꼭 변경사항을 잘 테스트하고, 빌드 속도가 느려지는 부분도 체크해보시는 걸 추천드려요.


<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/mdx` : MDX 파일을 Next.js에서 바로 사용할 수 있게 해줍니다. (즉, Markdown과 JSX를 결합해서 쓸 수 있죠)
- `@next/bundle-analyzer` : 번들 크기를 시각화해줘서 성능 최적화에 도움을 줘요.

그리고 Next.js에서 기본적으로 쓰는 webpack 설정을 내가 원하는 대로 바꾸고 싶다면, `next.config.js` 파일 안에 webpack 설정 확장 함수를 넣으면 돼요. 아래처럼요:

```js
module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // 여기서 config를 원하는 대로 수정하세요

    // 수정한 config를 꼭 리턴해줘야 합니다.
    return config
  },
}
```

위 함수에서 `config`는 현재의 webpack 설정 객체고, 두 번째 인자에는 빌드 과정에 유용한 여러 정보가 담겨 있어요. 예를 들어 개발 모드인지 `dev`를 통해 알 수 있고, 서버사이드인지 `isServer`로 구분할 수도 있죠.

실제로 확장할 때 흔히 하는 작업 예를 들면:

- 특정 로더 추가하기 (예: 이미지, 스타일 등)
- 플러그인 추가하거나 교체하기
- 프로덕션 빌드에서 코드 압축 설정 변경하기 등

꼭 기억할 점은, 함수 마지막에 수정한 config를 반환해야만 원하는 대로 적용된다는 점이에요. 안 그러면 변경 사항이 무시됩니다.

이 부분만 잘 활용해도 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>

webpack 함수는 총 세 번 실행돼요. 서버 쪽에서 두 번(하나는 Node.js, 다른 하나는 Edge 런타임용), 그리고 클라이언트 쪽에서 한 번 이렇게요. 덕분에 isServer 속성을 활용해서 클라이언트와 서버용 webpack 설정을 쉽게 구분할 수 있답니다.

webpack 함수에 전달되는 두 번째 인자는 여러 정보들을 담은 객체인데, 주요 속성은 다음과 같아요:

| 속성명         | 타입                 | 설명                                                         |
| -------------- | -------------------- | ------------------------------------------------------------ |
| buildId        | String               | 빌드 간 고유 식별자로 사용돼요.                              |
| dev            | Boolean              | 현재 개발 모드인지 여부를 나타내요. (true면 개발 모드)         |
| isServer       | Boolean              | 서버 사이드 컴파일일 경우 true, 클라이언트 사이드 컴파일일 경우 false에요. |
| nextRuntime    | String \| undefined  | 서버 사이드 컴파일에서의 타겟 런타임 - "edge" 또는 "nodejs". 클라이언트 컴파일일 경우 undefined에요. |
| defaultLoaders | Object               | Next.js가 내부적으로 사용하는 기본 로더 설정입니다.          |

특히 defaultLoaders에는 babel 설정 같은 필수 로더들이 들어있어서, 커스텀 환경에서도 Next.js 기본 로더 구성을 참고하면서 손쉽게 webpack 구성을 변경할 수 있어요.

예를 들어, defaultLoaders.babel을 이렇게 사용할 수 있죠:

```js
module.exports = {
  webpack(config, { defaultLoaders }) {
    config.module.rules.push({
      test: /\.js$/,
      use: [
        defaultLoaders.babel, // 기본 babel-loader 설정을 이용
        {
          loader: 'my-custom-loader',
          options: { /* ... */ },
        },
      ],
    });
    return config;
  },
};
```

이처럼 Next.js의 기본 babel 설정을 활용하면, 직접 설정을 완전히 새로 만드는 것보다 훨씬 편리하고 안정적으로 빌드 구성을 확장할 수 있어요. 꼭 필요한 부분만 덧붙이면서 성능도 챙겨보세요!


<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에서 MDX 파일을 처리하기 위한 웹팩 설정 예제를 한번 살펴볼게요. 원본 코드는 @next/mdx 플러그인에서 따온 건데, MDX를 바벨로더와 함께 사용하는 예시입니다.

```js
// babel-loader에 의존하는 로더를 추가하는 예시 설정
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,  // .mdx 확장자를 가진 파일에 적용할 로더
      use: [
        options.defaultLoaders.babel,  // Next.js의 기본 babel 로더 사용
        {
          loader: '@mdx-js/loader',    // MDX 변환 로더 추가
          options: pluginOptions.options,  // 추가 옵션 지정 가능
        },
      ],
    });

    return config;
  },
};
```

여기서 중요한 점은, MDX 파일을 먼저 babel-loader가 변환하고, 그 다음에 @mdx-js/loader가 MDX 문법을 React 컴포넌트 코드로 바꾼다는 거예요.

> 참고로 `pluginOptions.options` 부분이 빠져 있다면, 직접 옵션을 지정하거나 빈 객체 `{}`로 대체해도 됩니다. 환경에 따라 다르니까 참고하세요.

---

#### nextRuntime과 isServer 플래그 관련 팁

그리고 문서 하단에 나온 `nextRuntime`에 관한 내용도 알아둬야 해요.

- `nextRuntime`이 `"edge"`나 `"nodejs"`일 때 `isServer`가 항상 `true`로 설정돼요.
- `"edge"` 런타임은 현재 미들웨어와 서버 컴포넌트(React Server Components)를 엣지 환경에서만 실행할 때 사용합니다.
- 이 부분은 Next.js가 런타임 환경을 구분해서 코드 실행 위치를 판단할 때 중요해요.

실제로 `"edge"` 환경은 지리적으로 가까운 서버에서 빠르게 응답하는 데 강점이 있으니, 미들웨어나 서버 컴포넌트 성능 최적화를 할 때 참고하시면 좋겠죠.

---

### 추가로 알려주는 팁!

Next.js 웹팩 설정 수정할 때는 종종 `.mdx`뿐만 아니라 `.md` 파일도 함께 처리할 일이 많아요. 만약 그런 경우라면 `test` 항목을 `/\.mdx?$/` 식으로 정규식 수정해서 한번에 처리하는 것도 추천합니다. 그리고 MDX를 쓸 때는 `@mdx-js/react` 패키지를 이용해서 MDX 내에서 React 컴포넌트를 자연스럽게 사용할 수 있으니, 프로젝트 요구에 맞춰 한번 적용해보세요.

---

필요하면 더 자세한 설정이나 MDX 활용법도 알려줄 수 있으니, 언제든 질문해 주세요!

2025년 Next.js 15 맞춤형 Webpack 설정하는 방법

# ViewTransition 알아보기

여러분, React에서 새롭게 실험 중인 **View Transitions API** 들어보셨나요? 이 기능은 브라우저의 네이티브 View Transitions API를 활용해 UI 상태 변화 사이를 자연스럽고 부드럽게 연결해주는 마법 같은 기술이에요.

React에서 이걸 쓰려면, `next.config.js` 파일 안에 `viewTransition` 설정을 켜줘야 해요. 설정 방법은 아주 간단해요:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
}

module.exports = nextConfig
```

이렇게 해주면, 여러분의 Next.js 프로젝트에서 이 새 기능을 써볼 수 있답니다.

---

### 추가 팁!

- 이 API는 아직 **실험적(Experimental)** 이기 때문에, 모든 브라우저에서 완벽히 지원되는 것은 아니에요. 크롬 최신 버전에서 주로 잘 작동하니 테스트할 때 참고하세요.
- View Transitions를 잘 활용하면 페이지 이동이나 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>

> 중요한 공지: 이 기능은 Next.js 팀에서 개발하거나 유지보수하는 게 아니에요. React 팀에서 실험적으로 제공하는 API라 아직 초기 단계에 있으며, 실제 프로덕션 환경에선 쓰는 걸 권장하지 않습니다. 구현 방식도 계속 바뀌고 있어서 앞으로 React 버전 업데이트에 따라 동작이 달라질 수 있어요. 이 기능을 사용하려면 이런 실험적인 특성을 충분히 이해하고 있어야 합니다. 자세한 동작 방식은 React 깃허브의 pull request와 관련 토론을 참고하는 게 좋아요.

## 사용법

이 기능을 활성화하면, React에서 `ViewTransition` 컴포넌트를 이렇게 불러올 수 있습니다:

```js
import { unstable_ViewTransition as ViewTransition } from 'react'
```

---

여기서 `unstable_` 접두어는 '실험적'이라는 뜻이에요. 앞으로 API가 바뀔 가능성이 크다는 신호로 생각하시면 됩니다. 개발할 때 참고하되, 안정성을 원한다면 공식적으로 완성된 기능이 나올 때까지 기다리는 게 좋겠죠?

또한, 이 기능은 최신 브라우저에서만 지원될 가능성이 크고, 완성도나 성능 개선이 계속 진행 중이라 실제 프로젝트에 바로 넣기보단 호기심 있게 테스트해보는 용도로 활용해보세요.


<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 소스 코드와 관련 토론을 직접 참고해야 해요.

### 라이브 데모

Next.js 뷰 전환 데모를 확인해보세요.
직접 기능이 어떻게 동작하는지 볼 수 있어요.

이 API가 발전함에 따라 문서도 업데이트되고 더 많은 예제가 공유될 예정이에요.  
하지만 지금 당장은 이 기능을 실제 서비스에 바로 사용하는 건 권장하지 않아요.  
새로운 기능은 언제나 기대되지만, 안정성 면에서 좀 더 검증된 이후에 사용하는 게 안전하니까요!

참고로, 이런 신기능들은 빠르게 변할 수 있으니 GitHub 같은 곳에서 최신 이슈나 PR도 계속 살펴보면 도움이 됩니다.  
그리고 직접 코드를 읽고 테스트해보면서 이해도를 높이는 것도 좋은 방법이에요.

Nextjs 15에서 ViewTransition API로 페이지 전환 자연스럽게 하는 방법



# useLightningcss

이번에 소개할 기능은 **Lightning CSS**를 사용하는 실험적 지원 기능이에요. Lightning CSS는 Rust로 작성된 빠른 CSS 번들러이자 미니파이어(minifier)입니다. 간단히 말해, CSS 파일을 빠르게 묶고 용량을 줄여주는 도구라고 보면 돼요.

Next.js에서 이 기능을 활성화하려면 `next.config.js` 또는 `next.config.ts`에 아래처럼 설정을 추가하면 됩니다:

```js
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    useLightningcss: true,
  },
}

export default nextConfig
```

### Lightning CSS를 사용하면 좋은 점

- **성능 향상**: Rust로 개발되어 속도가 굉장히 빠릅니다. 대용량의 CSS를 처리할 때 특히 유용해요.
- **최소화(minify) 효율 증가**: CSS 용량을 더 작게 만들어 네트워크 전송 시간을 줄여줍니다.
- **미래지향적**: 아직 experimental(실험적) 단계이긴 하지만, Next.js가 공식적으로 지원할 예정이니 앞으로 안정성과 기능이 더 좋아질 거예요.

### 참고할 점

- 실험적 기능이기 때문에, 일부 환경에서 예기치 못한 문제나 호환성 이슈가 발생할 수 있습니다. 프로덕션 환경에 도입하기 전에 충분한 테스트를 하는 걸 권장해요.
- 만약 CSS 처리 과정에 커스텀 설정이 많거나 특정 PostCSS 플러그인을 사용 중이라면, Lightning CSS가 해당 부분을 모두 지원하는지 확인해야 합니다.

앞으로 CSS 번들링 및 최적화에 관심 있다면 Lightning CSS는 꼭 한 번 시도해볼 만한 옵션입니다. 여러분도 Next.js 프로젝트에서 설정해보고 체감 성능 차이를 느껴보세요!

Posts