Markdown 형식의 표를 변경하실게요.

![Mapped types in TypeScript](/TIL/assets/img/2024-07-07-ExploringMappedTypesinTypeScript8ExamplesfromBasictoAdvanced_0.png)

TypeScript의 Mapped types은 한 타입의 속성을 다른 타입으로 변환하는 강력한 도구입니다. 이들은 map과 filter와 비슷한 배열 메서드와 유사하지만, 이러한 작업들은 타입에 대해 수행됩니다. 우리는 실용적인 예제를 통해 그들의 사용법을 이해할 것입니다. 다음으로, 우리는 기초부터 고급까지 총 8가지 Mapped 타입 예제를 차근차근 시연하면서, 여러분이 이 강력한 타입 변환 도구를 쉽게 마스터할 수 있도록 돕겠습니다.

# I. 기초적인 타입 변환

TypeScript에서는 때때로 한 타입의 속성을 다른 타입으로 변환해야 할 때가 있습니다. 이것은 Mapped types를 사용하여 쉽게 실현할 수 있습니다. 아래에서는 한 Product 타입의 속성을 문자열 타입으로 변환하는 방법을 구체적인 예제를 통해 시연하겠습니다.



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

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

## 1. 제품 유형 정의하기

먼저, 세 가지 속성인 이름 (문자열 유형), 가격 (숫자 유형), 재고 여부 (부울린 유형)을 포함한 제품 유형을 정의합니다.

```js
type Product = {
  name: string,
  price: number,
  inStock: boolean,
};
```

## 2. 제품을 문자열로 변환하는 유형 정의하기



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

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

그 다음, 우리는 새로운 타입인 ProductToString을 정의합니다. 이 타입은 Product 타입의 모든 속성을 문자열 타입으로 변환합니다.

```js
type…
```

TypeScript 맵드 타입 알아보기 기초부터 고급까지 8가지 예제

shadcn-ui CLI가 어떻게 작동하는지 알아보고 싶었어요. 이 글에서는 shadcn-ui/ui CLI를 구축하는 데 사용된 코드에 대해 이야기하고 있어요.

2.6 부에서는 프로젝트의 ts-config.json 파일에서 사용되는 별칭을 반환하는 getTsConfigAliasPrefix 함수를 살펴봤어요.

이제 다음 코드 라인으로 넘어가 봅시다.

![이미지](/TIL/assets/img/2024-07-07-shadcn-uiuicodebaseanalysisHowdoesshadcn-uiCLIworkPart27_0.png)



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

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

L84에서는 projectType 또는 tailwindCssFile 또는 tsConfigAliasPrefix 중 하나라도 존재하지 않는 경우 null을 반환하는 간단한 확인 작업입니다.

isTypescriptProject(cwd)에 대해 더 알아보겠습니다.

```js
const isTsx = await isTypeScriptProject(cwd);
```

isTypescriptProject는 ui/packages/cli/src/utils/get-project-info.ts로부터 가져온 함수이며, 이 함수는 현재 작업 디렉토리(cwd)에 tsconfig.json 파일이 있는지 확인합니다.



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

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

```js
export async function isTypeScriptProject(cwd: string) {
  // cwd에 tsconfig.json 파일이 있는지 확인합니다.
  return pathExists(path.resolve(cwd, "tsconfig.json"));
}
```

# pathExists

pathExists는 fs-extra에서 가져온 함수입니다.

```js
import fs, { pathExists } from "fs-extra";
```



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

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

# 결론:

프로젝트가 TypeScript를 사용하는지 확인하려면 shadcn-ui/ui CLI 패키지와 같은 작업을 수행할 수 있습니다. 즉, fs-extra에서 제공하는 pathExists 함수를 사용하여 지정된 cwd에 있는 tsconfig.json 경로가 있는지 확인하면 됩니다.

# 나에 대해:

웹사이트: [https://ramunarasinga.com/](https://ramunarasinga.com/)



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

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

Linkedin: [링크드인](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [깃허브](https://github.com/Ramu-Narasinga)

이메일: ramu.narasinga@gmail.com

shadcn-ui/ui를 처음부터 만들기



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

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

# 참고 자료:

- [shadcn-ui 프로젝트 정보 가져오기](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L84C3-L88C47)
- [shadcn-ui 프로젝트 정보 가져오기](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L174)
- [shadcn-ui 프로젝트 정보 가져오기](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L10)
- [fs-extra 패키지](https://www.npmjs.com/package/fs-extra)

shadcn-ui UI 코드베이스 분석 shadcn-ui CLI는 어떻게 작동하나요  27부

최근에 테이블 화면 클립을 CSV 파일로 변환하는 도구를 만들어서 론칭했어요.

이 도구는 이메일 인증과 Stripe를 이용한 실제 결제 기능을 갖춘 기능적인 앱이에요.

여기에는 해당 도구를 구축하기 위해 사용한 기술 스택을 공유해봤어요. 입문자 루트 개발자들에게 완벽한 간단한 스택이라고 생각해요 (초보에서 중급 프로그래머들 😉).

![image](/TIL/assets/img/2024-07-07-ASimpleTechStackforBeginnerBootstrappers_0.png)



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

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

# 메인 애플리케이션 (Next.js)

도구의 핵심은 Next.js 애플리케이션입니다. Next.js는 React로 구축된 풀스택 프레임워크입니다.

웹 애플리케이션을 시작하는 데 Next.js를 사용하는 것을 좋아하는 몇 가지 이유가 있습니다:

- JavaScript / TypeScript로 모든 것을 작성할 수 있는 풀스택 지원.
- 현대적인 App Router 접근 방식을 통해 앱의 아키텍처를 쉽게 설계할 수 있습니다. 디렉토리와 페이지를 추가하면 라우팅이 자동으로 처리됩니다.
- 문서는 초보자에게도 잘 구성되어 있고 쉽게 접근할 수 있습니다.
- Vercel도 함께 사용하면 배포도 매우 쉽습니다.



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

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

# 미리 알았더라면 좋았을 것들

## 서버 및 클라이언트 컴포넌트에 대해 문서를 읽는 데 시간을 보내세요.

이 모델에 익숙해지는 데 시간이 걸립니다. 하지만 결국 직관적이 되어 이 현대 웹 애플리케이션의 방향이 왜 그런지 볼 수 있습니다.

- 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다. 이는 로딩 시간, 보안 및 SEO에 이점이 있습니다.
- 클라이언트 컴포넌트는 가져와서 서버 컴포넌트에서 사용할 수 있습니다.
- 서버 컴포넌트는 클라이언트 컴포넌트로 가져올 수 없습니다. 그러나 프롭스로 전달할 수 있습니다.
- 그 결과로 클라이언트 컴포넌트는 인터랙티브한 기능이 필요한 곳으로 컴포넌트 트리 아래로 밀어 넣어야 합니다 (예: 폼 및 버튼).



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

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

이 컴포넌트가 어떻게 조합되는지를 잘 익히면 Next.js를 사용한 생산성이 크게 향상될 것입니다.

## 컴포넌트를 어떻게 구성할지에 대한 초기 결정을 내리세요

나는 세 가지 주요 방법이 있다고 생각해요.

- 'page.tsx' 파일 옆의 라우트 디렉터리 내에 컴포넌트를 위치시킵니다.
- 별도의 'components' 디렉터리에 컴포넌트를 위치시킵니다.
- 방법 1과 2를 혼합해서 사용합니다.



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

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

내 도구를 개발할 때 여러 접근 방법을 시도해 보았고, 결국 2번째 방법으로 정착했습니다.

라우트 디렉토리 내에서 구성 요소를 찾는 것은 금방 번거로워지는 반면, 한 디렉토리에 모든 것을 찾아야 했기 때문에 구성 요소의 재사용성에 대해 더 신중히 고민해야 했습니다.

## 컴포넌트 라이브러리 사용

컴포넌트 라이브러리를 사용하면 많은 시간을 절약할 수 있습니다. 하지만 그러면 다음 문제는 어떤 컴포넌트 라이브러리를 사용해야 할지입니다.



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

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

저는 shadcn/ui를 좋아해요. CLI를 사용하면 컴포넌트의 전체 코드가 프로젝트에 자동으로 붙여지기 때문이에요.

컴포넌트들은 합리적인 스타일링 기본 설정을 가지고 시작할 때 편리하며, 코드를 쉽게 검사할 수 있는 능력은 (제 경우처럼) 견고한 재사용 가능한 컴포넌트가 어떻게 만들어지는지 배우고자 하는 분들에겐 좋은 기회가 되요.

# 유용한 링크

- React 소개
- Next.js 소개
- ByteGrad에서 제공하는 Next.js 관련 멋진 튜토리얼 비디오
- Next.js와 shadcn/ui 설정하는 방법



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

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

# 데이터베이스 (Supabase)

데이터베이스로 Supabase를 사용했어요. 선택한 이유는 다음과 같아요:

- Next.js 애플리케이션과 매우 잘 통합돼요.
- 인증 제공자로 사용할 수 있어요.
- 오픈 소스에요.
- 문서가 매우 훌륭해요 ✨.

# 미리 알았더라면 좋았을 것들



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

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

## Next.js와 Supabase 스타터 프로젝트 사용하기

어플리케이션을 처음부터 만들어가던 중 Next.js와 Supabase가 기본 인증이 구축된 스타터 프로젝트로 협업한 것을 발견했어요.

내 제안은 이 스타터를 사용하되 코드를 익히면서 작동 방식을 배우는 거예요.

스타터를 사용하면 Vercel 마법사를 사용해 설정하면 좋아요. 그러면 대부분의 배포 구성이 이미 완료된 프로젝트로 시작할 수 있어요 (아래 링크 참조).



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

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

# 유용한 링크

- Next.js와 Supabase 시작 프로젝트 배포하기

# 결제 (Stripe)

제 알기로는 애플리케이션을 구축할 때 Stripe가 결제 분야의 사실상 표준이라고 생각됩니다 (다르게 생각하시면 말씀해주세요).



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

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

Stripe 문서에는 시작하는 데 도움이되는 꽤 좋은 정보와 보일러플레이트 코드가 있습니다.

# 처음에 알았으면 하는 것들

## 결제 링크를 사용하여 체크아웃 세션을 시작하십시오

Stripe 결제 링크는 Stripe를 사용하여 결제를 받는 가장 쉬운 방법입니다. Stripe 대시 보드 내에서 코딩없이 구성할 수 있습니다. 그런 다음 앱 내의 버튼이나 다른 구성요소가 사용자를 결제 링크로 안내하면 됩니다.



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

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

## 결제 링크로 클라이언트 참조를 전달할 수 있습니다.

사용자를 결제 링크로 이동시킬 때 클라이언트 참조 ID를 전달할 수 있습니다. 인증된 Supabase 사용자 ID를 전달하면 결제가 완료된 후에 해당 사용자와 조정할 수 있습니다.

## 사용자가 결제를 완료한 후 로직에 웹훅을 사용하세요

사용자가 결제 프로세스를 진행할 때 Stripe는 결제 의도 설정이나 체크아웃 세션 완료와 같이 다양한 '이벤트'를 생성합니다.



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

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

Stripe는 업데이트를 수신하는 앱을 알 수 있도록 해당 이벤트를 보낼 대상을 필요로 합니다. 이 대상을 웹훅의 형태로 제공합니다.

당신의 앱의 웹훅은 Stripe 이벤트를 '청취'합니다. 그런 다음 통과하는 다양한 이벤트를 어떻게 처리할지 결정합니다.

가장 중요한 이벤트는 'checkout.session.completed'로, 이는 결제 프로세스가 원활하게 완료되었음을 의미합니다.

# 유용한 링크



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

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

- Stripe 결제링크 개요
- 클라이언트 참조 ID를 결제 링크에 전달하는 방법
- Next.js와 Stripe를 사용하는 Vercel 기사 - 이 기사는 stripe checkout 세션을 사용하는 방법에 대한 것이며 (결제링크보다 복잡함), Stripe 웹훅을 위한 유용한 보일러플레이트 코드도 포함되어 있습니다.

# 이메일 제공업체 (재전송)

대부분의 애플리케이션은 사용자에게 어느 시점에서라도 이메일을 보내야 할 필요가 있습니다. 예를 들어 사용자가 가입한 경우 이메일 주소를 확인하는 이메일로 이메일을 확인할 수 있습니다.

Resend는 Supabase의 권장사항 중 하나였습니다. 합리적인 무료 티어를 갖추고 있으며 통합이 매우 원활하다고 생각했습니다.



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

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

# 미리 알았더라면 좋았을 것들

## Supabase 이메일 인증이 제한되어 있습니다

Supabase 이메일 인증 설정은 간단한데, 제작용으로 설계되어 있지 않다는 점을 알아두세요. 애플리케이션을 배포할 때 당신을 위해 이메일을 보낼 수 있는 SMTP (Simple Mail Transfer Protocol) 제공업체가 필요합니다.

# 유용한 링크



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

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

- Resend와 Next.js
- Supabase에서 사용자 정의 SMTP 구성

여기에 있습니다! 부트스트랩된 애플리케이션을 위한 로드맵과 간단한 기술 스택이에요. 만약 간단한 도구에 대한 아이디어가 있다면, 이 아키텍처를 사용하여 시작할 수 있어요. 저가 일찍 알았으면 하는 몇 가지를 공유해드려서 유용하고 프로세스를 가속화할 수 있기를 바랍니다.

떠나실 때!

만약 이 이야기를 즐겁게 읽었다면 몇 손가락 운동을 하셔서 이 게시물을 좋아요 👏🏻 를 눌러주시겠어요? 읽고 싶어하시는 내용을 쓰고 있는지를 알려주어서 도움이 돼요.



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

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

기술 활용과 온라인 존재감 구축에 관한 더 많은 이야기를 듣고 싶다면 저를 팔로우해주세요. (저는 막 시작한 입장이니, 함께 배우세요.)

다음에 만나요! 감사합니다! 🙏🏻

초보 부트스트래퍼를 위한 간단한 기술 스택 추천

<img src="/TIL/assets/img/2024-07-07-GoogleAnalyticsWithReactTypescript_0.png" />

## GA 란?!!

Google Analytics (GA)은 웹사이트 트래픽 및 사용자 행동을 추적하고 분석하는 강력한 도구입니다.

다음은 그 동작 방식입니다:



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

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

당신의 웹사이트에서 GA는 JavaScript 추적 코드를 사용하여 데이터를 수집합니다. 이 코드는 웹사이트 페이지에 삽입되어 방문자에 대한 정보를 수집하고 Google의 서버로 보내어 처리되며 다양한 보고서에서 제공됩니다.

## 구현은 어떻게 작동하나요?

useGoogleAnalytics.ts는 GA와 통합하기 위한 기본 파일로 사용됩니다. 우리는 유연성과 미래 지향성을 위해 GA 통합을 처리하기 위해 객체를 사용하고 있습니다.

GoogleAnalyticsProvider.tsx는 라우트를 감싸는 공급자 컴포넌트로 사용됩니다.



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

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

App.tsx 파일을 수정하여 GoogleAnalyticsProvider 컴포넌트를 추가해주세요.

이 방법을 선택한 이유는?

- 다양한 기능 지원: 페이지 뷰, 이벤트 추적 및 초기화 후 구성을 쉽게 관리할 수 있습니다.

- 미래를 대비: ReactGA에서 다른 솔루션(예: 미래의 GA 버전)으로 전환하더라도 코드 베이스의 각 인스턴스를 모두 업데이트해야 하는 것이 아니라 이 객체만 업데이트하면 됩니다.



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

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

- React 방식: 이 방법은 React의 최상의 실천 방법을 따르며 부작용을 처리하기 위해 컴포넌트를 사용합니다.

// 코드에 있는 주석들
앱에서 이를 검색하여 로직을 이해하고 앱에서 구현을 더 잘 할 수 있도록 하는 것을 추천합니다: `// 추천:` 및 `// 설명:`

GitHub 저장소: ‘google-analytics-react-ts’

useGoogleAnalytics.ts.tsx



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

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

```js
import { useEffect } from "react";
import ReactGA from "react-ga4";

// 추천: 환경 변수를 사용하여 비밀로 유지하는 것이 좋습니다.
export const trackingId = "GA_ID";
const appVersion = "APP_VERSION";
// 참고: 분석을 보다 나은 것으로 만들기 위해 앱에서 사용자 ID를 사용하십시오.
// 추천: Redux로 구현하는 것이 좋습니다.
const id = "user-id";

const useGoogleAnalytics = () => {
  useEffect(() => {
    if (trackingId) {
      try {
        ReactGA.initialize([
          {
            trackingId,
            gaOptions: {
              anonymizeIp: true,
              clientId: id,
            },
          },
        ]);
        ReactGA.set({ app_version: appVersion });
      } catch (error) {
        // 추천: 이 오류를 오류 추적 서비스에 보고하는 것이 좋습니다.
        console.log("Google Analytics 초기화 오류", { Error: error });
      }
    }
  }, [id]);

  const setOption = (key: string, value: unknown) => {
    ReactGA.set({ [key]: value });
  };

  const setUserId = (userId: string | number) => {
    setOption("userId", userId);
  };

  const sendData = (type: string, data: Object) => {
    ReactGA.send({ hitType: type, ...data });
  };

  const trackPageView = (pagePath?: string) => {
    if (!pagePath) {
      pagePath = location.href;
    }

    setOption("app_version", appVersion);
    sendData("pageview", { page: pagePath });
  };

  const trackEvent = (category: string, action: string, label?: string, value?: number) => {
    setOption("app_version", appVersion);
    ReactGA.event({ category, action, label, value });
  };

  return {
    setOption,
    setUserId,
    trackPageView,
    trackEvent,
  };
};

export default useGoogleAnalytics;
```

GoogleAnalyticsProvider.tsx

```js
import React, { useEffect, PropsWithChildren } from "react";
import { useLocation } from "react-router-dom";
import useGoogleAnalytics, { trackingId } from "../hooks/useGoogleAnalytics";

const GoogleAnalyticsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
  const { trackPageView } = useGoogleAnalytics();
  const location = useLocation();

  useEffect(() => {
    if (trackingId) {
      try {
        trackPageView(location.pathname + location.search);
      } catch (error) {
        // 추천: 이 오류를 오류 추적 서비스에 보고하는 것이 좋습니다.
        console.log("Google Analytics의 trackPageView 실행 오류", { Error: error });
      }
    }
  }, [location, trackPageView]);
  // 참고: GoogleAnalyticsProvider가 UI에 영향을 미치지 않고 다른 컴포넌트를 감쌀 수 있도록 합니다.
  return <>{children}</>;
};

export default GoogleAnalyticsProvider;
```

App.tsx



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

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

```js
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
import './App.css';
import GoogleAnalyticsProvider from './providers/GoogleAnalyticsProvider';

const App: React.FC = () => {

  return (
    // 참고: GoogleAnalyticsProvider를 어디에 배치할지 확인하여 최적의 위치를 지정-
    // 모든 route 변경을 추적하기 위해 초기화를 최소화하고 오류를 캡처합니다 (오류 추적 서비스 사용 시)
    <GoogleAnalyticsProvider>
      <Routes>
        <Route
          path="/"
          element={
            <div>
              Google Analytics React TypeScript
            </div>
          }
        />
      </Routes>
    </GoogleAnalyticsProvider >
  );
}

export default App;
export default App;
```

## 2가지 구현 방법

1. 일반 추적 (현재 레포지토리) :sunglasses:

장점:

- 간단한 초기화: 설정을 통해 GAInitializer 컴포넌트가 마운트될 때 Google Analytics가 한 번만 초기화됩니다.
- 페이지 뷰 추적: 페이지 뷰를 추적하는 방법을 제공하여 각 페이지 방문이 로그에 기록되도록 수동으로 처리할 수 있습니다.
- 사용자 정의 이벤트: trackEventBuilder 메서드를 사용하면 다양한 사용자 상호작용을 추적하는 유연성을 제공합니다.



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

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

단점:

- 수동 페이지 뷰 추적: App 컴포넌트만 래핑하고 각 route 변경을 래핑하지 않기 때문에 각 route 변경마다 trackPageView를 수동으로 호출해야 합니다. 안 할 경우 인간 에러가 발생할 수 있습니다.
- route 변경 추적 부족: route 변경을 자동으로 추적하지 않기 때문에, 각 컴포넌트에서 명시적으로 trackPageView를 호출하지 않으면 일부 페이지 뷰 로깅을 놓칠 수 있습니다.
- 제한된 사용자 컨텍스트: 기본 GA가 수집한 것 이상의 상세한 사용자 상호작용 또는 인구통계 데이터를 추적하지 않습니다.

장점:

- 이벤트 추적 기능을 모든 추적하고 싶은 이벤트에 추가
- 세밀한 제어: 추적할 이벤트와 해당 라벨을 정확하게 제어할 수 있어 매우 상세하고 구체적인 분석 데이터를 얻을 수 있습니다.
- 사용자 정의: 각 이벤트를 특정 범주, 동작, 라벨 및 값으로 사용자 정의할 수 있어 사용자의 행동과 상호작용에 대한 풍부한 통찰을 제공합니다.



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

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

단점:

- 유지보수 부담 : 애플리케이션이 커지면 수많은 개별 추적 호출을 관리하는 것이 시간이 오래 걸리고 일관되게 유지하는 것이 어려워질 수 있습니다.
- 코드 중복 : 여러 구성 요소나 함수에서 유사한 추적 코드를 반복해야 할 수 있으며, 결과적으로 DRY (Don't Repeat Yourself) 코드가 줄어들 수 있습니다.

## 콘텐츠 보안 정책 (CSP)

GA를 구현하기 위해 GA 스크립트를 웹 애플리케이션에 포함하고 코드에서 추적을 설정하세요. 'https://www.google-analytics.com`를 script-src 및 connect-src 지시문에 추가하여 GA 서버로의 연결을 허용하도록 CSP를 구성하세요. Google Tag Manager를 사용하는 경우 script-src 지시문에 ‘https://www.googletagmanager.com`도 포함하고 CSP 구성을 철저히 테스트하세요.



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

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

## 참고 자료

Medium: ‘Google Analytics TypeScript로 React에 구현하기’

YouTube: ‘React JS에 Google Analytics 추가하기’

React와 TypeScript로 Google Analytics 사용 방법

Nextjs 마스터하기 깔끔하고 확장 가능하며 타입 안전한 개발을 위한 모범 사례

## 언어 생성을 시도해보세요! 왜냐하면 왜 안되겠어요

"이 책은 고전입니다. 존중하며 다루세요".

15년 전, 어린 시절 컴파일러를 만들게 된 이래팀의 구조 설계자가 나에게 드래곤 북을 건넬 때 이렇게 말했다. 아쉽게도 그 책을 읽다가 밤에 잠이 들어 바닥에 넘어뜨리고 말았다. 반납할 때 표지에 작은 흠이 살짝 들어간 것을 발견하지 않길 바라며.

![이미지](/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_0.png)



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

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

저는 1986년에 쓰인 책을 읽었어요. 당시 컴파일러 만들기는 굉장히 어려웠고, 컴퓨터 과학과 프로그래밍 기술을 많이 담았습니다. 거의 4십 년 후인 지금, 다시 일에 착수하려고 해요. 요즘에는 어떨까요? 언어를 만드는 데 필요한 것들과 현대 도구들이 얼마나 단순해졌는지 살펴보도록 하죠.

# 대상 언어

모든 것을 납득시키기 위해 구체적인 언어가 필요해요. 아주 작은 기능 세트만을 사용해서 보여주기 위해, ZenStack에서 개발 중인 ZModel 언어를 예시로 사용할 거에요. 이 언어는 데이터베이스 테이블과 접근 제어 규칙을 모델링하는 데 사용되는 DSL입니다. 글을 짧게 유지하기 위해 다음 코드 조각만 사용하여 예시를 보여줄 거에요.

```js
model User {
  id Int
  name String
  posts Post[]
}

model Post {
  id Int
  title String
  author User
  published Boolean

  @@allow('read', published == true)
}
```



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

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

간단한 메모:

- 모델 구문은 데이터베이스 테이블을 나타냅니다. 그 필드는 테이블 열에 매핑됩니다.
- 모델은 서로를 참조하여 관계를 형성할 수 있습니다. 위의 예시에서 User 및 Post 모델은 일대다 관계를 형성합니다.
- @@allow 구문은 액세스 제어 규칙을 나타냅니다. 두 가지 인수를 전달합니다: 하나는 액세스 유형("create", "read", "update", "delete" 또는 "all"), 다른 하나는 해당 액세스를 허용해야 하는지를 나타내는 부울 식입니다.

여기까지입니다. 자, 소매 소매한 작업할 시간입니다!

# 여섯 단계로 언어 만들기



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

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

## 단계 1: 텍스트에서 구문 트리로

컴파일러를 구축하는 일반적인 단계는 몇 년 동안 크게 변하지 않았어요. 먼저 텍스트를 "토큰"으로 쪼개는 렉서(lexer)가 필요하고, 그런 다음 파서(parser)가 토큰의 스트림을 "구문 분석 트리"로 구성해야 해요. 고수준 언어 구축 도구는 이 두 단계를 결합하고 텍스트에서 트리로 한 번에 전환할 수 있도록 해줘요.

우리는 Langium OSS 툴킷을 사용하여 언어를 구축하는 데 도움을 받았어요. 이것은 TypeScript를 기반으로 한 훌륭한 언어 공학 도구로 전체적인 언어 구축 프로세스를 간소화해줘요. Langium은 렉싱 및 파싱 규칙을 정의하기 위한 직관적인 DSL을 제공해요.

우리의 ZModel 언어 구문은 다음과 같이 형식화될 수 있어요:



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

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

```js
/*
Langium 언어로 번역한 내용입니다.

ZModel 문법

시작 스키마:
    (모델+=모델)*;

모델:
    '모델' 이름=아이디 '{'
        (필드+=필드)+
        (규칙+=규칙)*
    '}';

필드:
    이름=아이디 타입=(유형 | 모델참조) (배열?='[' ']')?;

모델참조:
    대상=[모델];

유형 반환 문자열:
    'Int' | 'String' | 'Boolean';

규칙:
    '@@허용' '('
        접근유형=문자열 ',' 조건=조건
    ')';

조건:
    필드=단순식 '==' 값=단순식;

단순식:
    필드참조 | 부울;

필드참조:
    대상=[필드];

부울 반환 불리언:
    'true' | 'false';

숨겨진 종결 WS: /\s+/;
종결 아이디: /[_a-zA-Z][\w_]*/;
종결 문자열: /"(\\.|[^"\\])*"|'(\\.|[^'\\])*'/;
*/
텍스트를 토큰으로 분할하는 렉싱 규칙이 있는 표입니다. 간단한 언어이므로 식별자(ID)와 문자열(STRING) 토큰만 있습니다. 공백은 무시됩니다.

나머지 규칙은 구문 분석 규칙입니다. 토큰 스트림을 트리로 어떻게 구성해야 하는지를 결정합니다. 파서 규칙은 렉싱 프로세스에 참여하는 키워드(Int, @@허용 등)도 포함할 수 있습니다. 복잡한 언어의 경우 재귀적 구문 분석 규칙(예: 중첩된 표현)이 필요할 수 있지만 이 간단한 예제에는 그런 내용이 없습니다.

언어 규칙이 준비되었으므로 Langium API를 사용하여 코드 스니펫을 다음 파스 트리로 변환할 수 있습니다.
```



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

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

<img src="/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_1.png" />

## 단계 2: 구문 트리에서 링크드 트리로

파스 트리는 소스 파일의 의미론을 이해하는 데 매우 도움이 됩니다. 그러나 종종 더 완전하게 만들기 위해 한 단계를 더 진행해야 합니다.

우리의 ZModel 언어는 "교참조"를 허용합니다. 예를 들어, User 모델의 posts 필드는 Post 모델을 참조합니다. 그리고 Post 모델은 다시 author 필드를 통해 참조를 합니다. 파스 트리를 탐색할 때, ModelReference 노드에 도달하면 "Post"라는 이름을 참조하는 것을 볼 수 있지만 그 의미를 직접 알 수 없습니다. 일치하는 이름의 모델을 찾기 위해 즉석 조회를 할 수 있지만, 보다 체계적인 접근법은 "링킹" 패스를 수행하여 모든 이러한 참조를 해결하고 해당 노드에 링크하는 것입니다. 이러한 링킹이 완료되면, 우리의 파스 트리는 다음과 같이 보입니다 (간략함을 위해 일부 트리만 표시됨):



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

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

![Image](/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_2.png)

기술적으로 말하면 그것은 트리가 아닌 그래프이지만, 관례상 파스 트리라고 계속 부르겠습니다.

Langium의 장점 중 하나는 대부분의 경우 도구가 링킹 패스를 자동으로 수행한다는 것입니다. 파싱된 노드의 중첩 계층 구조를 따라서 이름을 해결하고 적절한 대상 노드에 링크할 때 사용합니다. 복잡한 언어의 경우 특별한 해결 동작이 필요한 경우가 있을 수 있습니다. Langium은 여러 서비스를 사용자 정의로 구현하여 링킹 프로세스에 연결할 수 있도록 해 줌으로써 이를 쉽게 만들어 줍니다.

## 단계 3. 연결된 트리에서 의미론적 정확성으로



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

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

컴파일러는 입력 소스 파일에 렉서 또는 파서 오류가 포함되어 있으면 오류를 보고하고 중단합니다.

```js
model {
  id
  title String
}
```

```js
'ID' 유형의 토큰을 예상했지만 `{`를 발견했습니다. [Ln1, Col7]
```

그러나 이러한 오류가 없어도 코드가 의미론적으로 올바르다는 뜻은 아닙니다. 예를 들어, 아래 내용은 구문적으로 유효하지만 의미론적으로 잘못되었습니다. title을 true와 비교하는 것은 말이 되지 않습니다.



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

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

```js
모델 Post {
  id Int
  title String
  author User
  published Boolean

  @@allow('read', title == true) // <- 비교가 잘못되었습니다
}
```

의미론적 규칙은 보통 언어별로 다르며, 도구들은 거의 자동적으로 아무것도 할 수 없습니다. Langium이 이를 처리하는 방법은 다양한 노드 유형을 유효성 검증할 수 있는 후크를 제공하는 것입니다.

```js
export function registerValidationChecks(services: ZModelServices) {
  const registry = services.validation.ValidationRegistry;
  const validator = services.validation.ZModelValidator;
  const checks: ValidationChecks<ZModelAstType> = {
    SimpleExpression: validator.checkExpression,
  };
  registry.register(checks, validator);
}

export class ZModelValidator {
  checkExpression(expr: SimpleExpression, accept: ValidationAcceptor) {
    if (isFieldReference(expr) && expr.target.ref?.type !== "Boolean") {
      accept("error", "Only boolean fields are allowed in conditions", {
        node: expr,
      });
    }
  }
}
```

이제 의미론적 문제에 대한 좋은 오류를 얻을 수 있습니다:



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

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

오직 불리언 필드만 조건문에서 허용됩니다 [Ln 7, Col 19]

렉싱, 파싱, 링킹과는 달리, 의미 체크 프로세스는 매우 선언적이거나 체계적이지 않습니다. 복잡한 언어의 경우, 명령적 코드로 많은 규칙을 작성하게 될 것입니다.

![Programming Language](/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_3.png)

## 4단계. 개발자 경험 향상



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

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

요즘에는 개발 도구를 만드는 데 기준이 높습니다. 혁신은 탁월하게 작동할 뿐만 아니라 탁월한 느낌을 주어야 번창할 수 있어요. 언어와 컴파일러 관점에서, DX는 주로 세 가지로 이루어져 있어요:

- IDE 지원
  좋은 IDE 지원 — 구문 강조, 서식 지정, 자동 완성 등 — 은 학습 곡선을 크게 낮추고 개발자의 삶의 질을 향상시킵니다. Langium에 대해 좋아하는 점 중 하나는 Language Server Protocol을 내장 지원한다는 것이에요. 구문 분석 규칙과 유효성 검사가 자동으로 적절한 기본 LSP 구현이 되어서 VSCode와 최신 JetBrains IDE와 직접 작동합니다(일부 제한 사항이 있을 수 있습니다). 그러나 탁월한 IDE 경험을 제공하기 위해서는 Langium에 의한 LSP 관련 서비스의 기본 구현을 많이 수정하여 광택을 내야 할 필요가 있습니다.

![이미지](/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_4.png)

- 오류 보고
  귀하의 유효성 검사 로직은 많은 경우 오류 메시지를 생성할 것이며, 이 메시지의 정확성과 유용성은 개발자가 얼마나 빨리 이해하고 이를 수정할 수 있는지를 크게 결정할 것입니다.
- 디버깅
  귀하의 언어가 "작동"하는 경우(더 자세한 내용은 다음 섹션을 참조하세요), 디버깅 경험이 필수적입니다. 디버깅이란 어떤 것을 의미하는지는 언어의 성격에 따라 다릅니다. 그것이 명령문과 제어 흐름을 포함하는 명령형 언어면 단계별 진행 및 상태 검사가 필요할 것입니다. 또는 선언적 언어인 경우, 디버깅은 복잡성(규칙, 표현식 등)을 해결하는 데 도움이 되는 시각화를 의미할 것입니다.



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

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

## 단계 5. 유용하게 만들기

결정된 오류가 없는 파스 트리를 도출하는 것은 상당히 멋지지만, 그 자체로는 그리 유용하지 않습니다. 여러 가지 방법을 사용하여 추후 진행하고 실제 값으로 생성할 수 있습니다:

- 여기서 그만 두기
  여기서 멈출 수도 있고, 파스 트리를 결과물로 선언하고 사용자가 이를 어떻게 사용할지 결정하도록 할 수도 있습니다.
- 다른 언어로 변환하기
  언어는 종종 파스 트리를 하위 수준의 언어로 변환하는 "백엔드"를 갖습니다. 예를 들어, Java 컴파일러의 백엔드는 JVM 바이트 코드를 생성합니다. TypeScript의 백엔드는 Javascript 코드를 생성합니다. ZenStack에서는 ZModel을 Prisma 스키마 언어로 변환합니다. 그런 다음 대상 언어의 도구/런타임이 이를 입력으로 사용할 수 있게 됩니다.
- 플러그 가능한 변환 메커니즘 구현하기
  언어 사용자가 자체 백엔드 변환을 제공할 수 있도록 플러그인 메커니즘을 구현할 수도 있습니다. 이것은 #1을 수행하는 보다 구조화된 방법입니다.
- 파스 트리를 실행하는 런타임 구축하기
  언어를 구축하는 가장 "완전한" 루트입니다. 구문 분석된 코드를 "실행"하는 인터프리터를 구현할 수 있습니다. "실행"이 의미하는 바는 완전히 사용자에게 달려있습니다. ZenStack에서는 ZModel을 Prisma 스키마 언어로 변환하는 것 외에도 데이터 액세스 중에 접근 제어 규칙을 강제하는 런타임이 있습니다.

## 단계 6. 사용하기 좋게 만들기



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

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

축하합니다! 이제 자신을 칭찬해도 좋습니다. 왜냐하면 새로운 언어를 만드는 일의 20%를 완료했기 때문이죠. 혁신은 대부분 사람들에게 판매하는 것이 가장 어려운 부분이라는 것을 잊지 마세요. 심지어 무료일 때도요. 언어를 개발한 건 개인적으로나 팀 내부에서만 사용할 예정이라면 그만두는 것도 좋지만, 대중을 대상으로 한다면 열심히 마케팅해야 합니다. 그것이 나머지 80%의 작업을 차지하죠 😄.

# 마지막으로

컴파일러 구축은 소프트웨어 엔지니어링이 지난 몇 십 년 동안 빠르게 발전했기 때문에 고대 예술처럼 느껴집니다. 그럼에도 불구하고, 진지한 개발자가 독특한 경험을 쌓기 위해 시도해볼 만한 분야라고 생각합니다. 프로그래밍의 이중성을 아주 잘 반영하죠 — 미학과 실용주의. 훌륭한 소프트웨어 시스템은 일반적으로 우아한 개념 모델을 갖추고 있지만, 표면 아래에서 그다지 예쁘지 않은 다양한 개선 사항을 찾을 수도 있습니다.

왜냐면 언어를 만들어보는 것이 어떨까요? 😊



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

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

![ZenStack](/TIL/assets/img/2024-07-07-HowMuchWorkDoesItTaketoBuildaProgrammingLanguage_5.png)

ZenStack를 개발 중입니다. 이 툴킷은 Prisma ORM을 강력한 엑세스 제어 계층과 함께 사용하여 풀스택 개발을 위한 최대한의 잠재력을 발휘합니다. 만약 이 프로젝트가 흥미로우시다면 읽어 주셨던 분들 중 별을 눌러 주시면 더 많은 분들이 찾아볼 수 있도록 도와주세요!

프로그래밍 언어를 만드는 데 얼마나 많은 작업이 필요할까

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_0.png" />

TypeScript는 JavaScript 개발을 혁신적으로 개선했습니다. 코드 신뢰성과 유지 보수성을 향상시키며 개발자들에게 더 적은 런타임 오류를 보장하고 생산성을 높여줍니다.

하지만 TypeScript를 사용하기 시작하면 구문이 약간 압도적일 수 있습니다.

TypeScript에서 가장 두려운 기능 중 하나는 "제네릭"입니다. 아래 예제를 보세요 🤯 두려워하지 않으시죠?



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

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

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_1.png" />

그러나 걱정하지 마세요. 단계별로 진행하겠습니다. 제네릭을 이해하면 얼마나 강력한지 알게 될 거예요.

# 최적의 any 대안

이 아주 간단한 JavaScript 함수를 상상해보세요. 이 함수는 배열의 첫 번째 요소를 반환합니다. (네, 제가 동의합니다. 이 함수는 그다지 유용하지 않지만 설명을 위해서입니다).



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

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

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_2.png" />

어떻게 타입을 지정할까요? 🤔 배열의 타입은 무엇이어야 할까요? 이 함수에서는 어떤 것이든 들어갈 수 있는 배열일 수 있습니다 (문자열, 숫자, 객체). 따라서 유혹받아 "any"라는 이름을 부를 수 없는 타입으로 지정하는 것이 유혹스러울 수 있습니다 😱

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_3.png" />

하지만 이는 매우 나쁜 타이핑입니다. 왜냐하면 TypeScript가 이 함수의 반환 타입을 올바르게 추론할 수 없기 때문입니다.



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

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

![이미지](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_4.png)

어쨌든, 우리가 가능한 모든 다른 유형들을 지정할 수 있을까요?

![이미지](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_5.png)

좋은 생각이 아닙니다. 먼저, 이 함수에 대한 가능한 모든 유형의 큰 목록을 유지해야 한다는 점 때문입니다. 그리고 무엇보다 중요한 것은 이 추론 문제를 해결하지 못한다는 것입니다. TypeScript는 함수를 호출할 때 유형을 추측할 수 없을 만큼 똑똑하지 않습니다.



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

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

그럼 TypeScript에서 as를 사용해 캐스팅하는 것을 도와줄 수 있을 것 같네요!

![image](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_6.png)

하지만 그렇게 하는 건 이기적인 행동이에요! 이 타입 어설션으로 TypeScript에게 말하는 건, "타입 검사를 멈추고 나를 믿어, 내가 뭐 하는 지 안다"고 하는 거예요. 이렇게 하면 타입 안전성이 약화되고, TypeScript를 사용하는 핵심 목적이 퇴색됩니다.

그렇게 하지 마세요! 이걸 타입하는 더 안전하고 깨끗한 방법이 있어요.
이름이 뭐라고 생각하시나요? ✨ 제네릭스✨



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

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

# 제네릭 소개

이전 예제를 계속해 봅시다.

우리가 함수에 전달하고 싶은 내용은 "파라미터로 '무엇인가'의 배열을 받고, '무엇인가' 요소를 반환할 것"이라고 말하는 것입니다.

그것이 바로 제네릭이란 것입니다.



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

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

이렇게 보일 것입니다:

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_7.png" />

이 코드의 일부를 자세히 살펴보겠습니다:

🟣 이전처럼 매개변수를 any[]로 입력하는 대신, 우리는 제네릭을 사용하여 매개변수를 정의합니다: 우리는 그것을 SomeType이라고 이름 짓겠습니다. 제네릭은 타입 자체가 아니라 타입 매개변수로, 함수가 호출될 때 지정될 타입을 나타내는 자리 표시자입니다. 당신은 원하는 대로 이름을 지을 수 있습니다(예약어나 이미 가져온 타입 이름이 아닌 경우). 우리는 종종 T와 같은 단일 문자를 제네릭으로 사용합니다. TypeScript에게 "이 함수는 어떤 타입의 배열을 매개변수로 받을 것"이라고 알립니다.



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

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

🟢 이것은 함수의 반환 유형을 지정합니다. Typescript에게 "함수가 매개 변수 배열의 요소와 동일한 유형의 요소를 반환할 것"이라고 말하는 것입니다.

🟡 함수 괄호 앞의 이 부분은 이 함수에서 사용할 일반적인 요소를 각괄호 안에 나열한 것입니다. 여기서는 하나의 일반적인 (SomeType)만 사용하게 될 것이지만, 나중에 여러 개의 일반적인을 사용할 수 있다는 것을 보여 드리겠습니다.

우리가 일반적인을 사용하여 함수를 입력한 방식은 단지 "매개 변수가 어떤 유형의 배열이며, 함수가 이와 동일한 유형으로 반환될 것"이라는 뜻입니다.

이 함수를 작성하는 더 일반적인 방법은 T를 사용하는 것입니다 (문법이 덜 복잡하게 보이도록).



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

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

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_8.png" />

이 소개가 제네릭의 본질을 이해하는 데 도움이 되기를 바랍니다.

# 제네릭은 어디에나 있어요

이미 TypeScript를 사용해 보셨다면, 모르는 사이에 제네릭을 사용해 본 적이 있을 겁니다. 예를 들어 DOM API의 querySelector 함수를 생각해 보세요.



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

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

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_9.png" />

이 예에서 querySelector는 반환된 요소가 HTMLElement 유형인지를 보장하기 위해 제네릭을 사용합니다. 이 유형 정보는 TypeScript가 반환된 요소에 대한 정확한 자동완성 및 유형 확인을 제공할 수 있도록 합니다. TypeScript에서 HTMLElement와 같은 네이티브 유형은 표준 라이브러리의 타입 선언인 lib.dom.d.ts에 의해 정의됩니다.

제네릭을 사용하면 요소를 다음과 같이 처리할 수 있습니다:

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_10.png" />



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

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

이렇게 제네릭을 사용하지 않은 경우와의 차이는 다음과 같습니다:

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_11.png" />

제네릭 타입을 사용하지 않으면 TypeScript는 요소의 특정 타입을 알 수 없어서 도움이 되는 자동완성을 받을 수 없으며 오류가 발생할 수 있습니다 (캐스팅을 통해 수정 가능하지만 여전히 좋은 아이디어는 아닙니다).

제네릭을 사용하면 TypeScript가 작업 중인 요소의 정확한 종류를 이해할 수 있기 때문에 더 나은 타입 안전성과 개발자 경험을 제공합니다. 따라서 제네릭이 네이티브 API 및 라이브러리에서 널리 사용되는 것은 놀라운 일이 아닙니다.



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

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

# 제네릭을 더 깊게 파헤쳐보기

제네릭은 단순한 함수에만 국한되지 않습니다. 더 유연하고 재사용 가능한 코드를 만들기 위해 다양한 방법으로 사용할 수 있습니다.

심도 있는 예시를 살펴보겠습니다. 첫 번째 요소를 가져오는 것보다 실제 세계의 문제에 더 가까운 예제를 살펴보겠습니다. API 응답을 다루는 예시입니다.

다음 코드를 살펴봅시다:



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

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

![이미지](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_12.png)

ApiResponse 유형을 정의합니다. 이 유형은 항상 숫자 상태, 문자열 메시지 및 모든 유형의 데이터를 반환합니다.

그러나 본문의 첫 부분에서 본 것처럼 any를 사용하는 것은 유형을 올바르게 추론하지 못하게 합니다.

제네릭을 사용하여 그것을 개선해 봅시다:



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

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

![Image](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_13.png)

이 코드에 조금 더 가까이 들어가 봅시다.

🟡 먼저, 여기서 새로운 구문을 볼 수 있습니다. 이것은 제네릭 형식입니다. 제네릭을 사용하는 유형을 정의하고 있습니다. 이전에 본 함수 예제와 비슷하게 작동합니다:

- 꺽쇠 괄호 내에서 사용된 제네릭을 나열합니다.
- 제네릭을 유형 정의 내에서 사용합니다.



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

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

🟣 이제는 이 타입을 사용할 때마다, T의 타입을 각괄호 안에 명확하게 지정해야 합니다. 이 fetch에 대한 API 응답 데이터가 ' name: string; age: number ' 타입임을 명시하고 있습니다. 이것은 타입 인자입니다.

그리고 이제, fetchData 함수가 잘 타입화되었으므로 TypeScript가 해당 반환 타입을 올바르게 추론할 수 있습니다.

# 일반화 제한하기

가끔, 제네릭이 모든 타입을 허용하지 않고 더 많은 제약이 있는 상태로 제한하고 싶은 경우가 있습니다.



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

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

API 응답의 예제를 계속 사용하면 데이터가 항상 객체여야하고 그 외의 것들이 들어가지 않아야 합니다.

`extends` 키워드를 사용하여 가능합니다.

![image](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_14.png)

만약 객체가 아닌 다른 것으로 함수를 호출하려고 하면 TypeScript에서 오류가 발생합니다.



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

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

특정 속성을 갖는 객체를 제약하는 방법도 있습니다. 예를 들어 API 데이터가 항상 id를 포함하는 객체여야 하는 경우:

![이미지](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_15.png)

# 제네릭을 위한 기본 타입

제네릭의 또 다른 멋진 기능은 기본 타입을 제공할 수 있다는 것입니다.



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

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

지금까지 본 모든 예제에서 우리는 제네릭 타입을 사용할 때 type 인자를 명확히 지정해야 했습니다. 예를 들어: ApiResponse`' name: string; age: number '`.

그러나 만약 당신이 자주 동일한 타입을 제네릭에 사용한다면, 타입 정의에서 =로 기본값을 지정할 수 있습니다.

![image](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_16.png)

심지어 제약 조건과 함께 사용할 수도 있습니다.



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

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

<img src="/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_17.png" />

# 여러 제네릭

가끔은 한 가지 제네릭만으로는 부족하고 2개 이상이 필요할 때가 있습니다.

꺽쇠 괄호 안에 제네릭을 콤마로 구분하여 나열하면 됩니다. 함수를 호출할 때도 타입 인자를 동일하게 나열해 주세요.



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

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

한 예시를 살펴보겠습니다:

![generics](/TIL/assets/img/2024-07-07-MakingsenseofTypeScriptgenerics_18.png)

제네릭은 처음에는 무서울 수 있지만, 이들이 어떻게 작동하는지 이해하면 그들의 힘을 빨리 깨닫고 TypeScript 생태계의 중심에 왜 있는지 이해하게 됩니다.

함수와 컴포넌트가 다양한 유형으로 작동할 수 있도록 허용하면서도 강한 유형 안전성을 유지함으로써, TypeScript 제네릭은 견고하고 유지 관리가 용이한 코드를 작성하는 능력을 크게 향상시키며 개발자 경험을 놀라운 것으로 만들어 줍니다.



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

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

행복한 코딩하세요!

TypeScript 제네릭 이해하기 쉽게 정리하기

# inject() 함수란 무엇인가요?

Angular 14에서 소개된 inject() 함수는 서비스, 컴포넌트, 디렉티브 등에 종속성을 주입하는 데 사용됩니다. 클래스 생성자를 사용하여 종속성을 주입하는 대신 inject() 함수를 사용할 수 있습니다.

![이미지](/TIL/assets/img/2024-07-07-HowUsingAngularsinjectFunctionHasSavedMe1000LinesofCode_0.png)

## 생성자를 사용하여 종속성을 주입하는 예전 방식:



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

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

```js
import { Component } from '@angular/core';

@Component({ /* ... */ })
export class MyComponent {
  constructor(
    @Inject(SOME_TOKEN) private readonly someToken: string,
    private readonly myService: MyService,
    private readonly httpClient: HttpClient,
  ) {}
}
```

## inject() 함수를 사용한 의존성 주입의 새로운 방법:

```js
import { Component, inject } from '@angular/core';

@Component({ /* ... */ })
export class MyComponent {
  private readonly someToken = inject(SOME_TOKEN);
  private readonly myService = inject(MyService);
  private readonly httpClient = inject(HttpClient);
}
```

# inject() 사용의 장점 vs 생성자 사용하기



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

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

주목하신 대로, 생성자 대신 inject()을 사용하는 것에는 여러 가지 장점이 있습니다:

- 코드를 더 깔끔하고 가독성이 좋고 일관성 있게 만듭니다 (토큰 vs 서비스 주입 시에도)
- 타입이 자동으로 추론되어 수동으로 지정할 필요가 없습니다
- 상속이 간편하고 덜 장황합니다 (자세한 내용은 아래에서 설명)

# 더 나은 상속

저는 상속과 관련된 경우 inject() 함수가 특히 유용하다고 생각합니다. 코드를 재사용하고 여러 자식 클래스에 의해 확장될 부모 서비스 추상 클래스가 있는 시나리오를 고려해 보세요:



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

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

```js
export abstract class ParentService {
  constructor(
    protected readonly configKey: string,
    protected readonly httpClient: HttpClient,
    protected readonly helperService: HelperService,
  ) {}

  // ... some code here that will be reused in the children of ParentService
}
```

ParentService의 하위 클래스는 다음과 같이 확장됩니다:

```js
@Injectable({ providedIn: 'root' })
export class ChildService extends ParentService {
  constructor(
    protected readonly httpClient: HttpClient,
    protected readonly helperService: HelperService,
  ) {
    super('my-config-key', httpClient, helperService);
  }

  // ... some child-specific code here
}
```

보시다시피 많은 반복이 있습니다: 모든 자식 클래스들은 HttpClient와 HelperService를 가져와야 하는데 이는 ParentService의 생성자가 필요하기 때문입니다.



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

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

inject() 함수 덕분에 이 불필요한 반복을 피할 수 있어요:

```js
export abstract class ParentService {
  protected abstract readonly configKey: string; // "abstract"을 사용하여 자식 클래스가 이 필드를 초기화하도록 강제합니다
  protected readonly httpClient = inject(HttpClient);
  protected readonly helperService = inject(HelperService);

  // ... 부모 서비스의 자식에서 재사용될 코드가 있습니다 ...
}

@Injectable({ providedIn: 'root' })
export class ChildService extends ParentService {
  protected readonly configKey = 'my-config-key';

  // ... 자식에만 해당하는 코드가 있습니다
}
```

결과적으로 코드가 훨씬 깔끔해지고 반복을 피할 수 있습니다: ParentService의 자식들은 HttpClient 및 HelperService를 가져와 부모에게 전달할 필요가 없지만, 필요한 경우에 this.httpClient 및 this.helperService에 액세스 할 수 있습니다.

의존성이 많고 많은 자식이 기본 클래스를 확장하는 시나리오를 상상해보세요, inject()를 사용하면 많은 코드 라인을 절약할 수 있습니다.



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

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

## 실제 사용 사례 예

2019년에 Angular을 사용하여 구축한 오래된 프로젝트를 리팩토링할 때 inject() 함수를 사용했습니다. 생성자를 없애거나 사용을 줄이는 것만으로 약 1000줄 이상의 코드를 제거할 수 있었습니다. 변경 내용은 이 커밋에서 확인할 수 있습니다.

네, 무엇을 생각하고 계시는지 알겠어요. 상속 대신 구성을 고려해볼 수 있었다는 주장을 할 수 있겠지만, 이에 대한 논의는 이 글의 범위를 벗어납니다.

# 결론



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

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

- inject() 함수는 일반적으로 생성자를 사용하는 것보다 선호되는 의존성을 효율적이고 현대적인 방법으로 주입해주는 기능을 제공합니다.
- inject()를 사용하도록 코드베이스를 마이그레이션하는 것이 쉽고, 특히 상속을 다루어야 할 때 유용할 것입니다.
- 기존 레거시 프로젝트에서도 gradually(점진적으로) inject()를 채택할 수 있으며, 코드베이스를 한꺼번에 마이그레이션할 필요가 없습니다.

Angular의 inject 함수 사용으로 1000줄의 코드를 절약한 방법

서버리스 인증 자가 서비스 플랫폼 구축 방법

<img src="/TIL/assets/img/2024-07-07-DidYouKnowPythonHasABuilt-inPriorityQueue_0.png" />

우선 순위 큐:

- 요소들의 집합
- 각 요소는 어떤 종류의 우선 순위가 할당되어 있음
- 큐 내에서 가장 높은 우선 순위를 가진 요소가 먼저 처리됨
- 요소를 큐에 넣는 순서는 중요하지 않음

예를 들어, 이 숫자들이 포함된 우선 순위 큐가 있다고 가정해봅시다. 낮은 숫자가 높은 우선 순위를 의미합니다.



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

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

```js
pq = [3, 7, 1, 6, 4, 5];
```

- 여기서 3이 먼저 삽입되고, 그 다음에 7, 그 다음에 1이 들어갑니다.
- 그러나 3은 큐에서 제일 먼저 떠난 요소가 아닙니다.

```js
# 큐에서 팝
1

# 큐에서 팝
3

# 큐에서 팝
4
```

- 1이 3보다 먼저 나가는 이유는 더 높은 우선순위를 가지고 있기 때문입니다.
- 3은 1 다음으로 가장 높은 우선순위를 가지고 있기 때문에 다음에 나갑니다.
- 4는 3 다음으로 가장 높은 우선순위를 가지고 있기 때문에 그 다음에 나갑니다.



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

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

# 이런. 정렬만 하면 되잖아요?

```js
pq = [3, 7, 1, 6, 4, 5]
pq.sort()

# pq = [1, 3, 4, 5, 6, 7]
```

이제는 우선순위대로 1, 3, 4 순으로 pop할 수 있습니다. 네 할 수 있어요.

하지만 문제는 이 목록에 새 숫자를 추가하려고 할 때 발생합니다.

Posts