# linear-gradient를 활용한 여러가지 border 애니메이션 5가지

`linear-gradient`, `conic-gradient`,`hue-rotate` 등을 활용해 아래 5가지 border 애니메이션을 만드는 방법에 대해서 공유합니다.
단순 코드 공유가 아닌 결과물을 보고 애니메이션을 만들어가는 과정을 담아보려고 합니다.

**1. 길이가 변하는 border 애니메이션**
![2](/TIL/assets/img/2025_04_22-double_border.gif)
**2. 움직이는 점선 border 애니메이션**
![1](/TIL/assets/img/2025_04_22-dotted_box.gif)
**3. 무지개 border 애니메이션**
![3](/TIL/assets/img/2025_04_22-rotated_rainbow_box.gif)
**4. 빛나는 border 애니메이션**
![4](/TIL/assets/img/2025_04_22-rotated_conic_box.gif)
**5. 색깔이 변하는 border 애니메이션**
![5](/TIL/assets/img/2025_04_22-hue_box.gif)



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

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

---

## 1. 길이가 변하는 border 애니메이션

![2](/TIL/assets/img/2025_04_22-double_border.gif)
첫 번째로 만들어볼 것은 마우스 오버 시 border 길이가 변하는 박스인데요.
좌측 상단과 우측 하단의 선의 길이가 변하는 것처럼 보이지만
아래 박스처럼 좌측 상단과 우측 하단의 사각형이 커졌다 작아졌다 하는 구조로 만들 수 있습니다.
![6](/TIL/assets/img/2025_04_22-double_box_real.gif)

여기서 적절한 위치의 border만 사용하면 원하는 결과를 얻을 수 있을 것 같습니다.
그리고 좌상단, 우하단 두 개의 사각형만 추가로 필요하므로 `::after`, `::before` 가상 요소만 사용하여 깔끔하게 작업할 수 있을 것 같습니다.

```css
.double_box {
  position: relative;
  border: 1px solid #0f0;
  width: 200px;
  height: 100px;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    transition: 0.2s ease-in-out;
  }

  &::before {
    top: -5px;
    left: -5px;
    border-top: 1px solid #0f0;
    border-left: 1px solid #0f0;
  }

  &::after {
    right: -5px;
    bottom: -5px;
    border-bottom: 1px solid #0f0;
    border-right: 1px solid #0f0;
  }

  &:hover::before,
  &:hover::after {
    width: calc(100% + 9px);
    height: calc(100% + 9px);
  }
}
```



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

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

### 결과

`::before`, `::after` 가상 요소의 border와 사이즈를 변경해서 아래와 같은 길이가 변하는 border 애니메이션을 구현할 수 있습니다.

<iframe height="307.078125" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/yLEgPNe?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/yLEgPNe">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 2. 움직이는 점선 애니메이션

![1](/TIL/assets/img/2025_04_22-dotted_box.gif)

두 번째로 만들어볼 것은 움직이는 점선 애니메이션인데요.
우선 점선 박스를 만들기 위해 border 속성 값인 dotted를 사용해 보겠습니다.

```css
border: 1px dotted #333;
```

![1](/TIL/assets/img/2025_04_22-dotted-box.png)

하지만 border는 따로 animation을 제공하지 않기 때문에 움직이는 점선 애니메이션을 만들 수 없습니다.
그렇기 때문에 다른 방법으로 점선을 구현해야 합니다. 점선은 `linear-gradient` 로 아래와 같이 구현할 수 있습니다.



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

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

```css
.dotted_box {
  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 4px 1px repeat-x, /* 상 */ linear-gradient(
        90deg,
        #333 50%,
        transparent 50%
      ) 0 100% / 4px 1px repeat-x, /* 하 */ linear-gradient(0, #333 50%, transparent 50%) 0 0 / 1px 4px repeat-y, /* 좌 */
      linear-gradient(0, #333 50%, transparent 50%) 100% 0 / 1px 4px repeat-y; /* 우 */
}
```

![1](/TIL/assets/img/2025_04_22-dotted-box.png)

점선 박스를 만들었으면 점선을 이동시켜서 움직이는 것처럼 애니메이션을 작성해야 합니다.
시계방향으로 회전하는 애니메이션을 만들고 싶다면 아래 애니메이션 \처럼 `background-position`을 각각 이동시켜주면 됩니다.

**시계 방향**

```css
@keyframes linearGradientMove {
  100% {
    /* 상  ,    하    ,   좌   ,  우    */
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}
```

**반시계 방향**
반시계 방향이라면 아래와 같이 작성하면 됩니다.
복잡해보이지만 직접 작성해보면 어떻게 동작하는지 이해가 쉽게 됩니다.

```css
@keyframes linearGradientMove {
  100% {
    /* 상  ,    하    ,   좌   ,  우    */
    background-position: -4px 0, 4px 100%, 0 4px, 100% -4px;
  }
}
```



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

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

### 결과

border 속성으로는 지원하지 않지만 `linear-gradient`로 아래와 같이 움직이는 점선 애니메이션을 구현할 수 있습니다.

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/zYaNPMR?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/zYaNPMR">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 3. 무지개 border 애니메이션

![3](/TIL/assets/img/2025_04_22-rotated_rainbow_box.gif)

세 번째로는 무지개 border 애니메이션을 구현해 보겠습니다.
가장 먼저 기본적인 css 속성으로 해결할 수 있는지 판단해 볼 텐데요.
위와 같은 스펙을 지원하는 css 속성은 없으니 다른 방법으로 만들어야겠다는 생각이 듭니다.
이번에도 테두리만 보이지만 사각형을 활용해 볼 수 있을 것 같습니다.



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

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

```css
.rotated_box {
  &::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(
        #d53e33,
        #d53e33
      ), linear-gradient(#377af5, #377af5);
    animation: rotate 3s linear infinite;
  }
}
```



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

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

![3](/TIL/assets/img/2025_04_22-rainbow_box.png)

`linear-gradient` 활용해 `::before` 요소에 위와 같이 4개의 사각형을 만들어줍니다.
그리고 회전을 시켜주면 테두리가 비슷한 모습이 나올 것 같습니다.

![3](/TIL/assets/img/2025_04_22-rainbow_box2.gif)

회전을 시켜보니 위 영상처럼 빈 공간이 노출되는데요.
이 부분은 `::before`의 사이즈를 키워서 해결할 수 있습니다.

```css
.rotated_box {
  &::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%; /* 2배 */
    height: 200%; /* 2배 */
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(
        #d53e33,
        #d53e33
      ), linear-gradient(#377af5, #377af5);
    animation: rotate 3s linear infinite;
  }
}
```

![3](/TIL/assets/img/2025_04_22-rainbow_box3.gif)

이런 형태까지 만들었으니 이제 `::after` 요소를 이용해서 내부 영역을 흰색으로 채워주면 됩니다.

### 결과

예시에서는 4개만 사용했지만 더 다양한 색깔로 나누어서도 구현이 가능할 것 같습니다.

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/KKeaZay?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/KKeaZay">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>



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

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

## 4. 빛나는 border 애니메이션

![4](/TIL/assets/img/2025_04_22-rotated_conic_box.gif)

다음으로 만들어 볼 것은 테두리가 빛나는 애니메이션입니다.
이 애니메이션 또한 기본 css 속성이 존재하지 않기 때문에 다른 방법으로 구현해야 하는데요.

이번엔 `linear-gradient`가 아니라 `conic-gradient`를 이용해서 구현해 보겠습니다.

`linear-gradient`가 직선 형태의 그라데이션이라면 `conic-gradient`는 중심점을 기준으로 원형으로 그라데이션을 그리는 속성입니다.

```css
.rotated_one_conic_box {
  &::before {
    content: "";
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
  }
}
```

![4](/TIL/assets/img/2025_04_22-conic_box1.png)

이제 이 `::before` 가상 요소를 무지개 애니메이션 때와 같이 회전시켜주고 `::after` 요소를 이용해 내부 컨텐츠를 채워주면 됩니다.



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

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

### 결과

<iframe height="300" style="width: 100%;" scrolling="no" title="conic-box" src="https://codepen.io/13akstjq/embed/GRGrVZg?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/GRGrVZg">
  conic-box</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 5. 색깔이 변하는 border 애니메이션

![5](/TIL/assets/img/2025_04_22-hue_box.gif)

색깔이 변하는 border 애니메이션은 그라데이션 border만 만들 수 있다면 쉽게 적용할 수 있습니다.

```css
.rotated_gradient_box {
  width: 200px;
  height: 100px;
  margin: 7px auto 0;
  border-radius: 21px;
  border: 10px solid transparent;
  background-image: linear-gradient(#444, #444), linear-gradient(to left, #37a9fa, #5951f3);
  background-clip: content-box, border-box;
  background-origin: border-box;
}
```

![5](/TIL/assets/img/2025_04_22-gradient-box1.png)

이렇게 그라디언트 border를 적용 했으면 `hue-rotate` 속성과 애니메이션으로 색상을 변경해 주면 됩니다.
`hue-rotate`는 각도 값을 넣어주면 되며, 아래 사진과 같은 색상환에 따라서 색상이 노출됩니다.



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

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

```css
hue-ratote(angle)
```

![5](/TIL/assets/img/2025_04_22-hue-rotate.png)

### 결과

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/13akstjq/embed/MWXJNXX?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/13akstjq/pen/MWXJNXX">
  Untitled</a> by 13akstjq (<a href="https://codepen.io/13akstjq">@13akstjq</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 마치며

점점 인터렉티브한 웹사이트가 많아지면서 기존 속성들로 해결하기 어려운 경우들이 많이 있는데요.
그럴 때는 전혀 다른 용도로 사용되는 속성을 이용하거나, 도형, 마스크 등등 다양한 방법으로 구현해야 합니다. 스펙을 조정하는 방법도 있겠지만 다양한 아이디어로 스펙을 구현해 보는 것도 좋을 것 같습니다.

linear-gradient, conic-gradient 등을 활용해 border 애니메이션을 만드는 방법에 대해서 공유합니다

linear-gradient를 활용한 border 애니메이션 5가지 만들기


안녕하세요! 오늘은 **컨테이너 쿼리(Container Query)** 를 본격적으로 사용하기 전에 꼭 알고 있어야 할 개념인, **미디어 쿼리(Media Query)** 와의 차이점에 대해 이야기해볼게요. 🤔

둘 다 반응형 디자인에 사용하는 CSS 문법이지만, **어디에 적용되는지, 언제 쓰는 게 더 좋은지**에 따라 차이가 꽤 있습니다!

---

## ✅ 미디어 쿼리란?

미디어 쿼리는 우리가 이미 많이 써온 방식이에요.  
**브라우저 뷰포트(viewport)의 크기**에 따라 스타일을 다르게 적용하죠.

```css
@media (min-width: 768px) {
  .box {
    background-color: lightblue;
  }
}
```

- 위 예제는 화면의 너비가 **768px 이상**일 때 `.box`의 배경색을 파란색으로 바꿉니다.
- 주로 전체적인 **페이지 레이아웃**을 바꿀 때 많이 써요.

---

## ✅ 컨테이너 쿼리란?

컨테이너 쿼리는 조금 달라요!  
**뷰포트가 아니라, 특정 요소(부모 컨테이너)의 크기**를 기준으로 스타일을 바꿔줍니다. 🎯

```css
.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .box {
    background-color: lightgreen;
  }
}
```

- `.container` 요소의 **가로 너비가 400px 이상**일 때, 내부 `.box` 요소에 스타일을 적용합니다.
- 그래서 페이지 크기와 상관없이, **컴포넌트의 위치나 구조에 따라 자동 반응**하게 만들 수 있어요!

---

## 📊 둘의 차이를 표로 한눈에 정리

| 비교 항목     | 미디어 쿼리 (Media Query)   | 컨테이너 쿼리 (Container Query)                                     |
| ------------- | --------------------------- | ------------------------------------------------------------------- |
| 기준          | **브라우저 뷰포트 크기**    | **부모 컨테이너 크기**                                              |
| 주 사용처     | 전체 페이지 레이아웃        | 개별 컴포넌트/요소 스타일링                                         |
| 유연성        | 한정적 (전체 페이지 기준)   | 매우 유연함 (컴포넌트 기반)                                         |
| 예시          | `@media (min-width: 768px)` | `@container (min-width: 400px)`                                     |
| 브라우저 지원 | 널리 지원                   | [최신 브라우저부터 지원](https://caniuse.com/css-container-queries) |

---

## 💡 간단한 비교 예제

### 💻 HTML

```html
<div class="container">
  <div class="box">나는 박스야</div>
</div>
```

### 🎨 CSS – 미디어 쿼리 버전

```css
.box {
  background-color: pink;
}

@media (min-width: 600px) {
  .box {
    background-color: skyblue;
  }
}
```

📸 **결과:** 화면 너비가 600px 이상이 되면 박스가 파란색으로 바뀜

---

### 🎨 CSS – 컨테이너 쿼리 버전

```css
.container {
  container-type: inline-size;
}

.box {
  background-color: pink;
}

@container (min-width: 400px) {
  .box {
    background-color: lightgreen;
  }
}
```

📸 **결과:** `.container`의 너비가 400px 이상일 때 박스가 연두색으로 바뀜  
👉 화면 크기가 아닌, **부모 요소 너비에 따라** 바뀌기 때문에 **레이아웃 내부에서 반응형 처리가 가능**해요!

---

## 🧠 언제 뭘 써야 할까?

- **미디어 쿼리**는 페이지 전체 레이아웃 변경에 여전히 좋습니다.
- **컨테이너 쿼리**는 컴포넌트 단위로 스타일을 바꿔야 할 때 아주 강력합니다!

🎯 특히 **디자인 시스템, 컴포넌트 기반 UI (예: React, Vue 등)** 을 쓸 때는 컨테이너 쿼리가 훨씬 유리해요.

---

## ⚠️ 사용 전 주의할 점

- **브라우저 지원**: 최신 버전의 크롬, 엣지, 파이어폭스에서는 지원하지만 Safari는 16.0 이상에서만 지원돼요.
- **`container-type` 설정 필수**: 부모 요소에 `container-type` 속성을 주지 않으면 동작하지 않아요!
- **성능 고려**: 너무 많은 요소에 컨테이너 쿼리를 쓰면 렌더링 비용이 올라갈 수 있어요.

---

## 📌 마무리

미디어 쿼리와 컨테이너 쿼리는 서로 경쟁하는 게 아니라 **상호 보완적**이에요.  
페이지 전체는 미디어 쿼리로, 세부 컴포넌트는 컨테이너 쿼리로 나눠서 쓰면 **더 유연하고 깔끔한 반응형 UI**를 만들 수 있어요. 🎉

---

> 다음 글에서는 컨테이너 쿼리 문법을 좀 더 자세히 다루고, 다양한 실전 예제도 소개할게요! 🙌


미디어 쿼리 vs. 컨테이너 쿼리 차이점 비교


안녕하세요! 오늘은 CSS에서 최근에 도입된 강력한 기능인 `:has()` 선택자에 대해 알아보겠습니다. 이 선택자는 부모 요소가 특정 자식 요소를 포함하고 있는지 여부에 따라 스타일을 적용할 수 있게 해줍니다. 자바스크립트 없이도 동적인 스타일링이 가능해졌다는 점에서 매우 유용합니다.

## `:has()` 선택자란?

`:has()`는 CSS의 관계형 의사 클래스(relational pseudo-class)로, 특정 자식 요소를 포함하는 부모 요소를 선택할 수 있게 해줍니다. 예를 들어, `<div>` 요소 중에서 `<p>` 요소를 포함하는 것만 선택하고 싶다면 다음과 같이 작성할 수 있습니다:

```css
div:has(p) {
  background-color: #f0f0f0;
}
```

이렇게 하면 `<p>` 요소를 포함한 `<div>`에만 배경색이 적용됩니다.

## 실전 예제들

### 1. 이미지가 있는 아티클 강조하기

```html
<article>
  <h2>첫 번째 아티클</h2>
  <p>내용이 여기에 있습니다.</p>
</article>

<article>
  <h2>두 번째 아티클</h2>
  <img src="image.jpg" alt="이미지 설명" />
  <p>이미지가 포함된 아티클입니다.</p>
</article>
```

```css
article:has(img) {
  border: 2px solid #007acc;
  padding: 10px;
}
```

**설명**: 이미지가 포함된 아티클에만 테두리와 패딩을 적용하여 시각적으로 강조합니다.

### 2. 서브메뉴가 있는 네비게이션 항목 표시하기

```html
<ul class="main-menu">
  <li>홈</li>
  <li>
    서비스
    <ul class="sub-menu">
      <li>웹 개발</li>
      <li>모바일 앱</li>
    </ul>
  </li>
  <li>문의하기</li>
</ul>
```

```css
.main-menu > li:has(.sub-menu)::after {
  content: " ▼";
  font-size: 0.8em;
  color: #555;
}
```

**설명**: 서브메뉴가 있는 항목에만 화살표 기호를 추가하여 사용자가 하위 메뉴가 있음을 알 수 있도록 합니다.

### 3. 입력 필드가 비어 있을 때 버튼 비활성화하기

```html
<form>
  <input type="text" id="username" placeholder="사용자 이름" />
  <button type="submit">제출</button>
</form>
```

```css
form:has(input:placeholder-shown) button {
  background-color: #ccc;
  cursor: not-allowed;
}
```

**설명**: 입력 필드가 비어 있을 때 버튼의 배경색을 변경하고 커서를 비활성화 상태로 표시하여 제출을 방지합니다.

## 주의할 점 및 참고 사항

- **브라우저 지원**: `:has()` 선택자는 최신 브라우저에서 지원됩니다. [Can I use](https://caniuse.com/css-has)에 따르면, 대부분의 최신 브라우저에서 사용할 수 있지만, 일부 구형 브라우저에서는 지원되지 않을 수 있습니다.

- **성능 고려**: 복잡한 선택자나 많은 요소에 `:has()`를 사용할 경우 성능에 영향을 줄 수 있으므로 주의해야 합니다.

- **중첩 사용 제한**: `:has()` 선택자 안에 또 다른 `:has()`를 중첩해서 사용하는 것은 현재 지원되지 않습니다.

## 마무리

`:has()` 선택자는 CSS에서 부모 요소를 자식 요소의 상태에 따라 스타일링할 수 있게 해주는 강력한 도구입니다. 자바스크립트 없이도 동적인 스타일링이 가능해져 코드의 간결성과 유지보수성이 향상됩니다. 실무에서도 다양한 상황에 활용할 수 있으니, 적극적으로 사용해보시기 바랍니다!


CSS :has() 선택자 사용 방법 정리


## ✅ 1. React 컴포넌트로 사용하는 방법 (`?react` 쿼리)

SVG를 직접 React 컴포넌트로 import 하여 사용하려면 **vite-plugin-svgr** 플러그인이 필요합니다.

---

### 📦 1-1. 설치

```bash
npm install vite-plugin-svgr --save-dev
# 또는
yarn add vite-plugin-svgr --dev
```

---

### ⚙️ 1-2. vite.config.ts 설정

```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import path from "path";

export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});
```

---

### 🧩 1-3. TypeScript 선언 추가 (`svg.d.ts`)

```ts
// src/svg.d.ts
declare module "*.svg?react" {
  import * as React from "react";
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}
```

---

### 🧪 1-4. 사용 예시

```tsx
// 예: src/components/Icon.tsx
import { ReactComponent as HeartIcon } from "@/assets/icons/heart.svg?react";

const Icon = () => {
  return <HeartIcon width={32} height={32} fill="red" />;
};

export default Icon;
```

---

## 📁 2. 이미지 파일처럼 사용하는 방법 (`img` 태그)

`vite-plugin-svgr` 없이도 기본적으로 SVG 파일은 **URL로 import**해서 이미지처럼 사용할 수 있습니다.

---

### 📂 2-1. import 방식

```tsx
// 예: src/components/ImageIcon.tsx
import heartUrl from "@/assets/icons/heart.svg";

const ImageIcon = () => {
  return <img src={heartUrl} alt="Heart" width={32} />;
};

export default ImageIcon;
```

---

### 🧩 2-2. TypeScript 선언 추가 (`svg.d.ts`)

```ts
// src/svg.d.ts
declare module "*.svg" {
  const src: string;
  export default src;
}
```

> ⚠️ `*.svg?react`과 `*.svg` 둘 다 선언해주면 두 방식 모두 사용할 수 있습니다.

---

## 🔁 3. 마무리 - 개발 서버 재시작

```bash
npm run dev
# 또는
yarn dev
```

---


Vite에서 SVG 사용하는 두 가지 방법 (React + TypeScript 기준)

<img src="/TIL/assets/img/2024-07-15-8-bitvs16-bitcodeunitaPHPSymfonyvsTypeScriptNextJStaleforFrontendandBackend_0.png" />

만약 국제화 및 번역이 필요한 제품에 작업했다면, 멀티바이트 문자열로 인한 문제에 직면한 적이 있을 것입니다.

게다가, 웹 개발자로 일하고 있다면 PHP 및 JavaScript (또는 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>

동아시아 지역에서 많은 사용자가 브라우징하고 있어서, 저희 시스템이 I18N 요구 사항을 충족할 준비가 되어 있는지 확인해야 했습니다.

우리는 먼저 PHP와 Symfony로 모놀리식 프로젝트를 개발했습니다. 그런 다음, 일부 작은 유틸리티를 사용하여 특정 작업을 처리하기 위해 JavaScript로 작성되었고 NodeJS로 구동되는 마이크로 서비스 기반 프로젝트로 전환했습니다.

지금은 동일한 프로젝트를 PHP와 Symfony를 사용하여 Backend API로 다시 만들고 있습니다. Frontend에서는 NextJS를 사용하여 PHP API 및 NextJS API로 HTTP 호출을 처리하며, Symfony, TypeScript 및 Golang 마이크로 서비스를 사용하고 있습니다.

다시 말해, 우리는 각 프로그래밍 언어의 가장 좋은 부분을 활용하고 있습니다.


<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>

다양한 프로그래밍 언어를 사용하면서 주목한 재미난 점 중 하나는 국제화(Internationalisation)가 다르게 처리된다는 것이에요.

저는 PHP와 TypeScript 두 가지 가장 주요한 프로그래밍 언어를 현재 사용하고 있기 때문에, 여러 바이트 문자열을 다룰 때 주요한 차이점을 강조하고 싶어요.

Symfony를 사용하면서, 제가 제출된 데이터의 백엔드 유효성 검사를 수행하기 위해 사용자 정의 Constraints를 만들었어요. 이 Constraints 중 하나는 주어진 문자열이 싱글 바이트(다중 바이트가 아닌)임을 보장하는 것인데, 특정 결제 공급업체 요구 사항 때문에 데이터를 "다루기 쉬운" 형식으로 필요하기 때문이에요.

아래는 PHP Symfony에서 백엔드 유효성 검사를 하는 예시 코드입니다.

```js
// PHP Symfony Backend

// src/Validator/IsSingleByteStringValidator.php

public function validate($value, Constraint $constraint): void
{
    // ...

    $singleByteLength = strlen($value);
    $multiByteLength = mb_strlen($value);

    if ($singleByteLength !== $multiByteLength) {
        $this->context->buildViolation($constraint->message)
            ->setParameter('{ string }', $value)
            ->addViolation();
    }
}
```


<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>

이전 유효성 검사를 실행하는 제약 조건을 사용하여 요청 프로세스에서 데이터를 유효성 검사했습니다. 이 모든 것이 #[MapRequestPayload] 속성을 통해 간단히 이루어졌어요.

하지만 JavaScript에 대한 유사한 접근 방식이 없다는 것을 알게 되었고, TypeScript 코드에서 비슷한 방식을 어떻게 달성할 수 있는지 궁금해졌습니다. 내가 발견한 것은 예상보다 더 복잡하면서 더 흥미로운 것이었어요.

또한 PHP와 JavaScript/TypeScript에는 동기적 및 비동기적 접근 방식 외에도 (개발 단계에 직접적으로 영향을 미치는 가장 관련성 있는 포인트 중 하나인) 문자열 처리 시 "코드 단위"에 대한 다른 차이점이 있다는 것을 배웠습니다.

```js
// 예시:

$str1 = "a";
$str2 = "円";
$str3 = "𠮷";

var_dump([
    $str1 => ['strlen' => strlen($str1), 'mb_strlen' => mb_strlen($str1)],
    $str2 => ['strlen' => strlen($str2), 'mb_strlen' => mb_strlen($str2)],
    $str3 => ['strlen' => strlen($str3), 'mb_strlen' => mb_strlen($str3)],
]);

// 이전 코드는 다음과 같은 출력 값을 반환합니다:

array(3) {
  'a' => array(2) {
    'strlen' => int(1)
    'mb_strlen' => int(1)
  }
  '円' => array(2) {
    'strlen' => int(3)
    'mb_strlen' => int(1)
  }
  '𠮷' => array(2) {
    'strlen' => int(4)
    'mb_strlen' => int(1)
  }
}
```


<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>

보시다시피, 두 개의 아시아 문자(일본어와 간단화된 중국어)를 처리할 때에도, 한 바이트 체크로 바이트 수를 확인하면 다른 결과를 얻지만, 멀티바이트 체크를 실행할 때에는 항상 같은 결과를 얻습니다.

이는 예상한 바와 같지만 여기서 강조해야 할 점은 문자에 따라 3바이트 또는 4바이트를 얻게 된다는 것입니다. 이 차이의 이유는 사용된 문자가 ASCII 관점뿐만 아니라 코드 유닛 관점에서도 다르기 때문입니다:

```javascript
$str1 = "a";    // ASCII 문자
$str2 = "円";   // BMP 내의 싱글 코드 유닛 문자
$str3 = "𠮷";   // 대리 서로쌍 (두 코드 유닛)
```

그러면 PHP가 이미 단일 문자 체크에서 다른 동작을 제공하는데, JavaScript나 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>

```js
const str1 = "a";    // ASCII character
const str2 = "円";   // Single code unit character in BMP
const str3 = "𠮷";   // Surrogate pair (two code units)

console.log(str1.length); // Output: 1
console.log(str2.length); // Output: 1
console.log(str3.length); // Output: 2
```

만약 PHP 예제를 다시 확인하면 각각의 경우에 바이트 수가 다른 것을 기억할 것입니다. 그런데 이게 왜 발생하는 걸까요?

- "a"는 PHP에서 1바이트이고 JavaScript / TypeScript에서도 1바이트입니다.
- "円"은 PHP에서 3바이트이고 JavaScript / TypeScript에서는 1바이트입니다.
- "𠮷"는 PHP에서 4바이트이고 JavaScript / TypeScript에서는 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>

- PHP에서 strlen("円")은 2를 반환합니다. 이는 PHP의 strlen() 함수가 바이트를 세기 때문에 "円"이 UTF-8로 표현될 때 8비트의 3바이트(E5 86 86)로 계산되기 때문입니다.
- JavaScript에서 "円".length는 16비트 코드 단위의 수를 반환합니다. 따라서 "円"에 대해 1을 반환합니다.
- 다시 말해, PHP는 8비트 논리를 사용하고, JavaScript는 16비트 논리를 사용합니다.

그래서 나는 각 케이스를 더 잘 이해하기 위해 편리하고 효율적으로 에러와 불일치의 개수를 최소화하려고, Frontend가 Backend API 호출을 방지할 수 있도록 초기 단계에서 이상한 것을 감지하면 됩니다.

```js
// 더 나은 이해를 위한 JavaScript 함수

function isSingleCodeUnit(char) {
    return char.length === 1;
}

function isSurrogatePair(char) {
    return char.length === 2 && char.codePointAt(0) > 0xFFFF;
}

function classifyCharacters(str) {
    let result = [];

    for (let char of Array.from(str)) {
        if (isSingleCodeUnit(char)) {
            result.push({ char, length: 1 });
        } else if (isSurrogatePair(char)) {
            result.push({ char, length: 2 });
        } else {
            result.push({ char, length: "Unknown" });
        }
    }

    return result;
}

// 예제 사용법:
let input1 = "a円𠮷";

console.log(classifyCharacters(input1));
// [
//     { char: 'a', length: 1 },
//     { char: '円', length: 1 },
//     { char: '𠮷', length: 2 }
// ]
```

이 케이스를 더 잘 이해하기 위해 유니코드와 기본 다국어 평면(BMP)과 UTF 인코딩에 대해 더 깊숙히 알아야 할 필요가 있습니다.


<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>

- Unicode은 모든 문자체계에서 모든 문자를 포함하고자 하는 표준입니다. 각 문자에는 고유한 코드 포인트가 할당됩니다.
- 기본 다국어 평면(BMP)은 Unicode 문자 집합의 첫 번째 평면으로, U+0000부터 U+FFFF까지의 코드 포인트를 가진 문자가 포함되어 있습니다. 이에는 라틴 문자, 숫자, 기호 및 다양한 문자 체계의 문자가 포함됩니다.
- UTF-8: 문자가 1~4바이트 길이일 수 있는 가변 길이 인코딩입니다. ASCII 문자(U+0000부터 U+007F)는 1바이트입니다. U+0080에서 U+FFFF까지는 2바이트 또는 3바이트이며, U+10000에서 U+10FFFF까지의 문자는 4바이트입니다.
- UTF-16: 문자가 일반적으로 2바이트인 가변 길이 인코딩입니다. 그러나 BMP 밖의 문자(U+10000에서 U+10FFFF)는 대리 쌍을 사용하여 4바이트로 인코딩됩니다.
- UTF-32: 각 문자가 코드 포인트에 관계없이 4바이트인 고정 길이 인코딩입니다.

BMP(다른 인코딩의 맥락에서의 다중 바이트 문자):

- UTF-8: BMP(U+0000에서 U+FFFF)의 문자는 1, 2 또는 3바이트로 인코딩될 수 있습니다. ASCII 문자(U+0000에서 U+007F)는 1바이트입니다. 기타 BMP 문자(U+0080에서 U+FFFF)는 2 또는 3바이트일 수 있습니다.
- UTF-16: BMP의 문자는 일반적으로 2바이트로 인코딩됩니다. BMP 밖의 문자만 대리 쌍을 사용하여 4바이트로 인코딩됩니다.

다음은 UTF-8 및 UTF-16에서 다양한 문자가 인코딩되는 방식을 설명하는 몇 가지 예시입니다:


<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>

[ UTF-8 ] ASCII 문자 (예: ‘A’):

- 코드 포인트: U+0041
- UTF-8 인코딩: 1바이트 (0x41)

[ UTF-8 ] Latin-1 보충 (예: ‘é’):

- 코드 포인트: U+00E9
- UTF-8 인코딩: 2바이트 (0xC3 0xA9)


<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>

[ UTF-8 ] CJK 통합 한자 (예: ‘円’):

- 코드 포인트: U+5186
- UTF-8 인코딩: 3바이트 (0xE5 0x86 0x86)

[ UTF-16 ] ASCII 문자 (예: ‘A’):

- 코드 포인트: U+0041
- UTF-16 인코딩: 2바이트 (0x0041)


<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>

[ UTF-16 ] 라틴-1 보충 (예 : ‘é’):

- 코드 포인트: U+00E9
- UTF-16 인코딩: 2바이트 (0x00E9)

[ UTF-16 ] CJK 통합 한자 (예 : ‘円’):

- 코드 포인트: U+5186
- UTF-16 인코딩: 2바이트 (0x5186)


<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>

[ UTF-16 ] 보충 문자 (예: '𠮷'):

- 코드 포인트: U+20BB7
- UTF-16 인코딩: 4바이트 (0xD842 0xDFB7) (대리 쌍)

다중 바이트 문자: UTF-8에서는 한 바이트보다 더 많은 바이트가 필요한 모든 문자를 의미합니다. UTF-16에서는 BMP(기본 다중 언어 평면) 내 문자들이 일반적으로 2바이트이지만, BMP 밖의 문자들은 대리 쌍으로 인코딩되어 4바이트를 차지합니다.

BMP 문자: 대부분 일반적인 문자와 기호를 포함하며, UTF-16에서는 보통 2바이트로 표현됩니다. UTF-8에서는 1에서 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>

## 박수와 팔로우 부탁드려요!

👏 이 글이 마음에 드셨나요? 아래의 👏 버튼을 눌러 박수를 보내주세요. 여러분의 지원은 저에게 큰 힘이 됩니다!

📚 제 최신 게시물을 계속해서 받고 싶으신가요? "팔로우" 버튼을 눌러 저의 커뮤니티에 참여하고 놓치지 마세요.

읽어 주셔서 감사합니다! 여러분의 피드백과 지원이 저에게 더 많은 가치있는 정보를 공유하도록 격려해줍니다. 🙌


<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>

# 스택더믹 🎓

끝까지 읽어주셔서 감사합니다. 떠나시기 전에:

- 작가를 클래핑하고 팔로우해주시면 감사하겠습니다! 👏
- 저희를 팔로우해주세요 X | LinkedIn | YouTube | Discord
- 다른 플랫폼도 방문해보세요: In Plain English | CoFeed | Differ
- 더 많은 콘텐츠는 Stackademic.com에서 확인하세요

8-bit vs 16-bit 코드 유닛 프론트엔드와 백엔드를 위한 PHP Symfony와 TypeScript NextJS 비교 이야기

ML 작업을 6년 이상 한 뒤, AI/LLM 스타트업 3개를 론칭하고 수십 개의 프로젝트와 파이프라인을 구축했습니다. RAG와 Agent 프레임워크부터 적절한 테스트, CI/CD 및 관측성이 있는 LLM 기반 서비스까지 많은 LLM 도구를 실험했습니다.

본문은 다양한 이유로 가장 좋아하는 도구 목록입니다. RAG 데이터베이스와 에이전트에서부터 API 엔드포인트, HTTPS 및 자동 배포 파이프라인, 적절한 관측성까지 전체 LLM 애플리케이션 개발 수명주기를 따라갈 것입니다. 그 과정에서 각 단계의 프레임워크와 도구를 살펴볼 것입니다.

그리고 한 가지 더 — 나의 기술 스택에 동의하지 않을 수 있습니다. 그러나 주로 사용의 간결함을 기반으로 도구를 선택했습니다. 예를 들어, VPS에 배포하는 대신 Azure와 같은 대형 클라우드 제공업체를 사용할 수 있습니다. 그렇게 하면 확장성이 높아지고, out-of-box 서비스가 더 많아지며, 등등의 혜택을 받을 것입니다. 그러나 모든 것을 마스터하기까지 훨씬 더 많은 시간이 소요되며, 벤더 락인될 가능성이 높아집니다. Coolify와 함께 VPS를 사용하면 (나중에 언급할 것입니다), 시작하는 데 약 10분이 걸리고, 데이터베이스, 프론트엔드/백엔드 배포, 자동화된 CI/CD 및 백업이 필요한 모든 것이 직관적이고 사용하기 쉬운 UI로 제공됩니다.

![TechStackForProduction-ReadyLLMApplicationsIn2024](/TIL/assets/img/2024-07-15-TechStackForProduction-ReadyLLMApplicationsIn2024_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>

# LLM API 및 Self Hosted 옵션

대형 언어 모델 API에는 두 가지 주요 옵션이 있습니다:

- 자체 호스팅 버전을 선택하는 경우 Ollama가 그 방법입니다. "왜 자체 호스팅 LLM이 필요할까요? 더 비싸고 설정하기 어렵며 응답 품질도 떨어집니다"라고 묻는다면, 답은 간단합니다 — 개인 정보 보호입니다. 이미 개인 정보 보호와 LLM에 대해 썼지만 간단히 말하면, API를 사용하면 데이터를 다른 회사와 공유하며, 그 회사들은 데이터를 더 많은 제3자와 공유합니다. 어떤 프로젝트에서는 이를 용납할 수 없습니다.
- 프로젝트가 높은 개인 정보 보호와 보안을 요구하지 않는다면, 항상 Openrouter를 사용합니다. 간단하게 다양한 공급 업체 위에 구축된 Openrouter가 항상 다른 어떤 LLM 공급자보다 훨씬 낫습니다. 하나의 LLM에 대한 파이프라인을 작성했다면 요청 문자열을 몇 개 변경함으로써 LLM을 쉽게 변경할 수 있습니다. 추가 라이브러리나 공급 업체 전환 없이 매우 간단합니다. 자세한 내용을 알고 싶다면 Openrouter 안내서를 확인하세요.

together.ai, Mistral 등의 다른 LLM 공급 업체도 많지만, Openrouter를 더 선호하는 이유는 간단한 인터페이스와 제공하는 추가 유용한 기능(자동 로깅, 모델 비교, 자동 모델 선택, 무료 평가판 등) 때문입니다.


<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-15-TechStackForProduction-ReadyLLMApplicationsIn2024_1.png)

# RAG 데이터베이스

대부분의 LLM은 다음과 같은 문제를 가지고 있습니다:

- 최신 정보가 아님;
- 도메인 지식이 없음;
- 환각;
- 출처를 인용하지 않음;
- 편향된 응답.



<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>

모든 이 문제들은 적절한 RAG (검색 보완 생성)을 사용하여 해결할 수 있어요. 모든 RAG 알고리즘은 어떠한 형식의 벡터 데이터베이스를 요구해요. 제가 가장 선호하는 선택지는 다음과 같아요:
  
- ChromaDB — 프로토타입 및 PoC (개념 증명) 작업에 완벽해요. SQLite를 기반으로 구축되어 있어 설치가 매우 쉽고 (PC의 파일로 구성되어 있어요), 사용법도 매우 직관적이고 문서화가 잘 돼 있어요.
- 더 심각한 프로젝트를 위해, 저는 Supabase (PostgreSQL 기반)와 PGVector 플러그인을 사용해요. Supabase의 장점은 직관적이고 사용하기 쉬운 UI, 백업, 역할 관리, API 및 Python 패키지와 같은 많은 기능이 있어요. Supabase를 사용하는 방법에 대한 가이드도 많이 있고, 개인적으로 좋아하는 점은 오픈 소스이며 자체 서버에 호스팅할 수 있다는 점이에요.

보통은 사용자 지정 솔루션을 사용하지만, 때로는 LangChain이 RAG 파이프라인 작성에 크게 도움이 될 수 있어요.

![이미지](/TIL/assets/img/2024-07-15-TechStackForProduction-ReadyLLMApplicationsIn2024_2.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>

# 에이전트

더 정교한 LLM 파이프라인을 생성하거나 LLM을 사용하여 어려운 문제를 해결하려면 에이전틱 접근 방식을 사용해야 합니다. LLM 에이전트는 순차적(단계별) 추론을 사용하는 AI 시스템입니다. 기본적으로 LLM에 대한 지침 세트를 정의하는 대신 문제를 해결할 수 있는 자유와 도구 세트를 제공합니다.

저는 에이전트를 생성하기 위해 사용하는 Python 라이브러리들은 다음과 같습니다:

- LangChain — 현재 가장 인기 있는 에이전트용 프레임워크이며, 훌륭한 문서, 거대한 커뮤니티, 그리고 가이드가 많이 포함된 많은 자습서가 있습니다. 제가 권장하는 한 가지는 create_react_agent나 create_json_agent와 같은 새로운 방법 대신 initialize_agent 메서드를 사용하는 것입니다. 이 방법을 선택한 이유는 새로운 방법에는 아직 많은 가이드나 지침이 없어서 제 개인적으로는 조금 혼란스러웠기 때문입니다. initialize_agent 메서드는 사용하기 쉽고 다양한 접근 방법을 가진 가이드가 수십 개 있습니다.
- LlamaIndex — LangChain의 주요 경쟁 업체로, 인덱싱 및 데이터 검색에서의 우수한 최적화로 알려져 있습니다. 간단히 말해, RAG 파이프라인을 구축할 때, llamaindex가 더 빠르고 나은 옵션일 수 있지만, 더 복잡한 프로젝트와 파이프라인의 경우 LangChain을 사용하는 것이 좋습니다.


<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>

일반적으로, LangChain을 사용하여 LLMs를 학습하는 것이 더 기능이 풍부하고 사용하기 쉽습니다.

# 관찰 가능성

이제 LLM 애플리케이션을 배포했다면, 답변의 품질, 정확성 및 속도를 측정해야합니다. 하지만 LLMs로 어떻게 할 수 있을까요? 저는 추적, 평가, 시각화 및 모니터링을 제공하는 두 개의 오픈 소스 LLM 관찰 가능성 플랫폼을 사용합니다:

- Arize Phoenix
- LangSmith


<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>

저는 LangSmith를 사용하기가 조금 더 쉬웠어요. 그들은 입력-출력을 추적하는 아주 좋은 방법을 가지고 있고, 평가를 개발하는 것은 꽤 빠릅니다. 그러나 Phoenix는 데이터를 더 많이 추적할 수 있어서 더 나은 무료 티어를 가지고 있습니다. LLM observability로 시작하려면 LangSmith를 꼭 추천드릴 수 있어요 — PoC와 프로토타입에 완벽합니다.

![Tech Stack](/TIL/assets/img/2024-07-15-TechStackForProduction-ReadyLLMApplicationsIn2024_3.png)

# 백엔드

백엔드는 항상 Python, FastAPI, Pydantic를 사용해요. 여기에 사용하는 이유들을 짧게 나열해볼게요:


<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>

- FastAPI은 상당히 빠르며 매우 좋은 문서가 제공되며 데이터베이스 ORM, 인증, CORS 및 멀티 스레드 배포와 같이 LLM 애플리케이션 개발에 필요한 모든 기능을 포함하고 있어요.
- Pydantic은 함수와 엔드포인트에 엄격한 유형을 추가하는 데 도움이 되어 항상 원하는 유형의 모든 변수를 확신할 수 있게 해줘요. 애플리케이션을 에러로부터 보호하는 데 도움이 됩니다.

일반적으로 Gunicorn + Uvicorn 워커와 함께 결합하여 동시에 여러 요청을 처리할 수 있어요.

그럼에도 불구하고 Flask, Django와 같은 모든 백엔드 프레임워크를 사용할 수 있습니다. 이들은 모두 공통 기능을 가지고 있으며 모두 제품 준비가 되어 있습니다.

# 배포


<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>

배포 작업에 대해서 말씀드리자면, 저는 항상 Docker를 사용하여 애플리케이션을 컨테이너화합니다. 주요 이유는 다음과 같습니다:

- 재현성 — 앱과 함께 Docker 이미지를 빌드하면 어떤 시스템이나 CPU 아키텍처에서도 실행할 수 있습니다;
- 확장성 — 앱이 도커화되어 있으면 여러 인스턴스를 쉽게 생성하거나 클러스터에 배포할 수 있습니다;
- 배포 — Docker 이미지를 배포하는 것이 매우 간단합니다. 특히 Docker Compose를 사용하는 경우 더욱 쉬워집니다. 데이터베이스, 리버스 프록시 및 백엔드를 docker-compose.yml 파일에 추가하여 모든 것을 별도로 걱정하지 않고 한꺼번에 배포할 수 있습니다.

Docker 이미지를 배포할 때 Coolify를 사용하고 있습니다 — 이는 배포 프로세스를 크게 단순화해 주는 오픈 소스, 자체 호스팅 플랫폼입니다. 다음과 같은 기능을 제공합니다:

- SSL 인증서 자동 관리 — 백엔드를 https 호환으로 만들 필요가 없습니다;
- 벤더 잠금 없음 — 모든 제공업체로부터 자유롭게 이점을 취할 수 있는 추상화 계층을 추가하여 Coolify를 어디서든 VPS 또는 클라우드 제공자에 배포할 수 있습니다;
- 간편한 리버스 프록시 — Coolify에서는 보안과 도메인에 대해 걱정할 필요가 없습니다. 사용하려는 도메인만 Coolify에 작성하면 됩니다;
- 자동화된 DB 백업 — PostgreSQL, MySQL, Redis 등과 같은 일반 이미지를 사용하는 경우 몇 번의 클릭으로 백업 설정을 할 수 있습니다. 사용자 정의 솔루션을 작성하거나 돈을 지불할 필요가 없습니다.
- CI/CD 파이프라인 — 깃허브와 연결하여 자동 배포 파이프라인을 무료로 이용할 수 있습니다. 앱을 업데이트하면 자동으로 배포됩니다;
- 협업 기능 — 팀원들과 Coolify를 공유하고, 서로 다른 측면의 앱에 대해 함께 작업할 수 있습니다. 각 사용자에 대한 권한도 제어할 수 있습니다.
- 모니터링 및 알림 — Telegram/Discord와 같은 다양한 응용 프로그램 중 하나를 설치해 배포 상황에 변화가 있을 때 알림을 받을 수 있습니다.


<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>

![Tech Stack](/TIL/assets/img/2024-07-15-TechStackForProduction-ReadyLLMApplicationsIn2024_4.png)

# 요약

이 기사에서는 여러분의 LLM 애플리케이션을 작성하기 위한 멋진 기술 스택을 다루었습니다. 이 도구들을 사용함으로써 다음을 얻을 수 있습니다:

- 신뢰할 수 있고 쉽게 사용할 수 있는 벡터 DB;
- 다양한 크기와 적절한 개인 정보 보호를 갖춘 모든 문제에 대한 LLM;
- 공급업체 락인 없음;
- 파이프라인을 위한 적절한 로깅과 모니터링;
- 애플리케이션을 쉽게 배포할 수 있는 확장 가능하고 유지 보수가능한 방법.


<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>

기술 스택을 댓글로 공유해 주세요. 함께 토론하며 최적의 도구 세트를 찾아보겠습니다! 이 글이 마음에 드셨다면 박수를 보내주시고 답글을 남겨주세요. 여러분의 피드백은 저에게 귀중합니다.

마지막으로, 제 스타트업인 비즈니스 아이디어를 검증하는 https://validator.yazero.io 를 방문해 지원해 주시면 감사하겠습니다.

# 참고 소스

- https://www.trychroma.com
- https://supabase.com
- https://python.langchain.com/v0.1/docs/modules/agents/
- https://www.llamaindex.ai
- https://phoenix.arize.com
- https://stackshare.io/langsmith
- https://fastapi.tiangolo.com
- https://docs.pydantic.dev/latest/
- https://www.docker.com
- https://coolify.io


<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>

# 친절한 한국어 번역 🚀

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

- 반드시 박수를 보내고 작가를 팔로우해주세요 👏️️
- 저희를 팔로우해주세요: X | LinkedIn | YouTube | Discord | Newsletter
- 다른 플랫폼도 방문해주세요: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠를 만나보세요

2024년 프로덕션 레디 LLM 애플리케이션을 위한 기술 스택

이미지 태그를 아래와 같이 수정해주세요.


![image](/TIL/assets/img/2024-07-15-9ThingsINeverKnewAboutItertoolsPythonUntilRecently_0.png)


비디오 콘텐츠 실험 64일차

## 1) Batched

itertools.batched 함수(파이썬 3.12 이상에서만 사용 가능)를 사용하면 이터러블을 일괄 처리하는 것이 쉬워집니다.


<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 itertools

for i in itertools.batched('abcdefg', 3):
    print(i)

# ('a', 'b', 'c')
# ('d', 'e', 'f')
# ('g',)
```

^ 문자열을 3개씩 묶어 반복하는 코드입니다. (마지막 묶음은 원소가 부족하므로 1개의 원소만 포함됩니다)

## 2) Pairwise

itertools.pairwise 함수를 사용하면 iterable의 각 이웃하는 두 원소를 비교할 수 있습니다.


<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 itertools

for i in itertools.pairwise('abcdefg'):
    print(i)

'''
('a', 'b')
('b', 'c')
('c', 'd')
('d', 'e')
('e', 'f')
('f', 'g')
'''
```

^우리가 iterable에 있는 각 쌍 (bigram)의 요소를 순회하는 것입니다. 각 요소를 그 다음 요소와 비교해야 할 때 유용합니다.

만약 필요하다면 이 함수를 구현하는 번거로움을 피할 수 있습니다.

# 3) Accumulate


<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>

itertools.accumulate 함수를 사용하면 다음을 수행할 수 있습니다:

```js
import itertools

for i in itertools.accumulate('abcdefg'):
    print(i)

'''
a
ab
abc
abcd
abcde
abcdef
abcdefg
'''
```

# 4) 조합 및 순열

itertools.combinations(iterable, n) 함수를 사용하면 iterable의 요소들 중 길이 n인 모든 조합을 생성할 수 있습니다.


<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>

`itertools.permutations(iterable, n)` 함수를 사용하면 길이 n의 iterable 요소들의 모든 순열을 생성할 수 있어요.

참고 - 순열에서는 요소의 순서가 중요합니다. 조합에서는 요소의 순서가 중요하지 않아요.

```js
import itertools

for i in itertools.permutations([1, 2, 3, 4], 2):
    print(i, end=' ')

# (1, 2) (1, 3) (1, 4) (2, 1) (2, 3) (2, 4) (3, 1) (3, 2) (3, 4) (4, 1) (4, 2) (4, 3)
```

^ [1, 2, 3, 4]의 요소 중에서 길이가 2인 모든 순열을 찾으려면 — 여기에서 [1, 4]와 [4, 1]은 서로 다르게 간주되는 것을 주목해주세요.


<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 itertools

for i in itertools.combinations([1, 2, 3, 4], 2):
    print(i, end=' ')

# (1, 2) (1, 3) (1, 4) (2, 3) (2, 4) (3, 4)                                                     
```

^ [1, 2, 3, 4] 요소의 길이가 2인 모든 조합을 찾습니다. [4, 1]은 [1, 4]와 동일하게 간주되어 존재하지 않음을 주목해 주세요.

## 5) 곱셈

```js
for i in [1, 2]:
    for j in [3, 4]:
        for k in [5, 6]:
            print(i, j, k)

'''
1 3 5
1 3 6
1 4 5
1 4 6
2 3 5
2 3 6
2 4 5
2 4 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>

Markdown 형식으로 표 태그를 변경하려면 다음과 같이 하면 됩니다.


^ a triple nested for loop.

```js
from itertools import product

for i, j, k in product([1, 2], [3, 4], [5, 6]):
  print(i, j, k)

'''
1 3 5
1 3 6
1 4 5
1 4 6
2 3 5
2 3 6
2 4 5
2 4 6
'''
```

^ itertools.product를 사용한 위의 삼중 중첩 for 루프와 똑같이 작업을 수행하여 우리는 여러 중첩된 for 루프를 간단하고 우아한 한 줄의 코드로 단축할 수 있습니다.

# 6) Groupby



<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>

itertools.groupby 함수를 사용하면 함수를 통해 동시에 요소를 반복하고 그룹화할 수 있습니다.

```python
import itertools 

words = ['apple', 'ant', 'arm', 'boy', 'bee', 'cat', 'donkey']

def condition(x):
  return x[0]  # 요소의 첫 글자를 반환

for key, group in itertools.groupby(words, condition):
    print(key, list(group))

'''
a ['apple', 'ant', 'arm']
b ['boy', 'bee']
c ['cat']
d ['donkey']
'''
```

^ 첫 글자를 기준으로 요소를 그룹화합니다 — 이를 수행하기 위해 사용자 정의 함수 condition을 전달합니다.

```python
import itertools 

words = ['apple', 'ant', 'arm', 'boy', 'bee', 'cat', 'donkey']
for key, group in itertools.groupby(words, lambda x:x[0]):
    print(key, list(group))

'''
a ['apple', 'ant', 'arm']
b ['boy', 'bee']
c ['cat']
d ['donkey']
'''
```


<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>

^ 첫 글자를 기준으로 요소를 그룹화하는 것 (람다 x : x[0]) — 우리는 함수를 정의하기 위해 def 키워드를 사용할 필요가 없도록 작은 익명 함수인 람다 함수를 작성할 수 있습니다.

```js
import itertools

words = ['apple', 'ant', 'arm', 'boy', 'bee', 'cat', 'donkey', 'aa', 'ab']
for key, group in itertools.groupby(words, lambda x: x[0]):
    print(key, list(group))

'''
a ['apple', 'ant', 'arm']
b ['boy', 'bee']
c ['cat']
d ['donkey']
a ['aa', 'ab']
'''
```

^ 그룹은 서로 옆에 있어야 합니다 — 여기서 [`aa`, `ab`]는 앞에서 a로 시작하는 그룹에 합류하지 않습니다.

# 7) 압축


<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>

itertools.compress 함수는 2개의 이터러블을 사용합니다 — 주 이터러블과 True/False 또는 1/0 값을 포함하는 다른 이터러블인데 이 값들은 주 이터러블에서 생성할 요소를 결정합니다.

```js
import itertools

for i in itertools.compress('ABCD', [1,0,0,0]):
    print(i, end=' ')

# A
```

```js
import itertools

for i in itertools.compress('ABCD', [1,1,0,0]):
    print(i, end=' ')

# A B
```

```js
import itertools

for i in itertools.compress('ABCD', [1,1,1,0]):
    print(i, end=' ')

# A B C
```


<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 itertools

for i in itertools.compress('ABCD', [1,1,1,1]):
    print(i, end=' ')

# A B C D
```

```js
import itertools

for i in itertools.compress('ABCD', [1,0,1,0]):
    print(i, end=' ')

# A C 
```

# 8) Zip_longest

```js
for i,j,k in zip([1,2,3,4], [5,6,7,8], [9,10]):
  print(i, j, k)

# 1 5 9
# 2 6 10
```



<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>

^ 일반적인 zip() 함수를 사용할 때, 한 번에 여러 이터러블을 반복할 수 있지만, 가장 짧은 이터러블에 제한을 받습니다. 예를 들어, [9, 10]가 가장 짧은 이터러블이기 때문에 zip()은 2개의 행만 생성합니다.

```js
from itertools import zip_longest

for i, j, k in zip_longest([1, 2, 3, 4], [5, 6, 7, 8], [9, 10]):
  print(i, j, k)

# 1 5 9
# 2 6 10
# 3 7 None
# 4 8 None
```

^ 이 한계를 우회하기 위해 zip_longest로 이를 대체할 수 있으며, 이 경우 가장 긴 이터러블을 통해 zip할 수 있습니다. 그러나 특정한 이터러블에서 값이 부족해지면 None이 사용됩니다.

# 9) 반복 & 사이클


<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 itertools

for i in itertools.repeat('ABC'):
  print(i)

# ABC
# ABC
# ABC
# ABC

# 무한한 수의 ABC

```

^ itertools.repeat()을 사용하면 무한히 반복할 수 있습니다.

```js
import itertools

for i in itertools.cycle('ABC'):
  print(i)

# A
# B
# C
# A
# B
# C
# A
# B
# C

# 무한한 A, B, C의 순환, 그리고 다시 A로, B로, C로...

```

# 결론


<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>

이해하기 쉽고 명확했길 바랍니다.

# 마무리의 한 마디

만약 이 이야기가 도움이 되었고 조금이라도 지지를 표현하고 싶다면:

- 이 이야기에 대해 50번 박수를 칩니다
- 어떻게 생각하는지 댓글을 남깁니다
- 당신에게 공감되는 부분을 강조합니다


<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>

이러한 조치들은 정말로 저를 도와주고, 정말 감사합니다!

제가 쓴 Ebooks: [여기를 클릭하세요!](https://zlliu.co/ebooks)

LinkedIn: [프로필 링크](https://www.linkedin.com/in/zlliu/)

알고 나서 놀란 Itertools Python의 9가지 비밀

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

Python은 간단하고 가독성이 좋아 초보자들 사이에서 인기가 높습니다. 그러나 Python의 전체 잠재력을 활용하기 위해 개발자들은 일부 고급 개념을 숙달해야 합니다. 여기 개발자들이 더 효율적이고 유지보수 가능하며 확장 가능한 코드를 작성하기 위해 이해해야 하는 9가지 고급 Python 개념이 소개됩니다.

# 1. 제너레이터와 이터레이터

제너레이터와 이터레이터를 사용하면 게으른(lazy) 평가가 가능하며, 이는 메모리를 절약하고 성능을 향상시킬 수 있습니다. 제너레이터는 함수와 yield 문을 사용하여 이터레이터를 만드는 간단한 방법입니다.



<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>

# 이터레이터

이터레이터는 이터레이터 프로토콜을 구현한 객체로, __iter__()와 __next__() 메서드로 구성됩니다.

```js
class MyIterator:
    def __init__(self, data):
        self.data = data
        self.index = 0

    def __iter__(self):
        return self

    def __next__(self):
        if self.index >= len(self.data):
            raise StopIteration
        value = self.data[self.index]
        self.index += 1
        return value

my_iter = MyIterator([1, 2, 3])
for item in my_iter:
    print(item)
```

# 제너레이터


<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
def my_generator():
    yield 1
    yield 2
    yield 3

gen = my_generator()
for item in gen:
    print(item)
```

# 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>

```python
def my_decorator(func):
    def wrapper(*args, **kwargs):
        print("함수 호출 전")
        result = func(*args, **kwargs)
        print("함수 호출 후")
        return result
    return wrapper

@my_decorator
def say_hello():
    print("안녕!")

say_hello()
```

# 3. 컨텍스트 매니저

컨텍스트 매니저는 원하는 시점에 정확히 리소스를 할당하고 해제할 수 있도록 해줍니다. 가장 흔한 컨텍스트 매니저의 사용 방법은 `with` 문과 함께 사용하는 것입니다.

```python
class MyContextManager:
    def __enter__(self):
        print("컨텍스트 진입")
        return self

    def __exit__(self, exc_type, exc_value, traceback):
        print("컨텍스트 종료")

with MyContextManager():
    print("컨텍스트 내부")
```


<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>

파일 처리는 일반적인 사용 사례입니다.

```python
with open('file.txt', 'w') as file:
    file.write('Hello, World!')
```

## 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>

```js
class Meta(type):
    def __new__(cls, name, bases, attrs):
        attrs['greet'] = lambda self: f"Hello from {self.__class__.__name__}"
        return super().__new__(cls, name, bases, attrs)

class MyClass(metaclass=Meta):
    pass

obj = MyClass()
print(obj.greet())
```

# 5.  디스크립터

디스크립터는 클래스 내에서 관리 속성을 만드는 방법입니다. 속성에 대한 액세스, 설정 및 삭제 동작을 정의할 수 있도록 합니다.

```js
class MyDescriptor:
    def __init__(self, name=None):
        self.name = name

    def __get__(self, instance, owner):
        return instance.__dict__.get(self.name)

    def __set__(self, instance, value):
        instance.__dict__[self.name] = value

    def __delete__(self, instance):
        del instance.__dict__[self.name]

class MyClass:
    attr = MyDescriptor('attr')

obj = MyClass()
obj.attr = 42
print(obj.attr)
del obj.attr
```


<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>

# 6. 코루틴과 Asyncio

코루틴과 asyncio 모듈을 사용하면 Python에서 비동기 프로그래밍을 할 수 있어요. 이를 통해 블로킹 되지 않는 I/O 작업을 수행할 수 있는 코드를 작성할 수 있어요.

## 코루틴

코루틴은 실행을 일시 중지하고 다시 시작할 수 있는 함수들이에요.


<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 asyncio

async def my_coroutine():
    print("Start coroutine")
    await asyncio.sleep(1)
    print("End coroutine")

asyncio.run(my_coroutine())
```

# Asyncio

Asyncio는 async/await 구문을 사용하여 동시성 코드를 작성하기 위한 라이브러리입니다.

```js
async def main():
    await asyncio.gather(my_coroutine(), my_coroutine())

asyncio.run(main())
```


<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>

# 7. 타입 주석

타입 주석은 변수, 함수 매개변수 및 반환 값을 정의하여 코드 가독성을 향상시키고 오류를 초기에 잡아낼 수 있습니다.

```python
def greet(name: str) -> str:
    return f"Hello, {name}"

def add(a: int, b: int) -> int:
    return a + b

name: str = "Alice"
age: int = 30
```

# 8. 슬롯


<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>

인스턴스 속성을 미리 정의된 목록으로 제한하여 메모리를 절약하고 속성 액세스 속도를 높일 수 있는 슬롯은 유용합니다.

```python
class MyClass:
    __slots__ = ['name', 'age']

    def __init__(self, name, age):
        self.name = name
        self.age = age

obj = MyClass('Alice', 30)
print(obj.name, obj.age)
```

# 9. Multiprocessing

multiprocessing 모듈을 사용하면 별도의 프로세스를 생성하고 관리할 수 있어 Python 애플리케이션에서 진정한 병렬 처리를 수행할 수 있습니다.


<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
from multiprocessing import Process

def worker(num):
    print(f'Worker: {num}')

if __name__ == '__main__':
    processes = []
    for i in range(5):
        p = Process(target=worker, args=(i,))
        processes.append(p)
        p.start()

    for p in processes:
        p.join()
```

이러한 고급 Python 개념을 습득함으로써 더 효율적이고 유지보수가 쉬운 확장 가능한 코드를 작성할 수 있습니다. 이러한 개념은 코딩 기술뿐만 아니라 더 복잡한 문제와 프로젝트에 자신감을 갖고 접근할 수 있도록 도와줍니다. 즐거운 코딩하세요!

모든 개발자가 알아야 할 고급 파이썬 개념 9가지

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

# 시리즈의 목적

이 시리즈의 목적은 PHP 8.x를 배우려는 Python 3.x 개발자들에게 체계적인 안내를 제공하는 것입니다. 두 언어 사이의 유사점과 차이점을 강조하며, 원활한 전환을 보장하기 위해 실용적인 예제와 비교를 제공할 것입니다.

본 시리즈는 이미 Python과 핵심 프로그래밍 개념에 익숙하다고 가정합니다.


<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>

# 소개

반복문은 프로그래밍에 중요한 요소로, 특정 조건에 따라 코드가 반복적으로 실행될 수 있습니다. PHP에서는 다양한 종류의 반복문을 제공하여 더 많은 유연성을 제공합니다.

본 문서에서는 다음을 비교할 것입니다:

- while 루프
- for 루프
- foreach 루프
- do-while 루프
- break / continue 문장


<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>

# While loop

while 루프는 지정된 조건이 참인 경우에만 코드 블록을 반복하고 싶을 때 사용됩니다.

파이썬에서는 while 루프를 다음과 같이 사용합니다:

```python
count = 0
while count < 5:
    print(f"Count: {count}")
    count += 1
```


<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>

- count은 0부터 시작합니다
- 루프가 count가 5보다 작은 동안 계속 실행됩니다
- 루프 내에서 count가 출력되고 증가합니다

PHP에서는 다음과 같이 while 루프를 사용합니다:

```php
<?php
$count = 0;
while ($count < 5) {
    echo "Count: $count\n";
    $count++;
}
?>
```

- count가 0으로 초기화됩니다
- 루프는 $count가 5보다 작은 동안 계속 실행됩니다
- 루프 내에서 count가 출력되고 1씩 증가합니다


<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>

구문은 매우 유사하며, 로직은 정확히 같습니다.

# for 루프

for 루프는 일반적으로 반복 횟수가 미리 알려진 경우에 사용됩니다. 두 언어 모두 구별되는 구문을 갖고 있습니다.

파이썬에서:


<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
for i in range(5):
    print(f"Iteration: {i}")
```

- range(5) 함수는 0부터 4까지의 숫자를 생성합니다.
- 이 범위 내 각 숫자마다 i가 출력됩니다.

PHP에서:

```php
<?php
for ($i = 0; $i < 5; $i++) {
    echo "Iteration: $i\n";
}
?>
```


<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>

- 루프는 $i를 0으로 초기화합니다.
- $i가 5보다 작은 경우에만 실행됩니다.
- 각 반복 후에 $i는 1씩 증가합니다.

PHP는 for 루프에 대해 C 스타일 구문을 사용합니다. $i = 0은 for 루프가 실행하는 반복 횟수와 관계없이 한 번만 계산됩니다. $i ` 5는 각 반복의 시작부에서 계산되고, $i++은 각 반복의 끝에서 계산됩니다.

재미있게도, 한 줄로 for 루프를 작성할 수 있지만, 하지 말아주세요. 코드는 실행되겠지만, 모든 해석기가 에러를 발생시킵니다.

파이썬에서:


<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>

위의 표를 마크다운 형식으로 변경해보겠습니다.


| Header One | Header Two |
|------------|------------|
| Row 1, Col 1 | Row 1, Col 2 |
| Row 2, Col 1 | Row 2, Col 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>

```js
<?php
for ($i = 1, $j = 0; $i <= 10; $j += $i, print $i, $i++);
?>
```

# Foreach Loop

The foreach loop is used to iterate over arrays or collections only.

In Python, we don't have foreach loops, but we can mimic it using the in membership operator and a for loop like this:


<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>

```javascript
colors = ["red", "green", "blue"];
for color in colors:
    print(f"Color: {color}")
```

- colors는 리스트입니다.
- for 루프는 각 요소를 순회하며 color에 할당하고 콘솔에 인쇄합니다.

PHP는 foreach 루프를 지원하며 for 루프와는 매우 다른 구문을 사용합니다.

```php
<?php
$colors = ["red", "green", "blue"];
foreach ($colors as $color) {
    echo "Color: $color\n";
}
?>
```


<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>

- `$colors`은 배열입니다
- 루프는 `$colors` 배열의 각 요소를 순회하며 현재 요소를 `$color`에 할당하고 콘솔에 출력합니다.

만약 연관 배열(파이썬의 딕셔너리)을 순회하려면 다른 구문을 사용할 수 있습니다:

```js
<?php
$color = [
    "r" => "red",
    "g" => "green",
    "b" => "blue",
];

foreach ($color as $key => $value) {
    echo "The $key is $value\n";
}
?>

// 결과:
// The r is red
// The g is green
// The b is blue
```

# Do-While 루프


<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>

PHP에는 코드 블록이 한 번 이상 실행되도록 보장하는 do-while 루프가 있습니다. Python에는 내장 do-while 루프가 없지만 while 루프와 break 조건을 사용하여 유사한 효과를 얻을 수 있습니다.

Python에서:

```python
count = 0
while True:
    print(f"Count: {count}")
    count += 1
    if count >= 5:
        break
```

- while True 룹은 무한히 실행됩니다.
- count가 5에 도달하면 break 문으로 루프를 수동으로 중단합니다.


<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>

PHP에서:

```js
<?php
$count = 0;
do {
    echo "Count: $count\n";
    $count++;
} while ($count < 5);
?>
```

- 코드 블록이 먼저 실행됩니다
- 그 후 $count < 5 조건이 확인됩니다
- 조건이 참인 동안 반복 실행됩니다

while 및 do-while 루프의 주요 차이점은 각 반복에서 진실 식이 시작이 아닌 끝에서 확인된다는 점입니다. 이것이 첫 반복이 항상 보장되는 이유입니다.


<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>

# break / continue 문

PHP와 Python 모두 break 및 continue 문을 제공하여 반복문의 흐름을 제어할 수 있습니다.

## break

Python에서는 반복문을 종료하는 방법은 다음과 같습니다:


<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
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for number in numbers:
    if number > 5:
        break # 숫자가 5보다 크면 룹을 종료합니다.
    print(f"Number: {number}")
```

PHP에서:

```js
<?php
$numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

foreach ($numbers as $number) {
    if ($number > 5) {
        break; // 숫자가 5보다 크면 룹을 종료합니다.
    }
    echo "Number: $number\n";
}
?>
```

추가로, PHP에서의 break는 선택적으로 숫자 인수를 허용하며, 이는 몇 개의 중첩된 룹을 탈출할지를 나타냅니다. 기본값은 1입니다. 두 룹을 동시에 탈출하는 방법에 대한 예시는 다음과 같습니다:


<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
<?php
$matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

$target = 5;
$found = false;

foreach ($matrix as $row) {
    foreach ($row as $value) {
        if ($value == $target) {
            echo "Found target value $target. Breaking out of both loops.\n";
            $found = true;
            break 2; // Break out of both loops
        }
    }
}

if (!$found) {
    echo "Target value $target not found.\n";
}
?>
```

이 코드는 매우 유용하네요! Python에 이 기능을 추가해야 할까요?

## continue

Python에서는 다음 반복으로 건너뛰는 방법이 있습니다:


<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
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for number in numbers:
    if number % 2 == 0:
        continue # 짝수를 건너뛰기
    print(f"Number: {number}")
```

PHP에서 동일한 기능:

```js
<?php
$numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

foreach ($numbers as $number) {
    if ($number % 2 == 0) {
        continue; // 짝수를 건너뛰기
    }
    echo "Number: $number\n";
}
?>
```

continue 문은 중첩된 루프의 끝까지 건너뛰어야 하는 수준을 나타내는 선택적 숫자 인수를 받을 수도 있습니다. 기본 값은 1이며, 따라서 현재 루프의 끝으로 건너뛰게 됩니다.


<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
<?php
$matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

foreach ($matrix as $row) {
    foreach ($row as $value) {
        if ($value % 2 == 0) {
            echo "짝수 $value를 만나면 해당 행 건너뛰기.\n";
            continue 2; // 해당 행의 나머지 부분을 건너뛰고 외부 루프의 다음 행으로 이동
        }
        echo "값: $value\n";
    }
}
?>

// 출력:
// 값: 1
// 짝수 2를 만나면 해당 행 건너뛰기.
// 짝수 4를 만나면 해당 행 건너뛰기.
// 값: 7
// 짝수 8를 만나면 해당 행 건너뛰기.
```

# 결론

루프는 프로그래밍에서 반복 작업에 필수적입니다. PHP 8 및 Python 3은 각기 다른 문법과 흐름을 가진 다양한 루프 구조를 제공합니다:

- while 루프: 두 언어에서 유사하며 조건에 기반한 반복에 사용됩니다.
- for 루프: Python에서는 range 함수를 사용하여 더 간단하며, PHP에서는 초기화자, 조건 및 증가자를 사용합니다.
- foreach 루프: PHP에서 직접 배열에 사용 가능하며, Python에서는 for 루프 기능의 일부입니다.
- do-while 루프: PHP에서 기본적으로 제공되며, Python에서는 while 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>

# 만약 이 기사를 읽는 것을 즐기셨거나 도움이 되었다면, 아래와 같이 할 수 있어요:

- 20번 클랩을 눌러주세요
- 어떻게 도움이 되었는지 댓글을 남겨주세요
- 파이썬, PHP 및 AI 기사를 더 보려면 팔로우해주세요

여러분의 피드백과 참여가 저에게 글쓰고 가치 있는 콘텐츠를 공유하도록 격려해줍니다. 이 여정의 한 부분이 되어 주셔서 감사합니다!

또한 저를 LinkedIn에서도 만날 수 있어요.

파이썬 개발자를 위한 PHP  5편  반복문 사용하는 방법

안녕하세요!

시간 변환은 프로그래밍에서 흔한 작업 중 하나로, 기본 산술 연산과 문자열 처리에 대한 기본적인 이해를 개발하는 데 도움이 됩니다. 이 글에서는 Python을 사용하여 밀리초를 시간, 분, 초로 변환하는 방법을 살펴보겠습니다. 이 작업을 통해 루프, 조건문 및 함수 설계에 대한 지식을 확립할 수 있을 겁니다.

변환 이해하기


<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 시간 = 3600000 밀리초
- 1 분 = 60000 밀리초
- 1 초 = 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>

- 입력 유효성 검사: 입력이 0보다 큰 유효한 숫자인지 확인합니다.
- 변환 로직: 밀리초를 시간, 분 및 초로 분해합니다.
- 출력 형식 지정: 결과를 읽기 쉬운 형식으로 표시하며, 0이 아닌 시간 단위만 표시합니다.
- 사용자 상호 작용: 사용자가 "exit"을 입력할 때까지 입력을 요청하는 루프를 구현합니다.

구현

시간 변환기 코드를 시작해보겠습니다:

```js
def convert_milliseconds(ms):
    if ms < 1000:
        return f"방금 {ms} 밀리초"
```


<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>

```python
    hours = ms // 3600000
    ms %= 3600000
    minutes = ms // 60000
    ms %= 60000
    seconds = ms // 1000
    result = []
    if hours > 0:
        result.append(f"{hours} hour/s")
    if minutes > 0:
        result.append(f"{minutes} minute/s")
    if seconds > 0:
        result.append(f"{seconds} second/s")
    return ' '.join(result)
def main():
    print("### 이 프로그램은 밀리초를 시간, 분, 초로 변환합니다 ###")
    print('(프로그램을 종료하려면 "exit"을 입력하세요)')
    while True:
        user_input = input("밀리초를 입력하세요 (0보다 커야 합니다): ")
        if user_input.lower() == "exit":
            print("프로그램 종료... 안녕히 가세요")
            break
        try:
            ms = int(user_input)
            if ms > 0:
                print(convert_milliseconds(ms))
            else:
                print("올바르지 않은 입력입니다 !!!")
        except ValueError:
            print("올바르지 않은 입력입니다 !!!")
if __name__ == "__main__":
    main()
```


<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>

- 사용자 상호 작용:

  - 주요 기능은 사용자 입력을 처리하고 유효성을 검사합니다.
  - 사용자에게 밀리초를 요청하고 유효한지 확인한 후 convert_milliseconds 함수를 사용하여 변환합니다.
  - 사용자가 "exit"을 입력할 때까지 루프가 계속됩니다.

Posts