

CSS를 항상 어렵게 느꼈던 사람으로서, 올해는 CSS에 좀 더 편안해지기 위해 노력해왔어요. Epic Web Conference에 참석하고 커뮤니티의 멋진 엔지니어들을 만나면서 올 해 제 학습 여정을 Medium에 공유하게 돼서 흥겨웠어요.

이 글은 특히 CSS Clip-path 속성을 사용하여 웹 페이지의 배경에 재미있는 모양과 애니메이션을 만드는 방법에 대해 이야기합니다.

이 연습을 위해, 웹 페이지의 배경으로 고정된 노란색 모양을 만들고 싶었어요.

![이미지](/assets/img/2024-08-26-LearnwithmeCSSClip-Path_0.png)

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

원하는 모양을 만들기 위해 순수한 CSS만 사용하고 싶었고, 그래서 clip-path 속성이 큰 도움이 되었습니다.

원하는 clip-path 속성을 직접 코딩하는 것도 가능하지만, 이 CSS clip-path 제작 도구는 원하는 모양의 값들을 도출하는 데 정말 놀랍습니다.

먼저, 원하는 배경의 "모퉁이" 수를 확인했습니다. 제 경우에는 4개이며, Clippy 웹사이트에서 "평행사변형" 옵션을 선택하고 원하는 모양을 만들기 시작했습니다.

더 복잡한 모양을 원한다면 "사용 정다각형" 섹션을 선택할 수도 있습니다.

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

다음 CSS 코드로 비어 있는 div에 필요한 모양을 제공합니다.

```js
.customBackground {
  background-color: rgb(255 204 0);
  clip-path: polygon(23% 70%, 63% 69%, 100% 69%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 89%);
  height: 100%;
  width: 100%;
}
```

div를 sticky 배경으로 설정하기

이제 모양을 배경 이미지로 설정하고 페이지 아래쪽에 고정하여 사용하려면, 새로 만든 div에 다음 CSS를 사용하세요.

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

```css
.customBackground {
  background-color: rgb(255 204 0);
  clip-path: polygon(23% 70%, 63% 69%, 100% 69%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 89%);
  z-index: -10;
  position: fixed;
  height: 100%;
  width: 100%;
  bottom: 0;
}
```

여기요! 새로운 고정된 배경이 동작 중입니다!

최종 결과


CSS Clip-Path 사용 방법 정리



세일스포스란 무엇인가요-

세일스포스 CSS 이해하기 —

세일스포스는 세일스포스 라이트닝 디자인 시스템(SLDS)을 제공합니다. 이는 세일스포스의 디자인 원칙에 따라 제작된 스타일과 구성 요소의 포괄적인 라이브러리입니다. SLDS는 훌륭한 시작점이지만 때로는 특정 디자인 요구 사항을 충족시키기 위해 사용자 정의 CSS가 필요합니다.

세일스포스 개발 시, 세일스포스 라이트닝 디자인 시스템(SLDS)과 사용자 정의 CSS는 각각의 강점을 가지고 있습니다. 사용할지 여부는 여러분의 특정 요구 사항과 프로젝트의 문맥에 따라 다릅니다. 다음은 여러분의 요구 사항에 더 적합한 것을 결정하는 데 도움이 되는 상세한 비교입니다:

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

Salesforce Lightning Design System (SLDS) — -

## Custom CSS Advantages: — -

- Flexibility: —
Custom CSS allows you to implement unique and highly specific design requirements that may not be possible with SLDS alone.

- Control: You have complete control over the styles, ensuring that every aspect of your design is exactly as intended.

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

혁신: 사용자 정의 CSS를 사용하면 혁신적이고 최첨단 디자인을 만들어 기본 Salesforce UI와 구분할 수 있습니다.

## 단점

# 유지 보수

애플리케이션이 성장하고 발전함에 따라 사용자 정의 CSS는 유지하기 어려워질 수 있습니다. 효과적으로 관리하기 위해서는 철저한 문서화와 좋은 관행이 필요합니다.

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

반응성: 완전히 반응형인 사용자 정의 CSS를 보장하려면 다양한 장치 및 화면 크기에서 추가적인 노력과 테스트가 필요할 수 있습니다.
호환성: SLDS 또는 다른 Salesforce 구성 요소와 충돌하지 않도록 사용자 정의 CSS를 철저히 테스트해야 합니다.

어느 쪽이 좋을까요?

SLDS를 사용해야 하는 경우: —

일관성이 필요할 때: Salesforce 외관과 느낌을 일관되게 유지해야 하는 경우 SLDS를 사용하는 것이 좋습니다.
속도 및 효율성: 미리 구축된 구성 요소를 사용하여 신속하고 효율적으로 개발해야 할 때.
유지보수성: 사용자 정의 스타일과 관련된 유지보수 부담을 줄이고 싶을 때.
표준화: 표준화가 중요한 팀이나 다중 프로젝트에 작업할 때.

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

Custom CSS를 사용해야 할 때:

고유한 디자인 요구 사항: SLDS(Salesforce Lightning Design System)로 충족시킬 수 없는 고유한 디자인 요구 사항이 있을 때.
높은 사용자 정의: SLDS로는 불가능한 특정 사용자 정의를 달성해야 할 때.
혁신적 디자인: 매우 혁신적이고 고유한 사용자 인터페이스를 만들고자 할 때.

Salesforce Lightning 컴포넌트에 스타일을 추가하는 방법:

Salesforce Lightning 컴포넌트에 스타일을 추가하는 방법은 SLDS(Salesforce Lightning Design System) 및 사용자 정의 CSS를 통해 수행할 수 있습니다. Lightning Web Components(LWC) 또는 Aura Components와 작업 중인지에 따라 접근 방식이 약간 다를 수 있습니다. 각 유형의 컴포넌트에 스타일을 적용하는 방법에 대한 안내는 다음과 같습니다:

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

번개 웹 컴포넌트(LWC) 스타일링

# SLDS 클래스 사용하기

SLDS는 HTML 템플릿에서 직접 사용할 수 있는 포괄적인 CSS 클래스 세트를 제공합니다.

```html
```

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

```js
<! - myComponent.html →
<template>
 <div class="slds-box slds-p-around_medium">
 <p class="slds-text-heading_medium">Hello, Salesforce!</p>
 </div>
</template>
```

# 사용자 정의 CSS 추가

동일한 이름을 가진 CSS 파일을 만들어 사용자 지정 스타일을 추가하십시오. 이 CSS 파일은 구성 요소에 스코프가 지정됩니다.

// myComponent.js
import ' LightningElement ' from ‘lwc’;


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

```js
export default class MyComponent extends LightningElement ''

// myComponent.html
<template>
    <div class="custom-container">
        <p class="custom-text">Hello, Salesforce!</p>
    </div>
</template>

/* myComponent.css */
.custom-container {
    background-color: #f4f6f9;
    padding: 20px;
    border: 1px solid #d8dde6;
}

.custom-text {
    color: #16325c;
    font-size: 18px;
    font-weight: bold;
}

## Combining SLDS and Custom CSS

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

<! - myComponent.html →
<template>
 <div class="slds-box custom-container">
 <p class="slds-text-heading_medium custom-text">안녕하세요, Salesforce!</p>
 </div>
</template>

/* myComponent.css */
.custom-container {
 border-bottom: 1px solid #000;
 width: 100%;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
@media (max-width: 768px) {
 .custom-container {
 padding: 10px;
 }
}
.custom-text {
 color: #ff0000; /* 사용자 정의 색상 */
}

Best Practices — —

SLDS 활용: Salesforce의 디자인 원칙과 일관성을 유지하기 위해 표준 스타일링 작업에 SLDS 유틸리티 클래스를 활용하세요.
스코프된 CSS: LWC에서 CSS는 자동으로 스코프가 적용됩니다. Aura에서는.THIS 선택자를 사용하여 스타일을 컴포넌트에 스코프하세요.
반응형 디자인: SLDS 그리드와 유틸리티 클래스를 사용하고 커스텀 CSS에 미디어 쿼리를 추가하여 컴포넌트가 반응형인지 확인하세요.
!important 사용 최소화: CSS를 유지보수하기 어렵지 않도록 !important 선언을 삼가세요.
일관된 명명 규칙: 사용자 정의 CSS 클래스에 명확하고 일관된 명명 규칙을 사용하여 충돌을 피하고 유지 관리성을 향상시키세요.

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

결론 -

Salesforce에서 사용자 정의 스타일링된 라이트닝 컴포넌트를 만들면 반응형이고 시각적으로 매력적이며 사용자 친화적인 애플리케이션을 구축할 수 있습니다. Salesforce 라이트닝 디자인 시스템(SLDS)과 사용자 정의 CSS를 활용하여 일관성을 유지하면서도 특정 디자인 요구 사항을 충족할 수 있습니다. 라이트닝 웹 컴포넌트(LWC) 또는 오라 컴포넌트를 사용하더라도 구성 요소를 효과적으로 스타일링하는 방법을 이해하는 것은 높은 품질의 사용자 경험을 제공하는 데 중요합니다.

추가 자료 -

Salesforce 개발에 대한 지식과 기술을 더 향상시키기 위해 다음 자료를 확인해보세요.

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

대화에 참여해주세요 —

당신의 의견을 듣고 싶어요! 라이트닝 컴포넌트를 스타일링하면서 경험한 것이나 마주한 어려움을 공유해주세요. 당신에게 효과적이었던 조언이나 꿀팁이 있다면, 아래 댓글란에 공유해주세요.

연결 유지하기 —
더 많은 꿀팁, 튜토리얼, 업데이트를 보시려면, 트위터와 링크드인에서 저희를 팔로우해주세요. Salesforce 개발의 최신 소식을 받으시려면 뉴스레터로 구독해주세요.

Salesforce에서 커스텀 CSS를 활용한 반응형 디자인 하는 방법



이전 기사 끝에서 어디에 있었는지 기억나시나요? 여기 그림이 있어요:

![Image 0](/assets/img/2024-08-26-3WorkingwithStylesheets_0.png)

이전에 보여드렸던 실제 프로토타입과 훨씬 다른 것 같죠? 여기 우리가 향하고 있는 방향의 그림입니다.

![Image 1](/assets/img/2024-08-26-3WorkingwithStylesheets_1.png)

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

# 그래서 우리가 그림 1에서 그림 2로 가려면 어떻게 해야 하나요?

우리는 CSS(Cascading Stylesheet)를 사용해서 화면에 HTML에서 묘사하는 방법을 알려줄 거에요. 아마도 CSS가 뭔지 궁금해하실 거라 생각해서, 그냥 답부터 드릴게요. 그냥 또 하나의 코드 종류로, 웹 브라우저가 사용하는 방법을 안다고요. 현재 브라우저 회사들이 더 많은 스타일링 기능을 추가하려고 하면서 급속한 발전을 맛보이고 있어요. 새로운 기능이 구현될 때마다 이 문서를 최신 상태로 업데이트할게요.

## 코드에 Cascading Stylesheet를 어떻게 만들까요?

우리는 이번 시리즈의 시작점에 있기 때문에 우리 오래된 친구 "메모장.exe"를 방문할 거에요. 그 전에, 하지만 코드가 어디에 있는지 살펴볼까요?

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

페이지를 논리적으로 그룹화하는 경향이 있어요. 전문 도구를 사용하면 더 쉽게 할 수 있지만, 지금은 그냥 새 폴더를 만들어서 유용한 이름을 지어주세요. (저는 폴더 이름을 "css"로 지었습니다. 이유는 명백하죠.) 그림 3을 참고해주세요.

![Working with Stylesheets](/assets/img/2024-08-26-3WorkingwithStylesheets_2.png)

이제 이 css 폴더 안에 새 파일을 저장해주세요. 파일 확장자로 ".css"를 꼭 붙여주세요. 그렇게 하면 웹 브라우저가 파일을 어떤 형식으로 처리해야 하는지 알 수 있어요. 이상한 형태의 파일을 만드는 또 다른 힌트입니다.

- 메모장에서 새 파일을 열어주세요
- 파일 메뉴를 클릭한 후 "다른 이름으로 저장"을 클릭해주세요
- "저장 유형" 드롭다운 메뉴를 모든 파일 (*.*)로 설정해주세요
- 스타일시트에 유용한 이름을 지어주세요. 그 이름의 끝에 ".css"가 붙어야 해요.

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

<img src="/assets/img/2024-08-26-3WorkingwithStylesheets_3.png" />

# 브라우저가 스타일을 인식하게 하기

우리는 HTML 파일에 새로운 줄을 추가할 것입니다. 아래 코드에서 우리 웹 페이지 파일에서 6번째 줄에 있습니다. (내 파일명은 "workout prototype.html"입니다)

```js
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Workout Prototype</title>
    <link rel="stylesheet" href="css/prototype.css" />
</head>
<body>
    <div>2:43</div>
    <div>
        <button type="button" id="workoutButton">운동 시작</button>
        <button type="button" id="warmupButton">워밍업</button>
    </div>
...
```

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

이것은 연관된 줄입니다:

```js
[스타일 시트](css/prototype.css)를 링크합니다.
```

이 줄이 의미하는 바는 다음과 같습니다:

- 웹페이지에 파일을 포함시킵니다. (`link /`)
- 해당 파일은 스타일 시트입니다 (rel="stylesheet")
- 해당 파일은 내 파일 근처의 폴더에 위치해 있습니다 (href="css/...")
- 해당 파일의 이름은 "prototype.css"입니다 (href="css/prototype.css")

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

정말 강력한 작은 코드 줄이네요. 웹 브라우저는 제가 믿기 어려울 정도로 더 강력하게 만들어 줘요.

작업을 저장하시고 Cascading Stylesheet (CSS) 코드가 어떻게 작동하는지에 대해 조금 이야기해볼게요.

# CSS의 코딩 구조

Cascading Stylesheets는 기본적으로 규칙으로 이루어져 있고, 이러한 규칙에 대한 특별한 표기법이 있어요. 다음과 같아요:

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

```js
<selector> {
  <attribute>: <value>;
}
```

## 세 가지 키: selector, attribute, value…

Selector란 말 그대로 웹페이지의 일부를 선택하는 코드 줄입니다. 예를 들어 selector를 사용하여 요소 유형을 선택할 수 있습니다.

body 태그 selector를 사용해봅시다. CSS 파일을 열고 다음 코드를 넣어보세요.

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

```js
body {
  background-color: blue;
}
```

방금 무엇을 했는지 알아보았습니다. 웹 브라우저에게 문서의 본문을 파란색으로 만들라고 지시했습니다. 결과는 이렇습니다:

![이미지](/assets/img/2024-08-26-3WorkingwithStylesheets_4.png)

## 방금 쓴 CSS 코드에 대해 멋진 점 두 가지를 알아보겠습니다:

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

- 우리는 3개의 특정 버튼 또는 다른 HTML 태그(element) 조합을 선택할 수 있는 멋진 선택기를 만들 수 있어요.
- 해당되는 경우 HTML 태그(element)의 모든 속성을 설정할 수 있고, 필요한 경우 떠올려서 만들어낼 수도 있어요.

위의 #1 예시에서 4번째 버튼만 선택하는 멋진 선택기를 살펴보겠어요. 나중에 더 쉬운 예시를 볼 거예요. 지금은 그 전에, 이전에 저장한 내용 위에 이 내용을 붙여넣기만 하면 돼요.

```js
body {
  background-color: white;
}
div > button:nth-of-type(4) {
  border-color: blue;
  border-width: 1px;
  border-style: solid;
  background-color: transparent;
  border-radius: 50%;
  color: blue;
  padding-block: .5rem;
  padding-inline: .75rem;
}
```

그리고 방금 한 작업의 사진이에요:

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


<img src="/assets/img/2024-08-26-3WorkingwithStylesheets_5.png" />

방금 우리가 한 작업을 정리해 봅시다:

- body 'background-color: white;' — body의 배경이 다시 흰색으로 변경됩니다.
- div ` button:nth-of-type(4) — div 내부에 있는 4번째 버튼에 다음 스타일 규칙이 적용됩니다:

a. border-color: blue; — 테두리 색상 = 파란색


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


b. border-width: 1px; — 픽셀 단위로 테두리 너비를 1로 설정합니다.

c. border-style: solid; — "Solid"(실선) 테두리 스타일을 설정합니다.

d. background-color: transparent; — 투명한 배경 색상을 설정합니다.

e. border-radius: 50%; — 테두리의 각 모퉁이를 50%의 호(arc)로 둥글게 만듭니다(높이와 너비의 50%에 해당).


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

f. color: blue; — 버튼 안의 텍스트는 파란색이어야 합니다.

g. padding-block: .5rem; — 버튼 텍스트 위아래에 약간의 공간을 만듭니다 (숫자 "0"의 반 정도의 너비)

h. padding-inline: .75rem; — 버튼 텍스트 왼쪽과 오른쪽에 약간의 공간을 만듭니다 (숫자 "0"의 3/4 정도의 너비)

# 시작할 시간이 있습니다. 준비되셨나요?...

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

우리 페이지에서 타이머를 포함하는 부분을 더 쉽게 선택할 수 있도록 만들어 보겠습니다:

HTML 파일에서 다음 줄을 변경하고 저장하세요.

```js
<div class="information rest-timer">2:43</div>
```

그런 다음 prototype.css로 이동하여 거기에 있는 모든 텍스트를 교체하세요. (이번이 마지막으로 처음부터 다시 시작할게요, 약속해요.)

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

```js
.rest-timer {
  font-size: 10rem;
  text-align: center;
  color: hsla(232, 77%, 58%, 1);
}
```

방금 무엇을 했나요?

- div 태그에 몇 가지 클래스를 추가했습니다. (information & rest-timer). 나중에 유용하게 사용될 것입니다.
- .css 파일에서 클래스 이름이 "rest-timer"인 어떤 태그(요소)를 잡는 선택기를 사용했습니다. 클래스 이름으로 요소를 가져오려면 마침표(.)를 사용하고 클래스 이름을 씁니다. ".rest-timer"입니다.
- rest 타이머 요소 내의 텍스트는 브라우저의 기본 폰트 크기 (rem)의 10배여야 한다고 말했습니다. 10rem은 "0" 숫자의 10배 크기를 의미합니다.
- .rest-timer 클래스의 텍스트가 화면 가운데 정렬되어야 한다고 말했습니다.
- 함수를 사용하여 텍스트 색상을 설정했습니다. 함수 이름은 hsla이고 "색조, 채도, 밝기 및 알파(불투명도)"를 나타내는 것입니다. 거의 볼 수 있는 모든 색상을 표현하는 멋진 방법입니다.

## HSLA


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

색조(Hue): 모든 기본 색상을 원 모양으로 배치하면 나침반에서 방향을 선택하는 것처럼 움직일 수 있어요. 우리는 북쪽에서 232도를 향해 돌아서라고 했어요. 그것은 파란색이에요.

채도(Saturation): 얼마나 많은 파란색을 사용해야 할까요? 모든 픽셀을 파란색으로 만들어야 할까요 아니면 일부만 파란색으로 바꿀까요? 우리는 픽셀 중 77%를 파란색으로 만들기로 했어요.

밝기(Lightness): 파란색을 얼마나 밝게 만들어야 할까요? 범위는 0%(가장 어둡게)부터 100%(흰색)까지에요. 모든 색상의 밝기를 높이면 결국 흰색이 됩니다. 우리는 진짜 검은색으로부터 파란색을 58% 밝게 해보기로 했어요.

알파(Alpha): 파란색은 얼마나 투명해야 할까요? 내 문자들을 얼마나 볼 수 있어야 할까요. 0이면 문자를 전혀 볼 수 없어요. 1이면 문자를 통과해서 볼 수 있어요.

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

## 지금 우리 화면은 어떻게 보이나요?

![Screen](/assets/img/2024-08-26-3WorkingwithStylesheets_6.png)

# '운동 및 워밍업' 버튼 섹션

## HTML에 다른 클래스를 추가해 봅시다

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

해당 버튼을 담고 있는 div를 수정해 주세요. 이제 다음과 같이 보이게 변경해 주세요:

```js
<div class="work-warm">
    <button type="button" id="workoutButton">Work Out</button>
    <button type="button" id="warmupButton">Warm Up</button>
</div>
```

## Flexbox 스타일과 display 속성.

우리는 이전의 css 프로그래밍 속성인 FlexBox를 사용할 것입니다. (보통 그리드를 사용하지만, 여기서는 약간 앞서서 진행하고 있어요.) 모든 요소에는 컨테이너 유형의 속성이 있습니다. DIV(division) 태그는 컨테이너 태그입니다. 다른 태그들을 담는 역할을 합니다. 그래서 DIV 태그에는 "display" 속성이 있습니다. 이 "display"의 기본 값은 항상 "block"입니다. 그런데 이는 꽤 제한적이에요.

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

```js
.work-warm {
  display: flex;
  justify-content: center;
}

.work-warm > * {
  margin-inline: 2rem;
}
```

이 코드는 "Work Out" 및 "Warm Up" 버튼에 대해 어떤 작용을 하는 건가요? 아래 사진을 참고해주세요:

![Work Out and Warm Up Buttons](/assets/img/2024-08-26-3WorkingwithStylesheets_7.png)

# 가능한 가장 쉽게 버튼 스타일을 설정해 보겠습니다.

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

요 구현에서는 간단한 CSS 선택자가 필요해요. 나중에 각 운동에서 4번째 버튼을 재정의할 거예요. 이번에는 클래스가 필요하지 않아요. 우리는 그냥 prototype.css 파일 맨 아래에 이 CSS 코드를 추가하면 돼요.

```js
button {
    background-color: hsla(232, 77%, 50%, 1);
    border: none;
    padding-block: .5rem;
    padding-inline: .75rem;
    color: hsla(232, 77%, 100%, 1);
    border-radius: 50%;
}

.work-warm > button {
    border-radius: 5px;
}
```

## 지금 우리 화면은 어디에요?

<img src="/assets/img/2024-08-26-3WorkingwithStylesheets_8.png" />

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

# 파워하우스 레이아웃... display: grid

우리는 앞서 플렉스박스가 워크아웃과 워마합 버튼에서 멋진 작업을 했던 걸 봤어요. 음 CSS 그리드 레이아웃은 그만의 섬세함과 정밀함이 있어요. 정확히 더 나은 건 아니지만, 저는 이것을 사용하는 게 훨씬 편한 것 같아요. 이는 레이아웃에 테이블을 사용할 때의 원본 아이디어만큼 정확하지만 훨씬 간단한 방법으로 구현되었어요.

그러니 HTML을 다시 변경해볼까요? 운동 목록에 몇 가지 클래스를 추가하고 그들이 어떻게 작용하는지 볼 거에요.

```js
<div class="sets">
    <div class="exercise">스쿼트</div>
    <div class="summary">피라미드 세트 12-8 @ 45#-55#</div>
    <div class="button-group">
        <button type="button">12</button>
        <button type="button">10</button>
        <button type="button">8</button>
        <button type="button">+</button>
    </div>
    <div class="exercise">스탠딩 바벨 종아리 운동</div>
    <div class="summary">직선 세트 10 @ 45#</div>
    <div class="button-group">
        <button type="button">10</button>
        <button type="button">10</button>
        <button type="button">10</button>
        <button type="button">+</button>
    </div>
    <div class="exercise">윗몸 일으키기</div>
    <div class="summary">직선 세트 10회씩</div>
    <div class="button-group">
        <button type="button">10</button>
        <button type="button">10</button>
        <button type="button">10</button>
        <button type="button">+</button>
    </div>
</div>
```

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

## 새로운 클래스들

우리의 최고 "div" 태그는 "sets"라는 클래스를 받게 됩니다. 이것이 그리드로 변환될 것입니다.

반복되는 세 가지 더 클래스가 있습니다:

- Exercise
- Summary
- button-group

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

테이블 태그를 Markdown 형식으로 변경해 주세요.

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

## 이제 각 줄의 CSS 코드가 무슨 역할을 하는지 알아봅시다.

- display: grid — 이 코드는 브라우저에게 표와 비슷한 레이아웃을 예상하도록 알려줍니다.
- grid-template-columns: 7fr 5fr; — 이 코드는 이 섹션이 두 개의 열로 나뉘며, 왼쪽 열이 오른쪽 열보다 약간 더 크다는 것을 나타냅니다. "fr"은 "fractional unit"의 약어로, 이 코드는 "sets"라는 클래스가 두 개의 열을 가지고 있으며, 12개의 동일한 열을 두 개로 나누도록 지시합니다. 왼쪽 열은 이 중 7개를, 오른쪽 열은 이 중 5개를 차지하게 됩니다.
- grid-column: 1 / span 2; — 이 코드는 "button-group" 클래스를 가진 "div" 태그가 1열에서 시작하고 두 개의 열을 모두 커버하도록 지시합니다. (정말 멋지죠?)
- text-align: center; — 이것은 게으름을 부리기 위해 사용했습니다. justify 속성으로도 할 수 있었지만, text-align을 더 빨리 기억했어요. (그리고 작동했어요... 항상 긍정적인 일이죠.) 곧 justify/align 속성을 소개할게요.

이 코드로 놀아보세요. 내 방법이 정답이고 유일한 방법은 아니에요. 제 방법은 꽤 짧은 방법이지만, 제가 궁리할 수 있는만큼 똑똑한 수준입니다.

# 이제 메뉴도 그리드로 만들어봅시다.

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

```js
<div class="main-menu">
    <img src="images/home.svg" />
    <img src="images/program.svg" />
    <img src="images/history.svg" />
    <img src="images/reports.svg" />
    <img src="images/settings.svg" />
    <p>Home</p>
    <p>Program</p>
    <p>History</p>
    <p>Reports</p>
    <p>Settings</p>
</div>
```

여기 스타일 규칙들이 있습니다.

```js
.main-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-content: center;
}
```

패턴을 보고 계십니까?

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

다음은 수직 스타일링과 글꼴 크기에 대해 다룰 예정이에요.

내 GitHub인 "ElderCodeDragon"에서 코드를 비교해보는 것은 언제든지 환영해요.

웹사이트 CSS 스타일시트 작업 방법




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

## 소개

이 기사는 다음과 같은 기술 스킬을 다룹니다:

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


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

이 랩에서는 CSS를 사용하여 넘치는 요소에 서서히 사라지는 그라디언트를 추가하는 방법을 배우게 됩니다. 이 랩의 목적은 사용자에게 스크롤할 추가 콘텐츠가 있다는 시각적 신호를 만드는 것입니다. ::after 가상 요소와 linear-gradient() 함수를 사용하여 투명에서 흰색으로 사라지는 그라디언트를 만들어 추가 콘텐츠가 더 있다는 것을 나타낼 수 있습니다.

## Overflow Scroll Gradient

index.html 및 style.css가 이미 VM에 제공되었습니다.

넘치는 요소에 서서히 사라지는 그라디언트를 추가하고 스크롤할 추가 콘텐츠가 있다는 것을 나타내려면 다음 단계를 따르세요:

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

- 부모 요소에 position: absolute, width, height를 사용하여 가상 요소의 위치와 크기를 지정하세요.
- pointer-events: none을 사용하여 마우스 이벤트에서 가상 요소를 제외하면 뒤에 있는 텍스트가 여전히 선택 가능하고 상호 작용할 수 있습니다.

다음은 예시 HTML 및 CSS 코드 스니펫입니다:

```js
<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient-scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>
.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 250px;
  height: 25px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.overflow-scroll-gradient-scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}
```

웹 서비스를 포트 8080에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭해주세요. 그런 다음, 웹 페이지를 미리 보려면 'Web 8080 Tab'를 새로 고칠 수 있습니다.

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

## 요약

축하합니다! Overflow Scroll Gradient 랩을 완료했습니다. LabEx에서 더 많은 랩을 연습하여 스킬을 향상시킬 수 있어요.

![Image](/assets/img/2024-08-26-MasteringOverflowScrollGradientwithCSS_2.png)

## 더 많은 학습을 원하시나요?

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

- 🌳 최신 CSS 기술 트리 배우기
- 📖 더 많은 CSS 자습서 읽기
- 💬 저희 디스코드에 가입하거나 @WeAreLabEx로 트윗해주세요

CSS를 이용한 Overflow Scroll Gradient 만드는 방법

<img src="/assets/img/2024-08-26-HTMLCSSTwoInline-BlockSameHeight_0.png" />

제목이 상당히 명확한 것 같습니다만, 명확하게 설명하기 위해 여기서 이 기사에서 할 것은 display:inline-block 유형의 두(또는 그 이상) 요소의 높이를 동일하게 만드는 것입니다.

아마도 우리는 간단히 height:100%를 설정하면 된다고 생각할 수 있지만, 불행하게도 그렇게 하는 것은 동작하지 않을 것입니다. 아래는 이것을 보여주는 간단한 스니펫입니다.

```js
/* css */
.container {
  display: block;
}

.col {
  display: inline-block;
  background: red;
  padding: 4px;
  height: 100%;
  vertical-align: middle;
}



<h3> Height: 100% </h3>
<div class="container">
  <div class="col">
    some contents<br>
    some contents<br>
    some contents<br>
    some contents
  </div>

  <div class="col">
    one line
  </div>
</div>
```

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

그리고 여기가 결과입니다.

![결과 이미지](/assets/img/2024-08-26-HTMLCSSTwoInline-BlockSameHeight_1.png)

온라인 솔루션 중에는 flex나 float를 사용하는 것을 제안하는 것이 많지만, 불행하게도 저는 내 것을 inline-block으로 유지해야 합니다.

자바스크립트를 사용하지 않고 여러 inline-blocks의 높이를 동일하게 맞출 수 있는 방법을 살펴보겠습니다!

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

이 기사에서 사용하는 모든 코드 스니펫을 내 Codepen에서 찾을 수 있어요.

# 기본 접근 방법

세 가지 단계. 간단한 해결책.

- 거의 무한한 패딩을 추가하세요.
- 마이너스 마진을 추가하세요 (패딩을 균형을 맞추기 위해).
- 오버플로우를 숨기세요.

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

세 가지 다른 사용 사례를 살펴볼 것입니다: 맨 위, 중간, 그리고 맨 아래 정렬.

# 맨 위 정렬

```js
/* css */
.container {
  display: block;
  overflow: hidden;
}

.colAlignTop {
  display: inline-block;
  background: red;
  padding: 4px;
  padding-bottom: 1000%;
  margin-bottom: -1000%;
  vertical-align: top;
}


<h3> 높이 일치: 맨 위 정렬 </h3>
<div class="container">
  <div class="colAlignTop">
    내용<br>
    내용<br>
    내용<br>
    내용
  </div>

  <div class="colAlignTop">
    한 줄
  </div>
</div>
```

여기서 패딩과 마진에 1000% 및 -1000%를 사용했지만, 사용 사례에 따라 더 작은 값으로 충분할 수도 있고, 더 큰 값이 필요할 수도 있습니다.

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

아래는 결과입니다.

![이미지](/assets/img/2024-08-26-HTMLCSSTwoInline-BlockSameHeight_2.png)

# 가운데 정렬

똑같은 아이디어에요.

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

```js
/* css */
.container {
  display: block;
  overflow: hidden;
}

.colAlignMiddle {
  display: inline-block;
  background: red;
  padding: 4px;
  padding-bottom: 1000%;
  margin-bottom: -1000%;
  padding-top: 1000%;
  margin-top: -1000%;
  vertical-align: middle;
}


# HTML #
```

![HTML and CSS](/assets/img/2024-08-26-HTMLCSSTwoInline-BlockSameHeight_3.png)

# Align Bottom

```js
/* css */
.container {
  display: block;
  overflow: hidden;
}

.colAlignBottom {
  display: inline-block;
  background: red;
  padding: 4px;
  padding-top: 1000%;
  margin-top: -1000%;
  vertical-align: bottom;
}


# HTML #
```

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


![image](/assets/img/2024-08-26-HTMLCSSTwoInline-BlockSameHeight_4.png)

# A Little Bonus

만약 여러 개의 inline-block이 한 줄에 유지되도록 강제하고 싶다면, 다음과 같이 컨테이너에 text-wrap: nowrap를 추가하면 됩니다.

```js
.container {
  display: block;
  overflow: hidden;
  text-wrap: nowrap;
}
```

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

읽어 주셔서 감사합니다!

오늘은 여기까지!

즐거운 정렬하세요!

HTML CSS 두 개의 인라인 블록을 동일한 높이로 맞추는 방법



프런트엔드 개발 세계에 오신 것을 환영합니다! 시각적으로 매력적인 웹사이트와 애플리케이션을 만드는 데 관심이 있다면, 여기가 바로 옳은 장소입니다. 프런트엔드 개발은 사용자가 직접 상호 작용하는 웹사이트나 앱의 부분을 구축하는 것과 관련이 있습니다. 이 안내서에서는 프런트엔드 개발의 기본 사항을 안내하고 여러분이 여정을 시작할 수 있도록 필요한 지식을 제공할 것입니다.

![Front-End Development](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_0.png)

## 프런트엔드 개발이란?

프런트엔드 개발은 웹사이트나 애플리케이션의 사용자 인터페이스(UI)를 만드는 작업을 포함합니다. 이에는 사용자들이 보고 상호 작용하는 모든 것이 포함됩니다. 레이아웃, 버튼, 텍스트 등이 그 예시입니다. 프런트엔드 개발자는 HTML, CSS, JavaScript의 조합을 사용하여 디자인을 현실로 만들고 웹사이트가 다양한 기기에서 기능적이며 반응성을 갖추도록 합니다.

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


![image](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_1.png)

# Essential Tools and Technologies

# 1. HTML (HyperText Markup Language)

HTML is the backbone of any website. It provides the basic structure and content, such as headings, paragraphs, and links. Here are a few key concepts:


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

<img src="/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_2.png" />

- Elements and Tags: HTML은 ``h1``, ``p``, ``a``와 같은 태그를 사용하여 다양한 유형의 콘텐츠를 정의합니다.
- Attributes: 태그는 링크의 `href` 속성과 같이 추가 정보를 제공할 수 있는 속성을 가질 수 있습니다.

예시:

```html```

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

```
# Welcome to My Website

This is a simple paragraph.

[Visit Example](https://www.example.com)


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

# 2. CSS (Cascading Style Sheets)

CSS를 사용하면 HTML 요소를 스타일링하고 레이아웃을 정의할 수 있어요. 컬러, 폰트, 간격, 위치를 제어합니다. 간단히 설명하면,

![이미지](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_3.png)

- 선택자: CSS는 선택자를 사용하여 HTML 요소에 스타일을 적용합니다 (예: `.class`, `#id`, `element`).
- 속성: 스타일 속성은 요소가 어떻게 보이는지 정의합니다 (예: `color`, `margin`, `font-size`).

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

예시:

```js

h1 {
    color: blue;
```

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


font-size: 24px;

> p {
    margin: 10px 0;
}


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



# 3. JavaScript

자바스크립트는 웹사이트에 상호작용을 추가합니다. 폼 유효성 검증 및 애니메이션과 같은 동적 콘텐츠를 생성할 수 있습니다. 다음은 몇 가지 기본 사항입니다:

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


![이미지](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_4.png)

- 변수: 변수를 사용하여 데이터를 저장합니다 (예: `let x = 10;`).
- 함수: 함수를 사용하여 코드를 캡슐화하여 작업을 수행합니다 (예: `function greet() ' alert('Hello!'); '`).
- 이벤트: 클릭과 같은 사용자 조작에 반응합니다 (예: `button.addEventListener('click', function() ' alert('Clicked!'); ');`).

# 프레임워크와 라이브러리

진행하면서 개발을 단순화할 수 있는 다양한 프레임워크와 라이브러리를 만날 수 있습니다.


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

---

React: 재사용 가능한 구성 요소로 사용자 인터페이스를 구축하는 라이브러리입니다.

Angular: 강력한 구조로 동적 웹 애플리케이션을 구축하는 프레임워크입니다.

Vue.js: 통합 및 사용이 쉬운 점진적 프레임워크입니다.

이러한 도구들은 개발 프로세스를 간소화하고 코드 구성을 개선하는 데 도움이 될 수 있습니다.

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

# 개발 도구

시작하려면 몇 가지 필수 도구가 필요합니다:

- 코드 편집기: [Visual Studio Code](https://code.visualstudio.com/)나 [Sublime Text](https://www.sublimetext.com/)와 같은 도구는 구문 강조와 코드 제안 기능과 같은 기능으로 코딩을 쉽게 만들어 줍니다.
- 버전 관리: [Git](https://git-scm.com/)과 [GitHub](https://github.com/)은 코드 변경을 관리하고 다른 사람들과 협업하는 데 도움이 됩니다.
- 브라우저 및 개발자 도구: 현대적인 브라우저에는 내장된 개발자 도구가 있어 코드를 검사하고 디버그할 수 있습니다. 문제를 해결하고 사이트를 테스트하기 위해 이러한 도구를 익히세요.

![도구](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_5.png)

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

# 시작하기

여기 개발 환경을 설정하는 방법이 있습니다:

- 코드 편집기 설치: 본인에게 맞는 코드 편집기를 선택하세요.
- 기초 학습: HTML, CSS 및 JavaScript 튜토리얼부터 시작하세요.
- 간단한 프로젝트 만들기: 개인 웹사이트나 할 일 목록 앱과 같은 작은 프로젝트를 만들며 연습하세요.
- 자원 탐색: 온라인 코스, 튜토리얼 및 포럼을 활용하여 지식을 넓혀보세요.

# 최선의 실천법

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

성공적인 프런트엔드 개발자가 되려면 다음 최상의 실천 방법을 염두에 두세요:

- 깨끗하고 유지보수가 쉬운 코드 작성: 의미 있는 이름과 주석을 사용하여 코드를 이해하기 쉽게 만드세요.
- 반응형 디자인 이해: 미디어 쿼리와 같은 반응형 디자인 기술을 사용하여 웹사이트가 다양한 기기에서 잘 작동하도록 보장하세요.
- 접근성 우선: 접근성 지침을 따르면 모든 사용자, 특히 장애를 가진 사용자가 웹사이트에 접근할 수 있습니다.

# 결론

프런트엔드 개발은 매력적이고 상호작용이 가능한 웹사이트를 만들 수 있는 보람 있는 분야입니다. HTML, CSS 및 JavaScript를 숙달하고 현대적인 도구와 방법을 사용하면 뛰어난 프런트엔드 개발자가 되는 길에 한 발 내딛게 될 것입니다.

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

![img](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_6.png)

프론트엔드 개발 여정을 시작할 준비가 되셨나요? 위에서 언급된 자료를 참고하여 여러분만의 프로젝트를 실험해보세요. 궁금한 점이나 도움이 필요하신 경우 언제든지 연락주세요. 아래 댓글을 남기거나 X(Twitter)에서 저와 연결하세요: Akash Singh!

![img](/assets/img/2024-08-26-ABeginnersGuidetoFront-EndDevelopmentWhatYouNeedtoKnowtoGetStarted_7.png)

독서해주셔서 감사합니다! 블로그를 계속 읽어주시고 행복한 하루 되세요!

프론트엔드 초보 개발자들이 취업하기 전에 알아야할 사실들

![표](/assets/img/2024-08-26-SpartaCodingClubWeek-1TILAssignment_0.png)

스파르타 코딩 클럽에서의 여정이 시작되었는데 정말 흥미롭고 도전적이에요. 웹 개발에 항상 관심이 많았던 저로서는 첫 주는 새로운 개념을 배우고 웹을 구동하는 도구들을 실제로 다뤄보는 과정이었어요. 이번 주에는 HTML, CSS 및 부트스트랩의 기초에 초점을 맞춰 흥미진진한 코딩 모험을 위한 기반을 다졌어요.

# 건축의 기본 요소 이해하기: HTML, CSS 및 부트스트랩:

배운 내용을 살펴보기 전에, 이 세 가지 주요 구성 요소를 살펴보죠:

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

Markdown 문법:

# HTML (HyperText Markup Language):

CSS (Cascading Style Sheets):

# 나의 첫 번째 프로젝트: 로그인 페이지 만들기

HTML과 CSS에 대한 기본적인 이해를 바탕으로 나는 내 첫 프로젝트로 간단한 로그인 페이지를 만들어보았어요. 배운 내용을 적용하는 완벽한 방법이었죠. 페이지 구조는 HTML을 사용하여 만들고, CSS를 사용하여 스타일을 입혔답니다.

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

마크다운 형식의 표:

| 내용                  | 설명                                                                                                               |
|-----------------------|--------------------------------------------------------------------------------------------------------------------|
| HTML 구조            | 기본 HTML 구조를 만들었습니다. 이에는 사용자 이름과 암호를 입력할 수 있는 간단한 양식과 제출 버튼이 포함되어 있습니다.  |
| CSS 스타일링         | 로그인 페이지를 시각적으로 매력적으로 만들기 위해 CSS 스타일을 적용했습니다. 색상, 글꼴, 간격을 조정하여 양식이 깔끔하고 사용자 친화적으로 보이도록 했습니다. |

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

# 프로젝트 쇼케이스:

여기는 로그인 페이지 프로젝트의 최종 결과물을 보여주기 위한 스크린샷을 포함할 공간입니다.

# 코드 스니펫:

아래는 저의 로그인 페이지를 만들기 위해 사용한 HTML과 CSS 코드 일부입니다:

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

```js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page!</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=New+Amsterdam&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="loginstyle.css">
</head>

<body>

    <div class="wrap">
        <div class="mycontainer">

            <h1>Login Page</h1>
            <h4>Type your ID and PW</h4>

        </div>

        <div class="mycontainer1">

            <p>ID: <input type="text" /></p>
            <p>PW: <input type="text" /></p>

        </div>

        <div class="mybtn">

            <h4>Login</h4>

        </div>

    </div>

</body>
</html>
```

```js
* {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;

}

.mycontainer {

    color: white;
    width: 300px;
    height: 200px;

    background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');

    background-position: center;
    background-size: cover;

    border-radius: 10px;

    text-align: center;

    padding-top: 40px;


}

.wrap {

    margin: auto;
    width: 300px;
}

.mycontainer1 {
    text-align: center;
}

.mybtn {
    color: white;
    width: 300px;
    height: 50px;
    background-color: brown;
    border-radius: 10px;
    text-align: center;
    padding-top: 1px;
}
```

#부트스트랩 탐색: 웹 페이지 반응형 만들기


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

부트스트랩에 대해 배운 내용

부트스트랩은 반응형 및 모바일 최적화 웹사이트를 빠르고 효율적으로 만들 수 있는 툴킷입니다. 그리드, 내비게이션 바, 버튼 등 CSS 및 JavaScript 구성 요소의 컬렉션을 제공하며, 이 모든 것은 쉽게 사용하고 맞춤화할 수 있도록 설계되어 있습니다. 부트스트랩의 진정한 매력은 그리드 시스템과 반응형 유틸리티에 있으며, 이를 통해 웹 페이지가 스마트폰, 태블릿 또는 데스크톱과 같은 모든 기기에서 멋지게 표시되도록 도와줍니다.

# 내 프로젝트: 인기 영화 목록과 추가 기능

부트스트랩 스킬을 테스트해보기 위해 가장 많이 시청한 영화를 나열할 수 있는 프로젝트를 만들었습니다. 이 프로젝트에는 영화 제목뿐만 아니라 URL, 평점 및 의견과 같은 내용까지 추가할 수 있는 게시물 상자 기능이 포함되어 있습니다. 이 기능은 완전히 반응형으로 설계되어 어떤 기기에서도 원활한 사용자 경험을 제공합니다.

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

프로젝트 쇼케이스

프로젝트의 스크린샷을 여기에 포함하였습니다. 화면 크기에 따라 어떻게 폼과 영화 항목이 보이는지 강조하고 사용자가 쉽게 즐겨찾는 영화를 추가할 수 있는 방법을 보여줍니다.

![이미지1](/assets/img/2024-08-26-SpartaCodingClubWeek-1TILAssignment_1.png)

![이미지2](/assets/img/2024-08-26-SpartaCodingClubWeek-1TILAssignment_2.png)

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

코드 스니펫

아래는 프로젝트를 만드는 데 사용한 HTML과 Bootstrap 코드의 스니펫입니다:

```js
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>최다 시청 영화</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Moderustic:wght@300..800&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: "Moderustic", sans-serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
        }

        .mytitle {
            width: 100%;
            height: 250px;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle>button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            color: white;
            border-radius: 50px;
            border: 1px solid white;
            margin-top: 10px;
        }

        .mytitle>button:hover {
            border: 2px solid white;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mycomment {
            color: gray;
        }

        .mycontainer {
            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
            margin: auto;
            width: 95%;
            max-width: 500px;
        }

        .mybutton {
            text-align: center;
        }

        .mybox {
            padding-top: 20px;
        }
    </style>
</head>

<body>

    <div class="mytitle">
        <h1>영화 컬렉션</h1>
        <button>새 영화 저장</button>
    </div>

    <div class="mybox">
        <div class="mycontainer">
            <div class="mb-3">
                
                <input type="url" class="form-control" id="exampleFormControlInput1" placeholder="영화 URL">
            </div>
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">별점</span>
                <select class="form-select" aria-label="Default select example">
                    <option selected>-- 평점 선택 --</option>
                    <option value="1">🤩</option>
                    <option value="2">🤩🤩</option>
                    <option value="3">🤩🤩🤩</option>
                    <option value="4">🤩🤩🤩🤩</option>
                    <option value="5">🤩🤩🤩🤩🤩</option>
                </select>
            </div>
            <div class="mb-3">
                
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                    placeholder="코멘트"></textarea>
            </div>
            <div class="mybutton">
                <button type="button" class="btn btn-outline-dark">저장</button>
                <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>
    </div>

    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">어벤져스</h5>
                        <p class="card-text">지구 최강의 영웅들이 함께 모여 팀으로 싸워야만 사악한 로키와 그의 외계군단이 인류를 노예로 만들지 못할 것이다.</p>
                        <p>🤩🤩🤩</p>
                        <p class="mycomment">결국 캠프하고 공식적인 행동에도 불구하고, 어벤져스는 극도로 즐거운 시간을 선사합니다.</p>
                    </div>
                </div>
            </div>
            (중략)
        </div>
    </div>

</body>

</html>
```

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

스파르타 코딩 클럽에서의 첫 주는 웹 개발에 대한 훌륭한 소개였어요. HTML로 웹페이지를 구조화하고 CSS로 스타일을 입히고 Bootstrap으로 기능을 향상시키는 것을 배워서 튼튼한 기반을 쌓을 수 있었어요. 이러한 기술이 어떻게 발전하는지 계속해서 코딩 여정을 이어갈 때 어떤 모습으로 변모하는지 기대돼요!

웹 개발 세계를 더 깊이 파헤칠 때 더 많은 업데이트를 기대해 주세요.

스파르타 코딩 클럽 1주차 회고 과제 소개



<img src="/assets/img/2024-08-26-HTMLTagsYouNeverKnewYouNeeded_0.png" />

안녕하세요! HTML은 기본적인 것 같지만, 웹 페이지를 변화시킬 수 있는 숨겨진 태그의 보물 창고가 있다고 말해드릴게요. 이 태그들은 첫 날에 배우는 것이 아니라, HTML 기술을 다음 수준으로 끌어올릴 수 있는 비밀 무기에요. 궁금하신가요? 함께 HTML에서 숨겨진 보석을 찾아보죠.

# 기본 사항: 요소와 태그

- 헤더와 단락: `h1`은 헤더에, `h2`는 부제목에, `p`는 단락에 사용해보세요. 이들을 `div`로 감싸서 정리해두면 좋아요.
- 스타일링: `strong`과 `em` 같은 태그는 텍스트의 모양 뿐만 아니라 중요성을 브라우저에 전달하여 접근성과 SEO에 영향을 줄 수 있어요.

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

# Hidden Gems: Niche HTML Tags

일부 HTML 태그는 잘 알려지지 않았지만 굉장히 유용합니다. 웹 페이지를 더 상호 작용적이고 접근 가능하게 만드는 몇 가지 태그를 자세히 살펴보죠.

## 1. `abbr` — 약어 태그

누군가가 위에 마우스를 올리면 약어의 의미를 표시하는 방법이 궁금했던 적이 있나요? `abbr` 태그가 바로 그 역할을 합니다. 약어를 `abbr` 태그로 감싸고 전체 형태를 나타내는 제목 속성을 추가하면 됩니다. 이것은 접근성을 향상시키는 데 완벽한 방법이지만, 모바일 사용자는 호버 효과를 보지 못할 수도 있다는 점을 명심하세요.

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

## 2. `code` – 코드 블록 표시하기

`p` 태그를 사용하여 코드를 모방하는 대신, `code` 태그를 사용하세요. 이 태그는 텍스트를 모노스페이스(font)로 자동 형식화하여 코드로 즉시 인식되도록 합니다. CSS와 함께 사용하여 외관을 더욱 향상시킬 수 있습니다.

## 3. `kbd` – 키보드 태그

단축키 또는 키를 표시할 때 `kbd` 태그를 사용하세요. `code` 태그와 같이 텍스트를 모노스페이스(font)로 감싸 코드로 만들며, 이를 CSS로 더욱 스타일링할 수 있습니다.

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

## 4. `datalist` 및 `option` — 동적 입력 제안

사용자에게 입력하는 동안 제안이나 드롭다운 메뉴를 제공하고 싶나요? `datalist` 태그를 `option` 태그와 결합하여 이를 간단하게 할 수 있습니다. 입력 필드를 생성하고 datalist에 연결하면 사용자의 입력에 따라 제안이 나타납니다.

## 5. `dialog` — 빠른 팝업

빠른 팝업이나 모달이 필요한가요? `dialog` 태그를 사용하면 간단해집니다. 내용을 `dialog` 태그로 둘러싸고 약간의 JavaScript로 열 수 있습니다. 모형 작성이나 UI 요소 테스트에 이상적입니다.

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

## 6. `details` 와 `summary` — 내장 드롭다운

이러한 태그들은 JavaScript나 CSS가 필요하지 않은 드롭다운 메뉴를 만듭니다. FAQ 섹션이나 콘텐츠의 가시성을 토글하는 데 사용할 수 있습니다. `details` 태그는 컨테이너로 작용하고, `summary` 태그는 클릭할 수 있는 제목 역할을 합니다. 정보를 구성하는 사용자 친화적인 방법입니다.

## 7. `time` — 시간 요소

`time` 태그는 소박하지만 강력합니다. 날짜와 시간을 실제 데이터 포인트로 이해하도록 검색 엔진을 돕습니다. 날짜나 시간을 이 태그로 감싸면, SEO가 약간 향상됩니다.

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

## 8. `ruby`, `rt`, 그리고 `rp` — 인라인 주석

이 태그들은 단어 위에 작은 텍스트와 같은 주석을 표시하는 데 탁월합니다. 처음에는 아시아 언어에 사용되었지만, 다른 목적으로도 창의적으로 사용할 수 있습니다. `ruby` 태그는 래퍼(wrapper)이고, `rt`는 주석(annotation)을 제공하며, `rp`는 지원되지 않는 브라우저에 대한 대체 텍스트를 제공합니다.

## 9. `progress` — 진행률 표시줄

간단하고 CSS가 필요 없는 진행률 표시줄을 원하나요? `progress` 태그를 사용하세요. 최대(max)와 값(value) 속성을 설정하여 표시줄의 완료 수준을 정의하면 됩니다. 그럼 끝입니다.

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

## 10. `미터` — 시각적 스케일

`progress`와 유사하게, `meter` 태그는 값의 범위를 시각화하는 데 사용됩니다. 낮은, 높은 및 최적 범위를 정의할 수 있으며 미터는 값에 따라 색상을 자동으로 조정합니다. 성능이나 결과를 보여주는 데 완벽합니다.

## 11. `fieldset`와 `legend` — 양식 요소 그룹화

관련된 양식 요소를 그룹화하려면 `fieldset`를 사용하십시오. 내부에 `legend`를 추가하여 그룹의 제목을 지정하면 자동으로 필드 세트의 테두리 내에 나타납니다. 양식을 깔끔하게 정리하는 좋은 방법입니다.

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

# 마무리

HTML을 배우는 것은 기본을 이해하는 것 이상의 의미가 있습니다. 이러한 잘 알려지지 않은 태그들은 웹 페이지에 기능성, 접근성 및 스타일을 손쉽게 더할 수 있습니다. 도움이 되었다면 좋아요 버튼을 꾹 눌러주시고 웹 개발 및 코딩 여정에 관한 더 많은 콘텐츠를 구독해보세요. 읽어 주셔서 감사합니다. 다음 글에서 다시 만나요!

함께 배우고 성장해요!

개발자들이 잘 모르는 10가지 HTML 태그



## NestJS 용어와 내부 작동 방식을 평이한 영어로 설명합니다.

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

과도한 이야기는 스킵하고, 만일 당신이 구석구석을 파헤치는 것을 좋아하는 사람이라면 공식 문서를 참조하세요.

NestJS는 Progressive NodeJS 프레임워크입니다. 그러나 다른 프로그래밍 언어나 다른 NodeJS 프레임워크를 사용해 온 경우, 그 문서를 살펴보면 겁이 나곤 합니다. 타입스크립트를 강조하며 해당 기능을 많이 활용합니다. 모듈성을 강조하는 NestJS는 단어를 나누어 사용할 수 있습니다.
인터셉터, 가드, 미들웨어, 파이프입니다.

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

ℹ️ 이 튜토리얼을 실습하기 위해서는 Nest CLI를 설치하는 것이 좋습니다.

```js
$ npm install -g @nestjs/cli
```

앱
Nest CLI를 사용하여 앱을 만드는 방법입니다. [더 많은 기능이 필요한 경우 옵션 목록을 여기서 확인하세요]

```js
$ nest new <name> [options]  /*<name> : 앱 이름 */
        OR
$ nest n <name> [options]
```

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

요기까지, 새로운 Nest 앱이 생겼어요. 좋아하는 코드 편집기로 코드를 열어보세요. Nest는 관련 코드를 더 잘 관리하고 분리하기 위해 모든 것을 모듈로 간주합니다. 기본적으로 앱이라는 모듈이 있고, 이 모듈은 우리 애플리케이션의 다른 모든 모듈을 부트스트랩합니다.

NestJS는 REST API(제한 없음)가 요청되었을 때 다음과 같이 실행됩니다. (앱 모듈 기준으로, 요구 사항에 따라 더 나눌 수 있습니다)

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

컨트롤러를 생성하세요

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

```js
$ nest g controller <컨트롤러_이름>
```

App 모듈을 위한 기본 컨트롤러이며, @Get 데코레이터가 우리의 라우트를 자동으로 등록합니다. '/' 경로와 HTTP Get 메서드를 사용합니다. 이를 확인하려면 다음을 실행하여 응용 프로그램을 시작하세요.

```js
$ npm run start:dev
```

<img src="/assets/img/2024-08-26-ASchengenItineraryforaNoviceNestJSBeginner_2.png" />

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

GET / HTTP 요청에 대해 `hello world`를 반환할 것입니다.

모듈 시스템
모듈 전체에서 의존성을 해결하기 위해 각 모듈의 #.module.ts 파일에 모두 지정하려고 합니다.
# = 저희 모듈, 현재는 앱이에요

```js
// 'Owners'라는 모듈에 대한 예제 모듈 선언
// 혼란을 피하기 위해 가능한 간단하게 유지했어요

import { Module } from '@nestjs/common';
import { OwnersService } from './owners.service';

@Module({       // 다음 항목은 모듈로 취급되어야 함을 알려줌
  providers: [ OwnersService],   // 모듈 내에서 서비스를 사용할 거에요
})
export class OwnersModule {}
```

그런 다음 이 모듈을 AppModule에 가져와서 코드를 우리 애플리케이션으로 통합시킬 거에요.

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


<img src="/assets/img/2024-08-26-ASchengenItineraryforaNoviceNestJSBeginner_3.png" />

데코레이터
Nest는 TypeScript를 많이 사용하기 때문에 데코레이터를 모든 곳에서 볼 수 있습니다. 데코레이터는 클래스/함수 선언 전에 배치됩니다. 이렇게 하면 코드 기능이 변경됩니다. 다음과 같이 `@Injectable` 데코레이터를 사용하면 OwnerService 클래스가 주입 가능한 서비스임을 나타냅니다.

<img src="/assets/img/2024-08-26-ASchengenItineraryforaNoviceNestJSBeginner_4.png" />

핸들러 / 컨트롤러
API 경로가 호출될 때 실행되는 코드로, 일반적으로 관련 리소스를 그룹화하기 위해 컨트롤러에이 부분을 작성합니다. 전자 상거래 애플리케이션에서 제품을 생성하고 업데이트하는 것은 관리 용이성을 위해 동일한 위치에 있어야 합니다. 컨트롤러 내부에 비즈니스 로직을 작성하지 마세요. 요청을 받고 처리하고(유효성 검사 등) 서비스에 전달하세요. 나머지 기능은 서비스에서 수행될 것입니다.


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

## 서비스
NestJS 서비스는 비즈니스 로직을 처리하는 NestJS 애플리케이션의 필수 구성 요소입니다. 일반적으로 @Injectable() 데코레이터로 처리되며 응용 프로그램/모듈 전체에서 의존성 주입에 사용됩니다.

## 엔터티
엔터티는 데이터베이스 테이블을 나타내는 클래스로, 클래스의 각 인스턴스는 테이블의 한 행에 해당하며 해당 테이블의 열과 매핑됩니다. 일반적으로 TypeORM 또는 다른 ORM 라이브러리와 함께 사용됩니다. @Entity 데코레이터는 User 클래스를 엔터티로 표시합니다. 이는 데이터베이스에서 사용자 테이블을 조작합니다. 여기서는 권장하는 TypeOrm ORM을 사용할 것입니다. 주요 관계형 데이터베이스와 호환됩니다 (Postgres, MySQL 등).

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

## 레포지토리 (레포지토리 패턴 사용 시)
레포지토리는 서비스를 통해 응용 프로그램에 데이터를 제공합니다. 이러한 방식으로 서비스를 더 읽기 쉽고 가볍게 만듭니다.

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

<img src="/assets/img/2024-08-26-ASchengenItineraryforaNoviceNestJSBeginner_6.png" />

미들웨어
미들웨어는 라우트 핸들러가 호출되기 전에 실행되는 함수입니다. ExpressJS와 같은 프레임워크에서 오신 경우 더 쉽게 사용할 수 있습니다. 기본적으로 라우트 핸들러가 호출되기 전에 개입하며 (API 라우트를 호출할 때 일어나는 코드), 요청과 응답 객체에 모두 액세스할 수 있습니다. 예상치 못한 일이 발생할 때 작업을 중지할 수 있습니다. 모든 조건이 충족되기 전에 핸들러에 도달하기 전에 여러 미들웨어를 연결할 수 있습니다. 다음 명령어를 사용하여 미들웨어를 생성하세요.

```js
$ nest g mi users/isAuthenticated
```

미들웨어 코드는 다음과 같이 보입니다.

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

```js
// `/user` 경로에 생성된 미들웨어를 적용합니다.
export class AppModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(IsAuthenticatedMiddleware)
      .forRoutes({ path: '/user', method: RequestMethod.GET });
  }
}
```

경로에 미들웨어 적용하기

가드
가드는 미들웨어의 뒤에 오는 것입니다. 여기서 우리는 사후 조치를 취할 수 있습니다. 미들웨어에서는 사용자가 인증되었는지 여부를 확인할 것입니다. 여기서 가드에서는 요청을 ACL에 대해 확인합니다. 인증된 사용자가 작업을 수행할 권한이 충분한지 여부를 확인할 것입니다.


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

```javascript
import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const request = context.switchToHttp().getRequest();
    return validateRequest(request);
  }
}
```

파이프
1. 변환: 입력 데이터를 원하는 형식으로 변환합니다(예: 문자열에서 정수로 변환)
2. 유효성 검사: 입력 데이터를 평가하고 유효한 경우에는 그대로 전달하며, 그렇지 않은 경우 예외를 발생시킵니다.
ValidationPipe, ParseIntPipe, ParseFloatPipe, ParseBoolPipe, ParseArrayPipe, ParseUUIDPipe, ParseEnumPipe, DefaultValuePipe, ParseFilePipe와 같은 내장 파이프들이 있지만 우리만의 파이프를 정의할 수도 있습니다.

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

Nest는 데이터 객체에 대한 유효성 검사를 수행하기 위해 파이프를 사용합니다. 이는 다가오는 유효성 검사 섹션에서 다룰 예정입니다.


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

검증
현대 애플리케이션에서 검증은 핵심 역할을 합니다. 제출된 데이터가 순수하고 오류가 존재하지 않다는 보장이 없습니다. 예를 들어 특정 필드에 이메일 주소가 예상되는데 일반 문자열이 입력되는 경우가 있습니다. 이는 처리 API나 제3자 API 내에서 혼돈을 일으킬 수 있습니다. 따라서 검증이 필요하며 불행한 일을 방지하기 위해 필수적입니다.
Nest는 DTO(자세히 다룰 예정)를 사용하여 검증을 수행합니다. 클래스 변환기와 클래스 유효성 검사 라이브러리를 사용합니다. 따라서 Nest 앱 상단에 이를 먼저 설치해야 합니다.

```js
$ npm i --save class-validator class-transformer
```

App 모듈에서 검증을 전역으로 활성화하려면 기본 코드를 다음과 같이 편집하여 main.ts 파일을 수정하세요. 전역으로 설정하기 때문에 해당 파일을 수정해야 합니다.

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

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

지금 Nest는 들어오는 모든 요청을 내부적으로 조사할 수 있어요. 그런데 각 API 경로에 대한 규칙을 어떻게 알 수 있을까요? 여기에서 DTO가 필요합니다. 우리는 각 API에 대한 규칙을 DTO 파일에 작성해요. 대부분의 유효성 검사 규칙은 class-validator로 처리돼요. 참고용으로 해당 규칙 목록을 확인해주세요.

users/dto 폴더 안에 createuser.dto.ts 파일을 생성해주세요.

```ts
import { IsEmail, IsString } from 'class-validator';

class BaseContent {
  @IsEmail()
  email: string;

  @IsString()
  password: string;
}
```

이후에 이 dto를 컨트롤러 본문으로 전달하면, 남은 작업은 Nest에게 맡겨도 돼요. Nest가 요청 본문을 탐색하고 필요한 작업을 처리할 거예요.

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

```js
// 컨트롤러 핸들러 함수에서 사용자 DTO를 생성합니다. DTO를 가져와 사용하세요.

@Post()
createUser(@Body() createUserDto: CreateUserDto): string {

  // 핸들러 코드
}
```

데이터베이스 액세스
Nest는 SQL 및 NoSQL 데이터베이스를 다양한 방법으로 지원합니다. 우리는 단지 typeorm(전문가를 위한 타입스크립트 중심 ORM👌)을 사용하여 postgres 데이터베이스에 연결하는 방법을 보여주고 있습니다. 앱 모듈에 이 섹션을 추가하면 postgres 데이터베이스에 연결됩니다. 멋져요!

```js
// 데이터베이스에 연결하기 전에 해당 postgres 라이브러리를 설치하려면 다음을 실행하세요.
$ npm i pg
```

```js
@Module({
  imports:[TypeOrmModule.forRoot({
    type: 'postgres',
    host: 'localhost', // 데이터베이스 호스트
    port: 5432, // 데이터베이스 포트
    username: 'postgres', // 데이터베이스 사용자명
    password: '비밀번호', // 데이터베이스 암호
    database: 'app_db', // 데이터베이스 이름
    entities: ['dist/**/*.entity{.ts,.js}'], // 모델/엔티티가 저장된 위치
    logging: true, // 콘솔에 DB 쿼리 로깅

    synchronize: true,  // 모델 변경 사항이 자동으로 데이터베이스 테이블에 기록됨
      // 실제 운영 환경에서는 이 옵션을 사용하지 마십시오.
  }]),
```

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

Cors
Cors는 응답을 받을 출처를 결정합니다. 우리는 앱에게 https://abc.com에서 오는 요청에만 응답하도록 요청할 수 있습니다. https://xyz.com에서 오는 요청에는 응답하지 않습니다. 단순히 main.ts에 다음을 추가하면 어디서든 CORS가 활성화됩니다.

![image](/assets/img/2024-08-26-ASchengenItineraryforaNoviceNestJSBeginner_10.png)

특정 도메인에 대해 제한하거나 더 많은 제어를 원한다면 다음을 추가하세요.

```js
app.enableCors({
  origin: ['http://localhost:4200'],  // 이 주소 요청에만 응답
  methods: ['GET', 'POST'], 
  credentials: true,
 });
```

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

API의 무담 장치로서 증폭 공격을 방어하기 위해 요청 속도 제한 메커니즘을 적용할 수 있습니다. 동일 출처에서 앱으로의 플러딩 요청이 넘치는 경우 특정 시간 동안 요청을 제한합니다. 먼저 쓸어나가 라이브러리를 설치하고 main.ts 파일을 조정하세요.

```js
$ npm i --save @nestjs/throttler
```

main.ts 파일에 속도 제한기 추가

```js
@Module({
  imports: [
    ThrottlerModule.forRoot([{
      ttl: 60000,   // 윈도우 내에서 유지할 시간
      limit: 10,   // 이 수의 제한
    }]),
  ],
})
```

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

## 마무리하겠습니다!

Nest는 단일 응용 프로그램(monolith applications)에만 사용되는 것이 아니라, 마이크로서비스에 대한 내장 지원을 갖추고 있습니다. 그러므로 어떤 방식을 선택할지는 개발자의 선택과 응용 프로그램 요구 사항에 달려 있습니다.

## 기타 긴급 링크

- Nest에서 헬멧을 쓰세요
- 구성 저장
- Nest의 CSRF 보호
- 마이크로서비스 시대의 Nest

NestJS로 구현하는 여행 일정 웹사이트 만들기




![Dependency Injection](/assets/img/2024-08-26-JavaScriptDependencyInjectionisBrokenHeresHowwrouddiisFixingIt_0.png)

의존성 주입(Dependency Injection, DI)은 현대 JavaScript 및 TypeScript 개발에서 중요한 패턴으로, 개발자가 구성 요소를 분리하고 의존성을 더 효율적으로 관리할 수 있게 해줍니다. 그러나 JavaScript에서 인기 있는 DI 라이브러리를 사용해 본 적이 있다면, 오래된 TypeScript 데코레이터부터 혼란스러운 API까지 골치아픈 문제에 직면했을 것입니다. 이러한 라이브러리들은 종종 문제를 해결하기보다는 더 많은 문제를 발생시킵니다.

이 기사에서는 JavaScript 의존성 주입 라이브러리의 일반적인 함정들을 살펴보고(명확하지 않은 문서, 안전하지 않은 관행, 확장성 부족 등), 이러한 도전 과제를 극복하기 위해 고안된 현대적인 해결책인 @wroud/di를 소개하겠습니다. 충분하지 않은 도구와 싸우는 느린 개발자든, 간단하고 확장 가능한 DI 솔루션을 찾는 초심자든, @wroud/di는 개발 프로세스를 간소화하는 데 필요한 명확성과 신뢰성을 제공합니다.

# 인기 있는 JavaScript 및 TypeScript DI 라이브러리의 일반적인 함정


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

의존성 주입은 확장 가능하고 유지보수 가능한 애플리케이션을 구축하는 강력한 패턴이지만, 일부 개발자들은 인기 있는 JavaScript 및 TypeScript DI 라이브러리를 구현할 때 심각한 어려움을 겪습니다. 다음에서 가장 일반적인 이슈들을 살펴보겠습니다:

- 구식 방식
많은 기존 DI 라이브러리는 TypeScript의 사용되지 않는 기능이나 이전 버전에 의존합니다. 특히 데코레이터(decorators)와 관련된 기능입니다. TC39 제안인 decorators는 이제 3단계에 이르렀으며, 현대적인 라이브러리에 적합한 옵션이 되었습니다. 하지만 중요한 이슈가 있습니다: 현재 데코레이터의 버전은 이전 구현과 호환되지 않습니다. 이러한 비호환성은 새 라이브러리를 기존의 구식 데코레이터를 사용하는 코드베이스에 통합하려고 할 때 문제를 일으킬 수 있습니다. 또한 3단계 데코레이터는 라이브러리에서 사용할 수 있지만, 전환 기간과 하위 호환성 부재로 인해 유지보수 또는 레거시 코드 리팩토링이 필요한 개발자에게 마찰을 초래할 수 있습니다.
- 모호하고 복잡한 API
인기 있는 DI 라이브러리를 사용하는 개발자들 사이에서 가파른 학습 곡선은 흔히 제기되는 불만입니다. 종종 API는 직관적이지 않으며, 난해한 문서와 예제를 통해 많은 시간을 들여 읽어야 합니다. 이 복잡성은 개발을 늦추며 생산성을 감소시키며 특히 신입 개발자들 사이에서 도입을 방해할 수 있습니다.
- 안전하지 않은 방법과 해결책
이러한 라이브러리의 제한 사항이나 버그를 해결하기 위해 개발자들은 때로 해킹이나 위험한 방식에 의존할 수 있습니다. 이러한 해결책은 코드 품질을 저해하고 감지하기 어려운 버그를 도입하며, 코드베이스를 깨지기 쉽게 만들 수 있습니다. 이러한 방식은 DI가 제공하려는 이점을 약화시키므로, 나중에 더 많은 문제를 야기시킬 수 있습니다.
- 확장 가능성 솔루션의 부재
애플리케이션이 성장함에 따라 의존성 관리가 더욱 복잡해집니다. 많은 DI 라이브러리는 아래와 같은 대규모 애플리케이션에 대한 솔루션을 제공하지 못합니다:
- 서비스 관리: 다수의 서비스와 그 등록을 처리하는 것이 번거로워질 수 있습니다.
- 순환 의존성 탐지: 순환 의존성을 식별하고 해결하는 것은 종종 간단하지 않습니다.
- 코드 분할 지원: 성능 최적화를 위해 지연 로딩과 코드 분할을 용이하게 하는 것은 충분히 다루지 못할 수 있습니다.
이러한 측면에 대한 내장 지원이 없으면, 애플리케이션의 확장이 복잡하고 오류가 발생할 수 있습니다.
- 암호화된 오류 메시지
문제가 발생할 때, 많은 DI 라이브러리가 제공하는 오류 메시지는 모호하거나 정보가 부족할 수 있습니다. 이러한 분명하지 않은 점은 긴 디버깅 세션, 좌절 및 개발시간 낭비로 이어질 수 있습니다. 명확하고 실질적인 오류 메시지는 효율적인 문제 해결과 개발자의 생산성을 유지하는 데 중요합니다.

# @wroud/di 소개: 의존성 주입에 대한 현대적인 접근 방식

이러한 어려움을 인식하여, @wroud/di는 강력하고 최신의 JavaScript 및 TypeScript 개발자를 위한 DI 라이브러리로 등장합니다. @wroud/di가 각각의 언급된 이슈를 해결하는 방법은 다음과 같습니다:

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

- 현대적이고 안정적인 구현
@wroud/di는 현대 및 레거시 환경을 모두 고려하여 설계되었습니다. 그 중 하나는 기존 레거시 데코레이터(stage 2) 및 더 새로운 stage 3 데코레이터와 호환성을 갖춘 것입니다. 이러한 유연성은 기존의 레거시 데코레이터를 사용하면서 @wroud/di를 시작하고 코드를 변경하지 않고도 단순히 stage 3 데코레이터로 원활하게 전환할 수 있다는 것을 의미합니다. 이 접근 방식은 애플리케이션을 미래를 준비시켜주는 것뿐만 아니라 최신 표준을 직접적인 위험 없이 자신의 속도로 채택할 수 있도록 해줍니다.

- 명확하고 직관적인 API
@wroud/di는 개발자 경험을 염두에 두고 설계된 API를 제공합니다. 그 간단함으로 경험이 풍부한 개발자들뿐만 아니라 새로운 도입자들도 불필요한 복잡성 없이 DI를 쉽게 구현할 수 있습니다. 명확한 관례와 포괄적인 문서화는 더 빠른 적응 및 효율적인 사용을 도와줍니다.

- 안전하고 신뢰할 수 있는 관행
@wroud/di는 의존성 관리에 대한 최선의 관행을 장려하며, 안전하지 않은 해킹이나 회피책이 필요하지 않습니다. 의존성을 우아하게 처리하는 아키텍처는 코드베이스가 깨끗하고 유지보수 가능하며 숨겨진 버그가 없도록 보장합니다.

- 확장성 중심의 기능
성장하는 애플리케이션을 지원하기 위해 @wroud/di에는 다음과 같은 기능이 포함되어 있습니다:
- 효율적인 서비스 관리: 많은 서비스를 등록하고 관리하는 간소화된 메커니즘.
- 순환 의존성 검출: 순환 의존성을 식별하고 해결하는 데 도움이 되는 내장 도구로 런타임 문제를 방지합니다.
- 코드 분할 지원: 지연 로딩 및 모듈화를 용이하게 하는 기능이며, 애플리케이션의 성능 및 유지보수성을 향상시킵니다.
이러한 기능들은 전통적인 DI와 관련된 일반적인 문제를 겪지 않고 애플리케이션의 확장성을 높이는 명확한 방안을 제공합니다.

- 구체적이고 도움이 되는 오류 메시지
@wroud/di는 개발자와의 명확한 커뮤니케이션을 우선시합니다. 오류가 발생할 때 문제 해결을 안내하는 자세하고 실행 가능한 오류 메시지를 제공하여 문제를 신속히 해결할 수 있습니다. 이 투명성은 디버깅 효율성을 높이고 예상하지 못한 문제로 인한 다운타임을 줄여줍니다.

# 다음 프로젝트에 @wroud/di를 선택하는 이유

적절한 DI 라이브러리를 선택하는 것은 개발 워크플로우, 코드 품질 및 애플리케이션의 확장성에 큰 영향을 미칠 수 있습니다. 다음은 @wroud/di가 돋보이는 이유입니다:

- 성능: 가벼우며 성능을 최적화하여 최소한의 오버헤드를 보장합니다.
- 유연성: 다양한 프로젝트 아키텍처와 호환되며 기존 코드베이스에 쉽게 통합할 수 있습니다.
- 커뮤니티 및 지원: 활발한 개발과 지원을 통해 @wroud/di가 최신 산업 동향과 개발자 요구를 반영하도록 보장합니다.
- 포괄적인 문서화: 상세한 가이드, 예제 및 튜토리얼을 통해 쉽게 시작하고 고급 기능을 마스터할 수 있습니다.

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

# @wroud/di in Action: 코드 예시

@wroud/di의 단순함과 강력함을 보여주기 위해, 실용적인 사용 예시를 통해 살펴보겠습니다. 기존 데코레이터나 새로운 stage 3 데코레이터를 사용하더라도, @wroud/di를 통해 의존성 주입을 간편하고 유연하게 처리할 수 있습니다.

## 1. 기본 서비스 등록 및 해결

먼저, 기초적인 내용부터 시작해보겠습니다: 서비스 등록 및 해결.

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

```js
import { ServiceContainerBuilder, injectable } from '@wroud/di';

// 간단한 서비스를 정의합니다.
@injectable()
class Logger {
  log(message: string) {
    console.log(`Logger: ${message}`);
  }
}

// 컨테이너에 서비스를 등록합니다.
const builder = new ServiceContainerBuilder();
builder.addSingleton(Logger);

const serviceProvider = builder.build();

// 서비스를 해결합니다.
const logger = serviceProvider.getService(Logger);
logger.log('안녕, 의존성 주입!');
```

이 예제에서는 Logger 서비스를 정의하고, ServiceContainerBuilder를 사용하여 싱글톤으로 등록한 다음 ServiceProvider를 통해 해결합니다. 이 프로세스는 명확하고 직관적이며, 애플리케이션 로직에 집중할 수 있습니다.

## 2. Legacy 및 Stage 3 데코레이터와 함께 작업하기

@wroud/di는 레거시 데코레이터(Stage 2)와 Stage 3 데코레이터를 모두 지원하여 매끄러운 전환 경로를 제공합니다. 아래에서는 코드 변경 없이 두 버전 중 어느 것을 사용할 수 있는지 설명합니다.

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

Legacy Decorators (Stage 2):

```js
// TypeScript 구성에서 레거시 데코레이터가 활성화된 것으로 가정

@injectable()
class Database {
  connect() {
    console.log('데이터베이스에 연결되었습니다');
  }
}

builder.addSingleton(Database);
const database = serviceProvider.getService(Database);
database.connect();
```

Stage 3 Decorators로 마이그레이션:

```js
// TypeScript 구성에서 stage 3 데코레이터가 활성화된 것으로 가정

@injectable()
class Database {
  connect() {
    console.log('데이터베이스에 연결되었습니다');
  }
}

// 코드 구조에 대한 변경이 필요하지 않습니다
builder.addSingleton(Database);
const database = serviceProvider.getService(Database);
database.connect();
```

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

@wroud/di를 사용하면, 레거시에서 stage 3 데코레이터로 전환하는 경우에도 서비스 정의나 사용 패턴을 변경할 필요가 없습니다. 이 유연성을 통해 코드가 새로운 표준을 채택하면서도 일관되고 유지보수 가능하게 유지됩니다.

## 3. 고급 기능: 지연 로딩 및 코드 분할

@wroud/di는 지연 로딩과 같이 성능을 향상시킬 수 있는 고급 기능도 지원합니다. 이 기능은 필요한 시점에만 서비스를 로딩함으로써 성능을 개선할 수 있습니다.

```js
// IHeavyService.ts
import { createService } from "@wroud/di";

export interface IHeavyService {
  load(): void;
}
export const IHeavyService = createService<IHeavyService>("IHeavyService");
```

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

```js
// HeavyService.ts
import { injectable } from "@wroud/di";
import { IHeavyService } from "./IHeavyService.ts";

@injectable()
export class HeavyService implements IHeavyService {
  load() {
    console.log("Heavy service loaded");
  }
}
```

```js
import { ServiceContainerBuilder, lazy } from "@wroud/di";
import { IHeavyService } from "./IHeavyService.ts";

const builder = new ServiceContainerBuilder();
builder.addSingleton(
  IHeavyService,
  lazy(() => import("./HeavyService.ts").then((m) => m.HeavyService)),
);

const serviceProvider = builder.build();

// Lazy load the service
serviceProvider.getServiceAsync(IHeavyService).then((heavyService) => {
  heavyService.load();
});
```

이 예시에서는 HeavyService가 명시적으로 요청될 때만 로드되며, 특히 시작 시간을 최적화하고자 하는 대규모 응용 프로그램에 유용합니다.

## 4. 의존성이 있는 여러 서비스 관리하기


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

이제 세 가지 서비스가 서로에게 의존하는 더 복잡한 시나리오를 살펴보겠습니다. 이 예제는 레거시 데코레이터, stage 3 데코레이터 또는 lazy loading을 사용하든지에 관계없이 API가 일관되게 유지됨을 보여줍니다.

```js
import { ServiceContainerBuilder, injectable } from '@wroud/di';

// Logger 서비스 정의
@injectable()
class Logger {
  log(message: string) {
    console.log(`Logger: ${message}`);
  }
}

// Logger에 의존하는 Database 서비스 정의
@injectable(() => [Logger])
class Database {
  constructor(private logger: Logger) {}

  connect() {
    this.logger.log('데이터베이스에 연결됨');
  }
}

// Database에 의존하는 UserService 정의
@injectable(() => [Database])
class UserService {
  constructor(private database: Database) {}

  getUser(id: string) {
    this.database.connect();
    console.log(`아이디가 ${id}인 사용자 가져오는 중`);
  }
}

// 컨테이너에 서비스 등록
const builder = new ServiceContainerBuilder();
builder.addSingleton(Logger);
builder.addSingleton(Database);
builder.addSingleton(UserService);

const serviceProvider = builder.build();

// UserService 해결 및 사용
const userService = serviceProvider.getService(UserService);
userService.getUser('12345');
```

이 예제에서:

- Logger 서비스는 독립적입니다.
- Database 서비스는 Logger 서비스에 의존하며, @injectable(() => [Logger]) 데코레이터를 사용하여 지정됩니다.
- UserService는 Database 서비스에 의존하며, 비슷하게 @injectable(() => [Database]) 데코레이터로 지정됩니다.

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

이 설정은 UserService를 요청할 때 컨테이너가 종속성을 명확히 정의하고 자동으로 해결하도록 보장합니다.

주요 포인트: @wroud/di의 장점은 사용하는 데코레이터 버전이 무엇이든 상관없이 또는 게으르게 로딩과 같은 고급 기능을 구현하는지 여부와 관계없이 이 API가 일관적으로 유지된다는 것입니다. 이 일관성은 애플리케이션을 손상시키는 변경 사항을 걱정하지 않고 스케일을 쉽게 조절하고 리팩토링할 수 있음을 보장합니다.

이 예제들은 @wroud/di가 JavaScript 또는 TypeScript 애플리케이션에서 DI를 구현하는 것이 얼마나 쉬운지, 사용하는 데코레이터 버전이 무엇이든지나 프로젝트의 복잡성에 상관없이 보여줍니다. 이제 얼마나 직관적으로 작업할 수 있는지 보셨으니, Dependency Injection을 위한 최상의 선택으로 @wroud/di를 선택해야 하는 이유에 대해 종결하겠습니다.

# 결론

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

의존성 주입은 JavaScript 및 TypeScript 애플리케이션의 모듈성, 테스트 용이성 및 유지 보수성을 크게 향상시킬 수 있는 강력한 패턴입니다. 그러나 많은 기존 DI 라이브러리의 단점은 좌절, 비효율성 및 기술 부채로 이어질 수 있습니다.

@wroud/di는 이러한 공통적인 고통 점을 해결하는 현대적이고 직관적이며 확장 가능한 솔루션을 제공합니다. 오래된 관행, 복잡한 API 또는 지연 로딩 및 코드 분할과 같은 고급 기능이 필요한 경우, @wroud/di는 당신의 요구에 적응하는 일관된 신뢰할 수 있는 API를 제공합니다.

이 기사에서 제공된 예제는 @wroud/di가 능숙한지 엿볼 수 있는 간략한 소개일 뿐입니다. 오래된 및 현대적인 데코레이터에 대한 포괄적인 지원, 명확한 서비스 관리 및 견고한 오류 처리를 통해 @wroud/di는 개발자가 쉽게 확장 가능하고 유지보수 가능한 애플리케이션을 구축할 수 있도록 돕습니다.

그러나 이것은 시작에 불과합니다. @wroud/di에는 개발 프로세스를 더욱 간편화하는 더 많은 기능과 능력이 패키지되어 있습니다. 강력한 도구를 모두 탐험하고 @wroud/di를 최대한 활용하는 방법을 배우려면 wroud.dev에서 전체 문서 및 추가 예제를 확인해보세요.

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

누구든지 경험 많은 개발자이든 디펜던시 인젝션을 막 시작한 초보자이든, @wroud/di가 여러분의 개발 여정을 더 원할하고 효율적으로 만들어 드립니다. 함께 더 즐거운 개발을 할 수 있게 도와드릴게요.

Posts