> 현 회사에서 마이크로 프론트엔드 구조를 적용하기 위해 기존 Next.js 앱에 modoule-federation을 사용하여
> 마이크로 프론트엔드 구조를 구현한 포스팅입니다.

구현한 내용을 보기 전에 간단하게 마이크로 프론트엔드 구조를 왜 쓰는지, 어떤 기법들이 있는지 간략하게 알아보자

## micro-frontend란?

앱에 독립적으로도 구동하고 기능을 추가할 수 있으며 이러한 앱들을 모아 더 큰 하나의 앱을 구성하는 구조다.

### 이걸 왜 쓰나?

서비스가 커지고 회사의 규모가 커지면 서비스에 참여하는 작업자가 많아지고 팀이 세분화되는 경우가 있다.  
이런 경우에 팀별로 특정 모듈만 관리할 수 있다면 좋은데 그렇게 관리를 하기 위해선 서비스도 팀에 맞게 쪼개져 있어야 한다.

그리고 작은 변경 사항에도 영향 범위가 광범위해질 수 있고 예측 범위도 점점 커져서 변경에 대한 리스크가 커지는데  
이때 서비스를 쪼깬다면 변경 사항에 대한 영향 범위를 줄일 수 있고 리스크도 같이 줄일 수 있다.

서비스를 한 개로 관리하는 게 아닌 여러 개의 서비스로 관리를 하는 게 마이크로 프론트엔드다.

> **Micro frontends를 구현하는 방법에는 아래 5가지가 있다.**
>
> 1. Server-side template composition
> 2. Build-time integration
> 3. Run-time integration via iframe
> 4. Run-time integration via Web Components
> 5. **Run-time integration via Javascript**

필자는 Micro frontends 아키텍처를 구현하는 방법 중 javascript를 통한 런타임 통합을 선택했다.

## Javascript를 통한 런타임 통합

![img-1](/post/micro-frontend-by-module-federation/img-1.webp)

개별적으로 빌드하여 배포할 수 있고 Javascript 코드를 비동기 방식으로 불러와서 사용하는 방식이다.

컨테이너 어플리케이션에서 각 서비스를 필요할 때 호출하여 렌더링한다.  
빌드 타임 통합과 달리 독립적으로 서비스를 배포할 수 있고  
런타임에 통적으로 서비스를 로드하여 사용하기 때문에 유연하다.

> [webpack 5-module-federation-plugin](https://webpack.kr/plugins/module-federation-plugin/)은 Javascript를 통해 런타임 통합을 하는 플러그인이다.

## Next.js + module-federation

module federation에서는 다양한 플러그인이 있는데 그 중 next.js를 위한 [@module-federation/nextjs-mf](https://www.npmjs.com/package/@module-federation/nextjs-mf)는 next.js에 module-federation을 사용할 수 있도록 해주는 플러그인이다.

shared property에 기본적인 라이브러리의 설정(next, react 등..)을 singleton으로 제공하도록 미리 설정이 되어있다.

### 설치

일단 라이브러리를 설치해보자.

```shell
npm i @module-federation/nextjs-mf
or
yarn add @module-federation/nextjs-mf
or
pnpm add @module-federation/nextjs-mf
```

### 설정

먼저 host 역할을 하는 container와 remote app인 app1, app2 이렇게 총 3개의 모듈로 나눠서 서비스를 만든다고 가정해보자  
container의 next.config.js 설정부터 해보자

```js
const NextFederationPlugin = require("@module-federation/nextjs-mf");

const nextConfig = {
  // ...
  webpack(config, options) {
    const location = options.isServer ? "ssr" : "chunks";

    config.plugins.push(
      new NextFederationPlugin({
        name: "container",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          app1: `app1@${APP1_URL}/_next/static/${location}/remoteEntry.js`,
          app2: `app2@${APP2_URL}/_next/static/${location}/remoteEntry.js`,
        },
        exposes: {
          // ...
        },
      })
    );

    return config;
  },
};

module.exports = nextConfig;
```

SSR을 위해서 remotes에 server인 경우와 아닐 때의 location 값을 다르게 하여 remoteEntry를 가져오도록 했다.

> module-federation은 container, remote 상관 없이 remotes, exposes가 가능하지만 그렇게 될 경우에
> 복잡도가 증가하므로 최대한 container는 exposes 하지 않고 remote 앱만 가져와서 사용하도록 했다.

remote app의 next.config.js 설정을 봐보자

```js
const NextFederationPlugin = require("@module-federation/nextjs-mf");

const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    const location = options.isServer ? "ssr" : "chunks";

    config.plugins.push(
      new NextFederationPlugin({
        name: "app1",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          container: `container@${CONTAINER_URL}/_next/static/${location}/remoteEntry.js`,
        },
        exposes: {
          "./app1-home": "./src/pages/index.tsx",
          "./app1-detail": "./src/pages/[id]/index.tsx",
        },
      })
    );

    return config;
  },
};

module.exports = nextConfig;
```

remote app에서는 2개의 페이지를 expose했다.

## 적용

이렇게 설정과 페이지를 구성했으니 container에서 app1에 페이지를 가져와서
/app1에는 app1-home 페이지를 보여주고 /app1/[id]에선 app1-detail를 보여주는 작업을 해보자

container에 pages 폴더에 app1/index.tsx를 만들고 아래와 같이 작성한다.

```tsx
import App1Home from "app1/home";

export default function App1Home() {
  return <App1Home />;
}
```

app1에 home으로 expose한 `src/pages/index.tsx`의 내용이 보인다면 성공이다.

#### typescript를 적용하고 싶은 경우

아쉽게도 타입을 직접 지정해줘야 하는 단점이 존재한다. 그래서 필자의 경우 아래와 같이 구성했다.  
컴포넌트의 props와 상세한 타입을 지정해주면 좋겠지만 페이지 단위로 가져오는 경우 굳이 필요없을 것 같아서  
그렇게 상세한 타입은 명시하지 않았다.

```ts
///<reference types="react" />

declare module "app1/*" {
  const Component: any;

  export default Component as any;
}

declare module "app2/*" {
  const Component: any;

  export default Component as any;
}
```

#### App router를 사용하고 싶은 경우

[not supported app routing in @module-federation/nextjs-mf](https://github.com/module-federation/core/issues/1183#issuecomment-2003744775)  
해당 이슈를 보면 이 플러그인을 만든 개발자가 앱 라우터는 지원하지 않는다고 했다.

## 동작 방식

위에서 설명한 것처럼 module-federation은 Javascript를 통한 런타임 통합 기법이다.  
개별적으로 빌드된 자바스크립트 코드를 불러와서 사용하는 방식이라고 했는데 이 부분에 대해서 살펴보자

module-federation이 적용된 곳에서 network 탭을 키고 본다면 더욱 빠르게 이해할 수 있을 것이다.

런타임에서 host인 container에서 remote 앱들의 코드를 사용하려면 빌드 결과물이 필요하고 받아올 수 있어야 한다.  
보면 host인 container에서 remotes 설정을 하였는데 저 경로의 javascript 코드를 불러와서 host에서 원격 모듈을 사용하는 것이다.

![img-2](/post/micro-frontend-by-module-federation/img-2.png)

## 정리

마이크로 프론트엔드 구조의 가장 큰 장점은 앱의 관리를 세분화하여  
제품의 퀄리티를 높힐 수 있다는 점이라고 본다.  
규모가 크고 복잡한 서비스를 개발할 때 A팀이 개발한 기능에  
B팀의 도메인 혹은 기능이 엮이는 상황이 발생하면  
그 코드를 만든 개발자를 찾아가 질문하고 이런 커뮤니케이션 비용이 꽤 많이 든다.

이를 마이크로 프론트엔드 구조를 적용하여 앱을 나누고  
하나의 앱의 수정이 전체 서비스에 영향을 받지 않도록 최소화하여  
변경에 대한 영향 범위를 줄이고 이로 유지보수성을 증가시킬 수 있고  
서비스를 개선하고 퀄리티를 높힐 수 있는 부분이라고 생각한다.

현 회사에서 여러 도메인이 하나의 서비스에 담겨야 하는 걸  
이 구조를 적용하여 개발의 편리성을 증가시켰고 유지보수에 꽤 용이하다고 느꼈다.

조직 변경에 따라 앱의 단위를 바꾸고 유연한 구조를 가진 부분도 큰 장점이라고 생각하기 때문에  
이러한 점이 마음에 든다면 마이크로 프론트엔드를 너무 거창하게 생각하지 말고 일단 적용해봐도 좋을 것 같다.

## 참고

- [martin fowler - micro-frontends](https://martinfowler.com/articles/micro-frontends.html)
- [maxkim - runtime-integration-micro-frontends](https://maxkim-j.github.io/posts/runtime-integration-micro-frontends/)


Next.js 앱에 module-federation을 적용하여 micro-frontend를 구현해보자

Module-Federation를 활용한 Micro-Frontend 구현 (Next.js)

2023년을 보내며 짧게 회고를 작성해봤습니다.

## 회사

3번째 회사인 이 곳에 2022년에 입사해서 지금까지 재직 중인 회사에서 좋은 제품을 만들기 위해서 끈임없이 노력했다.

지금까지는 프론트엔드는 도메인 지식이 백엔드에 비해 많이 필요 없다고 생각했지만 일을 하며 프론트엔드도 충분한 도메인 지식을 갖추고 있어야
원활한 커뮤니케이션과 고객의 니즈를 잘 파악하고 이를 통해 좋은 제품에 한발짝 더 다가설 수 있다는 걸 깨달았다.  
그래서 많은 도메인 지식을 익히려 했고 22년에 비하면 쌓인 도메인 지식을 바탕으로 조금 더 성장했다는 걸 느꼈다.
회사의 디자인 시스템을 고도화하고 문서화를 하며 팀 내부의 개발 생산성을 높혔고 지금까지 없었던 컨벤션도 정립해서 팀의 성장에 신경을 많이 썼다.

제품에 많은 변화가 있어 이를 빠르게 적용해야 했지만 촉박한 일정에 코드 퀄리티에 신경을 많이 쓰지 못한 게 너무 아쉽다.  
하지만 그 촉박한 일정에도 좋은 동료들이 있기에 잘 버틸 수 있었다.

## 전역

![img.png](/post/2023-retrospect/img-1.png)

2020.09에 시작한 산업기능요원이 2023.07.07 드디어 끝이 났다.  
34개월이라는 긴 시간동안 2번의 회사를 옮기고 다양한 사람들과 일을 하며 많은 경험을 쌓으며
그걸 바탕으로 19살 학생 신분으로 취업해서 열심히 일하던 내가 어엿한 직장인으로 성장할 수 있었다.

> 이 글을 빌어 저와 함께 지낸 모든 분들에 감사 인사를 드립니다.

## 개발

업무가 많다는 핑계로 공부를 많이 하지 못했다. 구현을 하는데만 집중해서 아쉬운 코드를 작성했던 적이 더 많았고
왜 그렇게 했을까라는 후회를 굉장히 많이 했다.  
기본에 집중해야 한다는 마음을 놓치지 않고 앞으로 더 많은 공부를 해야 한다는 생각을 가지게 되는 한 해였다.

## 건강

점점 몸의 상태가 예전만큼 건강하다라는 느낌이 안 들었고 특히 갑자기 숨이 안 쉬어진다던가 이런 증상들이 나타나서 당황했던 적도 있었다.  
스트레스를 조금 더 건강하게 잘 풀어나가는 법을 배우고 실천하도록 해야겠다.

## 정리

![img.png](/post/2023-retrospect/img-2.png)_23년 마지막 일몰_

좋은 사람들과 일을 하며 많은 것을 배울 수 있다는 것에 감사함을 느꼈고 더 많이 성장해야겠다.  
아쉬운 점도 많았지만 나름 열심히 살았다.  
2024년에는 더 열심히 살아야겠다.

후회하는 마음이 들때마다 마음속으로 외치는 한 마디를 끝으로 23년도 회고를 마칩니다.

> 후회는 할 수 있지만 당시의 나를 탓하지 말자. 그 때는 내가 할 수 있던 최선의 선택이었다.


2023년엔 어떤 경험을 쌓았을까요

2023 회고

**목차**

- [Utility Types?](#utility-types)
- [`Partial<T>`](#partialt)
- [`Required<T>`](#requiredt)
- [`Readonly<T>`](#readonlyt)
- [`Record<Keys, T>`](#recordkeys-t)
- [`Pick<T, K>`](#pickt-k)
- [`Omit<T, K>`](#omitt-k)
- [`Exclude<T, U>`](#excludet-u)
- [`Extract<T, U>`](#extractt-u)
- [`NonNullable<T>`](#nonnullablet)
- [`Parameters<T>`](#parameterst)
- [`ConstructorParameters<T>`](#constructorparameterst)
- [`ReturnType<T>`](#returntypet)
- [`InstanceType<T>`](#instancetypet)
- [`ThisParameterType<T>`](#thisparametertypet)
- [`OmitThisParameter<T>`](#omitthisparametert)
- [`ThisType<T>`](#thistypet)
- [내장 문자열 조작 타입](#내장-문자열-조작-타입)
  - [`Uppercase<StringType>`](#uppercasestringtype)
  - [`Lowercase<StringType>`](#lowercasestringtype)
  - [`Capitalize<StringType>`](#capitalizestringtype)
  - [`Uncapitalize<StringType>`](#uncapitalizestringtype)
- [참고](#참고)

## Utility Types?

Typescript는 타입 변환을 쉽게 하기 위해 전역적으로 사용이 가능한 내장된 유틸리티 타입을 제공한다.  
하나씩 알아보자

---

## `Partial<T>`

T의 모든 프로퍼티를 선택적으로 만들어준다.  
주어진 타입의 모든 하위 집합 타입을 반환한다.

```ts
type Partial<T> = {
  [P in keyof T]?: T[P];
};
```

**예제**

```ts
interface User {
  name: string;
  age: number;
}

const updateUser = (user: User, fields: Partial<User>) => {
  return { ...user, ...fields };
};

const user = {
  name: "한윤성",
  age: 22,
};

const user2 = updateUser(user, {
  age: 23,
});
```

## `Required<T>`

T의 모든 프로퍼티를 필수로 설정된 타입을 생성한다.  
-> [`Partial<T>`](#partialt)와 반대

```ts
type Required<T> = {
  [P in keyof T]-?: T[P];
};
```

**예제**

```ts
interface Props {
  a?: string;
  b?: number;
}

const props1: Props = {
  a: "string",
};

// Property 'b' is missing in type '{ a: string; }' but required in type 'Required<Props>'
const props2: Required<Props> = {
  a: "string",
};
```

## `Readonly<T>`

T의 모든 프로퍼티를 [읽기 전용(readonly)](https://radlohead.gitbook.io/typescript-deep-dive/type-system/readonly)으로 설정된 타입을 생성한다.  
생성된 타입의 프로퍼티는 재할당될 수 없다.

```ts
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
```

**예제**

```ts
interface User {
  email: string;
  name: string;
}

const user: Readonly<User> = {
  email: "hanyunseong.dev@gmail.com",
  name: "한윤성",
};

// Cannot assign to 'name' because it is a read-only property.
user.name = "루카스";
```

## `Record<Keys, T>`

타입 T의 프로퍼티의 집합 K로 타입을 생성한다.  
타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용할 수 있다.

```ts
type Record<K extends keyof any, T> = {
  [P in K]: T;
};
```

**예제**

```ts
interface AirlineInfo {
  name: string;
}

type Airline = "KE" | "OZ";

const airlineInfo: Record<Airline, AirlineInfo> = {
  KE: {
    name: "대한항공",
  },
  OZ: {
    name: "아시아나항공",
  },
};
```

## `Pick<T, K>`

T에서 프로퍼티 K의 집합을 선택해 타입을 생성한다.

```ts
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
```

**예제**

```ts
interface Todo {
  title: string;
  description: string;
  isCompleted: boolean;
}

type TodoPreview = Pick<Todo, "title" | "isCompleted">;
const todo: TodoPreview = {
  title: "제육볶음 만들기",
  isCompleted: true,
};
```

## `Omit<T, K>`

T에서 모든 프로퍼티를 선택하고 K를 제거한 타입을 생성한다.

```ts
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
```

**예제**

```ts
interface Todo {
  title: string;
  description: string;
  isCompleted: boolean;
}

type TodoPreview = Omit<Todo, "description">;
const todo: TodoPreview = {
  title: "제육볶음 만들기",
  isCompleted: true,
};
```

## `Exclude<T, U>`

U에서 할당할 수 있는 모든 속성을 T에서 제외하여 타입을 생성한다.

```ts
type Exclude<T, U> = T extends U ? never : T;
```

**예제**

```ts
type T0 = Exclude<"a" | "b" | "c", "a">;
// 'b' | 'c'

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
// 'c'

type T2 = Exclude<string | number | (() => void), Function>;
// string | number
```

## `Extract<T, U>`

U에 할당할 수 있는 모든 속성을 T에서 가져와 타입을 생성한다.

```ts
type Extract<T, U> = T extends U ? T : never;
```

**예제**

```ts
type T0 = Extract<"a" | "b" | "c", "a" | "f">;
// 'a'

type T1 = Extract<string | number | (() => void), Function>;
// () => void
```

## `NonNullable<T>`

T에서 null과 undefined를 제외하고 타입을 생성한다.

```ts
type NonNullable<T> = T & {};
```

**예제**

```ts
type T0 = NonNullable<string | null>;
// string

type T1 = NonNullable<number[] | null>;
// number[]
```

## `Parameters<T>`

함수 타입 T의 매개변수에 사용된 타입에서 튜플 타입을 생성한다.

**예제**

```ts
declare function f1(arg: { a: number; b: string }): void;
type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<<T>(arg: T) => T>; // [unknown]
type T4 = Parameters<typeof f1>; // [{ a: number, b: string }]
type T5 = Parameters<any>; // unknown[]
type T6 = Parameters<never>; // never
type T7 = Parameters<string>; // 오류
type T8 = Parameters<Function>; // 오류
```

## `ConstructorParameters<T>`

생성자 함수 타입의 모든 매개변수 타입을 추출할 수 있게 해준다.  
모든 매개변수 타입을 가지는 튜플 타입을 생성한다.

> T가 함수가 아닌 경우 never를 생성한다.

**예제**

```ts
type T0 = ConstructorParameters<ErrorConstructor>; // [(string | undefined)?]
type T1 = ConstructorParameters<FunctionConstructor>; // string[]
type T2 = ConstructorParameters<RegExpConstructor>; // [string, (string | undefined)?]
```

## `ReturnType<T>`

함수 T의 반환 타입으로 구성된 타입을 생성한다.

**예제**

```ts
declare function f1(): { a: number; b: string };
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<typeof f1>; // { a: number, b: string }
type T5 = ReturnType<any>; // any
type T6 = ReturnType<never>; // any
type T7 = ReturnType<string>; // 오류
type T8 = ReturnType<Function>; // 오류
```

## `InstanceType<T>`

생성자 함수 타입 T의 인스턴스 타입으로 구성된 타입을 만든다.

**예제**

```ts
class C {
  x = 0;
  y = 0;
}

type T0 = InstanceType<typeof C>; // C
type T1 = InstanceType<any>; // any
type T2 = InstanceType<never>; // any
type T3 = InstanceType<string>; // 오류
type T4 = InstanceType<Function>; // 오류
```

## `ThisParameterType<T>`

함수 타입의 this 매개변수의 타입, 또는 함수 타입에 this 매개변수가 없을 경우 unknown을 추출한다.

**예제**

```ts
function toHex(this: Number) {
  return this.toString(16);
}

function numberToString(n: ThisParameterType<typeof toHex>) {
  return toHex.apply(n);
}
```

## `OmitThisParameter<T>`

T에서 this 매개변수를 제거한다.

```ts
function toHex(this: Number) {
  return this.toString(16);
}

// `bind`의 반환 타입은 이미 `OmitThisParameter`을 사용하고 있습니다, 이는 단지 예제를 위한 것입니다.
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);

console.log(fiveToHex());
```

## `ThisType<T>`

이 유틸리티 타입은 변형된 타입을 반환하지 않고 대신 문맥적 this 타입에 표시하는 역할을 한다.

> 이 유틸리티를 사용하기 위해선 `--noImplicitThis` 플래그를 사용해야 한다.

```ts
// --noImplicitThis 로 컴파일

type ObjectDescriptor<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // 메서드 안의 'this 타입은 D & M 입니다.
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj = makeObject({
  data: { x: 0, y: 0 },
  methods: {
    moveBy(dx: number, dy: number) {
      this.x += dx; // 강하게 타입이 정해진 this
      this.y += dy; // 강하게 타입이 정해진 this
    },
  },
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);
```

위 예제에서 makeObject의 인자로 넘겨지는 methods 객체는 `ThisType<D & M>`을 포함한 문맥적 타입을 가지고 있다.  
따라서 methods 객체의 메서드 안에 this의 타입은 `{ x: number, y: number } & { moveBy(dx: number, dy: number): number }`다.  
methods 프로퍼티의 타입이 추론의 대상이며 동시에 메서드 안의 this 타입의 출처이다.

## 내장 문자열 조작 타입

문자열 조작을 돕기 위해서 Typescript에는 문자열 조작에 사용할 수 있는 유틸리티 타입들이 있다.

### `Uppercase<StringType>`

문자열의 각 문자를 대문자로 변환한다.

```ts
type Greeting = "Hello, world";
type ShoutyGreeting = Uppercase<Greeting>;
// "HELLO, WORLD"
```

### `Lowercase<StringType>`

문자열의 각 문자를 소문자로 변환한다.

```ts
type Greeting = "Hello, world";
type ShoutyGreeting = Lowercase<Greeting>;
// "hello, world"
```

### `Capitalize<StringType>`

문자열의 첫 번재 문자를 대문자로 변환한다.

```ts
type Greeting = "hello, world";
type ShoutyGreeting = Capitalize<Greeting>;
// "Hello, world"
```

### `Uncapitalize<StringType>`

문자열의 첫 번재 문자를 소문자로 변환한다.

```ts
type Greeting = "Hello, world";
type ShoutyGreeting = Uncapitalize<Greeting>;
// "hello, world"
```

## 참고

- [typescript handbook - ko](https://www.typescriptlang.org/ko/docs/handbook/utility-types.html)
- [typescript-kr - 유틸리티 타입](https://typescript-kr.github.io/pages/utility-types.html)


타입스크립트의 유틸리티 타입에 대해서 알아보자

Typescript - Utility Types

_[이전 글](/post/react-use-msw)에선 React에서 MSW를 사용하는 방법을 알아보았다._  
이번엔 Storybook에서 사용해보자

## 필요한 라이브러리 설치

1. [msw-storybook-addon](https://storybook.js.org/addons/msw-storybook-addon)을 설치해준다.

```shell
npm i -D msw-storybook-addon
```

## Storybook 설정 변경

`preview.js`

```js
import { initialize, mswDecorator } from "msw-storybook-addon";

// Initialize MSW
initialize();

addDecorator(mswDecorator);

/* ... */
```

## 사용해보자

```tsx
import { rest } from "msw";
import { ComponentMeta, Story } from "@storybook/react";
import { ComponentProps } from "react";
import TestComponent from "./TestComponent";

type Type = typeof TestComponent;
export default {
  title: "test/TestComponent",
  component: TestComponent,
} as ComponentMeta<Type>;

type Props = ComponentProps<typeof TestComponent>;

const Template: Story<Props> = (args) => <TestComponent {...args} />;

export const Default = Template.bind({});
Default.args = {};
Default.storyName = "TestComponent";

Default.parameters = {
  msw: {
    handlers: [
      rest.get(`/test/user`, (req, res, ctx) => {
        return res(ctx.json(userMockData));
      }),
    ],
  },
};
```

이렇게 하면 TestComponent에서 `/test/user`를 호출하면 userMockData에 있는 데이터가 나오게 된다. 너무 쉽죠?


Storybook에서 MSW를 사용하여 모킹을 해봅시다.

Storybook에서 MSW를 사용해보자

현업에서 개발을 하다보면 `기획 - API 개발 - 프론트엔드 개발` 순서로 진행하게 된다.  
하지만? 현실은 저 순서가 이상적으로 진행되지 않는다. 백엔드 개발과 프론트엔드 개발이 동시에 이루어지게 되고 프론트엔드는 API에 의존하기 때문에 API가 완성되기까지의 대기하는 시간이 생길 수 밖에 없다.

프론트엔드 개발은 빠르고 많은 기획 변경과 테스트, 기능 개발까지 다양한 업무를 진행하며 완성도에 대한 압박과
스트레스를 받는다. 한정된 기간에 정해진 기능을 구현하려면 개발이 가능한 시간이 많을 수록 완성도가 높아지고 압박감이 조금 사라질 수 있다.

그래서 검색을 하던 중 MSW를 사용해서 Mocking을 하면 좋을 것 같아서 한번 사용해보려한다.

## MSW(Mock Service Worker)란?

[MSW](https://mswjs.io/)는 Service Worker를 사용하여 request를 가로채는 API 모킹 라이브러리다.

![msw.jpeg](/post/react-use-msw/msw.jpeg)

작동되는 원리는

1. 브라우저가 서비스 워커에 요청을 보내고
2. 서비스 워커가 요청을 복사한다.
3. 요청과 일치하는 응답을 생성하고
4. 모의 작성된 응답을 서비스 워커에 보낸다.
5. 브라우저는 모의로 작성된 응답을 제공받는다.

작동하는건 알겠고 그래서 이걸 사용하여 얻는 장점이 무엇일까?

### MSW를 사용하여 얻는 장점

실제 네트워크단에서 모킹이 이루어져서 프론트엔드 코드에선 그냥 API를 호출하는 것과 동일하게 작성할 수 있다.
추후 개발 완료된 실제 API로 빠르게 변경할 수 있다. 그리고 테스트에 용이하다고 한다.

Node 환경에서도 작동하기 때문에 Jest를 이용한 기능 테스트를 할 때 장점이 있다.

그럼 한번 사용을 해보자

## 프로젝트 세팅

pnpm과 vite를 사용해서 리액트 프로젝트를 세팅해보자 매우 간단하다.

```shell
pnpm create vite react-msw-todolist --template react-ts
cd react-msw-todolist
pnpm i
```

> 혹시나 pnpm이 설치가 되어있지 않은 경우 npm, yarn을 사용해도 된다.

그리고 MSW를 설치해보자

```shell
pnpm i -D msw
```

일단 프로젝트 세팅은 다 했다.

## MSW를 실행하기 위해 서비스 워커 설정

`npx msw init <PUBLIC_DIR> --save` 명령어를 사용하여 서비스 워커를 생성할 수 있다.

```shell
npx msw init public/ --save
```

## Mocks 정의, 요청 핸들러 작성

`src/mocks/handlers.ts`

```ts
import { rest } from "msw";
import { Todo } from "../types/todo";

const todoList: Todo[] = [
  {
    id: 1,
    content: "운동하기",
    isCompleted: true,
  },
  {
    id: 2,
    content: "여행 계획 세우기",
    isCompleted: false,
  },
];

export const handlers = [
  rest.get("/todo", (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        todos: todoList,
      })
    );
  }),

  rest.post<Omit<Todo, "id">>("/todo", async (req, res, ctx) => {
    const body: Todo = await req.json();

    if (!body?.content) {
      return res(ctx.status(400));
    }

    todoList.push({
      ...body,
      id: todoList.length + 1,
    });

    return res(ctx.status(200));
  }),
];
```

> 참고로 sessionStorage, localStorage, indexedDB를 사용할 수 있다.

## 서비스 워커 생성

msw에서 제공하는 `setupWork`로 서비스 워커를 생성해준다.

`src/mocks/browser.ts`

```ts
import { setupWorker } from "msw";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);
```

## 서비스 워커 실행

React 기준 `src/main.tsx`에 서비스 워커를 실행하는 코드를 추가해보자

CRA의 경우 아래처럼 하면 서비스 워커가 실행된다.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const isDev = process.env.NODE_ENV === "development";
if (isDev) {
  const { worker } = require("./mocks/browser");
  worker.start();
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

그런데 필자의 경우 vite를 사용하기 때문에 조금 다른 방식을 사용해야 한다.  
그래서 아래와 같은 방식을 사용했다.
[참고 이슈](https://github.com/mswjs/msw/discussions/712)

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const isDev = import.meta.env.DEV;

const prepare = async (): Promise<void> => {
  if (isDev) {
    const { worker } = await import("./mocks/browser");

    worker.start();
  }
};

prepare().then(() => {
  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});
```

실행하면 개발자 도구 콘솔에 아래와 같이 뜬다.
![img-1.png](/post/react-use-msw/img-1.png)

### +추가 Next.js에서 실행
`_app.ts`
```ts
const isDev = process.env.NODE_ENV === 'development';
if (isDev && isClient()) {
  const { worker } = require('../mocks/browser');
  worker.start();
}
```

## 작동 테스트

이제 작동하는지 한번 테스트 해보자  
fetch 함수를 이용해서 요청을 날려보자

```ts
fetch("/todo")
  .then((res) => res.json())
  .then((res) => console.log(res));
```

```txt
[MSW] 00:31:51 GET /todo (200 OK)
```

그럼 이렇게 개발자 도구 콘솔에 찍힌다.

**POST**도 요청해보자

```ts
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const formData = new FormData(event.currentTarget);

  fetch("/todo", {
    method: "post",
    body: JSON.stringify(Object.fromEntries(formData.entries())),
  }).then(() => getTodoList());

  event.currentTarget.reset();
};
```

그리고 개발자 도구 콘솔을 확인하면?

```txt
[MSW] 01:02:26 POST /todo (200 OK)
```

이렇게 잘 동작하는걸 확인할 수 있다.

다음 글에서는 MSW를 이용하여 테스트 코드를 작성해보고 MSW의 다양한 이용 방법에 대해서 알아볼 것이다.

## 참고

- [MSW docs](https://mswjs.io/docs/)
- [MSW로 백앤드 API 모킹하기](https://www.daleseo.com/mock-service-worker/)
- [MSW(Mock Service Worker)로 더욱 생산적인 FE 개발하기](https://hayeondev.gatsbyjs.io/221104-msw/)


MSW (Mock Service Worker)를 사용해서 생산성을 높여보아요

React에서 MSW를 사용해보자

블로그에 댓글 기능이 있으면 좋겠다 싶어서 알아보다가 [utteranc](https://utteranc.es/) 위젯을 발견했다.  
광고도 없고 사용하기 간편해 보여서 이걸 적용하려고 한다.

## 적용

[utteranc](https://utteranc.es/) 여기에서 써있는 순서대로 진행하면 되는데  
필자의 경우 레포를 댓글 전용 레포를 하나 만들어서 그곳으로 댓글 이슈가 생성되게 했다.

블로그 게시물과 이슈 매핑은 첫번째 옵션 **Issue title contains page pathname**로 선택했다.

테마를 선택하고 아래에 이렇게 적용 스크립트가 나와있다.

```html
<script
  src="https://utteranc.es/client.js"
  repo="HANYUNSEONG/hanyunseong-log-v2-comments"
  issue-term="pathname"
  theme="github-light"
  crossorigin="anonymous"
  async
></script>
```

그런데 이걸 그대로 소스에 붙여넣기를 하면 repo 부분에서 오류가 나는걸 볼 수 있을거다.
![img.png](/post/next-js-blog-utteranc/img-1.png)

그래서 찾아보니 [example for react use](https://github.com/utterance/utterances/issues/161) 이슈가 있어서 이 방법으로 적용을 했다.

## `UtterancesComments` 컴포넌트 생성

```tsx
const UtterancesComments = () => {
  return (
    <section
      ref={(elem) => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.crossOrigin = "anonymous";
        scriptElem.setAttribute(
          "repo",
          "HANYUNSEONG/hanyunseong-log-v2-comments"
        );
        scriptElem.setAttribute("issue-term", "pathname");
        scriptElem.setAttribute("label", "blog-comment");
        scriptElem.setAttribute("theme", "github-light");

        elem.appendChild(scriptElem);
      }}
    />
  );
};

export default UtterancesComments;
```

이렇게 컴포넌트로 만들고 사용할 곳에서 import해서 넣어주면 된다.

그런데 Next.js의 경우 일반적인 방법으로 import 할 경우 hydration 오류가 발생해서 dynamic import로 가져왔다.

```tsx
import dynamic from "next/dynamic";
const UtterancesComments = dynamic(
  () => import("@/components/UtterancesComments"),
  {
    ssr: false,
  }
);
```

그리고 원하는 곳에 컴포넌트를 배치해주면?

![img-2.png](/post/next-js-blog-utteranc/img-2.png)

이렇게 댓글을 작성할 수 있고 작성한 댓글을 볼 수 있다!

## 참고

- [utteranc](https://utteranc.es/)
- [example for react use](https://github.com/utterance/utterances/issues/161)


utteranc를 이용해서 내 블로그에 댓글 기능을 추가해보자

Next.js로 만든 블로그에 댓글 기능 추가하기

들어가기에 앞서 도메인을 적용하려면 도메인을 소유하고 있어야 한다.  
필자의 경우 google domain에서 도메인을 구입했고 그 내용은 [여기](./buy-domain-in-google-domain)에서 볼 수 있다.

자 도메인을 구매(소유)를 했으면 등록을 하러 가보자

## vercel 프로젝트 세팅

먼저 vercel에 배포한 프로젝트에 설정 페이지를 들어가서 Domains를 클릭하자  
그럼 아래 화면이 보인다.

![img-1](/post/register-odmain-in-my-blog/img-1.png)

페이지에 있는 입력창에 소유한 도메인을 입력하고 "Add"를 눌러 추가를 하자  
이때 옵션이 3가지가 나오는데 필자는 3번째 옵션을 선택했다.
하단에 있는 "Add"를 한번 더 눌러서 추가한다.

![img-2](/post/register-odmain-in-my-blog/img-2.png)

그럼 이렇게 도메인이 추가가 되었는데 아직 적용이 안 된 모습을 볼 수 있다.  
이제는 도메인을 구매한 곳에서 DNS 설정을 해줘야 하는데 필자는 Google domain에서 구매를 했기 때문에  
Google domain에서 DNS 설정하는 페이지를 들어가준다.

## google domain DNS 설정

구글 도메인에 왼쪽에 `DNS` 메뉴를 클릭한다.

![img-3](/post/register-odmain-in-my-blog/img-3.png)

그럼 DNS를 설정할 수 있는 화면이 보이는데 여기에 입력하는 값은  
아까 vercel에서 등록한 부분을 잘 보면 Type, Name, Value가 보일 것이다.

그 값들을 여기에 넣어주고 저장을 누른다.

그럼 다시 돌아와서 vercel 프로젝트 설정에 Domains를 들어가서 등록한 도메인에 `Refresh`를 눌러보면

![img-4](/post/register-odmain-in-my-blog/img-4.png)

정상적으로 등록이 완료되었다.

이제 추가한 도메인으로 접속하고 정상적으로 페이지가 출력되는지 확인해보면 된다.


vercel에 배포한 내 블로그에 도메인을 적용해보자

## 구글에서 도메인을 구입해보자

블로그에 나만의 도메인을 사용해보고 싶어서 구글에서 도메인을 구입해보려고 한다.  
가보자고

### Google domain 접속

[구글 도메인](https://domains.google.com/)에 접속을 하고 로그인을 한다.  
그럼 왼쪽 메뉴에 "새 도메인 찾기"를 눌러서 원하는 도메인을 찾는다.

필자는 **hanyunseong-log.dev**로 검색을 했는데 연 12달러로 사용할 수 있다고 나왔다.

![img-1](/post/buy-domain-in-google-domain/img-1.png)

이제 장바구니에 담고 구입 단계로 넘어가보자

![img-2](/post/buy-domain-in-google-domain/img-2.png)

연락처 정보를 입력하고 카드 정보를 입력해주자
이때 우편번호는 필자의 경우 배대지 우편 번호를 입력하였다.

결제가 완료되면 아래처럼 화면이 뜬다.

![img-3](/post/buy-domain-in-google-domain/img-3.png)

다음 글에서는 구매한 도메인을 vercel에 배포한 블로그에 적용하는 과정을 적어보도록 하겠다.


Google domain으로 내 도메인 구입하기

구글에서 도메인을 구입해보자

## 가보자고

참 이 바닥은 변화가 왜 이렇게 빠른지 Next.js 13이 나왔다고 해서 살짝 맛을 보려고 한다.

공식문서에 나와있는 변경된 점은 아래와 같다고 한다.

- app 디렉토리(beta): 더 쉽고 빠르며 더 간단한 클라이언트
  - Layout - 불필요한 리렌더링를 방지하고 복잡한 인터페이스를 쉽게 배치함
  - React Server Components - React에 Server Components를 지원
  - Streaming - UI의 렌더링을 점진적으로 렌더링
- turbopack: 최대 700배 빠른 Rust 기반의 webpack 대체
- 새로운 next/image: 더 빨라진 지연 로딩
- 새로운 @next/font(beta): 레이아웃 이동이 없는 자체 호스팅 글꼴
- 개선된 next/link: 간소화된 API

---

## Nextjs 13 설치

최신 버전을 설치하려면 아래처럼 입력하면 된다.

```sh
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
```

## `app` Directory (Beta)

기존 next.js에서는 `pages` 폴더 안에 파일을 생성하면 자동으로 라우팅을 해줬는데 새롭게 등장한 app 디렉토리다. (기존 pages 폴더에 대한 지원은 아직 한다고 함)

> 아직은 프로덕션 환경에서는 사용하지 않는 게 좋다고 한다.

## Layouts

상태를 유지하고 비용이 많이 드는 **리렌더링을 방지**하고 **경로 간에 UI를 쉽게 공유**할 수 있다.

app 내부에 경로를 생성하려면 **page.js**라는 단일 파일이 필요하다.

> 이건 그냥 기존에 `pages/index.js` 파일이랑 같은 역할을 하는 것 같다.

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

실행을 했는데 오류가 발생했다.

```txt
Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config
    at Object.findPagesDir (/Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/lib/find-pages-dir.js:80:19)
    at new DevServer (/Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/server/dev/next-dev-server.js:112:59)
    at NextServer.createServer (/Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/server/next.js:140:20)
    at /Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/server/next.js:155:42
    at async NextServer.prepare (/Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/server/next.js:130:24)
    at async /Users/yunseonghan/Playground/next13-learn/node_modules/next/dist/cli/next-dev.js:521:17
```

app 디렉토리는 아직 **실험적**이기 때문에 사용하려면 next.config.js 구성에 `experimental` 아래에 `appDir: true`를 추가해야 한다고 한다. 그럼 next.config.js를 수정해보자

```jsx
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;
```

설정을 하고 다시 실행하면 정상적으로 켜진다.

그럼 이제 **레이아웃을 정의**해보자

```jsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html>
      <head>
        <title>Next.js 13 learn</title>
      </head>
      <body>
        <header>Header</header>
        <section>{children}</section>
        <footer>Footer</footer>
      </body>
    </html>
  );
}
```

이렇게 레이아웃 파일을 만들고 http://localhost:3000 접속하면 이렇게 뜬다.

![Untitled](/post/learn-nextjs13/Untitled.png)

특정 폴더 안에서만 레이아웃을 지정해보자

먼저 **폴더를 추가해서 경로를 생성**하고 그 아래에 layout 파일을 만들자

```jsx
// app/todo/layout.tsx
export default function TodoLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <div>
      <h1>Todo Layout</h1>
      {children}
    </div>
  );
}
```

그 다음 **page 파일**을 만들자

```jsx
// app/todo/page.tsx
export default function TodoPage() {
  return <div>Todo Page</div>;
}
```

![Untitled](/post/learn-nextjs13/Untitled-1.png)

그럼 이렇게 특정 페이지에서만 레이아웃을 적용할 수 있다. 와!

## Server Components

React에 Server Components를 사용하여 클라이언트에 전송되는 JS의 크기를 줄여서 초기 페이지 로드 속도를 높힌다고 한다.

_이 부분은 [여기](https://beta.nextjs.org/docs/rendering/server-and-client-components)를 들어가서 더 공부해봐야 할 것 같다. 아직 서버 컴포넌트에 대한 이해가 많이 부족하다_

## Streaming

app 디렉토리에 loading.js 라는 파일을 생성하면 렌더링되기 이전에 로딩 화면을 표시할 수 있다.

기존에는 스피너나 다른 로딩 컴포넌트를 사용하여 표현했는데 이젠 로딩 화면을 구현하는데 조금 더 편리해진 것 같다.

[Next.js Data Fetcting](https://beta.nextjs.org/docs/data-fetching/fundamentals)

```jsx
// app/todo/loading.tsx
export default function TodoLoading() {
  return <div>Todo Loading...</div>;
}

// app/todo/page.tsx
import { Suspense } from "react";

type TodoListType = {
  id: number;
  todo: string;
  completed: boolean;
  userId: number;
}[];

async function getData(): Promise<{
  todos: TodoListType;
}> {
  const res = await fetch("https://dummyjson.com/todos");

  return res.json();
}

const TodoList = ({ list }: { list: TodoListType }) => {
  console.log(list);
  return (
    <div>
      <ul>
        {list.map(({ todo, id }) => (
          <p key={id}>{todo}</p>
        ))}
      </ul>
    </div>
  );
};

export default async function TodoPage() {
  const todoList = await getData();

  return (
    <div>
      <Suspense fallback={<p>Loading feed...</p>}>
        <TodoList list={todoList.todos} />
      </Suspense>
    </div>
  );
}
```

<video src="/post/learn-nextjs13/nextjs-13-video-1.mov" controls />

## Support for Data Fetching

데이터를 가져오고 컴포넌트 내부에서 promise를 처리하는 강력하고 새로운 방법

```jsx
// app/page.js
async function getData() {
  const res = await fetch("https://api.example.com/...");
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}
```

기존 fetch web api도 React 및 Next.js에서 확장되어 request를 중복으로 요청하는 걸 자동으로 방지해준다.

[automatically dedupes fetch requests](https://beta.nextjs.org/docs/data-fetching/fundamentals#automatic-fetch-request-deduping)

## turbopack

Rust 기반으로 만들어진 Webpack를 대체할 번들러라고 한다.

- Webpack보다 **700배** 빠른 업데이트
- Vite보다 **10배** 빠른 업데이트
- Webpack보다 **4배** 빠른 콜드 스타트

```jsx
next dev --turbo
```

## next/image

Next.js 13은 **강력한 새 이미지 구성 요소 를** 도입하여 레이아웃 변경 없이 이미지를 쉽게 표시하고 성능 향상을 위해 필요에 따라 파일을 최적화할 수 있다고 한다.

- 더 적은 클라이언트 측 JavaScript 제공
- 더 쉬운 스타일 지정 및 구성
- `alt`기본적으로 더 쉽게 액세스할 수 있는 필수 태그
- 웹 플랫폼과 일치
- 기본 지연 로딩에 수화가 필요하지 않기 때문에 더 빠름

```jsx
import Image from "next/image";
import avatar from "./lee.png";

function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}
```

기존에는 width와 height를 지정해줘야 했지만 이제는 자동으로 제공해주는 것 같다.

> 조금 더 편리해지고 성능도 개선이 된 것 같다.

## @next/font

Next.js 13에는 새로운 글꼴 시스템이 도입되었다.

- 사용자 지정 글꼴을 포함하여 글꼴을 자동으로 최적화
- 개인 정보 보호와 성능 향상을 위해 외부 네트워크 요청을 제거
- 모든 글꼴 파일에 대한 자동 자체 호스팅
- CSS `[size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust)`를 사용하여 레이아웃 이동 없음

새로운 글꼴 시스템을 사용하면 **모든 구글 폰트**를 사용할 수 있다. 빌드 시 자동으로 다운로드 되기 때문에 구글로 따로 요청을 보내지 않는다고 한다.

> 좋다

구글 폰트 사용

```jsx
import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>
```

사용자 지정 글꼴 사용 시

```jsx
import localFont from '@next/font/local';

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

<html className={myFont.className}>
```

## next/link

이제 `<a>` 태그를 수동으로 children에 추가 안 해도 된다고 한다. (자동으로 렌더링 해줌)

> `<Link>`를 사용하면서 항상 `<a>`를 넣어주곤 했는데 조금 불편했었다. 개선되어서 아주 좋음

next/link를 next.js 13로 업데이트 하기

_제공되는 [codemod](https://nextjs.org/docs/advanced-features/codemods)를 실행하면 된다._

```jsx
npx @next/codemod new-link ./pages
```

## OG Image Generation

OG(OpenGraph) Image는 마케팅적으로 많이 사용되고 사용자들의 클릭 참여율을 크게 높힌다.

하지만 이걸 수동으로 작업하면 관리 차원에서 조금 힘든 부분이 있는데 이 점을 보완하기 위해서

Next.js와 원활하게 작동하는 새로운 라이브러리를 만들었다고 한다. `[@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)`

```jsx
// pages/api/og.jsx

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
        }}
      >
        Hello, World!
      </div>
    )
  );
}
```

## Middleware API 업데이트

Next.js 12에서 middleware를 도입하여 라우터의 유연성을 지원했다. 커뮤니티의 의견을 반영하여 몇 가지 추가 사항을 구현했다고 한다.

1. request에 header를 더 쉽게 설정할 수 있다.

```jsx
// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  // request header를 복제하고 새로운 header 'x-version'을 설정한다.
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-version", "13");

  // NextResponse.rewrite에서 request header를 설정할 수 있다.
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });

  // 새로운 response header 'x-version' 설정
  response.headers.set("x-version", "13");
  return response;
}
```

1. `rewrite` 또는 `redirect`를 사용할 필요 없이 미들웨어에서 직접 응답을 제공할 수 있다.

```jsx
// middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { isAuthenticated } from "@lib/auth";

// 미들웨어를 `/api`로 시작하는 경로로 제한
export const config = {
  matcher: "/api/:function*",
};

export function middleware(request: NextRequest) {
  // 요청에 대한 인증 확인
  if (!isAuthenticated(request)) {
    // 오류 메시지를 나타내는 json으로 응답
    return NextResponse.json(
      {
        success: false,
        message: "Auth failed",
      },
      {
        status: 401,
      }
    );
  }
}
```

미들웨어에서 응답을 보내려면 아래의 설정이 필요하다.

```jsx
// next.config.js
const nextConfig = {
  experimental: {
    allowMiddlewareResponseBody: true,
  },
};
```

## 참고

- [next.js blog - next.js 13](https://nextjs.org/blog/next-13)


미루고 미루다가 이제야 하는 Next.js 13 찍먹

nextjs 13에 대해서 알아보자

## 로컬에서 nextjs ssl 환경 세팅

1. [mkcert](https://github.com/FiloSottile/mkcert) 설치

```sh
brew install mkcert
mkcert --install
```

1. localhost에 대한 key, cert 생성

```bash
mkcert localhost
```

1. nextjs 프로젝트에 적용

custom server를 만들어서 적용해야 함

[https://nextjs.org/docs/advanced-features/custom-server](https://nextjs.org/docs/advanced-features/custom-server)

- server.js 작성

```jsx
const http = require("http");
const https = require("https");
const fs = require("fs");
const { parse } = require("url");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const PORT = 3005;
const app = next({ dev, hostname: "localhost", port: PORT });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  http
    .createServer((req, res) => {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    })
    .listen(PORT, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${PORT}`);
    });

  const options = {
    key: fs.readFileSync("./localhost-key.pem"),
    cert: fs.readFileSync("./localhost.pem"),
  };

  https
    .createServer(options, function (req, res) {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      handle(req, res, parsedUrl);
    })
    .listen(PORT + 1, (err) => {
      if (err) throw err;
      console.log(`> Ready on https://localhost:${PORT + 1}`);
    });
});
```

1. 인증서(mkcert) 생성 자동화

init-https.sh 작성

```bash
#!/bin/bash

MKCERT_INSTALLED=$(which mkcert)

if [ -z $MKCERT_INSTALLED ];then
    brew install mkcert
fi

mkcert -install
mkcert localhost
```

1. package.json script 추가

```json
"scripts": {
		// ...
    "ssl-dev": "export PORT=3005 && node server.js",
    "init-https": "sh init-https.sh"
  },
```

1. 실행

```json
npm run init-https
npm run ssl-dev
```

1. 접속

https://localhost:{PORT}


로컬 환경에서 next.js를 SSL로 실행해보자

로컬에서 nextjs ssl 환경 세팅

## Mapped Types - 맵드 타입

### Mapped Types란?

기존 타입을 다른 타입으로 변환하여 사용할 수 있도록 한다.

```tsx
type UserConfig {
  id: string;
  password: string;
  name: string;
}

type EditUserConfig {
  id: boolean;
  password: boolean;
  name: boolean;
}
```

위 예제 코드에서 `UserConfig`는 사용자 설정에 대한 타입을 정의했고 `EditUserConfig`는 사용자 설정에 대한 수정 가능 여부에 대한 타입을 정의했다.
여기서 알 수 있는건 `UserConfig`와 `EditUserConfig`는 암묵적으로 연관 되어있는 타입이라는 것이다.
왜냐? 사용자 설정에 대한 타입이 추가되면 수정 가능 여부에 대한 타입이 추가될 가능성이 있기 때문이다.

예제 코드처럼 작성하면 유지보수성이 매우 떨어질 것이다. `UserConfig`에 추가하면 `EditUserConfig`에도 동일하게 추가를 해줘야 하기 때문에 휴먼 에러가 발생할 수 있다.

아래 예제를 보면서 조금 더 맵드 타입을 이해해보자

---

## 간단한 예제 1

```tsx
type UserConfig {
  id: string;
  password: string;
  name: string;
}

type EditUserConfig = {
  [Property in keyof UserConfig]: boolean
}

const userConfig: UserConfig = {
  id: 'userId',
  password: 'userPassword',
  name: 'user01'
};

const editUserConfig: EditUserConfig = {
  id: false,
  password: true,
  name: true
}
```

이렇게 작성하면 어떤가 `UserConfig`에 다른 속성을 추가해도 이전과 다르게 `EditUserConfig`에 개발자가 직접 추가하지 않아도 된다.

## 간단한 예제 2

```tsx
type LocationCategory = "country" | "area" | "etc";
type LocationValue = {
  [key in Location]: string;
};
```

`LocationCategory`에는 지역 데이터에 해당할 수 있는 카테고리를 정의했다.
그리고 `LocationValue`에는 지역 데이터에 해당할 수 있는 카테고리에 대한 값의 타입을 정의했다.

위 코드에 `[key in Location]`은 javascript의 [for in](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in) 문법과 유사하게 동작한다.
`LocationCategory`에서 정의한 타입을 순회하며 `string`을 값으로 가지는 객체가 된다.

`LocationValue` 타입을 풀어서 보면 아래와 같다고 볼 수 있다.

```tsx
type LocationValue = {
  country: string;
  area: string;
  etc: string;
};
```

## Typescript 내장 유틸리티 타입으로 알아보기

Typescript에 [Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys), [Partial](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype), [Readonly](https://www.typescriptlang.org/docs/handbook/utility-types.html#readonlytype) 3가지 유틸리티 타입으로 Mapped Types를 이해해보자

### Pick

[Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)은 정의되어 있는 타입에서 키를 선택하여 또 다른 타입을 구성할 수 있는 유틸리티 타입이다.

```tsx
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
```

### Partial

[Partial](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)은 정의되어 있는 타입을 모두 다 옵셔널하게 만들어주는 유틸리티 타입이다.

```tsx
type Partial<T> = {
  [P in keyof T]?: T[P];
};
```

### Readonly

[Readonly](https://www.typescriptlang.org/docs/handbook/utility-types.html#readonlytype)는 정의되어 있는 타입을 모두 다 readonly 상태로 만들어주는 유틸리티 타입이다.

```tsx
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
```

---

## 참고

- [타입스크립트 핸드북 - 맵드 타입](https://joshua1988.github.io/ts/usage/mapped-type.html#%EB%A7%B5%EB%93%9C-%ED%83%80%EC%9E%85-%EC%8B%A4%EC%9A%A9-%EC%98%88%EC%A0%9C-2)
- [logrocket - typescript-mapped-types](https://blog.logrocket.com/typescript-mapped-types/)


타입스크립트의 맵드 타입에 대해서 알아보자

Typescript - Mapped types (맵드 타입)

> 💡 이 포스팅에서는 eslint, prettier 등 다른 설정을 하지 않고 `yarn berry`에 대한 자세한 설명을 다루지 않고 yarn berry를 이용한 React 프로젝트 세팅에만 관한 포스팅입니다. 다음엔 yarn berry에 대해 자세히 글을 작성해보도록 하겠습니다.

## 🎯 목표

`yarn berry`를 사용해서 **React** 프로젝트를 세팅한다.

---

## 1️⃣ React 프로젝트 생성

필자는 [vite](https://vitejs-kr.github.io/guide/#trying-vite-online)를 사용해서 프로젝트를 생성했다.

```bash
yarn create vite react-project --template react-ts
cd react-project
```

## 2️⃣ yarn berry으로 변경

Yarn berry는 기존 의존성 관리 시스템과 많이 다르기 때문에 패키지 단위로만 도입할 수 있습니다.

```bash
yarn set version berry
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.3.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in ../.yarn/releases/yarn-3.3.1.cjs
➤ YN0000: Done in 1s 321ms
```

위 명령어가 정상적으로 실행되었으면 생성한 디렉토리 하위에 `.yarnrc.yml` `.yarn/releases/{yarn버전}.cjs` 파일이 있는 걸 확인할 수 있습니다.

### yarn version 확인

yarn berry를 사용하기 때문에 버전을 찍어보면 3으로 시작하는 yarn berry가 적용되었음을 알 수 있습니다.

```bash
yarn --version
3.3.1
```

### yarn berry로 설정 후 패키지 install

명령어를 입력하여 패키지를 install 해줍니다.

→ `yarn install` 혹은 `yarn`을 입력합니다.

```bash
yarn
➤ YN0000: ┌ Resolution step
..
..
➤ YN0000: Done with warnings in 58s 456ms
```

### vscode 세팅

필자는 개발하면서 node_modules에 있는 파일을 열어보는 일이 자주 있다. 보통 타입을 확인하기 위해서 열어보는데 PnP 기능을 통해 의존성을 관리하는 yarn berry로 세팅을 한 경우에는 불가능하다. 왜냐하면 PnP에서는 zip 파일로 의존성이 묶여있어 바로 확인할 수 없다.

그래서 `[ZipFS](https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs)` 확장 프로그램을 이용해 PnP를 사용하는 프로젝트에서 의존성 파일을 기존 방식처럼 열어볼 수 있다.

## TypeScript 관련 구성

```bash
yarn dlx @yarnpkg/sdks vscode
```

---

## 🙋🏻‍♂️ 참고

- [토스 - yarn berry 관련 포스팅](https://toss.tech/article/node-modules-and-yarn-berry)
- [kasterra.github.io - yarn berry로 React.js 프로젝트 시작하기](https://kasterra.github.io/setting-yarn-berry/)


yarn berry로 react 세팅하기

## Docker - no matching manifest for linux/arm64/v8 in the manifest list entries 오류

## 오류 내용

- mac m1을 사용하고 있고 Sentry 이미지를 받으려고 했는데 오류가 발생했다.

```bash
> sentry docker pull sentry
Using default tag: latest

latest: Pulling from library/sentry
**no matching manifest for linux/arm64/v8 in the manifest list entries**
```

## 해결

`pull` 할 때 `--platform linux/amd64`를 뒤에 덧붙인다.

```bash
docker pull sentry --platform linux/amd64
```


Docker - no matching manifest for linux/arm64/v8 in the manifest list entries 오류

## 사전 준비

### 📚 사용한 라이브러리

- next-i18next
- react-i18next
- google-spreadsheet

### ⚙️ next.config

- `next-i18next.config.js` 추가

  ```jsx
  module.exports = {
    i18n: {
      defaultLocale: "ko",
      locales: ["ko", "en"],

      /** true로 설정 시 Next.js에서 자동으로 접속한 사용자의 로케일로 표시함 */
      localeDetection: false,

      pages: {
        "*": ["common"],
      },
    },
  };
  ```

- `next.config.js` 적용

  ```jsx
  const { i18n } = require("./next-i18next.config");

  const nextConfig = {
    // ...
    i18n,
  };
  ```

### 🧲 구글 스프레드 시트에서 번역 파일 가져오기

1. 구글 스프레드 시트 API 인증

[google-spreadsheet - Google Spreadsheets API -- simple interface to read/write data and manage sheets](https://theoephraim.github.io/node-google-spreadsheet/#/getting-started/authentication?id=service-account)

1. 변환 소스 작성

- `getLocaleData.js`

  ```jsx
  const { GoogleSpreadsheet } = require("google-spreadsheet");
  const fs = require("fs");
  const secret = require("config 파일 경로");

  const doc = new GoogleSpreadsheet("sheetId");

  const init = async () => {
    await doc.useServiceAccountAuth({
      client_email: secret.client_email,
      private_key: secret.private_key,
    });
  };

  const read = async () => {
    await doc.loadInfo();
    const sheet = doc.sheetsByIndex[0];

    await sheet.loadHeaderRow();
    const colTitles = sheet.headerValues;
    const rows = await sheet.getRows();

    let result = {};

    rows.map((row) => {
      colTitles.slice(1).forEach((title) => {
        result[title] = result[title] || [];
        const key = row[colTitles[0]];
        result = {
          ...result,
          [title]: {
            ...result[title],
            [key]: row[title] !== "" ? row[title] : undefined,
          },
        };
      });
    });

    return result;
  };

  const write = (data) => {
    Object.keys(data).forEach((key) => {
      fs.writeFile(
        `./public/locales/${key}/common.json`,
        JSON.stringify(data[key], null, 2),
        (err) => {
          if (err) {
            console.log(err);
          }
        }
      );
    });
  };

  init()
    .then(() => read())
    .then((data) => write(data))
    .catch((err) => console.log(err));
  ```

### 👂 next-i18next.d.ts

> 개발 시 편의성 향상을 위한 세팅

- `tsconfig.json` → public 폴더 alias 추가

  ```jsx
  {
    "compilerOptions": {
      // ...
      "typeRoots": ["@types"],
      "paths": {
        "@public/*": ["../public/*"]
      }
    }
   // ...
  }
  ```

- `src/@types/next-i18next.d.ts`

  ```tsx
  import "react-i18next";
  import common from "@public/locales/ko/common.json";

  declare module "react-i18next" {
    interface CustomTypeOptions {
      defaultNS: "common";
      resources: {
        common: typeof common;
      };
    }
  }
  ```

---

## 적용

### 🚀 페이지에 적용

먼저 `_app`을 `appWithTranslation`로 감싸준다.

```jsx
// _app.tsx

...

export default wrapper.withRedux(appWithTranslation(App));
```

그리고 각 페이지에서 `getStaticProps` 혹은 `getServerSideProps`를 추가해준다.

- 자주 사용하는 로직 유틸 함수 생성 → `utils/i18n.ts`

  ```tsx
  import { serverSideTranslations } from "next-i18next/serverSideTranslations";
  import { GetServerSidePropsContext, GetStaticPropsContext } from "next";

  export const makeLocaleProps = async (
    context: GetServerSidePropsContext | GetStaticPropsContext,
    ns = ["common"]
  ) => {
    const { locale } = context;

    if (locale) {
      return {
        ...(await serverSideTranslations(locale, ns)),
      };
    }

    return {};
  };

  export const makeStaticProps =
    (ns = ["common"]) =>
    async (context: GetServerSidePropsContext | GetStaticPropsContext) => {
      return {
        props: {
          ...(await makeLocaleProps(context, ns)),
        },
      };
    };
  ```

- getStaticProps 추가하기

  ```jsx
  // ...

  export const getStaticProps = makeStaticProps();

  export default Page;
  ```

- getServerSideProps 추가하기

  ```jsx
  export async function getServerSideProps(context: GetServerSidePropsContext) {
    const props = {
      ...(await makeLocaleProps(context)),
    };

    // ...

    return {
      props,
    };
  }

  export default Page;
  ```

---

## 사용

```jsx
import { useTranslation } from 'next-i18next';

const Component = () => {
 const { t } = useTranslation();

 return {
  <section>
   <h1>{t("hello")}</h1>
  </section>
 }
}
```

`t` 함수를 사용해서 다국어 기능을 사용할 수 있다.

### 기본

```jsx
// { "안녕하세요": "안녕하세요" }
<p>{t("common:안녕하세요")}</p>
```

### 변수 사용

```jsx
// { "이름": "저는 {{name}}입니다." }
<p>{t("home:이름", { name })}</p>
```

### 컴포넌트 외부에서 사용

```tsx
import { i18n, useTranslation } from "next-i18next";

const outsideI18n = () => {
  return i18n?.t("안녕하세요");
};

const Component = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("안녕하세요")}</h1>
      <h1>{outsideI18n()}</h1>
    </div>
  );
};

export default Component;
```

### 리스트

```jsx
// { "항목": ["오늘 점심은 무엇을 먹을까요", "오늘 저녁을 무엇을 먹을까요?"] }
{
  (t("home:항목", { returnObjects: true }) as [])?.map((elem) => (
    <li key={elem}>{elem}</li>
  ));
}
```

### Trans component

간혹 텍스트 중간에 스타일이 다른 경우 `안녕하세요 {{항공사}}입니다.` 를 처리할 수 있다.

```jsx
import { useTranslation, Trans } from 'next-i18next';

const Component = () => {
 const { t } = useTranslation();
 const airlineName = getAirlineName();

 return {
  <section>
   <Trans t={t} i18key="항공사_인사" values={{
    airlineName,
   }}>
    안녕하세요 <b>{airlineName}</b> 입니다.
   </Trans>
  </section>
 }
}
```

### 라우팅

```jsx
export default function Home() {
  const router = useRouter();
  const { pathname, asPath, query } = router;

  return (
    <select
      defaultValue={router.locale}
      onChange={(e) =>
        router.push({ pathname, query }, asPath, { locale: e.target.value })
      }
    >
      <option value="ko">{t("common:한국어")}</option>
      <option value="en">{t("common:영어")}</option>
      <option value="ja">{t("common:일본어")}</option>
    </select>
  );
}
```

### 파일 분리

> 만약 namespace를 분리해서 사용한다면 아래처럼 가져올 namespace를 지정해서 그 번역본만 가져올 수 있다.

```jsx
export async function getStaticProps({ locale }: GetStaticPropsContext) {
  if (locale) {
    return {
      props: {
        ...(await serverSideTranslations(locale, ["home"])),
      },
    };
  }

  return {
    props: {},
  };
}
```

→ `serverSideTranslations` 두번째 인자에 namespace를 넣어준다.

## 참고

[https://github.com/i18next/next-i18next](https://github.com/i18next/next-i18next)

[https://theoephraim.github.io/node-google-spreadsheet/#/](https://theoephraim.github.io/node-google-spreadsheet/#/)


next-i18next를 이용해서 다국어를 적용해보아요

Next.js에서 다국어 적용하기

개발 환경, 라이브 환경이 다른 환경변수를 사용하는 경우가 있다.
그런 경우에 `env-cmd`를 활용해서 환경변수를 설정할 수 있다.

## 💾 설치

```bash
npm i env-cmd
```

## 🗒 환경변수 파일 설정

- .env.production
- .env.development

2개의 env 파일을 만들어주고 그 안에 환경변수를 설정한다.

## ⌨️ 스크립트 작성

```json
// package.json
{
  ...
 "scripts": {
  "build:develop": "env-cmd -f .env.development next build",
    "build:production": "env-cmd -f .env.production next build",
  ...
 }
 ...
}
```


상황에 따른 환경 변수를 제어해보자

env-cmd로 환경변수 제어하기

## 개요

vercel로 이 블로그를 배포하고 들어가봤더니 500 에러가 발생했다.

찾아보니 env 설정을 하지 않아서 서버 사이드에서 데이터를 가져오는 과정에서 문제가 생겼다.

## 해결방법

![Untitled](/post/deploy-nextjs-with-vercel-env/Untitled.png)

vercel에 프로젝트 메뉴를 보면 **Settings**라는 메뉴가 있다. 그걸 누르면 왼쪽에 `Environment Variables`이 있는데 그걸 클릭 후 추가해준 후에 재배포를 하면 적용된다.


배포한 내 프로젝트에 환경변수를 설정해보자

hanyunseong-log

전체 글