
![Navigating Angular NgRx State Management Demystified](/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_0.png)

애플리케이션에서 효과적인 상태 관리는 일관성과 예측 가능성을 유지하는 데 필수적입니다. 애플리케이션이 확장되면 여러 컴포넌트 간의 데이터 처리가 점점 복잡해집니다. NgRx와 같은 상태 관리 라이브러리는 애플리케이션 상태를 중앙 집중화하고 조직화함으로써 중요한 역할을 합니다. 이를 통해 데이터 흐름을 관리하고 부작용을 처리하며 원활한 상태 전환을 촉진합니다. 개발자가 진실의 단일 출처를 준수함으로써 버그를 방지하고 유지 보수 가능성을 향상시켜 더 나은 사용자 경험을 만들 수 있습니다.

# NgRx 이해하기

NgRx는 Angular 애플리케이션에서 상태 관리와 부작용 처리를 위해 설계된 라이브러리 세트입니다. React의 잘 알려진 상태 관리 도구인 Redux에서 영감을 받았으며 Angular의 반응형 프로그래밍 모델에 비슷한 방법론을 적용합니다.

<div class="content-ad"></div>

여기에는 주요 구성 요소에 대한 세부 정보가 나와 있어요:

- 스토어: 스토어는 애플리케이션 전체 상태를 보유하는 곳이에요. 단일하고 변경할 수 없는 상태 트리입니다. 상태 변경은 액션과 리듀서를 통해 이뤄져요.
- 액션: 액션은 애플리케이션에서 스토어로 정보를 전달하는 데이터 페이로드로, 이벤트나 사용자 상호작용을 나타냅니다.
- 리듀서: 리듀서는 상태가 액션에 응답하여 어떻게 변경되는지를 결정하는 함수들이에요. 현재 상태와 액션을 받아 새로운 상태를 반환합니다.
- 셀렉터: 셀렉터는 스토어에서 특정 상태 조각을 추출하는 데 사용되는 함수들이에요. 특정 상태 일부를 검색하고 결과를 캐싱하여 성능을 최적화하는 데 도움을 줍니다.
- 이펙트: 이펙트는 비동기 작업(예: HTTP 요청)과 같은 부작용을 처리해요. 액션을 감시하고 작업을 수행하며 결과에 따라 새로운 액션을 발행합니다.
- 엔티티: NgRx 엔티티는 스토어에서 엔티티 컬렉션(예: 객체 배열)을 관리하는 것을 간소화하는 유틸리티 라이브러리로, CRUD 작업과 데이터 정규화를 지원합니다.

NgRx는 RxJS를 활용하여 상태 관리에 대한 반응적인 접근을 제공해요. 개발자들이 비동기 데이터와 상태 업데이트를 효율적으로 처리하기 위해 Observables을 사용할 수 있도록 도와줘요. 이 프레임워크는 Angular 애플리케이션 내 복잡한 상태 상호작용과 부작용을 처리하며 유지 보수 및 명확성을 향상시켜 줍니다.

![사진](/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_1.png)

<div class="content-ad"></div>

# NgRx 구현하기

간단히 말해서, 저는 사용자가 하드코딩된 영화에 평점을 매길 수 있는 영화 리뷰 시스템을 구현했고, 각 영화의 평점 상태는 NgRx Store를 이용해 관리하고 있습니다. 제 GitHub 저장소를 참고해주세요.

## NgRx 설치하기

프로젝트 폴더에서 다음 명령어를 실행하세요.

<div class="content-ad"></div>

```js
npm i @ngrx/store @ngrx/store-devtools
```

## NgRx 설정

위 명령을 실행한 후, 세 개의 파일 movie.action.ts, movie.selector.ts, movie.reducer.ts를 포함하는 store 폴더를 정의해야 합니다. 저는 상태를 컴포넌트별로 관리하고 있지만, 전역적으로 폴더와 그 내용을 정의할 수도 있습니다.

<img src="/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_2.png" />

<div class="content-ad"></div>

## 영화 모델

```js
export interface Movie {
  id: number;
  name: string;
  imageUrl: string;
  rating: any;
  length: string;
  lang: string;
}
```

## 작업 생성

이 파일에서는 작업의 모든 동작을 나타내는 함수를 정의하여 작업 중인 데이터의 상태를 변경하는 데 책임이 있습니다. 다음 코드를 고려해보세요:

<div class="content-ad"></div>

```js
import { createAction, props } from '@ngrx/store';

// 영화 평가 액션
export const rateMovies = createAction(
  '[Movie] Rate Movies',
  props<{ id: number; rating: number }>()
);
```

@ngrx/store 모듈의 createAction 함수는 액션 설명을 첫 번째 매개변수로 사용하고 처리할 데이터를 두 번째 매개변수로 사용한다는 것을 알 수 있습니다. "영화 상태"에는 영화 ID에 따라 영화를 평가하는 액션이 있을 것입니다.

## Reducers 생성

이 파일에서는 영화 목록의 초기 상태를 정의하고 각 액션을 처리하기 위한 로직을 구현한 후 상태를 수정합니다. 자세한 내용은 다음 코드를 참조해주세요:

<div class="content-ad"></div>

```js
import { createReducer, on } from "@ngrx/store";
import { rateMovies } from "./movie.action";
import { Movie } from "../components/Models/Movie.model";

// 영화 상태
export interface MovieState {
  movies: Movie[];
}

// 초기 상태
export const initialState = {
  movies: [
    {
      id: 1,
      name: "배트맨",
      imageUrl: "https://i.pinimg.com/originals/d7/25/a9/d725a9b969c231f6964fb431156f4c87.jpg",
      rating: [],
      lang: "영어",
      length: "2시간 32분",
    },
    {
      id: 2,
      name: "데드풀",
      imageUrl: "https://data1.ibtimes.co.in/en/full/598988/deadpool-one-most-successful-superhero-movies-all-time.jpg",
      rating: [],
      lang: "영어",
      length: "3시간 1분",
    },
    {
      id: 3,
      name: "스카페이스",
      imageUrl: "https://posterspy.com/wp-content/uploads/2019/11/scarface_preview.jpg",
      rating: [],
      lang: "영어",
      length: "2시간 10분",
    },
    {
      id: 4,
      name: "대부",
      imageUrl:
        "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
      rating: [],
      lang: "영어",
      length: "3시간 10분",
    },
    {
      id: 5,
      name: "덤 앤 더머",
      imageUrl: "https://image.tmdb.org/t/p/original/A5HCmQrRbj2FECfjNldoKyX1Qbg.jpg",
      rating: [],
      lang: "영어",
      length: "2시간",
    },
  ],
};

// 영화 리듀서
export const movieReducer = createReducer(
  initialState,
  on(rateMovies, (state: MovieState, { id, rating }) => {
    // id에 따라 영화의 평점을 업데이트
    const updatedMovies = state.movies.map((movie) => {
      if (movie.id === id) {
        return { ...movie, rating: [...movie.rating, rating] };
      } else {
        return movie;
      }
    });
    return { ...state, movies: updatedMovies };
  })
);
```

이 코드는 NgRx를 사용하여 영화 상태를 관리하는 리듀서 함수를 정의합니다. createReducer로 생성된 movieReducer 함수는 영화에 대한 평가가 0인 영화 목록을 포함한 초기 상태로 시작합니다. rateMovies 액션이 디스패치되면, 리듀서는 해당 id를 가진 영화의 평점 배열을 새로운 평점을 추가하여 업데이트합니다. 그런 다음 업데이트된 영화 목록이 새로운 상태로 반환됩니다.

## 셀렉터 생성

이제 스토리지에서 데이터를 검색하려면 셀렉터를 만들어야 합니다. 다음 코드를 참조하십시오:

<div class="content-ad"></div>

```js
import { createSelector } from "@ngrx/store";

// 영화 선택
export const selectMovies = createSelector(
  (state: any) => state.movies,
  (movies) => movies.movies
);
```

해당 코드는 createSelector를 사용하여 selectMovies라는 셀렉터를 정의하며, 애플리케이션 전체 상태에서 영화 데이터를 추출합니다. 이후 이 데이터 슬라이스에서 movies 속성을 검색하여 실제 영화 목록 또는 데이터에 액세스할 수 있게 합니다.

app.config.ts에 provideStore에 reducer를 추가하는 것을 잊지 마세요.

<img src="/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_3.png" />

<div class="content-ad"></div>

# 우리의 논리를 사용하기

데이터에 대한 변경 사항을 듣고 UI에 업데이트해야 합니다.

## 셀렉터 관찰하기

기본적으로 UI에서 데이터를 가져오고 렌더링하기 위해 observables와 async 파이프를 사용하고 있습니다. angular/core에서 inject를 사용하고 ngrx/store에서 Store를 ProviderToken으로 전달할 것입니다.

<div class="content-ad"></div>

<img src="/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_4.png" />

## 평점 업데이트

이 MoviesService 클래스는 싱글톤 서비스로 제공되며, Angular의 의존성 주입을 사용하여 NgRx 저장소에 액세스합니다. rateMovieById라는 메서드를 사용하여 지정된 id와 평점을 가진 영화의 평점을 업데이트하는 rateMovies 액션을 저장소에 전송합니다.

<img src="/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_5.png" />

<div class="content-ad"></div>

## UI에 데이터 렌더링하기

템플릿에서 프로퍼티를 사용하고 TypeScript에서 Observable로 도착하는 데이터를 관리하기 위해 async 파이프를 함께 사용하고 있음을 유의해 주세요.

![image](/assets/img/2024-08-19-NavigatingAngular18NgRxStateManagementDemystified_6.png)

# 결론

<div class="content-ad"></div>

NgRx 상태 관리는 구조화되고 예측 가능한 방식으로 복잡한 응용 프로그램 상태를 처리하는 데 사용됩니다. 단일하고 변경할 수 없는 상태 트리를 활용하고 액션, 리듀서 및 셀렉터를 사용하여 NgRx는 상태 업데이트와 검색을 간소화합니다. 비동기 작업에 대한 RxJS의 활용은 효율적이고 반응적인 데이터 처리를 보장합니다. 전반적으로, NgRx는 Angular 애플리케이션에서 유지 관리성을 향상시키고 성능을 향상시키며 상태 관리 프로세스를 보다 투명하고 관리할 수 있게 만듭니다. GitHub Repo에서 자세히 알아볼 수 있습니다. 라이브 배포 링크.

# 소통해요

LinkedIn, GitHub, Twitter.


Angular 18에서 NgRx 상태 관리하는 방법


매주 새로운 도구와 기술들이 출시됩니다. 예를 들어, 인공 지능(AI) 분야는 빠르게 성장하고 있어요. 거의 매일 새로운 도구나 모델이 출시되고 있죠. JavaScript 생태계도 마찬가지로, 새로운 라이브러리와 프레임워크가 자주 출시되고 있습니다.

계속 속도에 맞춰가기 어려운 느낌이 들죠. 그래서 나는 신뢰할 수 있는 견고한 스택이 필요하다고 생각해요. 오늘날 웹 앱을 구축하는 데 사용할 수 있는 스택이죠.

여기 내가 오늘날 웹 앱을 구축하는 데 사용하는 검증된 기술 스택이 있어요.

눌러서 스택 각 섹션의 도구를 확인해보세요 — 아직 익숙하지 않다면 해당 링크가 추가되어 있어요.

<div class="content-ad"></div>

# 🌐 프론트엔드

내 프론트엔드에는 React를 사용하는 것을 좋아해요. 지난 몇 년 동안 React를 사용해왔는데, 웹 앱을 구축하는 데 훌륭한 도구라고 생각해요. React 앱을 쉽게 구축하기 위해 Next.js와 함께 사용하고 싶어해요.

가끔 Next.js가 다소 독단적이라는 점이 마음에 들지 않아 많은 규칙을 따르지는 않아요. 하지만 React 앱을 쉽게 만드는 데 도움이 되는 점은 좋아해요. Next.js의 앱 라우터와 이미지 컴포넌트를 사용해요.

아직은 서버 액션을 사용하지는 않아요. 여전히 새로운 것 같아서 더 많이 시도해보지 않아 추천할만한 기회가 없었어요. 그래도 API 통합에 대한 선택은 React Query와 Axios를 쌍으로 사용해요. 둘은 잘 동작하고 React Query가 데이터를 캐시하고 관리하기 쉬운 점이 마음에 들어요.

<div class="content-ad"></div>

스타일링을 할 때 Tailwind CSS를 사용하는 것을 좋아해요. 최고는 아니지만 디자인을 쉽게 만들 수 있는 점이 마음에 들어요. 조금 번잡스러울 수는 있지만, 사용하기 쉬운 장점 때문에 괜찮다고 생각해요. shadcn/ui와 함께 사용하면, 미니멀한 디자인을 좋아한다면, 컴포넌트를 쉽게 구축할 수 있어 좋아요.

요약하면, 저의 프론트엔드 스택은 다음과 같아요:

- React & Next.js
- React Query & Axios
- Tailwind CSS & shadcn/ui

# ⚒️ 백엔드

<div class="content-ad"></div>

저는 백엔드로 Node.js를 선호합니다. React와 마찬가지로 지난 몇 년 동안 Node.js를 사용해왔는데, 웹 앱을 만드는 데 좋은 도구라고 생각합니다. 프론트 엔드를 위해 필요한 엔드포인트를 만들기 위해 Nest.js와 함께 사용하고 싶습니다.

Nest.js의 체계적인 구조와 데코레이터를 사용하여 API를 쉽게 빌드할 수 있는 점을 좋아합니다. 때로는 어디서 나온 코드인지 모르는 코드 마법이나 발생할 수 있는 순환 종속성 문제가 있을 수 있지만, 작동 방식에 대한 이해와 문서를 읽으면 이러한 문제를 해결할 수 있습니다.

모든 웹 앱에는 데이터베이스가 필요하기 때문에 PostgreSQL(Supabase)과 TypeORM을 사용하는 것을 좋아합니다. TypeORM은 훌륭한 문서를 갖추고 있으며, 내가 사용해본 ORM 중에서 가장 신뢰할 수 있는 것 중 하나입니다. 이미 꽤 오랫동안 사용되어 왔으며 Nest.js와의 훌륭한 통합을 제공합니다.

요약하면, 제 백엔드 스택은 다음과 같습니다:

<div class="content-ad"></div>

- Node.js 및 Nest.js
- PostgreSQL (Supabase) 및 TypeORM

# 🏗️ 인프라/배포

배포, 호스팅 또는 심지어 SSL 설정에 대해, 나는 Coolify를 사용하는 것을 좋아합니다. 최근에 발견했고, 웹 앱을 설정하는 데 많은 도움이 되었습니다. 이전에는 Vercel이나 GCP의 Cloud Run을 사용했지만 이러한 서버리스 솔루션을 피했습니다. 전용 프로비저닝 서버를 사용하는 것이 여전히 더 나은 것으로 생각하기 때문입니다. 호스팅 필요 시 Digital Ocean에서 VPS를 구입합니다.

다행히도 Coolify는 쉽게 설정할 수 있고, 자체 호스트 옵션이 있으며, 훌륭한 문서가 있습니다. 웹 앱을 배포하고 SSL을 설정하는 데 더 쉽게 도와주는 점이 마음에 듭니다.

<div class="content-ad"></div>

클라우드플레어를 DNS 및 CDN으로 사용하고 있어요. 도메인도 그곳에서 구입했는데, 도메인 관리가 너무 간편해서 좋아해요.

그리고 깃허브를 사용해서 CI/CD에 Coolify를 연결했어요. 그리고 배포 알림을 위해 디스코드와 연결했어요.

요약하면, 제 배포 스택은 다음과 같아요:

- Coolify (DigitalOcean)
- 클라우드플레어
- 깃허브

<div class="content-ad"></div>

# 📧 이메일

이메일은 때로는 필요 없다고 생각할 수 있지만 실제로 필요한 것 중 하나에요. 이메일을 보내기 위해 사용할 수 있는 다양한 서비스들이 있어요. 저는 이메일을 보내기 위해 Resend를 사용하는 것을 좋아해요. Resend는 이메일을 보내는 것을 더 쉽게 만들어주는 간단한 서비스에요.

Resend는 이메일을 보내는 데 사용하고, 이메일 템플릿을 만들기 위해 @react-emails를 사용해요. 이전에 신뢰할 수 있는 이메일 템플릿을 어떻게 만들어야 할지 몰랐었지만, @react-emails를 사용하니 훨씬 쉽게 만들 수 있어요.

Resend는 Supabase와 함께 사용해도 좋아요, 만약 그들의 서비스를 사용하는 것을 좋아한다면요.

<div class="content-ad"></div>

요약하자면, 제 이메일 스택은 다음과 같습니다:

- Resend
- @react-emails

# 🔑 인증

요즘에는 인증이 필요할 때마다 일반적으로 Supabase를 사용합니다. 백엔드에서 엔드포인트를 생성하고 그들의 API를 호출하여 인증 서비스를 사용합니다. 프론트엔드 SDK를 사용할 수도 있지만, 저는 백엔드에서 설정하는 것을 선호합니다.

<div class="content-ad"></div>

포스트그레스와 Supabase를 사용하기 때문에 필요하다면 나만의 인증 서비스를 만들 수 있어요. 이 스택을 사용하면 그렇게 유연하게 작업할 수 있죠. 그리고 무엇보다 중요한 건, 사용자 데이터가 제 범위 안에 있고 어떤 제3자 서비스에도 없어요.

요약하면, 제 인증 스택은:

- Supabase

# 📦 Storage

<div class="content-ad"></div>

이미지 저장을 위해 이미지킷을 사용하는 것을 좋아해요. 모바일 앱과 웹 앱의 이미지 저장에 이미 꽤 오랫동안 사용 중이고 정말 좋았어요. 이미지를 저장하기 쉽게 만들어주고 필요할 때 쉽게 조작할 수 있어서 좋아해요.

일반 저장을 위해 내가 선택한 것은 아직 없어요. 클라우드플레어 R2, AWS S3 또는 심지어 슈파베이스 스토리지를 사용할 수 있을 것 같아요. 하지만 아직 시도해보지 못했어요. 파일이나 일반 저장이 필요한 웹 앱은 아직 없어요.

요약하면, 내 저장 스택은 다음과 같아요:

- 이미지킷 (이미지용)
- 클라우드플레어 R2, AWS S3 또는 슈파베이스 스토리지 (일반 저장용)

<div class="content-ad"></div>

# 💰 비용

이 설정으로는 보통 $20~$30 사이에서 움직이는데, 이는 내가 선호하는 DigitalOcean의 VPS 비용이기 때문이다. 조금 더 싸게 구할 수도 있겠지만, 내 요구에 대해서는 그 옵션이 괜찮아 보인다. Hetzner에서 DigitalOcean보다 더 저렴하게 구입할 수도 있다고 생각해.

전체적으로, 다른 많은 서비스들도 너무 후한 무료 티어를 제공하고 있어 — 그래서 단순히 어떤 것을 테스트해보고 싶다면, 그것들이 도움이 될 거야!

# ⚡️ 초사이어인 모드로 갈 건가요?

<div class="content-ad"></div>

신뢰할 수 있는 웹 스택을 구축하려면 적절한 도구 뿐만 아니라 원활한 프로세스를 보장하기 위한 신뢰할 수 있는 하드웨어도 필요합니다. 모든 것을 구동할 수 있는 기계를 갖고 있으면 차이를 만들 수 있습니다.

![My Tech Stack](/assets/img/2024-08-19-MyTechStackForBuildingWebAppsToday_0.png)

여기에 Gigatech Gadgets이 도입됩니다. 새 노트북, 데스크탑 또는 서버를 찾고 있다면, 그들은 여러분을 위한 적절한 하드웨어를 보유하고 있습니다.

Gigatech Gadgets 웹 사이트를 방문하여 그들이 제공하는 것을 확인해 보세요!

<div class="content-ad"></div>

# 🚀 결론

이 스택은 저에게 효과가 있었고 웹 앱을 빠르게 구축하는 데 도움이 되었습니다. 신뢰할 수 있는 견고한 스택을 갖는 것이 중요하다고 생각합니다. 항상 최신 도구나 기술을 사용하는 것이 아니라, 그냥 일을 잘할 수 있는 올바른 도구를 사용하는 것이 중요합니다.

저는 다른 도구들도 알고 있지만, 대부분의 경우 이 스택이 필요한 웹 앱을 구축하는 데 충분합니다. 이 도구들이 함께 사용될 수 있고 서로 잘 작동하는 점도 마음에 듭니다.

완벽하지는 않지만, 아이디어를 실행하고 웹 앱을 빠르게 구축하는 데 제게 도움이 되고 있습니다.

<div class="content-ad"></div>

이 스택이 당신이 웹 앱을 빠르게 구축하는 데 도움이 되기를 바랍니다. 혹은 더 좋은 방법으로, 이 스택을 당신이 의지할 수 있는 스택의 시작점으로 만들어 보세요. 그게 훨씬 좋을 거에요!

언제든지 궁금한 점이나 제안사항이 있으시면 아래 댓글을 남겨주세요. 당신의 소중한 의견을 듣고 싶어요.

읽어주셔서 감사합니다. 이 글이 여러분의 여정에 도움이 되기를 바라요! ❤️

# 간단히 이야기해보자 🚀

<div class="content-ad"></div>

In Plain English 커뮤니티에 참여해 주셔서 감사합니다! 떠나시기 전에:

- 필자를 클랩하고 팔로우해 주세요 👏
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠 만나보세요


2024년 웹 앱을 만들 때 필요한 기술 스택


웹 개발 세계에서는 고성능 애플리케이션을 구축할 때 적절한 프레임워크를 선택하는 것이 모든 차이를 만들어 줍니다. 이 공간에서 두 가지 인기 있는 후보는 SolidJs와 React입니다. 둘 다 사용자 인터페이스를 구축하는 독특한 방식을 제공합니다.

성능 면에서 어떤 것이 가장 좋은지 알아보겠습니다. SolidJs 대 React의 비교에 대해 알아봅시다.

## 1. 기본 사항 이해

<div class="content-ad"></div>

성능 측면을 더 깊이 파고들기 전에 각 프레임워크를 간단히 살펴보겠습니다:

React.js
페이스북에서 개발된 React는 2013년에 출시되어 이후 프론트엔드 세계에서 지배적인 역할을 해왔습니다. 가상 DOM 개념과 컴포넌트 기반 아키텍처를 도입하여 개발자가 사용자 인터페이스를 구축하는 방식을 혁신적으로 바꿔 놓았습니다.

<div class="content-ad"></div>

Solid.js
신규 진출한 SolidJs는 라이언 카르니아토(Ryan Carniato)가 만들었습니다. SolidJs의 목표는 반응형 프로그래밍에 더 간단하고 효율적인 접근 방식을 제공하는 동시에, React에서 온 사람들에게 친숙한 구문을 유지하는 것입니다.

## 2. 성능 비교: SolidJs vs React

성능 측면에서 두 프레임워크 모두 장점이 있습니다. 그러나 Solid.Js는 빠른 속도와 효율성으로 주목을 받고 있습니다. 주요 성능 요소를 살펴보겠습니다:

- 렌더링 속도:
  SolidJs가 여기서 선두를 지킵니다. 세부적인 반응성 시스템을 통해 보다 정확한 업데이트가 가능하여, React의 가상 DOM 방식보다 빠른 렌더링 속도를 제공합니다.
- 패키지 크기:
  SolidJs는 상당히 작은 패키지 크기를 자랑하며, 이는 빠른 로드 시간과 향상된 성능을 의미하며, 특히 모바일 기기나 느린 네트워크에서 더욱 좋은 성능을 발휘합니다.
- 메모리 사용량:
  가상 DOM이 없어서 SolidJs는 일반적으로 React보다 적은 메모리를 사용하며, 메모리 제한 환경에서 더 나은 전반적인 성능을 제공합니다.
- 업데이트 효율성:
  SolidJs의 반응형 시스템을 통해 보다 효율적인 업데이트가 가능하며, 실제로 변경된 UI 부분만 다시 렌더링합니다. React는 효율적이지만 여전히 diffing 알고리즘으로 인해 불필요한 다시 렌더링을 수행합니다.

<div class="content-ad"></div>

## 3. SolidJs, React, 그리고 Vue 성능 비교

보다 포괄적인 시각을 제공하기 위해, 이 세 프레임워크를 다른 인기있는 선택인 Vue.js와 간단히 비교해보겠습니다:

SolidJs는 속도와 번들 크기에서 뛰어나지만, React와 Vue는 보다 큰 생태계와 더 광범위한 커뮤니티 지원을 제공합니다.

## 4. 적절한 프레임워크 선택하기

<div class="content-ad"></div>

SolidJs의 성능 이점에도 불구하고, SolidJs와 React(또는 Vue) 사이의 선택은 속도에 관한 것만이 아닙니다. 다음 요소들을 고려해 보세요:

- 프로젝트 요구 사항 ➜ 빈번한 업데이트가 필요한 매우 동적인 사용자 인터페이스의 경우, SolidJs의 성능 이점은 명백합니다.
- 팀 경험 ➜ React의 널리 사용되는 점은 경험이 풍부한 개발자를 찾기가 더 쉽다는 것을 의미합니다.
- 생태계 ➜ React의 방대한 라이브러리와 도구 생태계는 복잡한 프로젝트에 큰 이점을 줄 수 있습니다.
- 장기 지원 ➜ Facebook이 후원하는 React는 장기적인 지원과 업데이트에 대한 더 많은 확신을 제공합니다.

## 5. 결론

SolidJs는 여러 영역에서 React를 능가하는 인상적인 성능 지표를 보여주지만, 최고의 프레임워크는 궁극적으로 프로젝트의 특정 요구 사항, 팀 경험 및 장기적인 목표에 따라 다를 수 있습니다.

<div class="content-ad"></div>

React의 성숙도와 다양한 생태계는 많은 프로젝트에 안전한 선택지가 됩니다. 그러나 성능과 효율성을 중시하는 사람들에게는 SolidJs가 매력적인 대안으로 제시됩니다.

어떤 기술을 선택하든지 사용 사례를 고려하여 장단점을 신중하게 고려하는 것이 중요합니다. SolidJs 또는 React를 선택하든, 두 프레임워크 모두 고성능 웹 애플리케이션을 구축하는 강력한 도구를 제공합니다.

더 많은 주제를 위해 팔로우해주세요 🥰


SolidJs와 React 중 웹 앱에 최적화된 프레임워크는 무엇일까


<img src="https://miro.medium.com/v2/resize:fit:1400/1*T-nar8D8295CMBn9S3Ha8A.gif" />

리액트에서 재사용 가능한 컴포넌트를 만들 때 AutoComplete 컴포넌트는 유연성과 사용자 정의 가능성을 보여주는 클래식한 예입니다. 이 글에서는 React, TypeScript 및 Emotion을 사용하여 AutoComplete 컴포넌트를 구축하는 방법을 안내하겠습니다. 모두를 유지하면서 깔끔하고 효율적인 코드를 유지합니다.

# 왜 AutoComplete를 사용해야 하나요?

AutoComplete는 사용자가 입력하는 동안 관련 옵션을 제안하여 사용자 경험을 향상시킵니다. 이는 검색 상자, 양식 필드 및 드롭다운에서 특히 유용합니다. 재사용성에 중점을 두고이 컴포넌트를 만들면 다양한 프로젝트에 원활하게 통합할 수 있음을 보장할 수 있습니다.

<div class="content-ad"></div>

## 우리 AutoComplete 구성요소의 주요 기능:-

- TypeScript로 완전히 타이핑되었습니다.
- Emotion을 사용하여 스타일이 적용되었습니다.
- 'label: string; value: string'와 같은 복잡한 데이터 구조를 처리합니다.
- 입력란이 지워지면 드롭다운을 재설정합니다.

## 프로젝트에 구성요소 통합

AutoComplete 구성요소를 통합하는 것은 제안 배열과 선택 처리 콜백 함수를 전달하는 것만큼 간단합니다.

<div class="content-ad"></div>

# CodeSandBox에서 AutoComplete 구성 요소를 확인해보세요

# 결론

이 재사용 가능한 AutoComplete 구성 요소는 React 프로젝트에서 다재다능한 도구로 사용될 수 있습니다. Emotion을 사용하여 스타일링하고 TypeScript로 유형 안전성을 갖춘 이 구성 요소는 다양한 사용 사례에 맞게 쉽게 수정할 수 있습니다.

전체 구현을 보려면 위에 연결된 CodeSandBox를 확인하고 필요에 맞게 포크하거나 사용자 정의해도 괜찮습니다.

<div class="content-ad"></div>

행복한 코딩하세요! 🎉


React와 Emotion Styled Components를 활용한 재사용 가능한 AutoComplete 컴포넌트 만드는 방법


리액트 개발에서 여러 컴포넌트 간에 데이터를 공유하는 것은 때로는 전화로 게임하는 것 같은 느낌일 수 있어요. 그 게임을 기억하나요? 옆 사람에게 메시지를 속삭이고, 그 사람이 다시 전달하는 식으로 진행되는 그 게임 말이에요. 마지막 사람에게 도착할 때, “I love this song”이 “I am stoned”로 어떻게 변해있을지 상상해보세요.

![이미지](/assets/img/2024-08-19-WhyandWhentoUseuseContextinReact_0.png)

비슷하게, 여러 컴포넌트 층을 통과하는 프롭을 전달하는 것은 “prop drilling”이라고 불릴 수 있는데, 이는 코드를 혼란스럽고 유지보수하기 어렵게 만들 수 있어요. 하지만 걱정하지 마세요. React에는 이에 대한 편리한 해결책이 있습니다: useContext 훅.

## 문제: Prop Drilling

<div class="content-ad"></div>

프롭 드릴링은 데이터를 여러 레이어의 컴포넌트를 통해 전달할 때 발생하는 현상이에요. 때때로 일부 컴포넌트가 데이터가 필요하지 않더라도 데이터를 전달하는 경우도 있어요!

다음은 예시에요:

```js
// App.js
const App = () => {
  const theme = "dark";
  return <ParentComponent theme={theme} />;
};

// ParentComponent.js
const ParentComponent = ({ theme }) => {
  return <ChildComponent theme={theme} />;
};

// ChildComponent.js
const ChildComponent = ({ theme }) => {
  return <DeeplyNestedComponent theme={theme} />;
};

// DeeplyNestedComponent.js
const DeeplyNestedComponent = ({ theme }) => {
  return <div>The current theme is {theme}</div>;
};
```

이 코드에서는 theme 프롭이 여러 컴포넌트를 통해 DeeplyNestedComponent에 전달되고 있어요. 앱이 커질수록 이것은 우리의 전화 게임처럼 복잡해질 수 있어요.

<div class="content-ad"></div>

## 해결책: useContext

모든 계층을 통해 props를 전달하는 대신, useContext를 사용하면 중간 단계를 건너뛰고 데이터를 필요한 곳에서 직접 공유할 수 있습니다.

이전 예제를 어떻게 간소화할 수 있는지 살펴봅시다:

```js
import React, { createContext, useContext } from "react";

// 컨텍스트 생성
const ThemeContext = createContext();

const App = () => {
  const theme = "dark";

  return (
    <ThemeContext.Provider value={theme}>
      <DeeplyNestedComponent />
    </ThemeContext.Provider>
  );
};

// DeeplyNestedComponent.js
const DeeplyNestedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>현재 테마는 {theme}입니다.</div>;
};
```

<div class="content-ad"></div>

이 예시에서 DeeplyNestedComponent는 prop 드릴링이 필요 없이 컨텍스트에서 주제에 직접 액세스할 수 있습니다.

## useContext를 사용하는 시기는?

이제 useContext가 무엇이며 어떻게 작동하는지 아셨으니, 언제 사용해야 하는지 알아봅시다. useContext를 사용하는데 유용한 몇 가지 시나리오는 다음과 같습니다:

- 전역 상태 관리:
  여러 컴포넌트에서 동일한 데이터에 액세스해야 하는 경우 useContext가 매우 유용합니다. 사용자 인증 상태, 테마 설정 또는 언어 설정과 같은 데이터를 관리하는 경우입니다. 마치 응용 프로그램 전체에 대한 유니버설 리모컨을 갖고 있는 것과 비슷합니다.
- Prop 드릴링 회피:
  필요하지 않은 많은 컴포넌트 계층을 통해 데이터를 전달해야 할 때, useContext가 문제 해결을 도와줍니다. 중요한 메모를 회사 내 모든 부서를 통과시키는 대신 필요로 하는 사람에게 직접 전달하는 상황을 상상해 보세요.
- 테마 설정:
  앱에서 여러 테마를 지원하는 경우, useContext를 사용하여 필요한 모든 컴포넌트에 현재 테마를 제공할 수 있습니다. 마치 앱 전체의 테마를 한 번에 변경하는 빛 스위치를 갖고 있는 것과 비슷합니다.
- 로컬라이제이션:
  앱이 여러 언어를 지원하는 경우, useContext를 사용하여 현재 언어 및 번역을 모든 컴포넌트에 제공할 수 있습니다. 모두가 동일한 것을 이해할 수 있도록 하는 것이 telephone game처럼 아무도 이해하지 못하는 상황을 방지할 수 있습니다.

<div class="content-ad"></div>

## useContext의 장단점

장점:

- 데이터 공유를 간편화: 프롭 드릴링의 번거로움을 피하고 코드를 깔끔하게 유지할 수 있습니다.
- 중앙 집중식 상태 관리: 여러 컴포넌트가 액세스해야 하는 전역 상태에 적합합니다.
- 테마 및 지역화가 쉬워짐: 애플리케이션 전체에 일관된 테마 또는 언어 환경을 적용하기가 보다 간단해집니다.

단점:

<div class="content-ad"></div>

- 과용은 복잡성으로 이어질 수 있습니다: 많은 컨텍스트 사용은 앱을 디버깅하기 어렵게 할 수 있습니다.
- 성능에 대한 고려사항: 컨텍스트 값의 빈번한 업데이트는 불필요한 다시 렌더링을 유발할 수 있어 성능에 영향을 줄 수 있습니다.
- 디버깅에 대한 도전: 프롭을 사용하는 것과 비교하여 큰 애플리케이션에서는 문제를 추적하기 어려울 수 있습니다.

## 결론

React에서 useContext는 프롭 드리리을 피하는 데 도움이 되는 강력한 도구로, 전역 상태를 관리하고 앱 전반에서 데이터를 공유하기 쉽게 만들어줍니다. 컴포넌트 트리를 간소화시켜줍니다. 그러나 모든 도구와 마찬가지로 적당히 사용하는 것이 가장 좋습니다. 간단하게 유지하고 코드를 깔끔하게 유지하세요. 여러 층을 통해 프롭을 전달할 때는 useContext가 해결책이라는 것을 기억하세요. 데이터가 필요한 곳으로 정확히 전달되도록 보장하는 편리한 훅입니다.

독서해 주셔서 감사합니다! 도움이 되셨다면 동료 개발자와 공유하고 React가 제공하는 많은 도구들을 계속 탐험해보세요.

<div class="content-ad"></div>

행복한 코딩하세요! 🎉


React에서 useContext를 사용하는 이유


데이터 쿼리 시스템을 구축하는 클래스 기반 접근 방식입니다.

![Link to image](/assets/img/2024-08-19-Low-LevelDesignforaDataFetchingLibraryinFrontend_0.png)

## 왜 라이브러리가 필요한가요?

지난 주 방갈로르에 오픈한 키티 카페에 다녀왔어요. 맛있는 "키티 카레"를 요리하는 키티들을 봤는데, 아직은 레스토랑을 운영하는 법을 모르는 걸로 보였어요. 그곳에서 문제가 있음을 눈치챘죠.

<div class="content-ad"></div>

문제: "키티의 카레"에 대한 여러 주문이 접수되어, 주방에서는 각 주문을 독립적으로 준비하기 시작할 수 있습니다. 이로 인해 각 주문이 필요 이상으로 더 많은 재료와 조리 시간을 사용하는 중복 준비 과정이 발생할 수 있습니다.

영향: 중복 된 재료 낭비 및 불필요한 노력 중복으로 인한 요리 비용 상승.

해결책: 데이터 검색 시스템은 중복 제거 로직을 구현하여 동일한 요리에 대한 여러 주문이 들어오면 이를 단일 조리 과정으로 통합할 수 있습니다.

혜택: 이렇게 함으로써 중복 준비를 줄이고 자원 사용을 최적화할 수 있습니다.

<div class="content-ad"></div>

이제 음식 주문을 UI 구성 요소로 고려할 때 서버에서 데이터를 요청하여 렌더링하면서, 독립적으로 동일한 종류의 데이터를 요청할 수 있습니다.

## 이를 달성하는 데 도움이 되는 라이브러리는 무엇인가요?

- useSWR: 가장 가벼우면서 가장 간단한 라이브러리입니다. (평가: 4/5)
- ReactQuery: 가장 인기 있고 강력한 라이브러리입니다. (평가: 5/5)
- RTK Query: Redux와 더불어 강하게 결합되어 있다면, 그러나 개발 경험 측면에서 지나치게 복잡하다고 느꼈습니다. (평가: 3/5)

대부분의 이러한 라이브러리는 React용으로 제작되었으며 구현에 대해 다양한 방법을 사용합니다. 이 블로그에서는 개념을 객체 지향적으로 설명하기 위해 클래스를 사용해 설명할 것이며 함수형 접근 방식을 선호하는 경우 댓글에서 알려 주시면 앞으로의 블로그 포스트에서 다루어 드릴 것이니 참고하세요.

<div class="content-ad"></div>

## 기능 요구 사항

- 핵심 기능: 다양한 HTTP 메소드 지원, 사용자 정의 구성 및 포괄적인 오류 처리를 통해 효율적인 데이터 검색 가능.
- 캐싱 및 중복 제거: 만료 전략을 사용한 인메모리 캐싱 구현 및 중복 요청 피하며 성능 개선.
- 상태 관리: 로딩, 데이터 및 오류 상태 추적 및 노출하면서 키 라이프사이클 이벤트에 대한 업데이트 이벤트 제공하는 동안 시작 또는 완료된 가져오기와 같은 핵심 라이프사이클 이벤트에 대한 이벤트 제공.
- Stale-While-Revalidate: 백그라운드에서 유효성 재확인하면서 배출 데이터 제공할 수 있고, 구성 가능한 간격에서 자동 데이터 갱신을 지원.

## 핵심 클래스

- DataFetcher: 데이터 검색, 캐시 관리, 로딩, 오류 등 다양한 상태 처리하는 주요 클래스.
- Cache: 무효화 및 사전 검색을 위한 메서드를 포함한 인메모리 캐싱 관리를 위한 유틸리티 클래스.
- EventEmitter: 업데이트, 오류 및 캐시 변경과 같은 이벤트 처리를 위한 유틸리티 클래스.

<div class="content-ad"></div>

<img src="/assets/img/2024-08-19-Low-LevelDesignforaDataFetchingLibraryinFrontend_1.png" />

## DataFetcher Class

이것은 우리가 가지고 있는 핵심적이고 가장 중요한 클래스입니다. 이 클래스는 핵심 로직을 관리할 것입니다. 데이터 가져오기, 캐싱 그리고 상태 관리를 포함합니다.

속성:

<div class="content-ad"></div>

- fetcher: 데이터를 가져오는 데 사용되는 함수 참조입니다. 어떤 사람들은 fetch를 사용할 수 있고, 어떤 사람들은 axios를 사용할 수 있습니다.
- cache: Cache 클래스의 인스턴스입니다.
- isFetching: 데이터가 현재 캐시에서 가져오는 중인지 여부를 추적하는 부울 값입니다.
- error: 데이터를 가져오는 중에 발생한 모든 오류를 저장합니다.
- data: 가져온 데이터를 보유합니다.
- listeners: EventEmitter 클래스의 인스턴스입니다.
- options: fetcher에 대한 구성 옵션입니다. 예: refreshInterval, dedupingInterval 등.

메소드:

- fetch(key): 주어진 키에 기반하여 데이터를 가져옵니다.
- shouldRevalidate(timestamp): 데이터가 타임스탬프에 기반하여 다시 유효성을 검사해야 하는지를 결정합니다.
- startAutoRefresh(): 데이터를 자동으로 새로 고침할 수 있도록 간격을 시작합니다.
- on(event, listener): 이벤트 리스너를 등록합니다.
- notifyListeners(event, payload): 모든 청취자들에게 이벤트를 알립니다.
- invalidateCache(key): 특정 키에 대한 캐시를 무효화합니다. 원격으로 작업 선호도를 변경했을 때 API가 무효화되고 새로운 데이터로 새로 고침되어야 하는 경우와 같은 여러 경우에 도움이 됩니다.

## Cache Class

<div class="content-ad"></div>

속성:

- store: 캐시된 데이터와 해당 메타데이터(예: 타임스탬프)를 보유하는 객체입니다.

메서드:

- get(key): 키를 기반으로 캐시에서 데이터를 검색합니다.
- set(key, data): 키와 현재 타임스탬프로 캐시에 데이터를 저장합니다.
- invalidate(key): 캐시에서 데이터를 제거합니다.
- prefetch(key, fetcher): 필요한 시점에 데이터를 가져와 캐시에 저장합니다.

<div class="content-ad"></div>

## EventEmitter Class

속성:

- events: 이벤트 이름과 해당 리스너를 저장하는 객체입니다.

메서드:

<div class="content-ad"></div>

- on(event, listener): 이벤트에 대한 리스너를 등록합니다. 주로 on-"fetching" 및 on-"data"라는 두 가지 이벤트를 등록할 것입니다.
- emit(event, payload): 제공된 페이로드로 이벤트에 등록된 모든 리스너를 호출합니다.

## 사용법:

```js
const fetcher = (key) => fetch(`https://your-api-endpoint.com/${key}`).then((res) => res.json());

const dataFetcher = new DataFetcher(fetcher, {
  key: "task-1",
  refreshInterval: 10000,
});

dataFetcher.on("fetching", (isFetching) => {
  console.log("Fetching:", isFetching);
});

dataFetcher.on("data", (data) => {
  console.log("Data received:", data);
});

dataFetcher.fetch("task-1");

dataFetcher.invalidateCache("task-1");

dataFetcher.cache.prefetch("task-2", fetcher);
```

DataFetcher, EventEmitter 및 Cache 클래스를 구현하는 데 도움이 되기를 바랍니다. 코딩하는 동안 Observer 패턴(이벤트 에미터에서 사용), Singleton(캐시의 경우, 그렇게 설계된 경우) 또는 Strategy(다양한 가져오기 전략이 구현된 경우, 예: 롱 폴링)과 같은 디자인 패턴을 익힐 수 있습니다.

<div class="content-ad"></div>

많은 추가 기능을 덧붙일 수 있어요. 예를 들어 페이지별 API 캐싱, 이를 단일 캐시로 병합하고 무효화 태그를 사용하여 한 API가 POST API를 실행할 때 자동으로 무효화되도록 할 수 있어요. 예를 들어, 직업 선호도를 변경하는 API를 실행하면 해당 선호도를 가져오는 API도 자동으로 무효화 태그를 통해 무효화되어야 해요. 현재 우리가 사용하는 방식으로는 수동으로 무효화하고 있어요.

최근 면접에서 실수를 해서 LLD를 시작했어요. 더 공부하면서 더 많은 것을 쓸 거고, 인터뷰 세계에서 틱택토와 같이 독특하고 일반적이지 않은 것들에 대해 배울 거예요.

![Low-Level Design for a Data Fetching Library in Frontend](/assets/img/2024-08-19-Low-LevelDesignforaDataFetchingLibraryinFrontend_2.png)

## 참고문헌과 추가 읽을 거리:

<div class="content-ad"></div>

- React Query를 탐험해보세요: [링크](https://medium.com/@dengafred/introduction-to-react-query-for-data-fetching-4173e38710e8)
- LLD 인터뷰 준비를 위해 이 로드맵을 따르고 있어요: [링크](https://medium.com/@sandeep.kumar.ece16/low-level-design-roadmap-7581688d96fa)
- JS에서 클래스 작성 기초: [링크](https://javascript.info/classes)
- 뮤타 고양이는 누구일까요?: [링크](https://www.imdb.com/title/tt0113824/)


프론트엔드 데이터 가져오기 라이브러리의 로우 레벨 디자인


![img](/assets/img/2024-08-19-FunctionsinJS_0.png)

이 함수 작성 방법에 대한 자습서를 마치면 JavaScript에서 함수를 처리하고 유지 관리(또는 생성)하는 참 전문가가 될 거예요.

함수는 JS의 핵심 부분이에요. 함수는 이름이 호출될 때 따라야 하는 일련의 지시사항이에요. 함수를 사용하는 이유는 프로그래밍을 조금 단순하게 만들어주기 때문이에요. 또한 코드의 본문을 복사하거나 붙여넣기하지 않고 사용하여 코드가 조금 더 깔끔해 보이게 만들어줄 수 있어요.

보통 함수의 구문에는 다음 요소들이 대부분 포함되어 있어요:

<div class="content-ad"></div>

- 이름. (자명한 바와 같이) 함수를 호출할 때 사용됩니다.
- 매개변수는 함수에서 사용될 변수이며, 함수에는 매개변수의 수가 무한할 수 있습니다.
- 함수 본문은 특정 함수가 호출될 때 원하는 일을 작성하는 부분입니다.

예를 들어:

```js
function 함수이름(매개변수1, 매개변수2) {
  // 함수 본문
}
```

함수는 그 이름을 호출함으로써 어디에서든 호출할 수 있습니다. 또는 이름 뒤에 괄호를 붙여 호출하고, 그 안에 입력 값을 제공하여 매개변수와 해당하는 값이 일치하게 할 수도 있습니다. 예를 들어:

<div class="content-ad"></div>

```js
functionName(input1, input2);
// 여기서의 입력은 매개변수에 해당합니다.
```

함수의 본문에서는 무언가/변수를 반환할 수 있습니다. 이는 return 뒤에 작성하는 내용이 표시되어 함수가 return을 수행하자마자 종료된다는 의미입니다.

예시:

```js
function multiply(a, b) {
  return a * b;
}
// 이것은 a와 b의 곱을 반환합니다.
```

<div class="content-ad"></div>

알아차리셨을지 모르지만, 값들을 넣지 않아서 함수를 호출해도 아무 것도 표시되지 않거나 오류가 발생하지 않는 것을 눈치채셨을 겁니다. 이 예시에서 값이 들어가 있지 않은 이유는 매번 함수를 호출할 때 어떤 값을 어떻게 곱할지 결정할 수 있도록 하기 위해서입니다. 이것을 Function Expression이라고 합니다.

예를 들어:

```js
console.log(multiply(2, 3));
//이것은 이제 출력값이 6이 될 것이며, 2x3은 6이기 때문입니다
```

함수가 내용이 거의 없을 경우 함수를 간결하게 줄일 수도 있습니다.

<div class="content-ad"></div>

예를 들어:

```js
function multiply(a, b) {
  return a * b;
}
//이것은 a와 b의 곱을 반환합니다.
```

이를 읽는 누구든지 함수의 기본 개념을 이해하고, 왜 우리가 그것을 사용하는지, 어떻게 사용하는지를 파악하고, 완벽한 애플리케이션을 개발할 수 있기를 바랍니다.


JavaScript 내장 함수 기초부터 고급까지 정리


<img src="/assets/img/2024-08-19-SerializationofentitiesusingTypeScriptdecorators_0.png" />

프론트 엔드에서 더 복잡하거나 간단한 비즈니스 로직을 포함하는 애플리케이션을 작성할 때, "풍부한" 모델에서 모든 이 로직을 유지하는 것이 필요해집니다. 예를 들어 사용자 인터페이스에 표시되는 양식과 관련된 많은 종속 속성을 가진 개체의 생성 또는 편집을 처리해야 할 때입니다. 이러한 엔티티 및 해당 하위 엔티티의 상태 변경 핸들러를 응용 프로그램 레이어에 "퍼뜨린다면" 모델의 일관성을 서로 다른 조치, 리듀서, 유효성 검사기에서 쉽게 잃게 될 수 있습니다. 이러한 코드는 읽기, 디버깅 및 유지 관리하기 어려울 것입니다.

한 개체에서 속성 액세스 메서드 및 엔티티 상태를 변경하는 메서드를 호출할 수 있도록 모델 관리를위한 단일 진입점으로 집계 루트 패턴을 사용하여 이러한 엔티티의 불변성을 지원하는 것이 더 쉬워집니다. 그러나 여기에 또 다른 문제가 발생합니다: 직렬화. 예를 들어 특정 저장소 - localStorage, redux store에 전체 엔티티를 저장하거나 백엔드에 전송하여 저장하거나 이벤트로 사용자 인터페이스를 업데이트해야하는 경우가 있습니다. 이러한 경우에는 나중에 저장소에서 쿼리 할 때 엔티티에서 데이터를 압축 할 필요가 있습니다. 이는 페이지에 대한 데이터를 서버 측에서 수집해야하는 프로젝트에서 SSR이 사용되는 경우 특히 중요합니다.

직렬화 문제는 루트 엔티티에 관련된 모든 클래스에 serialize 메서드를 추가하여 "직면"해 결합할 수 있습니다. 이것은 다음과 같이 보일 것입니다:

<div class="content-ad"></div>

```js
interface Serializable<T> {
  serialize(): T;
}

enum VehicleType {
  Car = 'Car',
  Bus = 'Bus',
  Bike = 'Bike',
}

type SerializedVehicle = {
  readonly id: string;
  readonly name: string;
  readonly type: VehicleType;
  readonly wheelsNum: number;
};

class Vehicle implements Serializable<SerializedVehicle> {
  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly type: VehicleType,
    public readonly wheelsNum: number,
  ) {}

  serialize() {
    return {
      id: this.id,
      name: this.name,
      type: this.type,
      wheelsNum: this.wheelsNum,
    };
  }

  drive() {
    // ...do something
  }

  repair() {
    // ...do something
  }

  // ...more methods
}
```

이게 좀, 음. 어색하죠. 특히 중첩된 엔티티가 많은 경우 우울해질 정도로 그렇습니다. 그 중에서도 컬렉션이 포함되어 있을 수 있어서 이를 위한 직렬화 방법도 생각해야 합니다. 너무 많은 부수적인 작업이 필요하죠. 그래서 이 반복되는 로직을 대신 처리해줄 데코레이터를 작성해볼 생각이었습니다. 결국에는 코드가 이렇게 보이면 좋겠습니다:

```js
@serializable
class Vehicle {
  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly type: VehicleType,
    public readonly wheelsNum: number,
  ) {
    super();
  }

  drive() {
    // ...do something
  }

  repair() {
    // ...do something
  }

  // ...more methods
}

const car = new Vehicle(
  '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
  'car',
  VehicleType.Car,
  4
);

console.log(car.serialize());

// 예상 출력:
// {
//   id: '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
//   name: 'car',
//   type: 'Car',
//   wheelsNum: 4
// }
```

이와 같은 데코레이터는 serialize() 메서드를 가지고 있지 않은 데코레이트된 클래스에서의 호출을 가로채기 위해 Proxy 객체를 사용할 수 있습니다. Proxy 내부의 구현은 직렬화된 객체의 속성을 순회하고 그들로부터 데이터를 직렬화된 형태로 수집합니다.

<div class="content-ad"></div>

여기 몇 가지 기술적인 어려움이 있습니다:

- TypeScript에서 객체가 serialize() 메서드를 가지고 있고 반환하는 유형을 알아야 합니다.
- 일부 속성을 직렬화 프로세스에서 제외하고 유연하게 만들고 싶습니다.
- 컬렉션과 같은 반복 가능한 객체도 배열과 같은 것으로 직렬화해야 합니다.
- 중첩된 엔티티도 이 데코레이터를 가지고 있다면 자동으로 직렬화되어야 합니다.

첫 번째 문제는 구현이 없으면 예외를 throw하는 serialize() 메서드가 있는 추상 클래스를 사용하여 해결할 수 있습니다:

```js
abstract class Serializable<T> {
  serialize(): T {
    throw new Error('Method not implemented.');
  }
}

@serializable
class Vehicle extends Serializable<SerializedVehicle> {
  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly type: VehicleType,
    public readonly wheelsNum: number,
  ) {
    super();
  }

  drive() {
    // ...무언가를 수행
  }

  repair() {
    // ...무언가를 수행
  }
}
```

데코레이터에 대한 추가 인수를 사용하여 직렬화 결과에서 일부 속성을 제외할 수 있습니다. 이는 다양한 매개변수 목록을 수용하는 함수로 랩핑하여 데코레이터를 사용하는 방법입니다.

<div class="content-ad"></div>

```typescript
function serializable(...propsToExclude: string[]) {
  return function serializableDecorator<T extends { new (...args: any[]): {} }>(SerializableClass: T) {
    return class extends SerializableClass {
      constructor(...args) {
        super(...args);

        return new Proxy(this, {
          get(target, prop) {
            if (prop !== "serialize") {
              return target[prop];
            }

            return () => {
              let result: any = {};

              Object.keys(target).forEach((key) => {
                if (propsToExclude.includes(key)) {
                  return;
                }

                // ...details
              });
            };
          },
        });
      }
    };
  };
}

@serializable("checkExcluded")
class Vehicle extends Serializable<SerializedVehicle> {
  private checkExcluded = "checkExcluded";

  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly type: VehicleType,
    public readonly wheelsNum: number
  ) {
    super();
  }

  drive() {
    // ...do something
  }

  repair() {
    // ...do something
  }
}
```

To serialize typed collections into the array, you can add code that checks the object for the Symbol.iterator property:

```typescript
function serializable(...propsToExclude: string[]) {
  return function serializableDecorator<T extends { new (...args: any[]): {} }>(SerializableClass: T) {
    return class extends SerializableClass {
      constructor(...args) {
        super(...args);

        return new Proxy(this, {
          get(target, prop) {
            if (prop !== "serialize") {
              return target[prop];
            }

            return () => {
              let result: any = {};

              // iterable object case
              if (typeof target[Symbol.iterator] === "function" && typeof target !== "string") {
                result = [];

                for (let value of target as unknown as Iterable<any>) {
                  if (!(value instanceof Serializable)) {
                    continue;
                  }

                  result.push(value.serialize());
                }

                return result;
              }

              // ...details
            };
          },
        });
      }
    };
  };
}

abstract class Collection<KEY, VALUE, SERIALIZED> extends Serializable<SERIALIZED[]> {
  protected data: Map<KEY, VALUE>;

  protected constructor() {
    super();
  }

  *[Symbol.iterator]() {
    for (const [, item] of this.data) {
      yield item;
    }
  }
}

@serializable()
class VehicleCollection extends Collection<Vehicle["id"], Vehicle, SerializedVehicle[]> {
  constructor(vehicles: Vehicle[]) {
    super();

    this.data = new Map(vehicles.map((vehicle) => [vehicle.id, vehicle]));
  }
}
```

Nested entities can be serialized by the condition of inheritance from the Serializable class. Proxy can be replaced by Object.assign(), which will make the code more concise. Full code of the decorator:

<div class="content-ad"></div>

```js
import { Serializable } from './Serializable';

export function serializable(...propsToExclude: string[]) {
  return function serializableDecorator<T extends { new(...args: any[]): {} }>(SerializableClass: T) {
    return class extends SerializableClass {
      constructor(...args) {
        super(...args);

        return Object.assign(this, {
          serialize() {
            // iterable object case
            if (typeof this[Symbol.iterator] === 'function') {
              const result = [];

              for (let value of this) {
                if (!(value instanceof Serializable)) {
                  continue;
                }

                result.push(value.serialize());
              }

              return result;
            }

            const result = {};

            Object.keys(this).forEach((key) => {
              if (typeof this[key] === 'function'
                || propsToExclude.includes(key)
                || (typeof this[key] === 'object'
                  && this[key] !== null
                  && !(this[key] instanceof Serializable))
              ) {
                return;
              }

              if (typeof this[key] === 'object'
                && this[key] !== null
                && typeof this[key][Symbol.iterator] === 'function'
                && typeof this[key] !== 'string'
              ) {
                result[key] = [];

                for (let value of this[key]) {
                  if (!(value instanceof Serializable)) {
                    continue;
                  }

                  result[key].push(value.serialize());
                }

                return;
              }

              if (this[key] instanceof Serializable) {
                result[key] = this[key].serialize();

                return;
              }

              result[key] = this[key];
            })

            return result;
          }
        });
      }
    };
  }
}
```

테스트를 확인해보세요:

```js
import { serializable } from './serializableDecorator';
import { Serializable } from './Serializable';

export enum VehicleType {
  Car = 'Car',
  Bus = 'Bus',
  Bike = 'Bike',
}

type SerializedVehicle = {
  readonly id: string;
  readonly name: string;
  readonly type: VehicleType;
  readonly wheelsNum: number;
};

@serializable('checkExcluded')
export class Vehicle extends Serializable<SerializedVehicle> {
  private checkExcluded = 'checkExcluded';
  private checkNotSerializable = Object.create({});

  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly type: VehicleType,
    public readonly wheelsNum: number,
  ) {
    super();
  }

  get checkGetter() {
    return 'test';
  }

  drive() {
    // ...무언가 수행
  }

  repair() {
    // ...무언가 수행
  }
}

abstract class Collection<KEY, VALUE, SERIALIZED> extends Serializable<SERIALIZED[]> {
  protected data: Map<KEY, VALUE>;

  protected constructor() {
    super();
  }

  *[Symbol.iterator]() {
    for (const [,item] of this.data) {
      yield item;
    }
  }
}

@serializable()
export class VehicleCollection extends Collection<Vehicle['id'], Vehicle, SerializedVehicle[]> {
  constructor(vehicles: Vehicle[]) {
    super();

    this.data = new Map(vehicles.map((vehicle) => [vehicle.id, vehicle]));
  }
}

type SerializableStreet = {
  readonly id: string;
  readonly name: string;
  readonly vehicles: SerializedVehicle[],
}

// 중첩된 직렬화 가능한 컬렉션 및 개체 예제
@serializable()
export class Street extends Serializable<SerializableStreet> {
  constructor(
    public readonly id: string,
    public readonly name: string,
    public readonly vehicles: VehicleCollection,
    public readonly firstVehicle: Vehicle,
  ) {
    super();
  }
}
```

검증 코드 (테스트를 작성해도 되지만 아마 시각적인 특징이 더 있을 것 같습니다):

<div class="content-ad"></div>

```js
import { Street, Vehicle, VehicleCollection, VehicleType } from "./Vehicle";

const car = new Vehicle("8247b4f6-13cc-49f3-aac4-e828a2f19c6e", "car", VehicleType.Car, 4);

console.log(car.serialize());

// 예상 출력:
// {
//   id: '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
//   name: 'car',
//   type: 'Car',
//   wheelsNum: 4
// }

const collection = new VehicleCollection([
  new Vehicle("8247b4f6-13cc-49f3-aac4-e828a2f19c6e", "car", VehicleType.Car, 4),
  new Vehicle("229ade70-d5cd-4841-a60f-ec8ddf141780", "bus", VehicleType.Bus, 8),
  new Vehicle("96587162-9410-48b9-a5c6-89209ed4685c", "bike", VehicleType.Bike, 2),
]);

console.log(collection.serialize());

// 예상 출력:
// [
//   {
//     id: '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
//     name: 'car',
//     type: 'Car',
//     wheelsNum: 4
//   },
//   {
//     id: '229ade70-d5cd-4841-a60f-ec8ddf141780',
//     name: 'bus',
//     type: 'Bus',
//     wheelsNum: 8
//   },
//   {
//     id: '96587162-9410-48b9-a5c6-89209ed4685c',
//     name: 'bike',
//     type: 'Bike',
//     wheelsNum: 2
//   }
// ]

const street = new Street(
  "8247b4f6-13cc-49f3-aac4-e828a2f19c6e",
  "Street Name",
  collection,
  new Vehicle("ed0c0b19-9d54-42e5-b8d3-a4c0b1760781", "bike", VehicleType.Bike, 2)
);

console.log(street.serialize());

// 예상 출력:
// {
//   id: '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
//   name: 'Street Name',
//   vehicles: [
//     {
//       id: '8247b4f6-13cc-49f3-aac4-e828a2f19c6e',
//       name: 'car',
//       type: 'Car',
//       wheelsNum: 4
//     },
//     {
//       id: '229ade70-d5cd-4841-a60f-ec8ddf141780',
//       name: 'bus',
//       type: 'Bus',
//       wheelsNum: 8
//     },
//     {
//       id: '96587162-9410-48b9-a5c6-89209ed4685c',
//       name: 'bike',
//       type: 'Bike',
//       wheelsNum: 2
//     }
//   ],
//   firstVehicle: {
//     id: 'ed0c0b19-9d54-42e5-b8d3-a4c0b1760781',
//       name: 'bike',
//       type: 'Bike',
//       wheelsNum: 2
//   }
// }
```

그 결과에 대해 아직 고려해야 할 몇 가지 문제가 있습니다:

1. 직렬화된 객체의 유형을 개발자에게 남겨 둡니다.
2. 반복 가능한 객체는 배열로 직렬화되며, 다른 속성은 무시됩니다. 이것은 형식화된 컬렉션을 직렬화하는 방법이지만, 이터레이터와 함께 모든 속성을 직렬화해야 하는 객체에 대해 추가 로직을 고민해야 할 필요가 있습니다.
3. 데코레이터의 구현이 꽤 복잡해 보이며, 리팩토링할 공간이 있을 것으로 생각됩니다.
4. 고려하지 않은 경우가 많이 있을 것으로 생각되며, 필요할 경우 고려할 수 있습니다.
5. 추상 클래스를 사용해 형식 지정하는 해결책은 혼란스럽습니다. 형식 지정은 데코레이터를 통해 구현될 수도 있지만, 어떻게 변형할지 조금은 알 수 없습니다.

이 문제에 대해 준비된 솔루션을 찾으면 이상적이지만, 기사에 제시된 방법은 완벽하지 않지만, 제3자 라이브러리를 사용할 수 없거나 특수한 경우에 코드를 작성해야 하는 경우에 기초로 사용할 수 있는 유용한 방법일 수 있습니다.

Github에서의 코드: https://github.com/BoesesGenie/ts-serializable-decorator

<div class="content-ad"></div>

해당 주제에서 읽을 만한 것들:

1. 데코레이터 관련:

- TypeScript 데코레이터: https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators (해당 기사에서는 레거시 데코레이터를 사용함);
- TC39 진행 중: https://github.com/tc39/proposal-decorators (해당 기사에서 사용되지 않음);

2. Proxy 객체 관련:

- https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy
- David Flanagan. JavaScript.The Complete Guide, 7th ed. 14장. 메타프로그래밍
- Nicholas C. Zakas. Understanding ECMAScript 6: JavaScript 개발자를 위한 정식 가이드. 12장. 프록시와 리플렉션 API

PS. 누아르 고양이 탐정은 자신의 누아르 성격을 장식하는 그림자를 드리고 있습니다.
PPS. 타입드 콜렉션에 관한 아이디어는 Ed Ishmukhametov(https://www.linkedin.com/in/ishmukhametoveduard/)에게 감사드립니다.


TypeScript 데코레이터를 활용한 엔티티 직렬화


<img src="/assets/img/2024-08-19-CreatingEnvlessAngular-application_0.png" />

# 소개

안녕하세요! Angular에 대해서 알고 계신다면, 다양한 환경에 대한 애플리케이션을 빌드하기 위한 도구가 있음을 아실 것입니다.

해당 환경에 따라 빌드를 위해 환경.`env`.ts 파일을 만들고 사용함으로써 이를 실현할 수 있습니다. 이를 통해 다음과 같은 설정 간에 전환할 수 있습니다:

<div class="content-ad"></div>

- 개발 (environment.ts)
- 테스트 (environment.test.ts)
- 프로덕션 (environment.prod.ts)

## environment.ts 파일의 주요 역할:

- API 설정. 각 파일은 환경에 따라 API 서버의 다른 URL을 포함할 수 있습니다.
- 최적화. 프로덕션 파일은 디버그 기능을 비활성화하고 최적화를 활성화하여 성능을 개선합니다.
- 환경 변수. API 키 및 기능을 활성화 또는 비활성화하는 플래그와 같은 환경 변수를 쉽게 관리할 수 있습니다.

그리고 모든 것이 잘 돼 보입니다 — 각 환경에 대한 각각의 파일

<div class="content-ad"></div>

# 문제

환경의 수가 늘어남에 따라 다음 작업을 수행해야 합니다:

- 각각의 환경을 위한 `env.ts` 파일을 생성합니다.
- 별도의 빌드 구성을 생성하고 `fileReplacements`를 지정합니다.
- 이 빌드 구성을 `serve-build`에 추가합니다.
- `package.json`에 "my-app.build.`env`": "ng build — configuration `env`” 명령을 추가합니다.

![이미지](https://miro.medium.com/v2/resize:fit:960/1*ML2Aj-vgqcO-vx2Mxjwo0g.gif)

<div class="content-ad"></div>

프리프로덕션 환경의 e2e 테스트나 기능 브랜치 전용 빌드에 대해서 이야기하고 있지 않아요.

그래서 무엇을 위해? — CI에서 템플릿 명령어를 사용하기 위해서

```js
- run: npm run my-app:build:${ SOME_VAR.ENV }
```

이러한 애플리케이션의 개념적인 파이프라인은 아래와 같이 묘사될 수 있습니다.

<div class="content-ad"></div>

그리고 당신은 말할 수 있어요 — “이것은 기본 확장과 환경에 독립적인 CI입니다. TEST1을 사용하려면 ENV=TEST1을 전달하면 돼요”.

아니, 젊은 건축가, 이건 틀렸어요. 왜냐면? — 당신의 애플리케이션이 사용되는 모든 환경을 알고 있고 모든 구성을 추적하는 것이 문제예요:

- 구성에 새 매개변수를 추가하고 싶나요? — 각 파일을 업데이트해야 하고, 각 환경에 필요한 값이 무엇인지 알아야 해요.
- 특정 환경에 있는 애플리케이션을 위한 매개변수를 변경하려고 하나요? — 레포지토리로 가서 파일을 업데이트하고 실행해야 해요.

이와 같은 많은 예가 있고 매번 확장성과 지원 문제가 발생해요.

<div class="content-ad"></div>

## 환경.ts 파일 사용의 단점

- 모든 환경.`env`.ts 파일의 지원이 필요합니다.
- angular.json에서 각 환경에 대한 대체 빌드 생성
- 몇 가지 매개변수만을 사용하여 중복 도커 이미지를 생성하여 효율적이지 못한 레지스트리 공간 활용
- 각 ENV에 대해 전체 파이프라인을 실행해야 하는 필요성
- 사용자에게 제공되지 않을 조립체에서 테스트를 수행합니다.
- 개별 환경에 대한 매개변수를 변경할 유연성 부족
- HeadLess 솔루션으로 응용 프로그램을 공유할 수 없음

# 할 일 목록

주요 달성할 사항:

<div class="content-ad"></div>

- 어플리케이션과 도커 이미지를 한 번만 빌드하도록 확인해주세요.
- 우리 어플리케이션은 다양한 환경에 맞게 구성할 수 있어야 하며, 필요한 변수들의 인터페이스만 정의하면 됩니다.
- 개발 공간을 분리하고 어플리케이션 빌드 작업을 수행하기 위해, 소스 파일 environment.ts 및 environment.prod.ts를 유지해야 합니다.

이 결과로 다음과 같은 방식으로 어플리케이션을 사용하고 배포해야 합니다.

배포 일환시:

- Envless 빌드 파이프라인은 한 번만 실행되며, 어플리케이션의 프로덕션 빌드를 수행하고, 해당 빌드를 레지스트리에 도커 이미지로 저장합니다.
- `Env` 배포 파이프라인은 이미 알고 있는 환경(ENV)에 따라 어플리케이션을 배포해야 하는 릴리즈 파이프라인입니다.

<div class="content-ad"></div>

애플리케이션 구성은 릴리스 파트에 가까워질 때까지 되감아지고 있어요

# 해결책 1 — 서버에서 구성 가져오기

이 해결책을 구현하려면 필요한 구성을 모두 얻을 수 있는 API 엔드포인트 서버가 필요합니다

## 작업 구조

<div class="content-ad"></div>

## 구현

- 어플리케이션 내에서 구성 설정을 선언하고 구성 설정의 프로비저닝을 위한 토큰을 만들어 봅시다. 또한, 초기 상태에 대한 기본값도 생성할 것입니다.

```js
export interface IAppConfig {
  apiHost: string;
  imageHost: string;
  titleApp: string;
}

export const APP_CONFIG_DEFAULT: IAppConfig = {
  apiHost: "https://my-backend.com",
  imageHost: "https://image-service.com",
  titleApp: "Production Angular EnvLess App",
};

export const APP_CONFIG_TOKEN: InjectionToken<IAppConfig> = new InjectionToken() < IAppConfig > "APP_CONFIG_TOKEN";
```

- 구성을 요청하고 제공할 함수를 만들어 보세요. 서버 오류가 발생할 경우, 유효한 작동을 위한 어플리케이션의 기본 설정을 제공합니다.

<div class="content-ad"></div>

```js
function loadConfig(): Promise<IAppConfig> {
  // 또는 상대 경로 /app/config
  return fetch("http://localhost:3000/app/config").then(
    (res) => res.json(),
    () => APP_CONFIG_DEFAULT
  );
}

export async function bootstrapApplicationWithConfig(
  rootComponent: Type<unknown>,
  appConfig?: ApplicationConfig
): Promise<ApplicationRef> {
  return bootstrapApplication(rootComponent, {
    providers: [
      ...(appConfig?.providers || []),
      {
        provide: APP_CONFIG_TOKEN,
        useValue: await loadConfig(),
      },
    ],
  });
}
```

- 기존의 native bootstrapApplication 함수를 새로운 bootstrapApplicationWithConfig 함수로 교체합니다.

```js
// bootstrapApplication(AppComponent, appConfig)
bootstrapApplicationWithConfig(AppComponent, appConfig).catch((err) => console.error(err));
```

- 애플리케이션 구성 서버는 express의 간단한 구성일 것입니다.

<div class="content-ad"></div>

```js
app.get("/app/config", (req, res) => {
  res.json({
    apiHost: "https://my-backend.<ENV>.com",
    imageHost: "https://image-service.<ENV>.com",
    titleApp: "<Env> - Angular EnvLess App",
  });
});
```

## 런타임 검증

애플리케이션은 런타임에 구성되어 있으므로 필요한 URL을 알고 있다면 로컬 환경에서 작동 여부를 확인하는 것은 문제가 되지 않습니다.

애플리케이션 시작 시점에 요청에 대한 구성을 가져와 매끄럽게 수행할 수 있습니다. 이 구성을 다른 API URL을 사용하는 다른 애플리케이션 서비스에 사용할 수 있습니다.

<div class="content-ad"></div>

서버로부터 응답 오류가 발생하는 경우 기본값이 사용되며 응용 프로그램은 계속 작동합니다.

## 장단점

이 접근 방식을 사용하는 또 다른 장점은 다음과 같습니다:

- 응용 프로그램은 런타임에 구성되며 재배포가 필요하지 않습니다.
- 구성은 애플리케이션이 시작되기 전에로드되므로 APP_INITIALIZER 토큰을 통해 병렬 요청을 사용할 수 있으며 구성이 수신되는 순서에 대해 걱정할 필요가 없습니다.
- e2e-테스트에서 요청을 가로채고 구성 파일을 테스트에 제공하는 것이 쉽습니다.

<div class="content-ad"></div>

하지만 단점도 있습니다:

- 구성을 얻으려면 URL을 알아야 하거나 프론트엔드 및 백엔드 애플리케이션에 동일한 호스트가 있어야 합니다.
- 서버에서의 응답이 길 수 있어 사용자의 기대에 영향을 줄 수 있습니다.
- 요청 오류가 발생할 경우 FALLBACK 값을 가지고 있어야 합니다.
- 각 ENV마다 구성을 위한 전용 데이터베이스가 필요합니다.
- 관리자가 전용 액세스 권한을 가지고 구성을 읽고 수정할 수 있는 API가 필요합니다.
- 런타임 구성으로 인해 오류 발생 확률이 높아지므로 구성은 프론트엔드 애플리케이션에서 유효성을 검사해야 합니다.
- 구성 지원은 백엔드 개발자와 데브옵스에서 제공됩니다.

기본 빌드 파이프라인을 건들지 않으면서 구성을 얻는 체계를 유지하되, 서버에 의존하지 않고 단점을 고려할 수 있는 방법이 있을까요? — 네, 도커 이미지를 구성할 수 있습니다

# 해결책 2 — 도커 이미지 설정

<div class="content-ad"></div>

이 솔루션의 핵심은 간단합니다. 원격 서버에 설정을 가져오는 대신 Frontend 애플리케이션이 위치한 파일 디렉토리로 요청을 보낼 것입니다.

구성 파일은 소스 도커 이미지 검색 단계에서 생성되며 기본 구성(config.json)을 대체합니다. 프런트엔드 애플리케이션이 요청을 실행하는 기본 디렉토리는 자산이나 공용(public)입니다.

구성 파일은 배포 파이프라인을 시작할 때 지정된 ENV 변수를 기반으로 생성됩니다. ENV 변수가 발견되지 않으면 기본 값이 사용됩니다.

## 작업 방법

<div class="content-ad"></div>

해결책은 우아하지만, 프론트엔드 뿐만 아니라 데브옵스와 CI 스크립트에도 숙련된 기술이 필요할 것입니다.

"config.json" 파일을 "업데이트"하기 위해 작업 계획을 구현해야 합니다.

## 배포 파이프라인

![Creating Envless Angular Application](/assets/img/2024-08-19-CreatingEnvlessAngular-application_1.png)

<div class="content-ad"></div>

## 구현

서버에서 config.json을 가져오는 대신에, config의 key들이 업데이트될 때 ENV 변수명과 일치하도록 해야 합니다.

- 로컬 assets/config.json

```js
{
 "APP_ENV_API_HOST": "https://local.my-backend.com",
 "APP_ENV_API_IMAGE_HOST": "https://local.image-service.com",
 "APP_ENV_TITLE_APP": "Local - Angular EnvLess App"
}
```

<div class="content-ad"></div>

- 업데이트된 URL로 구성 요청 기능 구성

```js
function loadConfig(): Promise<IAppConfig> {
  // 상대 주소
  // 공용 또는 자산 경로
  return fetch("/config.json").then((res) => res.json());
}
```

- 새 config.json을 생성하고 docker 이미지를 업데이트하는 예제 스크립트

```js
#!/bin/bash

set -x
set -e

# CONFIG ENVIRONMENT VARIABLES
APP_ENV_API_HOST="https://<ENV>.my-backend.com"
APP_ENV_API_IMAGE_HOST="https://<ENV>.image-service.com"

# SETTINGS
PORT=4110
NGINX_PORT=80
CONTAINER_NAME="angular-envless-container"
IMAGE="angular-envless"
NEW_IMAGE="patched-angular-envless"
CONFIG_NAME="config.json"
APP_PATH="/usr/share/nginx/html"

#Step 1
temp_container_run(){
  docker run -it -d -p $PORT:$NGINX_PORT --name $CONTAINER_NAME $IMAGE
}

#Step 2
temp_container_get_config(){
  docker cp $CONTAINER_NAME:$APP_PATH/$CONFIG_NAME ./$CONFIG_NAME
}

#Step 3
create_config_json(){
  temp_container_get_config

  if [[ ! -f "./$CONFIG_NAME" ]]; then
    echo "지정된 디렉토리에 구성 파일을 찾을 수 없습니다."
    temp_container_stop
    temp_container_rm
    return 1
  fi

  # JSON에서 키와 값을 추출
  KEY_VALUES=$(awk -F '[:,]' '/:/{gsub(/"| /,""); print $1 "=\"" $2 "\""}' "./$CONFIG_NAME")

  # 새로운 JSON 객체 생성
  PROD_CONFIG="{"

  for PAIR in $KEY_VALUES; do
    KEY=$(echo $PAIR | cut -d '=' -f 1)
    DEFAULT_VALUE=$(echo $PAIR | cut -d '=' -f 2 | sed 's/,$//')

    VALUE=${!KEY}

    if [[ -z "$VALUE" ]]; then
      VALUE=$DEFAULT_VALUE
    else
      VALUE="\"$VALUE\""
    fi

    PROD_CONFIG+="\"$KEY\":$VALUE,"
  done

  PROD_CONFIG=${PROD_CONFIG%,}
  PROD_CONFIG+="}"

  echo "$PROD_CONFIG" > "./$CONFIG_NAME"

  echo "구성이 성공적으로 업데이트되었으며 ./$CONFIG_NAME에 저장되었습니다."
}

#Step 4
temp_container_upsert_config(){
  docker cp ./$CONFIG_NAME $CONTAINER_NAME:$APP_PATH/$CONFIG_NAME
}

#Step 5
temp_container_commit(){
  docker commit --pause $CONTAINER_NAME $NEW_IMAGE
}

#Step 6.1
temp_container_stop(){
  docker stop $CONTAINER_NAME
}

#Step 6.2
temp_container_rm(){
  docker rm $CONTAINER_NAME
}

main(){
  temp_container_run
  create_config_json
  temp_container_upsert_config
  temp_container_commit
  temp_container_stop
  temp_container_rm
}

main
```

<div class="content-ad"></div>

## 런타임 검증

이 스크립트를 실행한 후, 모든 작업을 마치셨습니다. 도커 이미지를 컨테이너에서 실행하고 환경 변수가 구성에 적용되었는지 확인하면 됩니다.

APP_ENV_TITLE_APP 변수가 도커 이미지를 구성할 때 전달되지 않았다면 코드가 정상적으로 작동합니다.

## 장단점

<div class="content-ad"></div>

이 방식 덕분에 서버가 프런트엔드 애플리케이션 구성에 미치는 영향이 줄었습니다. 서버를 통해 구성하는 장점 외에도 다음과 같은 이점이 있습니다:

- 구성이 즉시 사용 가능하며 지연이 최소화됩니다.
- 요청 오류 발생 시 FALLBACK 값이 필요하지 않습니다.
- 구성에 대한 API나 외부 관리가 필요하지 않습니다.
- 신뢰성이 높습니다. 실행 중에 어셈블리가 손상될 수 없습니다.
- 각 환경별 별도 데이터베이스를 생성할 필요가 없습니다.

하지만 다른 측면에서 조심해야 할 점도 있습니다:

- 응용 프로그램 배포 인프라의 복잡성 증가
- 별도의 파이프라인 배포가 필요합니다.
- DevOps 엔지니어의 지원 및 확인이 필요합니다.
- 배포 시작 시 애플리케이션을 구성하기 위해 올바른 ENV 변수를 알아야 하며 미리 정의된 목록을 설정해야 합니다.

<div class="content-ad"></div>

# 마무리로

제가 제시한 솔루션들은 프론트엔드 애플리케이션을 유연하게 관리하고 독립적으로 관리해야 할 필요가 있는 경우에만 적합합니다. 현재 애플리케이션이 유연한 구성을 요구하지 않거나 DevOps 엔지니어가 도커 레지스트리 메모리를 효과적으로 관리하거나 헤드리스 애플리케이션을 생성할 계획이 없는 경우에는 이전과 같이 environment.ts 파일을 사용할 수 있습니다.

개발 초기에 애플리케이션의 가능한 구현 방법과 사용 사례를 알 수 없는 경우, 이 접근 방식은 미래에 많은 시간을 절약하고 빌드 관리에 대한 완전한 제어력을 제공할 수 있습니다.


환경 설정이 필요없는 Angular 애플리케이션 만드는 방법


<img src="/assets/img/2024-08-19-BuildaRobustPasswordRecoverySystemUsingbcryptjsjsonwebtoken_0.png" />

시작하기 전에, express, mongoose 및 nodemailer가 설치되어 있고 설정되어 있다고 가정합니다. 이 프로젝트가 작동하려면 이미 mongoose를 사용하여 User 이메일, 이름 및 비밀번호 필드가 설정된 User 모델이 있어야 합니다. 이것은 총 초보자를 위한 프로젝트가 아니며 mongoose 및 express를 사용하고 express의 미들웨어에 대한 이해가 조금 있는 경우에 필요합니다. 즐거운 독서😊.

## 단계 1: 프로젝트 설정

이 단계에서는 bcryptjs를 사용하여 비밀번호를 해싱하기 위한 필수 패키지를 설치하고, 토큰을 생성하고 검증하기 위한 jsonwebtoken, 환경 변수를 안전하게 관리하기 위한 dotenv를 설치하여 프로젝트를 설정합니다. 이러한 도구들은 안전한 비밀번호 복구 시스템을 구축하는 데 도움이 됩니다.

<div class="content-ad"></div>

```js
npm i bcrypt jsonwebtoken dotenv
```

다음으로 백엔드 작업을 시작하기 전에 `.env` 파일을 만들어주셔야 해요.

```js
// .env 파일

EMAIL = "youremail@gmail.com"; // 여러분의 이메일 주소
PASSWORD = "yourEmailPassword"; // 여러분의 이메일 비밀번호
JWT_SECRET = "any+secret"; // 이건 추측하기 어려운 값을 사용해주세요
```

참고: 깃허브 저장소에 푸시하기 전에 해당 파일을 .gitignore에 추가해 이메일 유출을 방지하세요.

<div class="content-ad"></div>

## 단계 2: `auth.js` 컨트롤러 설정

이번 단계에서는 `auth.js` 파일에 두 개의 컨트롤러를 생성할 것입니다: 하나는 비밀번호 복구 링크를 생성하고 보내는 기능(`recoverPassword`), 다른 하나는 비밀번호 재설정을 위한 기능(`changePassword`)입니다. 여기서는 사용자 ID를 인코딩한 JSON Web Token (JWT)을 생성합니다. 이 토큰은 사용자에게 보내는 비밀번호 복구 링크에 포함됩니다.

또한 nodemailer를 사용하여 복구 링크가 포함된 이메일을 보냅니다. 이 링크를 통해 사용자는 비밀번호를 재설정할 수 있는 페이지로 이동합니다.

```js
// auth.js

const jwt = require('jsonwebtoken');
const nodemailer = require('nodemailer');
const User = require('./models/User'); // User 모델이 임포트되어 있는지 확인해주세요
const bcrypt = require('bcryptjs');

// 비밀번호 복구 루트
const recoverPassword = async (req, res) => {
  const { email } = req.body;

  const user = await User.findOne({ email });
  if (user) {
    const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, {
      expiresIn: '1hr',
    });

    const link = `http://localhost:3000/auth?token=${token}`;

    const message = `Dear ${user.name},
비밀번호 재설정을 위해 다음 링크를 클릭해주세요: ${link}

보안 상의 이유로, 이 링크는 2분 후에 만료됩니다.
감사합니다.
`;

    let transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: {
        user: process.env.EMAIL,
        pass: process.env.PASSWORD,
      },
    });

    let mailOptions = {
      from: process.env.EMAIL,
      to: email,
      subject: '비밀번호 복구',
      text: message,
    };

    let info = await transporter.sendMail(mailOptions);
    res.status(200).json({ msg: `이메일 전송됨: ${info.response}` });
  } else {
    res.status(404).json({ msg: '사용자를 찾을 수 없습니다' });
  }
});
```

<div class="content-ad"></div>

이 코드는 사용자로부터 이메일을 입력받아 데이터베이스에서 해당 이메일을 가진 사용자가 있는지 확인한 후, 없다면 오류를 발생시킵니다. 사용자 이메일이 확인된 후에는 사용자 이메일 주소와 ID로 jwt를 서명하여 링크를 생성합니다. 이 링크는 nodemailer 패키지를 사용하여 사용자 이메일로 전송됩니다. nodemailer는 이메일을 보내기 위한 이메일 주소가 필요하며, 여러분의 이메일을 사용하거나 이 멋진 프로젝트를 실행해 보기 위해 새로운 이메일을 만들 수 있습니다 😊.

## 단계 3: 미들웨어

이 미들웨어 함수인 authLink는 사용자가 해당 링크를 클릭할 때 복구 링크에서 토큰을 확인합니다. 토큰을 해독하여 사용자 ID를 검색하고 다음 단계에서 사용하기 위해 req 객체에 첨부합니다. next() 함수는 제어를 다음 미들웨어 또는 라우트 핸들러로 전달하여 비밀번호 재설정 요청을 처리할 것입니다.

```js
// authenticaLink.js
const jwt = require("jsonwebtoken");

const authLink = async (req, res, next) => {
  const {
    query: { token },
  } = req;
  try {
    const payload = jwt.verify(token, process.env.JWT_SECRET);
    req.user = { userId: payload.userId };
    next();
  } catch (error) {
    console.log(error);
  }
};

module.exports = authLink;
```

<div class="content-ad"></div>

다음:

## 단계 4: 파싱된 사용자 처리

우리는 두 개의 비밀번호 필드가 모두 입력되었는지 및 일치하는지 확인하여 사용자가 올바른 새 비밀번호를 입력했는지 확인합니다. 새 비밀번호를 저장하기 전에 bcryptjs를 사용하여 해당 비밀번호를 해싱합니다. 이것은 데이터베이스에 평문 비밀번호를 저장하는 것이 중요한 취약점이 될 수 있기 때문에 중요한 보안층을 추가합니다.

이 튜토리얼은 오류 처리에 중점을 두지 않지만, 사용자 경험을 향상시키기 위해 사용자 정의 오류 메시지나 리디렉션을 추가할 수 있습니다.

<div class="content-ad"></div>

```jsx
//auth.js

const changePassword = async (req, res) => {
  const {
    body: { password1, password2 },
    user: { userId },
  } = req;

  if (!password1 || !password2 || password1 !== password2) {
    throw new Error('Both passwords are required and must match');
  }

  const user = await User.findById(userId);
  if (!user) {
    throw new Error('User not found');
  }

  // Use Bcrypt to encrypt the new password
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password1, salt); // Create a new variable for the hashed password
  user.password = hashedPassword;

  await user.save();

  res.status(200).json({ user });
};

auth.js에 있는 모든 코드:

//auth.js

const jwt = require('jsonwebtoken');
const nodemailer = require('nodemailer');
const User = require('./models/User'); // 사용자 모델을 가져오는 것을 확인해주세요

// 비밀번호 찾기
const recoverPassword = async (req, res) => {
  const { email } = req.body;

  const user = await User.findOne({ email });
  if (user) {
    const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, {
      expiresIn: '1hr',
    });

    const link = `http://localhost:3000/auth?token=${token}`;

    const message = `Dear ${user.name},
비밀번호를 재설정하려면 다음 링크를 클릭하세요: ${link}

보안상의 이유로 이 링크는 2분 후에 만료됩니다.
감사합니다.
`;

    let transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: {
        user: process.env.EMAIL,
        pass: process.env.PASSWORD,
      },
    });

    let mailOptions = {
      from: process.env.EMAIL,
      to: email,
      subject: '비밀번호 변경',
      text: message,
    };

    let info = await transporter.sendMail(mailOptions);
    res.status(200).json({ msg: `이메일 전송: ${info.response}` });
  } else {
    res.status(404).json({ msg: '사용자를 찾을 수 없습니다' });
  }
});

// 비밀번호 변경
const changePassword = async (req, res) => {
  const {
    body: { password1, password2 },
    user: { userId },
  } = req;

  if (!password1 || !password2 || password1 !== password2) {
    throw new Error('비밀번호는 필수이며 일치해야 합니다');
  }

  const user = await User.findById(userId);
  if (!user) {
    throw new Error('사용자를 찾을 수 없습니다');
  }

  // Bcrypt를 사용하여 새 비밀번호를 암호화합니다
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(password1, salt); // 암호화된 비밀번호를 위한 새 변수 생성
  user.password = hashedPassword;

  await user.save();

  res.status(200).json({ user });
};

module.exports = {
  recoverPassword,
  changePassword,
};

## 단계 5: auth.js 라우트 설정
```

<div class="content-ad"></div>

여기서는 패스워드 복구 및 변경 프로세스를 처리할 경로를 정의하고 있습니다. /recover-password 경로는 복구 링크가 포함된 이메일을 트리거하며, /change-password는 새로운 암호를 처리하지만 authLink 미들웨어가 토큰을 확인한 후에만 처리합니다.

주의: 우리는 유효한 토큰을 가진 사용자만이 패스워드를 재설정할 수 있도록 /change-password 경로에 authLink 미들웨어를 적용하였습니다.

```js
const express = require("express");
const router = express.Router();

const { recoverPassword, changePassword } = require("../controllers/auth");
const authLink = require("../middleware/authenticateLink");

router.post("/recover-password", recoverPassword);
router.patch("/change-password", authLink, changePassword);

module.exports = router;
```

## 단계 6: 마지막으로, server.js를 설정합니다.

<div class="content-ad"></div>

이 마지막 단계에서는 Express 서버를 설정하고 애플리케이션이 사용할 라우트를 정의합니다. authRouter를 가져와서 패스워드 복구 기능을 주요 애플리케이션에 연결합니다. dotenv를 사용하여 환경 변수를로드하여 이메일 자격 증명 및 JWT 비밀을 보안합니다.

```js
//server.js 파일
require("dotenv").config();
require("express-async-errors");

const express = require("express");
const app = express();

// 라우터
const authRouter = require("./routes/auth");

app.use(express.json());

// 라우트
app.use("/api/v1/auth", authRouter);

// Home route
app.get("/", (req, res) => {
  res.status(200).send("Jobs-API에 오신 것을 환영합니다");
});

const port = process.env.PORT || 3000;

const server = async () => {
  app.listen(port, () => console.log(`서버가 포트 ${port}에서 청취 중입니다...`));
};

server();
```

이 튜토리얼에서는 bcryptjs 및 jsonwebtoken을 사용하여 안전한 패스워드 복구 시스템을 성공적으로 구축했습니다. 프로젝트 설정, 복구 이메일 보내기 및 패스워드 재설정을위한 컨트롤러 생성, 및 프로세스를 보호하기위한 미들웨어 사용을 다루었습니다. 이 기능은 더 큰 애플리케이션에 통합할 수 있으며 사용자 정의 오류 처리 또는 추가 보안 조치를 추가하여 보강할 수 있습니다.


Posts