
<img src="/assets/img/2024-08-16-15HTMLTagsThatNoOneKnows_0.png" />

## HTML에 대해 전문가라고 생각하시나요? 그럼 한 번 봐봐요!

`div`, `span`, `a`는 HTML을 사용할 때 흔히 사용되는 태그들이죠. 그러나 HTML에는 이보다 더 많은 태그가 있습니다. 개발자들이 잘 사용하지 않거나 알지 못하는 HTML 태그들이 많이 있어요. 경험이 많다고 하더라도 아직 알지 못하는 태그가 있을 수 있어요. 여기에서는 문서에서 찾은 잘 사용되지 않는 15개의 태그를 소개합니다.

# 1. `q` 태그

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

`q` 태그는 그 안의 텍스트가 짧은 인라인 인용문임을 나타냅니다.

## 2. `meter` 태그

`meter` 태그는 알려진 범위 내의 스칼라 측정값을 나타냅니다.

## 3. `details` 태그

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

`details` 태그는 사용자가 열거나 닫을 수 있는 공개 위젯을 만듭니다.

# 4. `abbr` 태그

`abbr` 태그는 줄임말 또는 머리 글자를 나타내며 호버 시 전체 설명을 제공합니다.

<img src="/assets/img/2024-08-16-15HTMLTagsThatNoOneKnows_1.png" />

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

![image](/assets/img/2024-08-16-15HTMLTagsThatNoOneKnows_2.png)

## 5. The `mark` tag

The `mark` tag highlights text for reference purposes.

## 6. The `ruby` tag

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

`ruby` 태그는 동아시아 문법에서 문자의 발음을 보여주는 루비 주석을 나타냅니다.

## 7. `bdo` 태그

`bdo` (Bi-Directional Override) 태그는 현재 텍스트 방향을 재정의합니다.

## 9. `bdi` 태그

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

`bdi` (Bi-Directional Isolation) 태그는 외부 텍스트와 방향이 다른 형식으로 지정된 텍스트 스팬을 격리합니다. 이는 주로 다른 방향으로 읽히는 언어의 텍스트 스니펫을 삽입하는 데 유용합니다.

## 10. `wbr` 태그

`wbr` (Word Break Opportunity) 태그는 그 외의 부분에 불가분의 문자열 내에서 줄 바꿈 가능성을 지정합니다.

## 11. `keygen` 태그

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

`keygen` 태그는 키 쌍을 생성하며 양식에서 안전한 인증을 가능하게 하는 데 사용됩니다. 이 태그는 HTML5에서는 사용되지 않는 것에 유의하십시오. 그러나 역사적인 목적이나 이전 프로젝트를 다룰 때 유용합니다.

## 12. `dialog` 태그

`dialog` 태그는 대화 상자나 검사기 또는 창과 같은 대화형 구성 요소를 나타냅니다.

## 13. `figure` 및 `figcaption` 태그

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

`figure` 태그는 삽화, 다이어그램, 사진, 및 코드 목록과 같은 독립적인 내용에 사용되며, `figcaption` 태그는 `figure` 요소에 캡션을 제공하기 위해 사용됩니다.

# 14. `template` 태그

`template` 태그는 페이지가 로드될 때 렌더링되지 않지만 JavaScript를 사용하여 나중에 인스턴스화할 수 있는 내용을 보유합니다.

```js
<template id="my-template">
  <p>This is a template content.</p>
</template>
<script>
  const template = document.getElementById('my-template');
  const clone = document.importNode(template.content, true);
  document.body.appendChild(clone);
</script>
```

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

# 15. `datalist` 태그

`datalist` 태그는 `input` 요소에 대해 미리 정의된 옵션 목록을 제공합니다.

# 마지막으로

이 중 몇 가지 태그를 알고 계셨나요? 댓글 섹션에 적어주세요!

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

많은 개발자들이 놓칠 수도 있고 알려지지 않은 15가지 희귀 HTML 태그를 소개했어요. 이 태그들은 특정 작업을 위한 독특한 기능을 제공해요. 만약 이 글을 즐겁게 읽었다면 비슷한 주제나 다른 기술 튜토리얼에 대한 추가 글을 원하신다면 박수를 치거나 댓글을 남겨주세요. 이 글을 친구나 동료들과 공유해서 서로 도전하고 점수를 비교해보세요!

다음 글에서 뵙겠습니다...

![이미지](https://miro.medium.com/v2/resize:fit:1000/0*6YeWzl-N9Vnrcqv4.gif)


NestJS에서 소켓 기능 구현하는 방법


![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_0.png)

개발자로서 초창기에는 JavaScript와 TypeScript에서 키-값 쌍의 컬렉션을 다루기 위해 두 번째 생각 없이 객체를 사용했었습니다.

그러나 언어가 발전함에 따라 우리의 도구들도 함께 발전하고 있습니다. 그 중 하나인 Map이 상당한 인기를 얻고 있습니다.

객체는 자리가 있지만, Map은 우리의 코드를 더 효율적이고 표현력 있게 만들어줄 다양한 이점을 제공합니다.

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

이 기사에서는 Map의 주의 사항, 장점 및 단점에 대해 살펴보고, 객체 대신에 Map을 사용하는 시점에 대해 논의할 것입니다.

# 왜 Map을 사용해야 하나요? 🌈

Map은 키-값 쌍을 저장할 수 있는 내장 객체입니다. 일반적으로 키가 문자열이나 심볼인 객체와 달리 Map은 객체, 함수 및 기본 유형을 포함한 모든 유형의 키를 허용합니다.

## Maps 사용의 장점

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

- 유연한 키 유형: 객체보다 Map의 가장 중요한 장점 중 하나는 키 유형에 대한 유연성입니다. 객체에서는 키가 문자열이나 심볼이어야 합니다. Map에서는 키가 프리미티브 값부터 복잡한 객체까지 모든 유형이 될 수 있습니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_1.png)

- 순서 유지: Map은 항목의 입력 순서를 유지하므로 추가된 순서가 보존됩니다. 이는 예측 가능한 반복 순서가 필요할 때 특히 유용합니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_2.png)

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

- 자주 추가/제거할 때 성능이 향상됨: Map은 key-value 쌍을 자주 추가하거나 제거할 때 최적화되어 있습니다. 반면에 객체는 특히 많은 항목이 있는 경우 속성을 자주 추가 또는 제거할 때 성능 문제가 발생할 수 있습니다.
- Size Property: Map에는 맵에 포함된 요소 수를 제공하는 size 속성이 있습니다. 이는 Object.keys(obj).length를 사용하여 객체의 크기를 계산하는 것보다 효율적이며, 이는 전체 키 세트를 훑어야 하기 때문입니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_3.png)

내장 메서드: Map에는 set, get, has, delete, clear와 같은 내장 메서드가 함께 제공되어 키-값 쌍을 직관적이고 간편하게 조작할 수 있습니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_4.png)

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

# 맵 사용이 항상 최 우선 사항이 아닌 이유 ⚓

맵은 내부 구조와 추가 기능으로 인해 일반 객체와 비교해서 약간 더 많은 오버헤드를 가지고 있습니다.

성능이 중요하고 컬렉션이 작고 간단한 경우에는 이 오버헤드가 불필요할 수 있습니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_5.png)

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

일반 객체와 달리, Map은 JSON으로 직접 직렬화할 수 없습니다. 데이터를 직렬화해야 한다면, 먼저 Map을 객체나 배열로 변환해야 합니다.

## 이럴 때 필요합니다

- 복잡한 키 타입: 문자열이나 심볼이 아닌 키가 필요할 때, Map을 사용하면 좋습니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_6.png)

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

- 자주 추가 및 제거되는 항목: 항목이 자주 추가 또는 제거되는 컬렉션의 경우, Maps가 더 나은 성능을 제공합니다.
- 순서가 중요한 컬렉션: 항목의 순서가 중요한 경우, Maps는 객체와 달리 삽입 순서를 유지합니다.

## 다음 상황에서는 필요하지 않습니다

단순하고 정적인 컬렉션: 소규모이거나 정적인 데이터 컬렉션의 경우, 일반 객체가 더 직관적이고 오버헤드가 덜합니다.

![이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_7.png)

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

직렬화 필요: 데이터를 JSON으로 자주 직렬화해야 하는 경우, Map은 추가 변환을 필요로하기 때문에 객체가 더 편리할 수 있습니다.

# 인터뷰에서 Map 사용의 가치, 특히 구글과 같은 회사에서 🚀

기술 인터뷰의 세계에서, 특히 구글과 같은 최고 수준의 회사에서, 언어 기능에 대한 심층적인 이해를 보여주고 이를 언제 사용해야 하는지 알면 다른 지원자들과 차별화될 수 있습니다.

여기 Map을 효과적으로 사용하는 방법이 있습니다:

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

- 고급 기능 이해를 보여줍니다: Map을 활용하면 현대 JavaScript 및 TypeScript 기능에 정통하다는 것을 보여줍니다. 이는 기본을 넘어서 언어의 더 고급 측면을 이해한다는 것을 시사합니다.
- 문제 해결 능력을 나타냅니다: Map을 성능상의 이점이나 복잡한 키 유형을 처리할 수 있는 능력 때문에 선택할 때, 업무에 맞는 적절한 도구를 선택할 수 있는 능력을 반영합니다. 이러한 의사 결정 과정은 면접 중 문제 해결 시나리오에서 중요합니다.

![image](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_8.png)

- 성능 인식을 강조합니다: 성능이 중요한 응용 프로그램에서, Map이 객체보다 자주 추가 및 제거하는 경우 더 나은 성능을 제공한다는 것을 알고 있다면 이는 상당한 장점일 수 있습니다. 면접에서 이러한 성능 이점을 논의하면 최적화 기술에 대한 인식을 보여줍니다.
- 데이터 구조에 대한 지식을 설명합니다: 데이터 구조를 효과적으로 이해하고 구현하는 것은 모든 소프트웨어 엔지니어에게 중요한 기술입니다. 필요한 경우 Map을 사용함으로써 본인의 필수 데이터 구조에 대한 능숙함과 효율적인 코드를 작성하기 위해 그것들을 이용하는 능력을 강조합니다.
- 시스템 설계 논의를 준비합니다: Google과 같은 회사에서, 시스템 설계 인터뷰가 일반적입니다. Map을 사용할 때 알면 이러한 논의에서 유용할 수 있으며, 거대한 데이터셋과 다양한 키 유형을 처리해야하는 시스템을 설계해야 할 수도 있는 상황에서 유용합니다.

# 2024년에 Map의 인기 💎

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

2024년 현재, Maps는 TypeScript 및 JavaScript 커뮤니티 전반에서 점점 더 인기를 얻고 있습니다. 성능, 유연성, 그리고 내장 메서드 측면에서의 장점으로 인해 많은 개발자들에게 선호되는 선택지가 되었습니다.

![맵 이미지](/assets/img/2024-08-13-AreYouStillUsingObjectsDiscovertheGame-ChangingPowerofMapinJSTS_9.png)

커뮤니티는 또한 Maps를 활용하는 여러 라이브러리와 도구들을 제작했으며, 현대적인 개발 방법론에서 그들의 위치를 더욱 확고히 하고 있습니다.

# 결론

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

자바스크립트와 타입스크립트의 기본 요소인 객체들은, 맵은 키-값 쌍을 다루는 강력한 대안을 제공합니다.

맵은 유연성을 제공하며, 동적 컬렉션에 대한 성능을 높여주며, 코드를 간편하게 만들어주는 직관적인 메소드들을 제공합니다. 키-값 쌍을 저장하기 위해 객체에 접근할 때, 한 번 Map이 더 잘 맞지는 않을지 생각해보세요.

맵을 받아들이면 보다 깨끗하고 성능이 우수하며 표현력이 높은 코드를 작성할 수 있어, 2024년 이후로 더욱 능숙한 개발자가 될 수 있을 겁니다.

건배 🍺

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

# 평이한 영어 커뮤니티의 일원이 되어 주셔서 감사합니다! 떠나시기 전에:

- 저자를 박수로 응원하고 팔로우해주세요 👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | Newsletter
- 다른 플랫폼 방문하기: CoFeed | Differ
- 더 많은 콘텐츠: PlainEnglish.io


JavaScript와 TypeScript에서 Map 활용 방법


모두가 자신만의 웹사이트를 가지고 싶어합니다. 제가 얼마나 많은 것을 보유하지 않았더라도 저도 그랬어요. 이제는 아마도 각종 웹사이트 빌더에 계정을 만들었을 것입니다. 왜냐면 그냥 개인 웹사이트를 만들고 싶었으니까요 (아직은 만들지 못했지만요).

테크 브로이신 경우, 여러분의 프로젝트나 개인 웹사이트에 대해 웹사이트 빌더를 사용하지 않을 겁니다. 여러분은 아마도 최신 JS 프레임워크에 매료되어, 여러분의 사이트에 가장 반짝이고 동적인 구성 요소를 구축하기를 열망할 것입니다.

저는 React 개발자가 아니에요; React에 대해 알아낸 것은 Mosh의 프로그래밍 초급 튜토리얼로 To-Do 앱을 만드는 것 정도에요. 지난 주말, 난 React용 UI 라이브러리를 탐험하기로 했죠.

Tailwind를 제외하고, UI 라이브러리 중에서 확실히 최고의 GOAT인 것을 고려하더라도, 웹사이트를 위한 컴포넌트를 구축하는 데 일부 노력이 필요할 수 있습니다. 복잡한 컴포넌트 특히 그럴 때 DynaUI를 발견했어요.

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

# DynaUI란 무엇인가요?

DynaUI는 웹사이트에 통합할 수 있는 50가지 이상의 미리 제작된 구성 요소를 제공합니다. 이러한 구성 요소는 React, Tailwind CSS 및 Framer Motion으로 구현되어 있으며 애니메이션이 적용되어 있습니다.

# 이 제품의 특별한 점은 무엇인가요?

- 완전한 플러그 앤 플레이 기능
- 평생 액세스 (한 번 지불로 가능)
- TailwindCSS 사용

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

많은 라이브러리가 있을 수 있지만, 제가 가장 좋아하는 것은 DynaUI의 신속한 지원입니다. 어려움을 겪는다면 최대 12시간 내에 응답을 받을 수 있다고 확신합니다. 이것은 제 같은 초보 코더에게 정말 도움이 됩니다 :)

![DynaUI](/assets/img/2024-08-13-DynaUIMakesBuildingReactAppsSuperEasy_0.png)

DynaUI Pro은 현재 가격 인하를 진행 중이며, 수명 동안 액세스할 수 있는 구성 요소에 대해 49파운드로 제공되고 있습니다. 이는 정말 놀라울 정도로 저렴합니다.

# DynaUI의 구성 요소

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

3가지 주요 컴포넌트 카테고리가 있습니다:

- 템플릿들
- 섹션들
- 컴포넌트들 (완전히 무료로 사용 가능)

템플릿들은 사용할 수 있는 전체 웹 페이지입니다. 다운로드하여 텍스트 컴포넌트를 편집하고 배포하면 됩니다. AI-wrapper SaaS를 구축하고 주말에 시작하여 사회적 불편함에서 조금이라도 봤으면 하는 시기에 유용합니다.

농담은 놓고, 이 템플릿들의 사용 편리성은 정말 놀라웠어요. React 앱을 구축하는 것이 이렇게 간단할 줄은 상상도 못 했습니다. 유일한 단점은 현재 5개의 템플릿으로 제한되어 있지만, 새로운 템플릿을 정기적으로 출시 중이라고 합니다.

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

![DynaUI Image](/assets/img/2024-08-13-DynaUIMakesBuildingReactAppsSuperEasy_1.png)

Sections are pre-built web page fragments that you can assemble like Lego pieces to create your own custom web page, in case the templates don’t suit your needs.

Components, on the other hand, are for the more technical users. These are smaller building blocks that you can either use to create sections or integrate into your existing web pages.

## How did I use DynaUI?

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

내 초기 계획은 처음부터 개인 웹사이트를 구축하는 것이었는데, 일부분은 완성했습니다. React는 제게 꽤 높은 학습 곡선을 보였지만, DynaUI는 이미 모든 것을 설정해 두어 많이 간단해졌어요. 이 시점에서 주말만으로는 모든 것을 구축하고 여러분께 제공하기에 충분하지 않아요.

React 경험이 있는 분들이라면 빠르게 웹사이트를 구축하려면 DynaUI를 한 번 시도해 보세요.

![Image](/assets/img/2024-08-13-DynaUIMakesBuildingReactAppsSuperEasy_2.png)

제 개인 웹사이트 링크를 완성하고 React 스킬을 더욱 향상시킨 후 이 기사를 업데이트할 예정이에요. 지금까지 DynaUI 경험이 상당히 좋았고, 모두가 한 번 살펴보길 강력히 추천합니다.


React 에서 DynaUI 사용하는 방법


<img src="/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_0.png" />

오늘은 네이티브 TypeScript 지원이 드디어 Node.js에 등장하면서 놀라운 소식입니다!

네, 이제 Node.js에서 네이티브로 타입을 사용할 수 있어요.

나도 TypeScript와 ts-node를 쓰는 걸 그만두기 좋은 때인 것 같아요.

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

### 변경 전:

Node.js는 JavaScript 파일에만 신경을 썼어요.

다음은 실행되지 않았을 것입니다:

<img src="/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_1.png" />

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

위와 같이 표 태그를 변경하면 이러한 불쾌한 오류가 발생합니다:

![image](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_2.png)

최선의 방법은 TypeScript를 설치하고 tsc로 컴파일하는 것이었습니다.

![image](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_3.png)

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

그리고 수백만 명의 개발자들이 이것이 꽤 괜찮은 옵션이라고 동의했습니다:

![이미지](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_4.png)

하지만 이것은 고통스럽습니다. 계속해서 동일한 패키지를 설치하고 동일한 명령어를 타이핑해야했습니다.

JS로의 추가 컴파일 단계와 TypeScript 구성 및 관련 사항을 처리해야했습니다.

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

종종 짜증이 나는 일이죠 — 특히 테스트를 조금 진행 중일 때 말이에요.

그래서 ts-node가 등장했는데도 여전히 부족했죠.

이제 TypeScript 파일을 직접 실행할 수 있게 되었어요:

![이미지](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_5.png)

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

우리는 독립 노드 명령어로 수행하는 것처럼 즉석에서 대화식 세션을 시작할 수도 있어요:

![image1](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_6.png)

그리고 모두가 그것을 사랑했어요:

![image2](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_7.png)

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

하지만 여전히 추가 종속성이 있었고, 여전히 TypeScript를 설치해야 했습니다.

또한, 우리는 --esm 플래그와 함께 ES 모듈을 사용하기 위해 ts-node를 사용하는 방법과 같은 미묘한 복잡성에 대해 알고 있어야 했습니다.

✅지금:

모든 이 변화는 이제 노드의 모든 새로운 업그레이드로 인해 변경됩니다.

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

- TypeScript를 네이티브로 지원합니다.
- 의존성이 없습니다.
- 중간 파일 및 모듈 구성 파일이 없습니다.

![이미지](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_8.png)

이제 Prettier, Next.js 및 Webpack과 같은 즐겨 사용하는 JS 도구들도 더 안전하고 인텔리센스 친화적인 구성 파일을 가질 수 있습니다.

웹팩을 즐겨 사용하는 도구 리스트에 넣은 사람은 거의 없지만 그래도…

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

얼른 좋은 소식이네요! 이렇게 하면 prettier.config.ts를 지원하는 pull request가 이미 있다는 걸 알았어요. 이번 새로운 발전 덕분에 더 큰 발전을 이루고 있어요.

# Behind the Scenes

TypeScript 지원은 점진적으로 이루어질 거예요. 현재는 유형만 지원하고 있어요. 열거형과 같은 보다 TypeScript스러운 기능은 사용할 수 없어요 (누가 요즘에 열거형을 사용하겠어요).

내부적으로 @swc/wasm-typescript 도구를 사용해 TypeScript 파일의 모든 유형을 제거하고 있답니다.

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

이렇게 바뀝니다:

<img src="/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_10.png" />

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

# Node.js에서 TypeScript를 사용하는 방법

처음 시작하는 것이라고 했듯이 아직 실험적이며, 현재는 --experimental-strip-types 플래그가 필요합니다:

![image](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_11.png)

이것은 곧 출시될 예정입니다.

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

# 마무리 생각

TypeScript 내장 기능은 Node.js를 JS 개발자에게 더 즐거운 플랫폼으로 만들어주는 심각한 동작입니다. 저는 확실히 이를 사용할 것입니다.

Bun이나 Deno처럼 매끄럽지는 않지만, 아직 지원이 완벽하지 않아도 Node가 여전히 가장 인기 있는 JS 백엔드 프레임워크이기 때문에 전반적인 JavaScript 생태계에 큰 영향을 미칩니다.

# JavaScript가 하는 모든 미친 짓

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

여러분이 모든 특이사항을 알고 있었다고 생각했을 때, 좀 더 알아두어야 할 부분이 있다는 것을 알게 될 겁니다. Every Crazy Thing JavaScript Does은 자바스크립트의 미묘한 함정과 잘 알려지지 않은 부분들에 대한 매혹적인 안내서로, 괴로운 버그를 피하고 소중한 시간을 절약하세요.

오늘 이곳에서 무료 복사본을 받으세요.

![이미지](/assets/img/2024-08-13-NewBuilt-InTypeScriptSupportInNodejsFinally_12.png)


Nodejs에서 기본적으로 타입스크립트 사용하는 방법


이 기사에서는 함수형 컴포넌트와 훅을 사용하여 React 애플리케이션에 이러한 디자인 패턴을 구현하는 방법을 살펴볼 것입니다. 끝날 때쯤에는 React 코드베이스를 청결하고 유지보수 가능하게 유지하는 방법에 대해 더 많은 이해를 갖게 될 것입니다.

![image](/assets/img/2024-08-13-BuildingaBetterReactApplicationwithRepositoryandAdapterDesignPatterns_0.png)

현대 소프트웨어 개발에서 청결하고 모듈화되며 테스트 가능한 코드를 유지하는 것이 중요합니다. 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리 인 React는 컴포넌트 기반 아키텍처를 장려합니다. 그러나 애플리케이션이 성장함에 따라 데이터 및 API 상호 작용을 관리하는 것은 복잡해질 수 있습니다. 이것이 Repository 및 Adapter 패턴과 같은 디자인 패턴이 필요한 이유입니다.

# 디자인 패턴 이해하기

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

# 1. Repository Pattern

Repository Pattern은 데이터 레이어를 추상화하여 도메인 객체에 액세스하는 데 사용되는 컬렉션과 같은 인터페이스를 제공합니다. 이 패턴은 도메인과 데이터 매핑 레이어 간을 중재하여 인메모리 도메인 객체 컬렉션처럼 작동합니다.

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

# 2. Adapter Pattern

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

어댑터 패턴은 호환되지 않는 인터페이스를 함께 작동하도록 허용합니다. 클래스의 인터페이스를 다른 인터페이스로 변환하여 클라이언트가 기대하는 인터페이스로 작동합니다. 이 패턴은 기존 클래스를 소스 코드를 수정하지 않고 다른 클래스와 함께 작동하도록 만드는 데 자주 사용됩니다.

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

# 프로젝트 설정하기

먼저 새로운 React 프로젝트를 생성해 봅시다. 이미 설치되어 있지 않다면 Create React App을 설치하고 프로젝트를 설정하세요:

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

```js
npx create-react-app react-repo-adapter
cd react-repo-adapter
```

# 프로젝트 구조화

프로젝트를 관심사에 맞게 명확하게 구성하세요. 다음은 제안된 구조입니다:

```js
src/
├── adapters/
│   └── apiAdapter.js
├── components/
│   └── ItemsComponent.js
├── repositories/
│   └── dataRepository.js
├── services/
│   └── apiService.js
├── App.js
└── index.js
```

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

# 리포지토리 구현

데이터 조작 작업을 관리하기 위한 데이터 리포지토리를 생성합니다.

src/repositories/dataRepository.js

```js
const DataRepository = (apiAdapter) => ({
  getAllItems: async () => {
    return await apiAdapter.get("/items");
  },

  getItemById: async (id) => {
    return await apiAdapter.get(`/items/${id}`);
  },

  createItem: async (data) => {
    return await apiAdapter.post("/items", data);
  },

  updateItem: async (id, data) => {
    return await apiAdapter.put(`/items/${id}`, data);
  },

  deleteItem: async (id) => {
    return await apiAdapter.delete(`/items/${id}`);
  },
});

export default DataRepository;
```

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

# 어댑터 구현하기

HTTP 요청을 처리하기 위한 API 어댑터를 만들어보세요.

src/adapters/apiAdapter.js

```javascript
import axios from "axios";

const ApiAdapter = (baseURL) => {
  const client = axios.create({
    baseURL: baseURL,
  });

  return {
    get: async (url) => {
      const response = await client.get(url);
      return response.data;
    },

    post: async (url, data) => {
      const response = await client.post(url, data);
      return response.data;
    },

    put: async (url, data) => {
      const response = await client.put(url, data);
      return response.data;
    },

    delete: async (url) => {
      const response = await client.delete(url);
      return response.data;
    },
  };
};

export default ApiAdapter;
```

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

# 컴포넌트에서 저장소와 어댑터 사용하기

이제 저장소와 어댑터를 사용하여 데이터를 가져와 표시하는 기능 컴포넌트를 만들어 봅시다.

src/components/ItemsComponent.js

```js
import React, { useEffect, useState } from "react";
import DataRepository from "../repositories/dataRepository";
import ApiAdapter from "../adapters/apiAdapter";

const apiAdapter = ApiAdapter("https://api.example.com");
const dataRepository = DataRepository(apiAdapter);

const ItemsComponent = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchItems = async () => {
      const data = await dataRepository.getAllItems();
      setItems(data);
    };
    fetchItems();
  }, []);

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ItemsComponent;
```

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

# 모두 함께 적용해 보기

마지막으로, 자신의 컴포넌트를 메인 App 컴포넌트에 통합하세요.

src/App.js

```js
import React from "react";
import ItemsComponent from "./components/ItemsComponent";

const App = () => (
  <div>
    <h1>리파지토리와 어댑터 패턴을 활용한 리액트</h1>
    <ItemsComponent />
  </div>
);

export default App;
```

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

![image](/assets/img/2024-08-13-BuildingaBetterReactApplicationwithRepositoryandAdapterDesignPatterns_3.png)

# 간단한 영어로 🚀

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

- 반드시 박수를 보내고 작가를 팔로우해 주세요 👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠 확인하기


React 저장소에 리포지토리 및 어댑터 디자인 패턴 적용하기


쿠키를 거부할 수 있는 권리가 있어요... 정말일까요?

![Cookie consent popup](/assets/img/2024-08-13-CookieconsentistheWildWest_0.png)

영국에 계시면 아마도 쿠키 동의 팝업을 수백만 번 본 적이 있을 거예요. 보통 페이지가 처음으로 로드될 때 나타나는 모달 창이에요. 종종 콘텐츠를 많이 가리며 상호작용할 수 있도록 만들어져요.

![Cookie consent popup](/assets/img/2024-08-13-CookieconsentistheWildWest_1.png)

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

대부분의 경우, 큰 초록색 '수락' 버튼을 찾아서 전 문서에서 하던 일을 계속하면 될 거예요. 가끔 의심스러운 웹사이트에 들어가면(음, 나도 판단하지 않을게요), 누군가가 여러분을 추적하지 못하게 쿠키 수집을 거절할 수도 있어요.

중요한 점은 쿠키가 최종 사용자의 동의를 통해 작동해야 한다는 것입니다 — 이것이 개인정보보호 및 전자 통신 규정(PECR)에서 말하는 것입니다.

그러니까 사용자가 동의하면, 웹사이트가 설정하기를 원하는 쿠키를 받고, 거절하면 아무 것도 설정되지 않나요?
사실 그렇지 않아요.

# 필수 쿠키

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

그 전에 수상한 웹사이트에 들어가보고 쿠키를 거부한 적이 있었던 것 기억나요? 하지만 사용자 동의와 상관 없이 설정되는 특정 쿠키를 막을 수 없다는 사실에 놀랄지도 모르겠네요.

사용자 동의에 영향을 받지 않는 '필수 쿠키'라는 카테고리가 있어요.

쿠키 동의 팝업을 거부함으로써 필수 쿠키를 거부할 수 없어요. 이러한 쿠키를 비활성화할 수 있는 유일한 방법은 브라우저 설정에서 모든 쿠키를 비활성화하는 것뿐이에요.

필수 쿠키는 사용자 동의 동작과 상반됩니다. 쿠키를 거부해도 모든 쿠키가 거부되지 않는다는 사실을 처음 알았을 때, 조금 속은 듯한 느낌이 들었어요.
대부분의 웹사이트는 사용자를 당황시키거나 돌아서게 만들 수 있기 때문에 선택에 관계 없이 쿠키를 설정할 것이라는 사실을 언급하지 않을 거예요. '모든 쿠키 거부'라고 표시된 버튼이 실제로 모든 쿠키를 거부하지 않기 때문에 그 버튼이 잘못되었다고 말해봐도 좋을 것 같아요.
예상대로 정보 위원회(ICO)는 훨씬 명확한 동의 팝업을 가지고 있으며, '비필수 쿠키 거부'라는 구문을 사용합니다. 이 버튼을 클릭하면 실제로 그 버튼을 클릭했을 때 무슨 일이 벌어질지 정확히 설명한 것이에요.

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

중요한 쿠키들은 사용자 상호작용/정보를 수집하거나 추적하지 않고 웹사이트가 올바르게 작동하기 위해 필요한 경우에만 중요한 쿠키로 분류될 수 있으므로 그것에 대해 걱정할 필요가 없을 것 같아요. 필요한 쿠키의 한 예로는 언어 환경 선택이나, 역설적으로 쿠키 팝업에 동의했는지 거부했는지 여부가 있을 수 있어요.

내 의견으로는 중요한 쿠키의 정의는 다소 해석의 여지가 있고 추가 쿠키가 설정되고 그것이 웹사이트가 올바르게 작동하는 데 필요한지에 대한 논란의 여지가 있을 수도 있어요. 전반적으로 중요한 쿠키들은 해로울 바 없고, 사용자의 익명성을 유지하면서 웹사이트 전반적인 경험을 가능하게 해줄 것이에요.

# 동의 존중

그래서 쿠키 동의 팝업을 거절했는데, 몇 가지 중요한 쿠키들은 여전히 설정될 거라고 알고 있어요. 그게 전부일까요?

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

잘…

네, 그게 맞아요. 하지만 쿠키 동의가 제대로 존중된다는 가정하에 그렇죠. 그런데 항상 그렇지는 않아요. 특정한 스크립트가 자체적으로 쿠키를 설정하며 사용자 동의를 제대로 존중하지 않을 때가 있어요. 사용자 동의를 제대로 존중하지 않는 예제를 살펴보겠습니다. 걱정 마세요, 이후에 어떻게 수정하는지 알려줄게요.

쿠키 동의 준수하지 않는 웹사이트를 '이름을 공개하고 비난하는' 것이 합법적인지 확신하지는 못해서, 실제 웹사이트 URL은 비공개로 유지하는 게 모두에게 더 편할 것 같아요. 하지만 이 웹사이트는 매일 수천 건의 페이지 조회가 예상되는 인기 있는 영국 웹사이트에요. 웹사이트의 닉네임을 'Webby'로 지어볼게요.

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

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

웹사이트 Webby는 꽤 평범하고 잘 디자인된 사이트로, 특별한 점은 없어 보입니다.

Chrome에서 웹사이트 Webby를 처음 방문하고 쿠키로 이동하면 이미 사용자 동의 없이 설정된 많은 쿠키 목록이 표시됩니다.

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

내 스파이더 감각이 작동되며 사용자 쿠키 동의 권한이 아직 주어지지 않았는데도 설정되는 많은 쿠키들이 있음을 느낍니다. 특히, \_vwo 쿠키가 인기 있는 A/B 테스팅 스위트인 Visual Web Optimizer와 관련된 행동을 추적한다는 것을 알고 있기 때문입니다.

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

ICO가 이 행동에 대해 매우 명확하게 설명하고 있어요.

알았어 알앉, 웨비가 미리 몇 가지 쿠키를 설정해두는 거죠. 큰 문제는 아닐 거에요. 분명 사용자 쿠키 동의를 취할 때 이 쿠키들은 존중할 거예요.

이제 그걸 테스트해볼게요.

다음은 웨비의 쿠키 동의 배너가 어떻게 생겼는지에 대한 내용입니다.

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

![Cookie consent screenshot 1](/assets/img/2024-08-13-CookieconsentistheWildWest_4.png)

You can see that the necessary cookies box is not toggleable — that’s expected due to how necessary cookies function.
The Preferences, Statistics, and Marketing categories have been toggled off. Clicking Ok means that any cookies related to these categories should be unset.

_Clicking the Ok button_

![Cookie consent screenshot 2](/assets/img/2024-08-13-CookieconsentistheWildWest_5.png)

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

성공입니다! 우리는 예상대로 \_vwo 쿠키가 제거되었다는 것을 확인할 수 있습니다.
그런데 VWO 쿠키가 필수 쿠키가 아님을 어떻게 아는 건가요? 해당 쿠키는 웹 사이트 자체의 쿠키 정책 페이지에서 '통계' 항목에 속합니다.

![쿠키 동의 팝업](/assets/img/2024-08-13-CookieconsentistheWildWest_6.png)

따라서 쿠키를 거부했을 때 VWO 쿠키는 보이지 않을 것으로 예상됩니다. 그리고 기쁜 소식은, 현재 그렇게 보입니다.

페이지를 새로고침해서 다시 한 번 확인해 보겠습니다.

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

![Cookie consent issue](/assets/img/2024-08-13-CookieconsentistheWildWest_7.png)

Uh oh. VWO cookies have been set again, even though cookie consent for statistic cookies has explicitly not been given.

## This is an issue.

Webby is not respecting cookie consent, and this potentially has major implications in terms of the ICO and GDPR.

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

# 어떻게 이 문제를 해결할까요

어떻게 이 무작위 영국 웹 사이트에 숨어있는 쿠키 상호 작용을 발견했는지 궁금할 수도 있습니다. 합리적인 질문이에요.

최근에 VWO와 많이 작업하고 있었는데, 특히 VWO SmartCode 라는 것과 많이 작업했어요.
SmartCode는 웹 사이트에 추가되면 VWO 기능을 사용할 수 있게 해주는 JavaScript 스크립트에요.
이 스크립트는 VWO가 당신의 웹 사이트를 '볼' 수 있게 하고, 추적 데이터를 당신의 사이트에서 VWO로 전달할 수 있게 하며, 또한 VWO 쿠키를 설정할 수 있도록 합니다. 작은 스크립트로서 당신의 사이트 헤더에 두렵지 않게 자리 잡고 있어요.

SmartCode의 문제점, 아니면 SmartCode를 구현하는 문제는, 이 스크립트를 단순히 생으로 웹 사이트에 삽입하는 것만으로는 쿠키 동의를 자동으로 준수하지 않는다는 점이에요.
이 스크립트는 모든 쿠키 동의 팝업 위에 있고, 사이트가 처음로드될 때 쿠키가 사전에 활성화되어 있는 것처럼 보이는 이유이며, 더 중요한 것은 새로 고침할 때 쿠키가 돌아오는 이유이기도 해요.

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

이 문제는 VWO SmartCode를 내 프로젝트에 어떻게 구현할지 테스트하는 중에 발견한 문제였어요. 다른 사람들도 이런 문제에 빠졌는지 궁금해서 빠르게 찾아보니 Webby에서도 같은 문제가 있었어요.

저는 Webby가 VWO SmartCode를 쿠키 동의 메커니즘을 통해 삽입하는 대신 직접 DOM에 주입하고 있다고 생각해요.

이 문제를 해결하려면 스크립트를 쿠키 동의 관리자를 통해 삽입해야 합니다. 이렇게 하면 허락 없이 추적 쿠키가 설정되지 않도록 할 수 있어요. 그게 다에요. 이 변경을 하면 미리 활성화된 VWO 쿠키가 더 이상 발생하지 않고, 새로 고침할 때 쿠키가 다시 나타나지 않게 되겠죠.

# 마무리

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

사용자들은 필수가 아닌 쿠키를 거부함으로써 실제로 필요하지 않은 쿠키가 설정되는 것을 막는 기능을 신뢰할 수 있어야 합니다. 이것은 단지 상식적인 문제입니다. 평균 사용자는 쿠키 동의가 예상대로 작동하는지를 믿어야 합니다. 대부분의 사람들은 당신의 웹 사이트 쿠키를 살펴볼 생각을 하지 않을 것입니다. 심지어 나도 우연히 이 예시를 찾았습니다. 그곳에 얼마나 오랫동안 있었는지 알 수 없습니다. 익명 유지를 희망한 사용자들에 대해 실수로 얼마나 많은 데이터가 전송되었을지 모른다면 어떨지요? 케임브리지 애널리티카만큼 스캔들은 아니라고 주장하진 않지만, 이러한 것들은 중요합니다. 인터넷 익명성은 점점 더 중요해지고 있습니다. 웹비의 창조자들이 VWO의 오용을 전혀 모르고 있는 것도 매우 가능성이 높습니다. 저는 이것이 악의가 아닌 무능에서 비롯된 문제라고 생각합니다. 이것이 오류를 변명하지는 않지만, 쿠키 동의는 심각한 주제이며 개발자들도 고민하는 부분입니다. 동일한 실수를 저지르고 있는 수백 개, 아니 수천 개의 다른 웹 사이트가 있을 것으로 예상됩니다.

웹 사이트를 소유하고 계신다면, 지금 쿠키 준수 여부를 확인해보는 것이 좋습니다. 혹시 내가 계속해서 당신에 대해 이야기하고 있었을지도 모르겠네요 👀

그런데, 이 모든 정보는 웹비 소유자들에게 이메일로 전송되었습니다. 지금쯤에는 문제가 해결된 것일지도 모릅니다.

이 기사를 좋아하셨거나 유용하게 여기셨다면, 저를 팔로우해주세요. 또는 커피 한 잔 사주시는 방법으로 저를 지원해주셔도 됩니다! 모든 지원은 매우 감사히 받고, 완전히 선택적입니다.


쿠키 동의 아직도 무법천지


![이미지](/assets/img/2024-08-13-5ProTipsfromaStaffEngineersTypeScriptCode_0.png)

저는 최근에 스탭 소프트웨어 엔지니어인 동료와 프로젝트를 같이 진행했는데, 그 분의 TypeScript 코딩 스타일에서 몇 가지 기술을 발견해서 눈에 띄었습니다. 이러한 관행들은 초보자나 중급 개발자와 경험있는 전문가가 코딩에 접근하는 방식을 명확하게 보여주었습니다.

스태프 엔지니어와 함께 일하는 것은 깨우치는 경험이 될 수 있습니다. 이 프로젝트에서 나는 그의 방대한 경험을 가진 사람과 내 코드를 비교했을 때 기대했지만 조금은 우려스러웠습니다. 프로젝트에 깊이 들어가면서, 그의 코드를 차별화하는 여러 기술과 관행들이 점차 명확해졌습니다. 그래서, 저는 그의 TypeScript 코드에서 발견한 이 5가지 핵심 관행을 공유하고자 합니다. 이것들을 사용하여 전문 프로그래머가 되는 데 도움이 될 수 있습니다!

먼저 코드가 어떻게 보였는지 살펴보고, 그 다음으로는 그 5가지 핵심 포인트를 확인하고, 코드를 작성할 때 다음 번에 유용하게 활용할 수 있도록 간단히 설명하겠습니다.

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

```js
// 학생 시험 결과를 처리하는 processStudentExamResults 함수는 평균 점수, 고유 학점, 과목 및 통과한, 실패한 및 전체 학생에 대한 요약을 생성합니다. 코드 스니펫은 다음과 같습니다:

// Types 정의
type ExamResult = {
  subject: string,
  score: number,
  grade: string,
  comments?: string,
};

type Student = {
  name: string,
  age: number,
  results: ExamResult[],
};

type ProcessedStudentDetails = Pick<Student, "name" | "age"> & {
  averageScore: number,
  allGrades: string,
  allSubjects: string,
  comments: string[],
};

type StudentSummary = {
  totalStudents: number,
  averageScore: number,
  allGrades: string,
  allSubjects: string,
  comments: string[],
};

const createGradeChecker = (failingGrade: string) => (grade: string) => grade !== failingGrade;
const passingGrade = createGradeChecker("F");

// 평균 점수 계산 함수
const calculateAverageScore = (results: ExamResult[]): number =>
  results.reduce((acc, result) => acc + result.score, 0) / results.length;

// 학생 세부 정보를 순차적으로 생성하는 생성기 함수
function* studentDetailsGenerator(students: Student[]): Generator<Student> {
  for (const student of students) {
    yield student;
  }
}

// 학생 결과 처리 메인 함수
const processStudentExamResults = (students: Student[]) => {
  // 통과, 실패한 학생들 필터링
  const passedStudents = students.filter((student) => student.results.some((result) => passingGrade(result.grade)));
  const failedStudents = students.filter((student) => student.results.every((result) => !passingGrade(result.grade)));

  // 생성된 학생 세부 정보를 대략적으로 처리하는 함수
  const processStudentDetail = (student: Student): ProcessedStudentDetails => {
    const { name, age, results } = student;
    const averageScore = calculateAverageScore(results);
    const allGrades = [...new Set(results.map((result) => result.grade))].join(", ");
    const allSubjects = [...new Set(results.map((result) => result.subject))].join(", ");
    const comments = results.flatMap((result) => result.comments || []);

    return {
      name,
      age,
      averageScore,
      allGrades,
      allSubjects,
      comments,
    };
  };

  // 결과 요약 함수
  const summarizeDetails = (processedDetails: ProcessedStudentDetails[]): StudentSummary => {
    const totalStudents = processedDetails.length;
    const averageScore = calculateAverageScore(
      processedDetails.map((student) => ({
        subject: "",
        score: student.averageScore,
        grade: "",
      }))
    );
    const allGrades = [...new Set(processedDetails.flatMap((student) => student.allGrades.split(", ")))].join(", ");
    const allSubjects = [...new Set(processedDetails.flatMap((student) => student.allSubjects.split(", ")))].join(", ");
    const comments = processedDetails.flatMap((student) => student.comments);

    return {
      totalStudents,
      averageScore,
      allGrades,
      allSubjects,
      comments,
    };
  };

  // 통과한 학생들 처리
  const passedDetails: ProcessedStudentDetails[] = [];
  for (const student of studentDetailsGenerator(passedStudents)) {
    passedDetails.push(processStudentDetail(student));
  }

  // 실패한 학생들 처리
  const failedDetails: ProcessedStudentDetails[] = [];
  for (const student of studentDetailsGenerator(failedStudents)) {
    failedDetails.push(processStudentDetail(student));
  }

  // 모든 학생 처리
  const allDetails: ProcessedStudentDetails[] = [];
  for (const student of studentDetailsGenerator(students)) {
    allDetails.push(processStudentDetail(student));
  }

  return {
    passedSummary: summarizeDetails(passedDetails),
    failedSummary: summarizeDetails(failedDetails),
    allSummary: summarizeDetails(allDetails),
  };
};

// 함수에 샘플 데이터를 사용하여 호출한 결과는 다음과 같았습니다:

// 샘플 학생 입력
const students: Student[] = [
  {
    name: "Alice",
    age: 20,
    results: [
      { subject: "Math", score: 85, grade: "A", comments: "Excellent" },
      { subject: "English", score: 78, grade: "B", comments: "Good" },
      { subject: "Science", score: 92, grade: "A", comments: "Outstanding" },
    ],
  },
  {
    name: "Bob",
    age: 22,
    results: [
      { subject: "Math", score: 65, grade: "C", comments: "Needs Improvement" },
      { subject: "English", score: 88, grade: "A", comments: "Very Good" },
      { subject: "Science", score: 75, grade: "B", comments: "Good" },
    ],
  },
  {
    name: "Charlie",
    age: 21,
    results: [
      { subject: "Math", score: 50, grade: "F", comments: "Failed" },
      { subject: "English", score: 45, grade: "F", comments: "Failed" },
      { subject: "Science", score: 55, grade: "F", comments: "Failed" },
    ],
  },
];

// 함수 호출
const processedStudentSummary = processStudentExamResults(students);
console.info(processedStudentSummary);
```

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

주어진 입력 데이터에 대한 출력 결과는 합격한 학생, 불합격한 학생 및 전반적인 성적 개요를 반환했습니다:

```js
{
  passedSummary: {
    totalStudents: 2,
    averageScore: 80.5,
    allGrades: 'A, B, C',
    allSubjects: '수학, 영어, 과학',
    comments: [
      '우수함',
      '좋음',
      '뛰어남',
      '향상이 필요함',
      '매우 좋음',
      '좋음'
    ]
  },
  failedSummary: {
    totalStudents: 1,
    averageScore: 50,
    allGrades: 'F',
    allSubjects: '수학, 영어, 과학',
    comments: [ '불합격', '불합격', '불합격' ]
  },
  allSummary: {
    totalStudents: 3,
    averageScore: 70.33333333333333,
    allGrades: 'A, B, C, F',
    allSubjects: '수학, 영어, 과학',
    comments: [
      '우수함',
      '좋음',
      '뛰어남',
      '향상이 필요함',
      '매우 좋음',
      '좋음',
      '불합격',
      '불합격',
      '불합격'
    ]
  }
}
```

이제 코드를 보셨는데, 처음에는 조금 어려울 수 있습니다. 하지만, 한 번 따라가 보세요. 그러면 끝까지 쉽게 다가갈 거예요.

## 1. "고차 함수"의 광범위한 활용

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

가장 먼저 눈에 띄는 점은 코드에서 map, reduce, filter, some, every 등과 같은 함수들이 굉장히 많이 사용된다는 것입니다. 이러한 함수들은 고차 함수라고 불리며, 종종 HOFs로도 알려져 있습니다.

이러한 함수들은 다른 함수를 인수로 받거나 함수를 반환하는 형태입니다. 이러한 실천은 함수형 프로그래밍에서 일반적이며 더 추상적이고 재사용 가능한 코드를 개발하는 데 도움이 됩니다. 코드에서 HOFs가 사용된 부분을 가리킬 수 있는 몇 가지 예시는 다음과 같습니다:

```js
// 'reduce'를 사용한 평균 점수 계산
const calculateAverageScore = (results: ExamResult[]): number =>
  results.reduce((acc, result) => acc + result.score, 0) / results.length;
```

```js
// 'some'과 'every' HOFs를 사용한 학생 필터링
const passedStudents = students.filter((student) => student.results.some((result) => passingGrade(result.grade)));
const failedStudents = students.filter((student) => student.results.every((result) => !passingGrade(result.grade)));
```

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

```js
// 'map'과 'flatMap' HOFs를 사용한 파싱 세부 사항
const allGrades = [...new Set(results.map((result) => result.grade))].join(', ');
const allSubjects = [...new Set(results.map((result) => result.subject))].join(', ');
const comments = results.flatMap((result) => result.comments || []);

## 2. “Generator function”의 실용적인 사용

아마도 코드에서 function* studentDetailsGenerator()를 주목했나요?

// 한 번에 하나의 학생 세부 정보를 생성하는 제너레이터 함수
function* studentDetailsGenerator(students: Student[]): Generator<Student> {
  for (const student of students) {
    yield student;
  }
}

...
// 모든 학생 처리
const allDetails: ProcessedStudentDetails[] = [];
for (const student of studentDetailsGenerator(students)) {
  allDetails.push(processStudentDetail(student));
}
...

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

실제 코드에서 yield를 사용하는 사람들이 누구인지 궁금했던 적이 있었어요. 기본적인 방법으로 비슷한 결과를 얻을 수 있는데, 이를 왜 사용하는지 의문이었죠. 그러나 무지하다고 하더라도, 실제로 실용적인 응용 프로그램에서 사용된다는 것을 발견했어요!

그러니 생성자(generator) 함수는 필요에 따라 값을 생성하여 실행을 일시 중단하고 상태를 유지한 다음 이전 yield 실행 이후에 다시 실행을 재개하는 방식으로 동작해요. 이 방법은 데이터셋이 매우 큰 경우 값의 게으른(lazy) 평가에 특히 유용하며, 사용자 정의 반복자(iterators)를 구현하거나 명확하게 비동기 코드를 작성할 때 사용돼요.

## 3. Spread 연산자와 객체 비구조화

Spread 연산자 ... 와 객체 비구조화는 현대 JavaScript 기술로, 객체와 배열을 간결하고 표현적으로 조작할 수 있는 기술이에요. 이들이 코드를 깨끗하고 가독성 있게 만들어주며, 데이터 처리가 더 쉬워지는 방식을 정말 좋아해요. 이를 몇 줄의 코드로 보는 우아한 방법을 살펴봐요:

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

// Set 및 spread 연산자를 사용하여 고유한 성적 및 과목 목록을 만드는 예제
const allGrades = [...new Set(results.map((result) => result.grade))].join(', ');
const allSubjects = [...new Set(results.map((result) => result.subject))].join(', ');

// 객체 해체를 사용하여 학생 속성 가져오기
const { name, age, results } = student;

경험이 적거나 초보 수준의 개발자는 이러한 기법에 대한 지식이 부족하여 동일한 코드를 다음과 같이 작성할 수 있습니다:

// 반복문과 배열 사용해 고유한 성적 및 과목 목록 만들기
const allGradesArray = [];
const allSubjectsArray = [];

for (let i = 0; i < results.length; i++) {
    const grade = results[i].grade;
    const subject = results[i].subject;

    if (!allGradesArray.includes(grade)) {
        allGradesArray.push(grade);
    }

    if (!allSubjectsArray.includes(subject)) {
        allSubjectsArray.push(subject);
    }
}

const allGrades = allGradesArray.join(', ');
const allSubjects = allSubjectsArray.join(', ');

// 객체 해체를 사용하지 않고 학생 속성에 액세스
const name = student.name;
const age = student.age;
const results = student.results;

결과는 동일하지만 코드 줄 수 및 성능 면에서 효율성이 중요합니다. 이 모든 것은 경험에서 오는 것이죠. 걱정하지 마세요! 블로그를 통해 이에 대한 도움을 드릴게요 ;)

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

## 4. 고급 유형 정의

이미 알고 계시다시피 TypeScript는 모두 '유형(types)'에 관한 것입니다. 따라서 코드의 견고성과 유지 관리성을 향상시키기 위해 유형을 정의하고 처리하는 방법을 알아야 합니다.

// 유형 정의
type ExamResult = {
  subject: string;
  score: number;
  grade: string;
  comments?: string;
};

...

type ProcessedStudentDetails = Pick<Student, 'name' | 'age'> & {
  averageScore: number;
  allGrades: string;
  allSubjects: string;
  comments: string[];
};

...

코드에서 ProcessedStudentDetails 및 ExamResult와 같은 모든 복잡한 유형은 명확하고 명시적인 유형 정의를 제공하기 위해 정의되어 있어 잠재적인 오류를 줄일 수 있습니다. 이는 정말 좋은 점입니다.

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

하지만 더 좋은 것은 Pick 유틸리티 타입이 기존 타입에서 선택한 속성을 기반으로 새로운 타입을 생성하는 방식입니다! 언어의 고급 기능을 알면 소프트웨어 엔지니어링 경력을 전진시키고 기술을 향상시키는 데 중요합니다.

## 5. 커링 기술의 사용

이 코드는 학생들의 성적을 확인하는 함수를 생성하기 위해 인기있는 커링 기술도 활용합니다.

// 등급 확인 기본 함수를 생성하는 커링 함수
const createGradeChecker = (failingGrade: string) => (grade: string) => grade !== failingGrade;

// 합격 등급을 확인하는 기본 함수
const passingGrade = createGradeChecker('F');

...
  // 불합격 학생 필터링
  const failedStudents = students.filter(student =>
    student.results.every(result => !passingGrade(result.grade))
  );

...

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

코드 스니펫에서 createGradeChecker 함수를 보셨을 겁니다. 단순하게 표시하기 위해 여기에는 passingGrade 함수만 표시되어 있습니다. 해당 함수는 학생이 통과했는지 여부를 확인하고 반환합니다.
하지만, 우리는 마찬가지로 서로 다른 맥락에 대해 서로 다른 등급을 정의할 수 있습니다. 다음과 같이:

// 총점이 Distinction 또는 Outstanding인 학생을 확인합니다
const distinctionGrade = createGradeChecker('O');

이것이 커링의 아름다움입니다. 이는 함수를 일련의 함수로 변환하여 매 단일 인수를 취하게 만드는 것을 허용합니다. 그리고 위에서 보신 것처럼, 이는 함수를 부분적으로 적용하도록 함으로써 재사용성과 가독성을 도입합니다.

좋아요! 이 블로그는 여기까지입니다. 적어도 이 중 1개 또는 2개의 기술이 여러분의 레벨 업에 도움이 될 것을 희망합니다. 이러한 최선의 방법을 수용하면 여러분의 코딩 기술을 향상시키고 돋보이는 전문가 수준의 코드를 작성할 수 있게 됩니다.

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

그러니 다음 프로젝트를 할 때는 코드에 이러한 고급 기술을 활용해보고 코드 리뷰어들을 감동시켜보세요 ;)

최고의 실천 방법을 배우고 기술을 향상시키는 것에 관심이 있다면, 다음으로 읽어볼 것을 추천합니다:

![이미지](https://miro.medium.com/v2/resize:fit:292/0*4IT9_pPBwe7zobBW.gif)

만약 이 글이 유용했다면, 이 게시물에 박수👏🏼 50번과 내 블로그를 팔로우 ❤️를 꼭 눌러주세요.
그리고 다음 게시물을 직접 이메일로 받아보기 위해 구독해주세요.

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

행복한 학습되세요! 🚀
```


TypeScript 작성할 때 알아두면 유용한 꿀팁 5가지

AWS CDK 개발자를 위한 15가지 팁


NestJS를 배우기 전에 이것을 알아두세요! NestJS를 배우려고 계획 중이고 이것이 좋은 아이디어인지 궁금하다면, 빠져들기 전에 알아두어야 할 몇 가지 사항이 있습니다. NestJS는 귀하의 생산성을 크게 향상시킬 수 있는 훌륭한 프레임워크이지만, 확장 가능한 서버 측 애플리케이션을 구축하는 데 특히 유용합니다. 그러나 나는 미리 알았더라면 큰 시간과 스트레스를 절약할 수 있는 중요한 사항들이 있었을 겁니다.

![NestJS regeret](/assets/img/2024-08-13-WhatIRegretAboutNestJS_0.png)

## 1. 더 빨리 시작하지 않았음

그렇다, 귀하가 들었습니다! NestJS와 같은 Node.js 프레임워크를 만나본 적이 없습니다. 그것은 최고의 최고입니다. NestJS가 Node.js 개발에 가져온 수준의 구조와 조직은 무죄합니다. 익숙하지 않다면, 먼저 NestJS가 무엇인지 설명하겠습니다:-

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

![NestJS](/assets/img/2024-08-13-WhatIRegretAboutNestJS_1.png)

NestJS는 Node.js를 사용하여 서버 사이드 애플리케이션을 개발하는 프레임워크입니다. 강력하고 효율적인 백엔드를 만드는 데 도움이 되는 도구 상자라고 생각하십시오. 큰 규모의 프로젝트를 작업하고 코드를 구성하고 관리하기 쉽게 유지하고 싶다면 특히 좋습니다.

NestJS의 멋진 점 중 하나는 인기 있는 프런트엔드 애플리케이션을 개발하는 프레임워크인 Angular에서 영감을 받았다는 것입니다. 따라서 Angular을 사용해 본 적이 있다면 NestJS가 꽤 익숙할 것입니다. 하지만 그렇지 않더라도 배우기 쉬울 것이라 생각합니다.

NestJS는 코드를 이른 시점에 오류를 잡아내고 코드를 더 안정적으로 만들기 위한 몇 가지 추가 도구를 제공하는 JavaScript의 버전 인 TypeScript를 사용합니다. 또한 프레임워크는 앱을 위한 "모듈"이라는 개념을 중심으로 구축되어 있습니다. 각 모듈은 앱의 특정 부분을 처리할 수 있으므로 개발 및 유지 관리가 더 쉬워집니다. 게다가 빠르게 프로젝트를 설정하고 관리하는 데 도움이 되는 명령줄 도구와 같은 많은 내장 기능이 있습니다.

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

## 2. 시작 시점을 훨씬 일찍 잡는 것

NestJS는 직관적인 CLI와 강력한 도구로 개발을 쉽게 만듭니다. 모듈, 컨트롤러 및 서비스 생성부터 테스팅 및 문서화 통합까지. 이 프레임워크는 보일러플레이트의 많은 부분을 처리해 주어 실제로 중요한 것에 집중할 수 있게 해줍니다.

![image](/assets/img/2024-08-13-WhatIRegretAboutNestJS_2.png)

Node.js로 작업할 때 애플리케이션 아키텍처를 처음부터 직접 구축해야 합니다. 이는 자유롭게 설계할 수 있는 흥미로운 과정일 수 있습니다. 하지만 초심자들에게는 이 자유가 혼란을 초래하거나 너무 많은 것을 이해해야 한다는 점으로 인해 혼란스럽거나 엉망인 구조로 이어질 수 있습니다.

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

한편, NestJS를 사용하고 있다면, 많은 부분이 이미 처리되어 있습니다. NestJS에는 내장된 아키텍처가 제공되어 구조 설정에 대해 걱정할 필요가 없습니다. 마치 앱을 쉽게 구축할 수 있도록 도와주는 청사진이 있는 것처럼 보입니다.

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

그럼에도 불구하고, 초심자들에게 자신만의 아키텍처를 만드는 방법을 배우는 것이 가치있다고 생각합니다. 내부 동작 방식에 대해 많은 것을 배울 수 있습니다. 하지만 NestJS도 배울 가치가 많은 훌륭한 도구이며, 최고의 실천 방법을 익힐 수 있을 뿐만 아니라 빠르게 개발을 시작하는 데 도움을 줄 수 있습니다.

## 3. 더 빨리 이에 대한 글을 쓰지 않았다.

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

NestJS에 대해 가장 좋아하는 점 중 하나는 코드 전체에 걸쳐 일관성을 강제하는 방식입니다. 작은 프로젝트든 대규모 기업 애플리케이션이든 상관없이 NestJS를 사용하면 예측 가능하고 확장 가능한 아키텍처를 유지하는 것이 쉬워집니다.

또한 GraphQL, 웹소켓, 및 마이크로서비스와 같은 최신 웹 기술을 기본 지원하여 제공합니다. 이러한 기능들이 프레임워크 자체에 통합되어 있기 때문에 서드파티 라이브러리를 어떻게 조합해야 하는지 알아내는 시간을 절약할 수 있습니다.

<img src="/assets/img/2024-08-13-WhatIRegretAboutNestJS_4.png" />

또한 NestJS의 핵심 기능 중 하나인 데코레이터의 사용 방식은 프레임워크의 독특한 이유 중 하나입니다. 데코레이터는 TypeScript의 기능으로, 클래스, 메서드, 속성 또는 매개변수에 메타데이터를 추가할 수 있게 합니다. 이들은 요소들의 동작을 수정하거나 추가 정보를 제공하는 함수들로 볼 수 있습니다.

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

네스트JS의 데코레이터는 작성해야 하는 보일러플레이트 코드의 양을 줄여줍니다. 라우팅을 수동으로 설정하거나 의존성을 주입하는 대신, @Controller, @Get, @Post, @Injectable 등과 같은 데코레이터를 사용하여 선언적으로 이러한 작업을 처리합니다. 이를 통해 코드를 더 깔끔하고 가독성 있게 만들 수 있습니다.

데코레이터를 사용함으로써 각 부분의 의도와 기능을 명확히 볼 수 있습니다. 예를 들어, @Controller는 클래스가 HTTP 요청을 처리하는 역할을 한다는 것을 나타내며, @Get 또는 @Post 메서드는 엔드포인트에서 지원하는 HTTP 메서드를 나타냅니다. 이는 코드의 가독성을 향상시키고 유지보수를 쉽게 할 수 있습니다.

예를 들어 @Injectable 및 @Inject를 사용하면 네스트JS의 강력한 의존성 주입 시스템을 활용할 수 있습니다. 이 시스템을 사용하면 수동으로 생명 주기를 관리하지 않고도 서비스, 리포지토리 및 기타 종속성을 클래스에 주입할 수 있습니다. 이는 재사용성, 관심사 분리 및 느슨한 결합을 촉진하여 응용 프로그램을 테스트하고 유지 관리하기 쉽게 만들어줍니다.

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

NestJS가 개발의 여러 측면을 변화시킨 방법에 대해 계속 이야기할 수 있겠지만, 나머지는 여러분이 직접 탐험하고 발견하기를 기대합니다.

⛔주의: - 이 블로거를 팔로우하지 마세요. 지식과 통찰력의 엄청난 증가를 일으킬 수 있어 "지식증 Max"라고 알려진 상태를 유발할 수 있습니다. 증상에는 지능 수준의 증가, 복잡한 주제에 대한 깊은 이해, 더 많은 학습을 위한 갈증 등이 포함됩니다.

감사하며 즐거운 코딩하세요 ✌️


Posts