

![image](https://miro.medium.com/v2/resize:fit:1400/1*eRV52WQT_MNLi6yoQqUZ5g.gif)

# nextjs-server-action-tester를 만든 이유 💡

최근 프로젝트에서 저는 Next.js를 사용하여 프론트엔드를 개발하고 동료는 백엔드 로직을 처리하였습니다. 핵심 Node.js 개발자인 동료는 API 엔드포인트를 테스트하기 위해 주로 Postman을 사용해왔습니다. 그러나 Next.js에서 서버 액션을 테스트하는 것은 전통적인 도구인 Postman과 같은 방법으로 시행하기 어려웠습니다.

이 도전은 Next.js 코드베이스를 스캔하고 모든 서버 액션을 식별하며 이러한 액션들을 테스트할 수 있는 사용자 인터페이스를 제공하는 도구를 만들기로 하는 아이디어를 불러일으켰습니다 🎯. 목표는 서버 액션의 테스트 프로세스를 간소화하는 것이었으며, 특히 전통적인 API 테스트 방법에 익숙한 개발자들을 위한 것이었습니다. 이로 인해 nextjs-server-action-tester가 탄생하게 되었습니다 🚀.

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

# nextjs-server-action-tester이 무엇인가요? 🤖

nextjs-server-action-tester는 Next.js 프로젝트에서 서버 액션을 테스트하기를 가능한 간단하게 만들기 위해 설계된 npm 패키지입니다. 프로젝트를 스캔하는 프로세스를 자동화하고 메타데이터를 생성하여 사용자 친화적인 UI를 만들어 서버 함수를 나열, 검색 및 실행할 수 있게 합니다 🎨. 이 도구는 JavaScript와 TypeScript를 모두 지원하며 사용자 정의 구성 및 내장 라이트/다크 모드를 제공합니다.

# 주요 기능 ✨

- 자동 스캐닝: Next.js 프로젝트를 스캔하여 서버 액션을 식별합니다.
- 테스트용 UI: 프로젝트 내에서 페이지를 생성하여 서버 액션을 나열하고 테스트할 수 있습니다.
- 사용자 정의 구성: 도구가 프로젝트 내에서 어떻게 구성되고 사용되는지 유연성을 제공합니다.
- JavaScript 및 TypeScript 지원: 두 언어와 원활하게 작동합니다.
- 라이트/다크 모드: 선호하는 테마에 맞춰 UI가 적응됩니다.

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

# 사용된 라이브러리 🛠️

- babel/parser: JavaScript/TypeScript 코드를 추상 구문 트리(AST)로 파싱하는 데 사용됩니다.
- babel/traverse: AST를 순회하고 서버 작업을 식별하는 데 사용됩니다.
- fs-extra: 설정 및 스캔 프로세스 중 파일 작업을 처리하는 데 사용됩니다.

# nextjs-server-action-tester 사용 방법 🚀

- 설치: 먼저 Next.js 프로젝트에서 패키지를 설치하세요:

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

```js
npm install nextjs-server-action-tester
```

2. 도구 실행: 설치 후 다음 명령을 실행하여 스캔 및 테스트 프로세스를 시작합니다:

```js
npx actions-scan
```

이 명령은 필요한 파일을 자동으로 설정하고 스캔 프로세스를 시작하며 서버 액션 테스트를 위한 UI를 생성합니다.

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

3. 서버 동작 테스트: 생성된 페이지를 브라우저에서 열어보세요 (예: http://localhost:3000/list-actions). 여기에서 모든 감지된 서버 동작을 볼 수 있습니다. 특정 동작을 검색하고 입력 매개변수를 실행할 수 있습니다 🔍.

# 개발자 경험 향상하는 이유 🚀

nextjs-server-action-tester는 Postman과 Next.js의 서버 동작 기능과 같은 전통적인 API 테스트 도구 간의 간극을 줄입니다. 특히 Node.js와 API 테스트에 익숙한 개발자들이 서버 동작을 쉽게 테스트할 수 있도록 돕습니다. 이 도구는 프로젝트에 직접 통합되어 전체적인 제어권을 제공하면서 개발 프로세스를 원활하고 효율적으로 유지합니다.

# 링크 🔗

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

- npm 패키지: nextjs-server-action-tester
- 데모 비디오: YouTube에서 시청하세요

# 기여하기 🤝

기여를 환영합니다! 개선 아이디어가 있거나 문제를 발견하신 경우, 언제든지 풀 리퀘스트를 제출하거나 GitHub 저장소에서 이슈를 열어주세요.

이 도구를 공유함으로써, Next.js 프로젝트에서 서버 액션을 개발하고 테스트하는 것이 더욱 쉽고 효율적으로 이루어질 수 있기를 희망합니다. 혼자 프로젝트를 진행하거나 팀원들과 협업 중이던 중이던, nextjs-server-action-tester는 당신의 개발 툴킷에 가치 있는 도움이 될 수 있습니다 💼.

Next.js 서버 액션 사용 방법 정리



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

정말 솔직하게 말하자면, 새로운 프론트엔드 개발 프로젝트를 만들려고 할 때마다 한 가지 논란이 생깁니다: JavaScript와 TypeScript? 둘 다 각각의 장점이 있고, 그 중에서 선택하는 것은 종종 개발자 사이에 논쟁을 일으킵니다. 경험 많은 개발자이든, 막 시작한 초보 개발자이든 상관 없이 두 언어의 차이와 장점을 이해하는 것은 당신의 프로젝트에 대해 더 나은 결정을 내릴 수 있도록 도와줍니다.

## JavaScript은 무엇인가요?

JavaScript는 현대 웹 개발의 기반이 됩니다. 그것은 동적이고 약 타입의 언어로, 개발자들이 웹사이트에 상호작용적이고 동적인 콘텐츠를 만들 수 있게 합니다. React, Angular, Vue.js와 같은 프레임워크로, JavaScript는 프론트엔드 개발에 불가결한 존재가 되었습니다.

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

## TypeScript이란 무엇인가요?

반면에 TypeScript은 JavaScript의 슈퍼셋입니다. Microsoft에서 개발된 TypeScript은 JavaScript에 정적 타이핑, 클래스 및 인터페이스를 추가하여 개발자에게 더 견고하고 오류가 적은 코딩 경험을 제공합니다. TypeScript의 주요 장점은 JavaScript로 컴파일될 수 있다는 것인데, 이는 JavaScript가 실행되는 모든 환경에서 사용할 수 있다는 것을 의미합니다.

# TypeScript와 JavaScript의 주요 차이점

- 정적 vs. 동적 타이핑:

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

- JavaScript: 동적 타입 언어인 JavaScript는 개발자가 데이터 유형을 정의할 필요가 없습니다. 이 유연성은 빠르고 쉬운 코딩을 가능케하지만 조심히 다루지 않으면 런타임 오류가 발생할 수 있습니다.
- TypeScript: TypeScript는 정적 타입을 강제하며 변수와 함수 반환 값을 정의해야 합니다. 이는 개발 단계에서 잠재적 오류를 잡아내어 런타임이 아닌 개발 단계에서 오류를 방지하는 추가적인 보안 계층을 제공합니다.

2. Tooling and Error Checking:

- JavaScript: JavaScript는 성숙해지고 현대적인 IDE들이 훌륭한 지원을 제공하지만 언어 자체는 개발자가 구현하기를 선택한 오류 확인을 제외한 추가적인 오류 확인을 강제하지 않습니다.
- TypeScript: TypeScript는 VSCode와 같은 IDE들과 통합되어 실시간 오류 확인, 자동완성 및 리팩터링 도구를 제공합니다. 이는 더 적은 버그와 특히 대규모 코드베이스에 대한 원활한 개발 프로세스를 가져다줍니다.

3. 객체 지향 프로그래밍 (OOP):

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

- JavaScript: 자바스크립트는 OOP를 지원하지만 클래스 기반의 전통적인 OOP 언어인 Java나 C#에서 온 개발자들에게는 직관적이지 않을 수 있습니다.
- TypeScript: TypeScript는 클래스, 인터페이스, 상속과 같은 전통적인 OOP 개념을 도입하여 전통적인 OOP 패러다임과 더 균일하게 만들었습니다. 이로 인해 객체지향 원칙에 익숙한 개발자에게 매력적인 선택지가 되고 있습니다.

4. 커뮤니티와 생태계:

- JavaScript: 수십 년간 발전해온 자바스크립트는 방대하고 성숙한 생태계를 갖고 있습니다. 대부분의 라이브러리와 프레임워크가 자바스크립트로 작성되거나 자바스크립트를 위해 작성되었으므로 최대 호환성을 보장합니다.
- TypeScript: TypeScript는 최근 몇 년간 엄청난 인기를 얻고 있으며 많은 주요 프로젝트에서 채택되고 있습니다. 대부분의 현대적 자바스크립트 프레임워크가 TypeScript 지원을 제공하고 있으며 많은 새로운 라이브러리가 TypeScript로 작성되고 있습니다.

그리고 가장 중요한 것은:

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

5. 학습 곡선:

- JavaScript: 프로그래밍이나 프론트엔드 개발에 처음이라면 JavaScript의 간단한 구문과 유연성 덕분에 배우기 쉬울 것입니다. 널리 사용되는 언어이기 때문에 다양한 학습 자료가 많이 있습니다.
- TypeScript: TypeScript는 추가 기능 때문에 학습 곡선이 가파릅니다. 그러나 정적 타입 언어에 익숙한 개발자들에게는 TypeScript의 구문과 구조가 더 직관적일 수 있습니다.

# JavaScript를 선택해야 하는 경우

- 빠른 프로토타이핑: 작은 프로젝트나 프로토타입을 빠르게 구축해야 할 때는 JavaScript의 유연성이 큰 장점이 될 수 있습니다. 엄격한 유형 지정이 없기 때문에 빠른 반복과 실험이 가능합니다.
- 작은 프로젝트: 작은 프로젝트이거나 JavaScript에 더 익숙한 개발자와 함께 작업할 때는 순수 JavaScript를 사용하면 오버헤드와 복잡성을 줄일 수 있습니다.
- 레거시 코드베이스: 기존의 큰 JavaScript 코드베이스를 다루고 있다면 모든 것을 TypeScript로 변환하는 데 드는 부담을 피하고 싶다면 JavaScript를 사용하는 것이 가장 현실적인 선택일 수 있습니다.

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

# TypeScript을 선택해야 하는 경우

- 대규모 애플리케이션: TypeScript은 코드베이스가 복잡하고 여러 명의 개발자 간 협력이 필요한 대규모 프로젝트에서 빛을 발합니다. 정적 타입 지정 및 객체지향 프로그래밍 기능은 복잡성을 관리하고 버그 발생 가능성을 줄여줍니다.
- 팀 협업: 팀 환경에서 TypeScript의 명시적 타입 및 인터페이스는 코드를 더 읽기 쉽고 유지보수하기 쉽게 만들어줍니다. 특히 동일 프로젝트에서 여러 명의 개발자가 작업하는 경우에 중요합니다.
- 오류 예방: 버그가 심각한 결과를 초래할 수 있는 중요한 애플리케이션을 다룰 때 TypeScript의 컴파일 시간 오류 확인은 비용이 든다는 실수로부터 당신을 보호해줄 수 있습니다.

# 결론: 어떤 것을 사용해야 할까요?

TypeScript와 JavaScript 사이의 선택은 프로젝트의 성격과 팀의 요구에 따라 결정됩니다. 만약 유연성과 속도를 중요시한다면, JavaScript는 강력하고 다재다능한 옵션으로 남아 있습니다. 그러나 더 구조화된 접근 방식과 더 나은 도구 및 오류 예방을 찾고 있다면, TypeScript가 더 나은 선택일 수 있습니다.

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

많은 경우, 최선의 해결책은 하이브리드 접근 방식일 수 있습니다. JavaScript로 시작하여 프로젝트가 성장하고 팀이 언어에 더 익숙해질수록 TypeScript를 점진적으로 도입하는 것입니다. 최종적으로 두 언어 모두 현대 프론트엔드 개발에서 자리를 차지하고 있으며, 각 언어의 장단점을 이해하면 적절한 도구를 선택하는 데 도움이 될 것입니다.

각 언어의 고유한 이점을 받아들여 더 견고하고 유지보수가 쉽고 효율적인 애플리케이션을 만들 수 있습니다. JavaScript, TypeScript 또는 두 언어를 혼합하여 선택하든, 전체 개발의 세계는 끝이 없이 다양한 가능성을 제공합니다. 중요한 것은 계속해서 배우고 실험하며, 당신과 당신의 프로젝트에 가장 잘 맞는 것을 찾는 것입니다. 즐거운 코딩하세요!

타입스크립트 vs 자바스크립트 2024년엔 어떤 것을 써야할까



상상해보세요. 당신이 부자 억만장자라고 상상해봅시다. 10명의 가족 구성원 사이에 분배할 큰 금액의 돈이 있습니다. 이 돈은 비밀번호로 보호된 계정에 보관되어 있습니다. 모든 10명에게 비밀번호를 주는 대신 조건이 있습니다: 적어도 10명 중 6명 이상이 합의하고 모일 때에만 돈에 액세스할 수 있도록 하고 싶습니다. 10명의 가족 구성원에게 비밀번호를 어떻게 전달해야 하나요? 6명 이상이 모이지 않는 이상 원래 비밀번호와 돈이 있는 계정에 액세스할 수 없도록 할까요?

Adi Shamir은 Shamir의 비밀 분할(Secret Sharing) 기법으로 이를 가능하게 했습니다. 이 간단하지만 매우 강력한 기법이 다양한 상황에서 유용하게 활용됩니다. 실제로 Shamir의 시크릿 셰어링이 실제 세계에서 사용되는 몇 가지 사례를 살펴보겠습니다.

- Hashicorp Vault은 고도의 보안을 위해 비밀 키를 여러 부분으로 나누어 여러 기계에 분산하는 데 SSS를 사용합니다.
- DNSSEC 루트 키는 7명의 수호자에 의해 보유되어 루트 키를 복구하기 위해 5명 이상이 모여 결정하는 경우에만 검색될 수 있습니다(Shamir의 시크릿 셰어링을 사용하는 것으로 알고 있습니다).
- 실제로 데이터 저장 장치의 오류 검사(예: 저장 디스크에서)를 위해 사용되는 리드-솔로몬 오류 수정 코드도 동일한 기본 수학 기법을 사용합니다.

이 게시물에서는 이 기술 뒤에 있는 간단하지만 흥미로운 수학을 이해하고 구현하는 방법을 알아보겠습니다.

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

# Shamir's Secret Sharing이란 무엇인가요?

2개의 점 (x1, y1) 및 (x2, y2)가 주어진다고 상상해보세요. 이 두 점을 연결하는 독특한 선의 방정식을 복구하는 것은 정말 쉽습니다.

이제 만약 하나의 점 (x1, y1)만 주어진다면 어떨까요? 딱 한 점만 주어졌을 때는 위의 선을 복구할 방법이 없습니다.

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


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

이제 동일한 개념을 차수 n의 임의의 다항식으로 확장합니다. 이 다항식을 복구하려면 최소 n + 1 점이 필요합니다. 이것이 Shamir의 비밀 공유 기술의 기초입니다.

Shamir는 비밀 값 'k'가 주어지면 상수 계수를 가진 다항식 F(x)로 인코딩할 수 있음을 언급했습니다. 't'는 상수항을 제외한 랜덤으로 선택된 계수입니다. 이는 차수 't'의 다항식을 제공합니다.

이제 이 다항식에서 'n'개의 점을 생성합니다.


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

그것을 'n' 참가자들 사이에 분배합니다. 'n' 참가자 중 t + 1이 만나면이 점수를 사용하여 다항식 방정식을 복구하고 그 비밀을 검색할 수 있습니다(즉, 상수 항의 계수).

이것은 간단해 보이죠? 잘 알려진 이 n개의 점에 대해 임의의 'n'에 대한 원래 다항식 방정식을 실제로 어떻게 재구성하는 것인가요?

계속 읽어보세요.....

# 랑그랑지 보간법

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

Lagrange는 곡선 상 적어도 t + 1개의 점이 주어지면 해당 't' 차 다항식을 구성하는 방법을 제공합니다. 실제로 이전 블로그 글에서 설명한 대로, 우리는 Hack The Box (HTB 2024) 챌린지를 해결하는 데 Lagrange의 보간법을 사용했습니다. 시간을 절약하기 위해 sage를 사용했지만, 여기에서는 실제로 수학을 이해하고 구현할 (sage를 사용하지 않는) 코드를 작성할 것입니다.

기본 아이디어는 제공된 각 점에 대해 라그랑지 기저 다항식을 생성하여 기저 다항식이 주어진 점에서 1로 평가되지만 다른 모든 점에서 0으로 평가되도록 하는 것입니다.

라그랑지 기저 다항식을 어떻게 생성할까요?

P0(x0) = 1임을 쉽게 확인할 수 있지만 다른 값 x(x1, x2, ... xn)에 대해 P0(x) = 0입니다. 마찬가지로 P1(x1) = 1이지만 다른 값 x(x0, x2, ... xn)에 대해 P1(x) = 0입니다.

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

요기에 있는 표 태그를 Markdown 형식으로 변경해보세요.

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

# 얼마나 안전한가요?

샤미르의 비밀 공유는 't' 중 'n' 비밀 공유가 공개될 때까지 정보 이론적 보안을 제공한다고 알려져 있습니다. 이러한 방식들은 무한한 컴퓨팅 자원과 시간을 갖춘 상대에 대해 안전합니다. 이것은 최근 NIST가 Post-Quantum 암호를 표준화하기로 발표한 것과 흥미로운 연관이 있습니다. 하지만 이에 대한 논의는 다음에... 기대해 주세요!

# 참고 자료:

- 비밀을 공유하는 방법: [링크](https://web.mit.edu/6.857/OldStuff/Fall03/ref/Shamir-HowToShareASecret.pdf)
- 라그랑주의 다항 보간: [링크](https://pages.cs.wisc.edu/~sifakis/courses/cs412-s13/lecture_notes/CS412_12_Feb_2013.pdf)
- 샤미르의 비밀 공유: [링크](https://en.wikipedia.org/wiki/Shamir%27s_secret_sharing)
- 리드-솔로몬 코드: [링크](https://en.wikipedia.org/wiki/Reed%E2%80%93Solomon_error_correction)
- 샤미르의 비밀 공유 그래프 참고: [링크](https://distributeddatastore.blogspot.com/2016/03/a-way-to-understand-shamirs-secret.html)
- 갈루아 필드: [링크](https://en.wikipedia.org/wiki/Finite_field)
- NIST 후언 양자 암호 및 서명 알고리즘: [링크](https://www.nist.gov/news-events/news/2024/08/nist-releases-first-3-finalized-post-quantum-encryption-standards)
- [링크](https://research.ibm.com/blog/nist-pqc-standards#-fn-5)
- [링크](https://www.schneier.com/blog/archives/2010/07/dnssec_root_key.html)

비밀을 나누는 방법 Shamirs Secret Sharing Scheme으로 알아보기



![Piper TTS](/assets/img/2024-08-26-EasyGuidetoText-to-SpeechonRaspberryPi5UsingPiperTTS_0.png)

파이퍼 TTS는 라즈베리 파이 4용으로 최적화된 특수 로컬 신경망 텍스트 음성 변환 시스템으로, 라즈베리 파이 5에도 적용할 수 있습니다. 빠르고 안정적인 음성 출력을 제공하며 오프라인, 집 내 네트워크 또는 온라인 상태에서 작동할 수 있습니다. 이러한 다양성으로 라즈베리 파이 프로젝트에 이중상태 인터넷 접속 불가 또는 홈 기반 IoT 시스템의 일부인 경우에 이상적입니다. 제가 학습 목적으로 만든 것처럼 특수 경량 텍스트 음성 처리 서버에 특화된 프로젝트에 특히 유용합니다.

파이퍼 TTS를 설정에 통합하면 이를 통해 기술 생태계의 상호작용하는 구성 요소로 변환하여 기능을 향상시키고 응용 범위를 확대할 수 있습니다. 기본적으로 라즈베리 파이에 목소리를 부여하여 기술 설정의 중추 요소로 만들어줍니다.

이 곳의 진정한 가치는 라즈베리 파이가 파이썬 스크립트를 실행한다는 것입니다. 이는 거의 상상할 수 있는 모든 방법으로 프로그래밍할 수 있게 해줍니다. 이를 통해 간단한 자동화 작업부터 복잡한 IoT 시스템까지 프로젝트를 광범위하게 사용자 정의하고 적응시킬 수 있습니다.

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

# IoT 프로젝트에 라즈베리 파이를 선택하는 이유는 무엇인가요?

일반적인 노트북, PC 또는 태블릿과 같은 기기 대신 라즈베리 파이나 유사한 제품을 선택하는 이유는 종종 해당 기기가 영구적인 IoT 중심 설치에 적합하다는 점입니다. 라즈베리 파이는 비용 효율성과 유연성, 그리고 충분한 처리 능력을 결합하여, 디지털 어시스턴트부터 가정용 미디어 시스템 그리고 환경 모니터링 스테이션과 같은 다양한 응용 프로그램을 수용할 수 있습니다. 이러한 기기들은 지속적으로 작동해야 하므로 장기간의 데이터 집중적인 작업에 이상적입니다.

# 기술 분야에서 약간의 재미 요소

다양한 리뷰에 따르면, 라즈베리 파이 5는 연산 능력 측면에서 자신의 전임자보다 약 2~3배 더 빠르다고 선언되었습니다. 최고 모델에서는 더 빠른 I/O 속도와 더 많은 메모리를 자랑합니다. 각각의 구체적인 작업은 정확한 숫자를 얻기 위해 별도의 벤치마킹이 필요하지만, 이러한 추정치는 일반적인 비교에 도움이 됩니다.

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

이러한 작업에는 Docker를 사용하는 것이 좋습니다. 도커는 확장 가능하고 격리된 솔루션을 제공하며 편리한 API로 래핑되어 쉽게 문서화할 수 있습니다. 이 기사에서는 ARM64용 Ubuntu를 기본 시스템으로 사용하여 동일한 방법을 채택할 것입니다. 이 지침은 라즈베리 파이 OS를 사용하는 설정에도 적용될 수 있으며, 주요 요구 사항은 올바르게 설정된 Docker 환경입니다.

Piper TTS에 대한 자세한 내용은 해당 GitHub 페이지에서 확인할 수 있습니다. 소스로부터 빌드하거나 미리 컴파일된 이진 패키지를 활용하는 방법에 대한 단계별 지침은 Piper TTS 설치 가이드를 참조하시기 바랍니다. 라즈베리 파이 5를 위한 미리 만들어진 레시피는 없지만 piper_linux_aarch64.tar.gz에서 제공되는 AArch64용 빌드된 이진 파일은 잘 작동합니다. 그러나 우리는 프로세스의 자세한 설명을 제공하기 위해 소스로 패키지를 빌드하는 방식을 계속할 것입니다.

# Piper 보이스

Piper를 위한 사용 준비가 된 보이스 패키지는 Hugging Face와 Piper GitHub 페이지의 VOICE.md 파일에서 제공됩니다. 각 패키지에는 ONNX 형식의 모델 자체와 JSON 구성 파일을 포함합니다. 또한, MODEL_CARD는 각 모델 및 사용 방법에 대한 라이선싱 정보 및 자세한 설명을 제공합니다. 예제 모델 aru medium은 다음 Docker 패키지에 포함되어 있지만, 사용자 기호에 따라 더 많은 보이스를 다운로드할 수 있습니다.

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

# 우분투에 Docker Engine 설치하기

이 단계를 따라 우분투 시스템에 Docker Engine이 올바르게 설치되었는지 확인하세요. 이미 시스템에 Docker가 설치되어 있는 경우 이 섹션을 건너뛰고 Dockerfile 장으로 진행할 수 있습니다. 더 포괄적인 가이드가 필요하다면 우분투용 공식 Docker 설치 가이드를 참고하세요.

## 충돌 가능성이 있는 패키지 제거

```js
for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done
```

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

## 도커의 공식 GPG 키 추가

```js
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
```

## 저장소 추가

```js
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

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

## 패키지 업데이트

```js
sudo apt-get update
```

## 최신 패키지 설치

```js
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

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

## 설치 확인

```js
sudo docker run hello-world
```

# Dockerfile

작업 디렉토리에 다음 내용을 가진 Dockerfile을 생성하세요:

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

```js
# 특정하고 안정적인 Ubuntu 버전 사용
FROM ubuntu:24.04 AS main

ARG DEBIAN_FRONTEND=noninteractive

# 기본 쉘을 bash로 교체
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# 코드 디렉토리 경로 설정
ENV CODE_PATH=/opt

# 필요한 패키지 업데이트 및 설치, 정리
RUN apt-get update && DEBIAN_FRONTEND=noninteractive TZ=Etc/UTC apt-get -y install tzdata \
	build-essential apt-utils vim bzip2 tar gzip git curl wget python3 python3-pip cmake ca-certificates \
	&& rm -rf /var/lib/apt/lists/*

# 파이썬 pip 설정
RUN echo $'[global]\nbreak-system-packages = true' > /etc/pip.conf

# pip 업그레이드
RUN pip install --quiet --upgrade pip --ignore-installed

# Piper TTS 레포지토리 복제
RUN git clone https://github.com/rhasspy/piper.git $CODE_PATH/piper
WORKDIR $CODE_PATH/piper
# 테스트된 Piper 버전 사용
RUN git checkout tags/2023.11.14-2

# Piper Phonemize 설치 및 설정
WORKDIR $CODE_PATH/piper/lib
RUN mkdir -p Linux-arm64/piper_phonemize
WORKDIR Linux-arm64/piper_phonemize
# 테스트된 Piper Phonemize 버전 사용
RUN wget https://github.com/rhasspy/piper-phonemize/releases/download/v1.1.0/libpiper_phonemize-arm64.tar.gz \
	&& tar -xf libpiper_phonemize-arm64.tar.gz \
	&& rm libpiper_phonemize-arm64.tar.gz \
	&& cp -r $CODE_PATH/piper/lib/Linux-arm64/piper_phonemize/lib/espeak-ng-data /usr/share/espeak-ng-data

# Piper 빌드 및 테스트
WORKDIR $CODE_PATH/piper
RUN cmake -Bbuild -DCMAKE_INSTALL_PREFIX=install
RUN cmake --build build --config Release
RUN cmake --install build
WORKDIR build
RUN ctest --config Release

# Piper를 위한 짧은 별칭 생성
RUN echo "alias piper='$CODE_PATH/piper/build/piper'" >> ~/.bashrc \
	&& source ~/.bashrc

# 모델 디렉토리 생성 및 샘플 음성 추가
RUN mkdir -p $CODE_PATH/piper/voices/aru/medium

# 각 URL을 새 줄에 포함한 목록 파일 생성
RUN echo -e "https://huggingface.co/rhasspy/piper-voices/resolve/main/en/en_GB/aru/medium/en_GB-aru-medium.onnx\n \
https://huggingface.co/rhasspy/piper-voices/resolve/main/en/en_GB/aru/medium/en_GB-aru-medium.onnx.json\n \
https://huggingface.co/rhasspy/piper-voices/resolve/main/en/en_GB/aru/medium/MODEL_CARD" > aru_medium_model_file_urls.txt

# 파일에 나열된 모든 URL 다운로드
RUN wget -i aru_medium_model_file_urls.txt -P $CODE_PATH/piper/voices/aru/medium

# 코드 경로로 이동
WORKDIR $CODE_PATH
```

# 라즈베리파이 5에서 Piper TTS 도커 컨테이너 빌드 및 관리

## 도커 이미지 빌드

시스템에 NVMe 저장소가 장착되어 있으면 빌드 프로세스에 약 4-5분 정도 소요됩니다. 빌드 시간은 라즈베리파이 5의 저장장치 성능과 RAM 구성에 따라 다를 수 있습니다. SD 카드 성능이 충분하지 않을 수 있어 빌드 시간이 늘어날 수 있으므로 NVMe 저장소 사용을 권장합니다. 그러나 SD 카드도 호환됩니다.

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

라즈베리 파이 5에서 piper-tts-rpi5 도커 이미지를 빌드하려면 Dockerfile이 있는 작업 디렉토리에서 다음 명령을 실행하세요:

```js
sudo docker build -t piper-tts-rpi5 .
```

## Docker 컨테이너 실행

도커 컨테이너를 처음 실행하고 이름을 piper-tts로 설정하려면 다음 명령을 사용하세요:

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

```js
sudo docker run --name piper-tts -it piper-tts-rpi5
```

## 컨테이너 내부

Piper Alias 확인: 컨테이너 내부에서 다음 명령어를 실행하여 piper 별칭이 올바르게 설정되었는지 확인하세요:

```js
piper -h
```

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

추론 실행: 텍스트를 음성으로 변환하려면 다음 명령을 사용하세요:

```js
echo "To address the elephant in the room: using text-to-speech technology isn’t just practical, it’s a lot of fun too!" | piper --model /opt/piper/voices/aru/medium/en_GB-aru-medium.onnx --output_file /opt/welcome.wav
```

컨테이너에서 나오기:

```js
exit
```

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

## 호스트 머신으로 결과 파일 복사하기

도커 컨테이너에서 생성된 오디오 파일을 호스트 머신으로 복사하려면 다음을 실행하세요:

```js
docker cp piper-tts:/opt/welcome.wav ./
```

## 컨테이너 관리

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

초기 설정 후에는 필요할 때 컨테이너를 이름으로 시작하고 중지할 수 있어요:

```bash
sudo docker start piper-tts
sudo docker stop piper-tts
```

## 컨테이너 외부

호스트 머신에서 추론 실행: 컨테이너에 들어가지 않고 텍스트를 음성으로 변환하는 추론을 수행하려면 다음 명령을 사용하세요:

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

```js
sudo docker exec -ti piper-tts sh -c 'echo "방 안 코끼리에 대한 문제를 다루자면: 텍스트 음성 변환 기술을 사용하는 것은 실용적일 뿐만 아니라 재미도 많이 있어요!" | /opt/piper/build/piper --model /opt/piper/voices/aru/medium/en_GB-aru-medium.onnx --output_file /opt/welcome.wav'
```

결과 데이터 복사: 결과는 다음과 같이 호스트로 복사할 수 있습니다:

```js
docker cp piper-tts:/opt/welcome.wav ./
```

## 생성된 .wav 파일 다운로드하기


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

라즈베리 파이에서 생성된 .wav 파일을 다운로드하는 방법은 몇 가지가 있습니다. 그 중 가장 편리한 방법 중 하나는 SSH 복사 명령을 사용하는 것입니다. 다음 명령을 실행하여 라즈베리 파이에서 파일을 안전하게 로컬 기기로 전송할 수 있습니다. 이때 라즈베리 파이 5 호스트 이름과 경로를 실제 정보로 업데이트해야 합니다:

```js
scp rpi5-hostname:/path/to/file.wav ./local/pc/path/
```

이 명령은 SCP (Secure Copy Protocol)를 사용하여 SSH를 통해 파일을 안전하게 전송하므로 파일을 검색하는 믿을 만한 선택지입니다.

# 결론

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

이 기본 지침은 라즈베리 파이 5 호스팅 파이퍼 TTS 프로토 타입을 시작하는 데 필요한 필수 요소를 제공합니다. 단계는 직관적인 방식으로 설명되어 있어 추가 자동화를 통해 조정하고 개선하거나 필요에 따라 Ubuntu 사용자를 만들고 파일 경로를 조정할 수 있습니다. 이 안내서가 유용하다고 생각되거나 여러분의 프로젝트에 몇 가지 아이디어를 준다면 좋아요 버튼을 눌러 다른 사람들과 공유하기를 망설이지 마세요.

더 많은 통찰력과 토론을 위해 저와 연결하세요:

- LinkedIn
- Twitter

읽어 주셔서 감사합니다!

라즈베리 파이 5에서 Piper TTS를 활용한 텍스트 음성 변환 방법



LangChain은 여러 문서 로더를 제공하여 다양한 유형의 문서를 애플리케이션으로 손쉽게 가져올 수 있도록 도와줍니다. 이러한 로더들은 다양한 파일 형식을 처리할 수 있도록 설계되어 다양한 소스에서 데이터를 처리하고 통합하는 것을 더 쉽게 만들어줍니다. 아래에서 LangChain에서 제공되는 주요 문서 로더 몇 가지를 살펴보겠습니다:

1. TextLoader

- 목적: 일반 텍스트 파일을 불러옵니다.
- 특징: 인코딩 및 오류 처리를 지정할 수 있는 옵션과 함께 기본 텍스트 파일을 처리합니다.
- 사용 방법

```js
from langchain.document_loaders import TextLoader

loader = TextLoader("nvda_news_1.txt")
documents = loader.load()
documents

## 만약 텍스트 파일에 utf8이 있는 경우
loader = TextLoader("genai_future.txt", encoding='utf-8')
```

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

2. PDF로더

- 목적: PDF 파일을 로드하고 처리합니다.
- 특징: 다양한 레이아웃과 구조를 처리하여 PDF에서 텍스트를 추출합니다.
- 사용법

```python
from langchain.document_loaders import PyPDFLoader
loader = PyPDFLoader('2024prq1.pdf') ##2024prq1은 샘플 pdf 파일입니다.
documents = loader.load()
documents
```

3. CSV로더

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

- 목적: CSV 파일에서 데이터를 로드합니다.
- 특징: CSV 행을 구조화된 문서로 변환하며, 헤더 및 데이터 처리를 사용자 정의할 수 있습니다.
- 사용 방법

```js
from langchain.document_loaders.csv_loader import CSVLoader
loader = CSVLoader(file_path="movies.csv")
data = loader.load()
data

## source_column을 추가하려면
loader = CSVLoader(file_path="movies.csv", source_column="title")
data = loader.load()
data
data[0].page_content
```

## 4. UnstructuredURLLoader

Langchain의 UnstructuredURLLoader는 내부적으로 URL에서 콘텐츠를 로드하기 위해 비구조적인 python 라이브러리를 사용합니다.

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

https://unstructured-io.github.io/unstructured/introduction.html

```js
#필수 라이브러리 설치, libmagic는 파일 유형을 감지하는 데 사용됩니다
#!pip3 install unstructured libmagic python-magi
c python-magic-bin
loader = UnstructuredURLLoader(
    urls = [
        "https://www.moneycontrol.com/news/business/banks/hdfc-bank-re-appoints-sanmoy-chakrabarti-as-chief-risk-officer-11259771.html",
        "https://www.moneycontrol.com/news/business/markets/market-corrects-post-rbi-ups-inflation-forecast-icrr-bet-on-these-top-10-rate-sensitive-stocks-ideas-11142611.html"
    ]
)
loader = UnstructuredURLLoader(urls=urls)

data = loader.load()

data[0]
```

5. HTMLLoader

- 목적: HTML 파일을로드하며 주로 웹 페이지 콘텐츠에 사용됩니다.
- 기능: HTML 내용을 구문 분석하고 텍스트를 추출하며 HTML에 특화된 세부 사항을 처리합니다.
- 사용법

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

```js
from langchain_community.document_loaders import UnstructuredHTMLLoader
file_path = "sample1.html"
loader = UnstructuredHTMLLoader(file_path)
data = loader.load()

print(data)
```

6. MarkdownLoader

- 목적: Markdown 파일을 로드합니다.
- 특징: Markdown에서 내용을 추출하면서 헤더 및 목록과 같은 구조를 보존합니다.
- 사용 방법

```js
from langchain_community.document_loaders import UnstructuredMarkdownLoader
loader = UnstructuredMarkdownLoader('README.md',mode="elements", strategy="fast",)
documents = loader.load()
documents[0]
```

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

7. DocxLoader

- 목적: Microsoft Word `.docx` 파일을 로드합니다.
- 기능: Word 문서에서 텍스트 및 구조를 추출하며 복잡한 형식을 처리합니다.
- 사용법:

```js
#!pip install --upgrade --quiet  docx2txt
from langchain_community.document_loaders import Docx2txtLoader
loader = Docx2txtLoader('AI Era.docx')
documents = loader.load()
documents
```

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

- 목적: JSON 파일에서 데이터를 로드합니다.
- 기능: JSON 필드를 문서 구조로 매핑하여 복잡한 데이터 추출 및 처리를 가능하게 합니다.
- 사용 방법

```js
#!pip install -U jq
#!pip install pathlib
from langchain_community.document_loaders import JSONLoader
import json
from pathlib import Path
file_path='example_2.json'
data = json.loads(Path(file_path).read_text())
loader = JSONLoader(
         file_path=file_path,
         jq_schema='.quiz',
         text_content=False)
documents = loader.load()
documents
```

9. ImageLoader

- 목적: 이미지에서 텍스트를 추출합니다 (OCR).
- 기능: 광학 문자 인식 (OCR)을 사용하여 이미지에서 텍스트를 추출합니다.
- 사용 방법

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

```python
from langchain_community.document_loaders import UnstructuredImageLoader
loader = UnstructuredImageLoader('RAG.png', mode="elements", strategy="fast",)
documents = loader.load()
documents
```

10. SQLiteLoader

- 목적: SQLite 데이터베이스에서 데이터를 로드합니다.
- 기능: SQLite 데이터베이스에 대한 쿼리를 실행하고 결과를 문서로 변환합니다.
- 사용법

```python
from langchain.document_loaders import SQLiteLoader
loader = SQLiteLoader('your_database.db')
documents = loader.load()
```  

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

TextSplitter

텍스트 스플리터가 처음부터 왜 필요한가요?

LLM은 토큰 제한이 있습니다. 따라서 텍스트를 작은 청크로 나누어야 합니다. 이를 통해 각 청크의 크기가 토큰 제한 이하가 되도록 합니다. 이것을 할 수 있게 해주는 랭체인에는 다양한 텍스트 스플리터 클래스가 있습니다.

```js
text = """인터스텔라는 2014년 크리스토퍼 놀란이 공동으로 기획, 감독 및 제작한 역사적인 공상 과학 영화입니다.
매튜 맥커너히, 앤 해서웨이, 제시카 차스테인, 빌 얼윈, 엘런 버스틴, 맷 데이먼, 마이클 케인이 출연합니다.
인류가 재앙과 기근에 휩싸인 멸망적인 미래를 배경으로 하며, 이 영화는 사토론 근처의 웜홀을 통과하는 우주 비행사들을 따릅니다.

브라더스 크리스토퍼와 조나단 놀란이 2007년에 개발한 대본에서 비롯된 각별한 스크립트를 작성했으며 원래는 스티븐 스필버그의 연출로 준비되었지만 결국 놀란이 연출했습니다.
캘텍 이론 물리학자이자 2017년 노벨 물리학상 수상자인 킵 토른은 이 영화의 실행 제작자이자 과학 컨설턴트로 활약했으며, 이에 대응하는 책인 '인터스텔라의 과학'을 썼습니다.
촬영감독인 호이트 반 호이테마는 파나비전 아나모픽 형식으로 35mm 영화 필름으로 촬영하고 IMAX 70mm로 제작되었습니다. 주요 촬영은 2013년 말에 앨버타, 아이슬란드, 로스앤젤레스에서 이루어졌습니다.
인터스텔라는 실제 및 소형 효과를 적극 활용하고, 더블 네거티브 사가 추가적인 디지털 효과를 만들었습니다.

인터스텔라는 2014년 10월 26일 로스앤젤레스에서 최초 상영되었습니다. 미국에서는 먼저 필름으로 발매되어 디지털 프로젝터를 사용하는 장소로 확대되었습니다. 영화는 비평가들로부터 일반적으로 긍정적인 평가를 받았으며 전 세계에서 6억 7700만 달러 이상(이후 재개봉을 통해 7억 1500만 달러)를 벌어내어 2014년에서 10번째로 많이 벌어들인 영화가 되었습니다.
이 영화는 과학적 정확성과 이론적 천문학의 묘사에 대해 천문학자들로부터 칭찬을 받았으며 제87회 아카데미 시상식에서 다섯 개 부문 후보에 올랐으며 최고의 시각 효과상을 수상하고 다른 다양한 포상도 받았습니다.""" 
```

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

데이터를 청크로 나눌 수는 원래의 Python에서 가능하지만 귀찮은 과정일 수 있어요. 또한 필요한 경우, 각 청크가 해당 LLM의 토큰 길이 제한을 초과하지 않도록 보장하기 위해 다양한 구분자로 반복적으로 실험해야 할 수도 있어요.

Langchain은 텍스트 스플리터 클래스를 통해 더 나은 방법을 제공해요.

Langchain의 텍스트 스플리터 클래스 사용하기

## CharacterTextSplitter

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


```js
from langchain.text_splitter import CharacterTextSplitter

splitter = CharacterTextSplitter(
    separator = "\n",
    chunk_size=200,
    chunk_overlap=0
)
chunks = splitter.split_text(text)
len(chunks)
for chunk in chunks:
    print(len(chunk))

#As you can see, even though we specified 200 as the chunk size, the chunks created ended up being larger than 200 due to the splitting based on \n.
```

Langchain에서 또 다른 클래스를 사용하여 텍스트를 재귀적으로 분할할 수 있습니다. 이 클래스는 RecursiveTextSplitter입니다. 그것이 어떻게 작동하는지 살펴봅시다.

RecursiveTextSplitter

```js
text
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.text_splitter import RecursiveCharacterTextSplitter

r_splitter = RecursiveCharacterTextSplitter(
    separators = ["\n\n", "\n", " "],  # 요구사항에 따른 구분 기준 목록 (기본값: ["\n\n", "\n", " "])
    chunk_size = 200,  # 생성되는 각 청크의 크기
    chunk_overlap  = 0,  # 컨텍스트 유지를 위해 청크 사이의 겹치는 크기
    length_function = len  # 크기를 계산하는 함수, 현재는 문자열의 길이를 나타내는 "len"을 사용하고 있지만, 다른 토큰 카운터를 전달할 수 있습니다)
)
chunks = r_splitter.split_text(text)

for chunk in chunks:
    print(len(chunk))
```

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

LangChain의 이 문서 로더들은 여러 데이터 원본을 자연어 처리 또는 기계 학습 파이프라인에 쉽게 통합할 수 있게 도와줍니다.

샘플 예제를 보시려면 제 GitHub 링크를 참고해주세요.

좋은 학습되세요 👩‍💻

Langchain 문서 로더 예제로 알아보는 방법



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

파이썬은 가독성과 유연성으로 유명하지만 속도에 대해 비판을 받기도 합니다. 파이썬이 가장 빠른 언어는 아니지만 올바른 기술을 활용하여 성능을 향상시킬 수 있습니다. 이 게시물에서는 전통적인 "그냥 C를 사용하세요"의 말을 넘어 다양한 시나리오에 적용되는 실용적인 최적화 전략을 탐구합니다.

# 최적화하기 전에, 황금 규칙

최적화는 책의 모든 꼼수를 맹목적으로 적용하는 것이 아닙니다. 코드 가독성을 희생하지 않으면서 원하는 성능 향상을 달성하기 위해 신중한 결정을 내리는 것입니다.

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

- 프로필 먼저 만들고, 나중에 최적화하세요

병목 현상이 어디에 있는지 알고 있다고 가정하지 마세요. cProfile, Py-Spy, 또는 Scalene과 같은 프로파일러를 사용하여 코드의 실제 성능 이슈를 식별하세요. 이 데이터 주도적 접근 방식을 통해 진정으로 중요한 부분에 집중하고 불필요한 복잡성으로 이어질 수 있는 조기 최적화를 피할 수 있습니다.

2. 적절한 데이터 구조 선택하기

파이썬은 다양한 데이터 구조를 제공합니다. 사용 사례에 적합한 것을 선택하면 성능에 큰 영향을 미칠 수 있습니다. 예를 들어, 세트 조회(O(1) 평균)는 일반적으로 대량 데이터셋에 대한 목록 검색(O(n))보다 빠릅니다. 하지만 이 이점은 충분히 큰 컬렉션 및 해시 충돌이 적을 때에 더욱 명백합니다.

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

3. 알고리즘이 중요하다

성능 향상의 가장 중요한 요소는 효율적인 알고리즘을 선택하는 것입니다. 문제에 대한 접근 방식을 재고해보세요. 때로는 다른 알고리즘을 사용하면 세제곱의 실행 시간을 로그 시간으로 바꿀 수도 있습니다! 미세 최적화는 도움이 될 수 있지만, 큰 성과는 대부분 더 나은 알고리즘 설계에서 나옵니다.

# Pythonic Power-Ups

자 이제, Python의 강점을 활용하는 몇 가지 최적화 기술을 살펴보겠습니다.

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

- 리스트 표현식 및 생성기

이러한 Python 구문은 간결하고 종종 빠른 코드를 작성하는 데 도움이 됩니다.

리스트 표현식은 리스트를 만드는 간결한 방법을 제공하며, 많은 경우에 기존의 for 루프보다 빠르게 동작합니다. 특히 작업이 간단하고 최소한의 논리가 필요한 경우에 유용합니다.

```python
# 단순한 경우에 기존 루프보다 빠릅니다
squares = [x**2 for x in range(10)]
```

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

생성기는 메모리를 효율적으로 활용하는 강력한 기능을 가지고 있습니다. 데이터를 모두 메모리에 저장하는 대신 필요할 때 값을 생성합니다. 대규모 데이터 세트나 무한 시퀀스를 반복할 때 사용하세요.

```js
# 메모리를 효율적으로 사용하는 생성기
def even_numbers(max):
    for i in range(2, max + 1, 2):
        yield i
```

작은 데이터 세트나 복잡한 논리의 경우, for 루프와 전통적인 루프 간 성능 차이가 무시할 만큼 작을 수 있으며, 가독성이 우선시되어야 합니다.

2. NumPy의 강점을 활용하세요.

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

숫자 연산에 있어서 NumPy의 속도와 효율성은 아주 강력합니다. NumPy의 벡터화 연산은 C로 구현되어 순수한 Python 루프보다 수십 배 빠를 수 있습니다. 벡터화를 효과적으로 활용할 수 있다면 결과를 향상시킬 수 있어요.

```js
import numpy as np

# NumPy를 사용한 벡터화 연산
array1 = np.array([1, 2, 3])
array2 = np.array([4, 5, 6])
result = array1 + array2  # 요소별 덧셈
```

하지만 만약 문제가 단순히 수치에 의존적이지 않거나 큰 데이터셋을 다루는 것이 아니라면, NumPy를 사용하는 오버헤드가 성능 이점을 상쇄할 수 있어요.

3. 메모이제이션: 과거를 기억하고, 미래를 가속화하세요

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

여러번 반복해서 동일한 입력 값으로 계산하는 코드를 작성하고 있다면, 메모이제이션은 비싼 함수 호출의 결과를 캐싱하여 시간을 절약할 수 있습니다. Python의 functools.lru_cache 데코레이터를 사용하면 이를 쉽게 할 수 있습니다:

```js
from functools import lru_cache

@lru_cache(maxsize=None)
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)

# 캐시된 결과는 이후 호출에 사용됩니다
print(factorial(10))
print(factorial(10))
```

메모이제이션은 강력하지만 메모리 사용에 주의해야 합니다. 제어되지 않는 캐싱은 특히 반환 값이 큰 함수의 경우 과도한 메모리 소비로 이어질 수 있습니다.

# 순수한 파이썬을 넘어서

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

가끔은 순수한 Python으로 처리할 수 없는 성능 병목 현상이 발생합니다. 이럴 때는 다음 전략을 고려해보세요:

- **Cython**: Python-C Bridge

Cython을 사용하면 C로 번역되는 Python과 유사한 코드를 작성할 수 있어서, 계산 집약적인 작업에 특히 속도 향상을 가져올 수 있습니다. 그러나 Python 코드를 Cython으로 단순히 변환하는 것만으로는 충분하지 않을 수 있습니다. 정적 유형 선언을 추가하고 일부 C 개념을 이해하는 것이 중요합니다. 이러한 작업을 통해 의미 있는 성능 향상을 이룰 수 있습니다.

- **PyPy**: Just-in-Time (JIT) Wonder

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

PyPy는 대안 Python 인터프리터로서, 실행 중에 자주 실행되는 코드 경로를 최적화하기 위해 JIT 컴파일을 사용합니다. 이는 많은 작업 부하에서 상당한 성능 향상으로 이어질 수 있습니다. 그러나 특정 라이브러리와의(특히 C 확장이 있는 경우) 호환성이 제한될 수 있으므로 반드시 특정 환경에서 테스트해보세요.

3. Rust: 속도가 타협할 여지가 없을 때

속도가 중요한 응용 프로그램의 경우, Rust로 성능에 민감한 모듈을 작성하는 것이 타당한 선택일 수 있습니다. PyO3와 같은 도구를 사용하면 Rust를 Python과 쉽게 통합할 수 있지만, 이 접근 방식은 강력한 Rust 지식이 필요하고 추가 복잡성과 유지 보수 부담을 도입합니다.

# 결론

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

파이썬 코드를 최적화하는 것은 섬세한 예술입니다. 성능, 가독성 및 유지보수성 사이의 적절한 균형을 이루는 것이 중요합니다. 먼저 프로파일링을 수행하고 적절한 도구와 기술을 선택하며 항상 코드의 명확성을 유지하도록 노력해야 합니다. 연습과 지속적인 개선에 집중하면 우아하고 효율적인 파이썬 코드를 만들 수 있습니다.

함께 참여해 주셔서 감사합니다. 이 글을 즐겼다면 박수를 치고 더 많은 통찰력 있는 이야기와 토론을 위해 팔로우해 주세요!

파이썬 초보가 반드시 봐야하는 개념 정리



## FastHTML 소개와 예제

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

안녕하세요! AI 애플리케이션을 위한 웹 프론트엔드를 개발하는 Python 개발자 여러분. 저도 Python 개발자이며, 웹 프론트엔드 기술에 대한 능력 부족으로 항상 어려움을 겪었습니다. 사내 웹 프론트엔드 개발자들은 가끔만 도와 줄 뿐이었고, 제 지식은 개발에 부족함이 있었습니다.

Streamlit 패키지가 인기를 얻기 시작하면서 Python으로 애플리케이션을 개발할 수 있는 기회를 얻게 되었습니다. 그러나 Streamlit으로 개발한 애플리케이션은 실제 웹 애플리케이션 같지 않았고, 보다 복잡한 애플리케이션에 대해서는 이상적인 선택이 아니었습니다.

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

그래서 새로운 프레임워크인 "FastHTML"가 좋은 소식이었어요. 그래서 즉시 살펴보았죠. 이 기사와 이어지는 글에서는 첫 경험들을 소개하면서 샘플 애플리케이션과 함께 소개하고 싶어요. FastAPI 프레임워크로 Python에서 REST 인터페이스를 개발하는 데 사용되는 FastHTML이란 이름의 유사성은 우연이 아니라 의도적이에요. 시스템을 설계할 때 FastAPI에서 큰 영감을 받았답니다.

## FastHTML에 대한 정보

FastHTML의 문서는 https://docs.fastht.ml/에서 찾을 수 있으며, 오픈 소스 프로젝트의 소스 코드와 예제는 https://github.com/AnswerDotAI/fasthtml에서 확인할 수 있어요. 이 프레임워크는 매우 가볍고 잘 맞는 매우 가벼운 패키지에 기초하여 성능 범위를 실현해요. 필수 기술은 AJAX 기능을 제공하는 HTMX이며, 웹 소켓 등이 포함돼 있어요. 미니멀한 PicoCSS가 CSS 프레임워크로 사용돼요.

## 샘플 애플리케이션

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

아래에서는 FastHTML의 핵심 구성 요소를 예제 응용 프로그램을 사용하여 소개하겠습니다. 샘플 응용 프로그램은 간단한 사용자 인증을 실현하고 로그인에 성공한 후 시작 페이지를 표시합니다. 샘플 응용 프로그램의 코드를 단계별로 살펴보겠습니다.

```js
from fasthtml.common import *
import os
from hmac import compare_digest
from dotenv import load_dotenv

load_dotenv()

userpw = os.environ.get("PW")
```

첫 번째 줄은 FastHTML 함수를 가져오고, 다른 가져오기 문은 환경 변수를 처리하는 데 필요합니다. 응용 프로그램을 간단하게 유지하려면 인증에 사용되는 비밀번호를 환경 변수에 저장합니다. 비밀번호를 확인하기 위해 compare_digest를 사용합니다.

```js
login_redir = RedirectResponse('/login', status_code=303)
def before(req, sess):
    auth = req.scope['auth'] = sess.get('auth', None)
    if not auth: return login_redir
bware = Beforeware(before, skip=[r'/favicon\.ico', r'/static/.*', r'.*\.css', '/login'])
```

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

각 페이지를로드하기 전에 시스템이 사용자가 로그인했는지 확인합니다. 그렇지 않으면 사용자가 로그인 페이지로 리디렉트됩니다.

```js
app = FastHTML(
    before=bware,
    hdrs=( picolink, Style(':root { --pico-font-size: 100%; }'))
    )
```

FastHTML 애플리케이션이 정의되었으며 이전에 정의한 사용자 확인 함수가 통합되었습니다. 머리글에 PicoCSS 및 기본값을 확장하거나 덮어 쓰는 클래스가 추가되었습니다.

```js
rt = app.route

@rt("/login")
def get():
    frm = Form(
        Input(id='name', placeholder='Name'),
        Input(id='pwd', type='password', placeholder='Password'),
        Button('login'),
        action='/login', method='post')
    return Titled("Login", frm)

@rt("/login")
def post(login:Login, sess):
    if not login.name or not login.pwd: return login_redir
    if not compare_digest(userpw.encode("utf-8"), login.pwd.encode("utf-8")):
        return login_redir
    sess['auth'] = login.name
    return RedirectResponse('/', status_code=303)

@app.get("/logout")
def logout(sess):
    del sess['auth']
    return login_redir
```

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

개별 라우트의 Post 및 Get 호출을 위한 함수가 정의되었습니다. 간단한 예제에서는 로그인 및 로그아웃을 위한 라우트가 있습니다. 사용자 이름과 비밀번호 필드로 구성된 간단한 양식이 지정되며, 환경 변수에 저장된 비밀번호("PW")가 입력되었는지 확인합니다. 사용자 이름은 예시로 임의로 지정됩니다.

로그아웃 라우트에서는 세션에 저장된 인증이 삭제되며 사용자가 로그아웃됩니다.

```js
# 메인 페이지
@rt("/")
def get(auth):
    title = f"{auth}님이 로그인함"
    top = Grid(H1(title), Div(A('로그아웃', href='/logout'), 
      style='text-align: right'))
    return Title(title), Main(top, P("일부 내용"), cls='container')

serve()
```

메인 페이지 라우트에서 사용자 이름과 일부 다소 가짜 콘텐츠가 표시됩니다. 이 예제는 FastHTML이 응답으로 해당 태그를 생성하는 각 HTML 태그용 함수를 제공한다는 것을 보여줍니다. grid 함수는 간단한 그리드 레이아웃을 위해 사용됩니다. 마지막 줄은 FastHTML 서버를 시작합니다.

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

로그인에 성공한 후 시작 페이지의 콘텐츠가 표시됩니다. 이 예제에서는 제목, 로그아웃 옵션 및 페이지 콘텐츠가 포함됩니다. 아래 그림을 참조하세요.

![start page content](/assets/img/2024-08-26-AWeb-ApplicationFrameworkforPythonDevelopers_1.png)

완전한 소스 코드는 다음과 같습니다:

```js
from fasthtml.common import *
import os
from hmac import compare_digest
from dotenv import load_dotenv

load_dotenv()

userpw = os.environ.get("PW")

login_redir = RedirectResponse('/login', status_code=303)
def before(req, sess):
    auth = req.scope['auth'] = sess.get('auth', None)
    if not auth: return login_redir
bware = Beforeware(before, skip=[r'/favicon\.ico', r'/static/.*', r'.*\.css', '/login'])

app = FastHTML(
    before=bware,
    hdrs=( picolink, Style(':root { --pico-font-size: 100%; }'))
    )

rt = app.route

@rt("/login")
def get():
    frm = Form(
        Input(id='name', placeholder='Name'),
        Input(id='pwd', type='password', placeholder='Password'),
        Button('login'),
        action='/login', method='post')
    return Titled("Login", frm)

@rt("/login")
def post(login:Login, sess):
    if not login.name or not login.pwd: return login_redir
    if not compare_digest(userpw.encode("utf-8"), login.pwd.encode("utf-8")): 
      return login_redir
    sess['auth'] = login.name
    return RedirectResponse('/', status_code=303)

@app.get("/logout")
def logout(sess):
    del sess['auth']
    return login_redir

# Main page
@rt("/")
def get(auth):
    title = f"{auth}님이 로그인 중"
    top = Grid(H1(title), Div(A('logout', href='/logout'), style='text-align: right'))
    return Title(title), Main(top, P("내용"), cls='container')

serve()
```

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

이 예제는 FastHTML의 기본 구조와 몇 가지 기본 개념을 보여줍니다. 코드가 main.py 파일에 있다면 Python main.py로 시작할 수 있습니다.

DataDrivenInvestor.com에서 저희를 방문해주세요.

DDIntel을 여기서 구독하세요.

크리에이터 생태계에 여기서 참여하세요.

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

DDI 공식 텔레그램 채널: [링크](https://t.me/+tafUp6ecEys4YjQ1)

LinkedIn, Twitter, YouTube, 그리고 Facebook에서 팔로우해 주세요.

파이썬 개발자를 위한 웹 애플리케이션 프레임워크 Django, Flask 등 정리




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

display: none에서 display: block으로 요소를 애니메이션하는 것은 CSS에서 오랫동안 어려운 과제였습니다. 전통적인 display 속성은 전환이 지원되지 않아 부드러운 애니메이션을 만들기 어렵게 만들었습니다. 그러나 @starting-style at-rule 및 다른 새로운 CSS 기능의 도입으로 이제 이러한 상태 간 부드러운 전환을 만들기 위한 강력한 도구를 사용할 수 있습니다.

[YouTube Link](https://www.youtube.com/watch?v=vmDEHAzj2XE)

# display: none의 문제점


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

통상 요소를 display: none에서 display: block으로 애니메이팅하는 것은 불가능했었습니다. 그 이유는 다음과 같습니다:

- display 속성은 애니메이션을 지원하지 않습니다.
- 요소가 display: none 상태일 때, 문서 흐름에서 제거되므로 속성을 전환할 수 없습니다.

# 원활한 애니메이션을 위한 새로운 CSS 기능

크롬 116 및 117은 이산 프로퍼티에 대한 부드러운 애니메이션과 전환을 가능케 하는 네 가지 새로운 웹 플랫폼 기능을 도입했습니다:

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

- 키프레임 타임라인에서 display 및 content-visibility 애니메이션 효과 지정 (Chrome 116+)
- transition-behavior 속성에서 allow-discrete 키워드 사용 가능 (Chrome 117+)
- 입력 애니메이션을 위한 @starting-style 규칙 (Chrome 117+)
- 애니메이션 중 상위 레이어 동작 제어를 위한 overlay 속성 (Chrome 117+)

이러한 기능들을 자세히 살펴보겠습니다.

# 키프레임에서 display 애니메이션

Chrome 116부터 키프레임 규칙에서 display 및 content-visibility를 사용할 수 있습니다. 여기 예시가 있습니다:

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

```js
.card {
  animation: fade-out 0.5s forwards;
}
```

```js
@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}
```

이 애니메이션은 요소를 서서히 흐려지게 만들고 마지막에 display: none으로 설정합니다.

# transition-behavior 속성

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

디스플레이와 같은 이산 속성을 전환하려면 transition-behavior 속성의 allow-discrete 모드를 사용하세요:

```js
.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete;
}
```

```js
.card.fade-out {
  opacity: 0;
  display: none;
}
```

# Entry 애니메이션을 위한 @starting-style Rule

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

`@starting-style` 규칙을 사용하면 진입 애니메이션의 초기 상태를 정의할 수 있습니다:

```js
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}
```

```js
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
```

이 설정은 높이가 0이고 투명도가 0인 상태에서 마지막 상태로의 부드러운 진입 애니메이션을 생성합니다.

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

# 최상위 레이어로 요소 애니메이션 적용하기

최상위 레이어를 사용하는 대화상자(dialogs)나 팝오버(popovers)와 같은 요소들에 대해 부드러운 애니메이션을 위해 @starting-style과 오버레이(overlay) 속성을 사용할 수 있습니다:

```js
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}
```

```js
dialog[open] {
  translate: 0 0;
}
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}
```

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

오버레이 속성은 요소가 다른 요소에 의해 잘림이나 가림을 받지 않고 애니메이션 중 상단 레이어에 유지되도록 보장합니다.

# CodePen 예시

다음은 이러한 기술을 보여주는 CodePen입니다:

CodePen: @starting-style을 사용하여 display: none으로부터 애니메이션화

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

# 브라우저 지원

2024년 현재, 대부분의 최신 브라우저에서 Chrome, Edge 및 Firefox를 포함하여 이러한 기능이 지원됩니다. 그러나 최신 브라우저 지원 정보를 확인하려면 "Can I Use"를 확인하는 것이 좋습니다.

# 이전 브라우저를 위한 대체 방법

이러한 새로운 기능을 지원하지 않는 브라우저를 위해 JavaScript 기반의 대체 방법을 사용할 수 있습니다.

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

```js
if (!CSS.supports('@starting-style {}')) {
  // 여기에 대체 애니메이션 논리 처리
}
```

# 결론

@starting-style, transition-behavior: allow-discrete 및 overlay 속성의 도입은 display: none에서 display: block으로 요소를 애니메이션화하는 오랜 문제에 우아한 해결책을 제공합니다. 이러한 기능을 사용하면 복잡한 JavaScript 우회를 필요로하지 않고 부드럽고 효율적인 전환을 가능하게 합니다.

# 참고문헌

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

- CSS @starting-style — MDN Web Docs
- Display None에서 Block으로 애니메이션 효과 주기 — YouTube
- 사용 가능한가: @starting-style
- 부드러운 입장 및 퇴장 애니메이션을 위한 네 가지 새로운 CSS 기능 — Chrome 개발자
원문: https://centrodph.github.io/gerardo-perrucci/blog/css/animate-transition-from-display-none

display none에서 display block으로 전환하는 애니메이션을 만드는 방법



## 라이브러리 사용 안 함, 자바스크립트 없이 CSS 키프레임 및 스크롤 스냅 모듈만 활용하기

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

# 소개

강력한 컴퓨터를 사용하는 웹 개발자로서, 우리는 메모리나 안정적인 인터넷 연결과 같은 것이 문제가 되지 않는다는 사실을 종종 고려하지 않습니다. 그러나 우리의 앱이 실행되는 환경에서는 문제가 될 수 있습니다.

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

예를 들어, Raspberry Pi에서 실행할 웹 앱을 만드는 경우가 있습니다. 이는 쇼핑몰의 키오스크, 의사 사무실 또는 놀이 공원과 같은 곳에 적합할 수 있습니다.

작년에는 간단한 웹 애플리케이션을 패키징하고 셀룰러 기반 Blues Notecard를 사용하여 Raspberry Pi에 다운로드하는 방법을 보여주기 위해 직무를 맡게 되었습니다.

날씨 앱을 데모로 선택했는데, 사용자에게 도시 목록을 제공하고 해당 도시의 날씨 예보를 가져와 계속해서 회전하는 캐러셀에 표시하는 앱이었습니다.

앱 크기를 작게 유지하여 (셀룰러 데이터를 통해 Raspi로 더 빨리 다운로드할 수 있도록), 순수한 HTML, CSS 및 약간의 바닐라 JavaScript로 만들었습니다.

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

각 도시의 일기 예보의 자동 스크롤 기능을 구현하기 위해 일반적으로 캐러셀 라이브러리를 찾아보겠지만, 앱을 가볍게 유지하고 싶어서 몇 가지 연구를 하다가 필요한 기능을 CSS만으로 구현할 수 있다는 것을 발견했어요.

오늘은 CSS 키프레임 애니메이션과 스크롤 스냅 모듈 그리고 몇 가지 잘 정의된 CSS 클래스를 사용하여 CSS만으로 자동 스크롤이 가능한 캐러셀을 만드는 방법을 알려드릴게요.

다음은 최종 자동 스크롤 캐러셀 애니메이션이 어떻게 보이게 될 지에 대한 예시입니다.

# CSS 키프레임과 스크롤 스냅

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

자동 스크롤 캐러셀의 구현에 대해 들어가기 전에, 이를 가능하게 하는 CSS 기능에 대해 알아보겠습니다: CSS 키프레임과 CSS 스크롤 스냅 모듈입니다.

## CSS 키프레임

@keyframes 규칙은 CSS 애니메이션 시퀀스의 중간 단계를 제어하여 애니메이션 시퀀스 a길이의 키프레임(또는 웨이포인트)에 대해 스타일을 정의합니다. 이는 CSS 전환보다 애니메이션 시퀀스의 중간 단계를 더 세밀하게 제어할 수 있게 합니다.

@keyframes는 자바스크립트가 필요하지 않는 복잡한 애니메이션을 가능하게 할 뿐만 아니라 간단한 구문과 여러 요소 간의 재사용성을 제공합니다(이의 코드 예제에서 곧 확인하실 수 있습니다).

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

CSS 스크롤 스냅

CSS 스크롤 스냅 모듈은 스냅 위치를 정의하여 패닝 및 스크롤 동작을 제어할 수 있는 속성을 제공합니다. 사용자가 스크롤 컨테이너 내에서 넘치는 콘텐츠를 스크롤할 때 콘텐츠가 해당 위치로 스냅될 수 있어 페이징 및 스크롤 위치 지정을 제공합니다.

오늘 캐러셀을 위해 특히 두 가지 속성을 활용할 것입니다.

CSS scroll-snap-type

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

각종 다양한 값을 받아들입니다. 하지만 가장 일반적인 값은 다음과 같습니다:

- mandatory - 스크롤 컨테이너는 스크롤한 후 가장 가까운 스냅 지점에 맞추어야 합니다.
- proximity - 스크롤 컨테이너는 스크롤이 스냅 지점 근처에서 자연스럽게 멈출 때에만 해당 지점에 맞추어야 합니다.
- none - 스냅 행동이 적용되지 않습니다.

실제로는, mandatory는 스크롤의 최종 위치에 대해 정확한 제어가 필요한 경우에 사용할 수 있습니다(캐러셀이나 각 항목이 스크롤한 후 완전히 보일 수 있어야 하는 페이지네이션 콘텐츠와 같은 경우). 그리고 proximity는 사용자에게 스크롤 중단 지점에 대해 더 많은 제어권을 주고 부드럽고 덜 충격적으로 느껴지게 할 때 사용할 수 있습니다.

CSS scroll-snap-align

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

이 스크롤 스냅 방정식의 다른 부분은 scroll-snap-align인데, CSS 스크롤 스냅 모듈을 사용할 때 상자의 스냅 위치를 지정합니다.

스크롤 스냅 컨테이너의 자식 요소는 scroll-snap-align 속성을 설정하여 스크롤이 멈출 때 뷰포트로 스냅되는 방식을 제어할 수 있습니다. 값으로는 다음이 포함됩니다:

- start - 항목의 시작 가장자리를 스크롤 컨테이너의 시작 가장자리에 맞춥니다.
- end - 항목의 끝 가장자리를 스크롤 컨테이너의 끝 가장자리에 맞춥니다.
- center - 항목을 스크롤 컨테이너 중앙에 정렬합니다.
- none - 스냅 정렬이 발생하지 않습니다.

그 백그라운드 정보를 얻고 코드를 진행해 봅시다.

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

# HTML 및 CSS 설정하기

먼저, CSS 자동 스크롤링이 제대로 작동하려면 적절한 HTML을 설정해야 합니다.

1. 캐러셀의 일부인 HTML 요소를 부모 div로 묶기

먼저, 스크롤될 모든 슬라이드를 부모 컨테이너 내에 묶습니다. 여기에 CSS scroll-snap-type 속성이 적용되어 자식 요소가 적용된 scroll-snap-align 속성을 해석할 수 있도록 합니다.

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

위의 HTML에서 볼 수 있듯이 weather-forecast-container 클래스는 특정 도시의 모든 날씨 정보를 포함하는 weather-template 클래스를 감싸며, weather-carousel-snapper 클래스를 가진 비어 있는 div를 가지고 있습니다.

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

2. 비어 있는 div를 날씨 템플릿 div의 하단에 배치하여 carousel의 snapper 요소로 만듭니다.

이 요소가 weather-template div 내부에 있고 형제 요소가 아닌지 확인하세요. 이곳은 계속해서 비어 있지만 존재해야 합니다.

```js
<div class="weather-carousel-snapper"></div>
```

3. 부모 컨테이너에 기본 스타일을 추가하고 날씨 템플릿과 scroll-snap div를 내부에 배치합니다.

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

CSS 스크롤 스냅 모듈이 여기에서 사용됩니다.

styles.css

```js
.weather-forecast-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: clamp(290px, 88vh, 430px);
  max-width: 780px;
  margin: 8px auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: scroll;
}
```

날씨 예보 컨테이너 클래스 내부에서는 컨테이너의 기본 스타일링을 넘어서서 위치 지정, 높이 및 너비 정의(둘 다 Raspi에 연결된 작은 화면의 너비로 설정)와 함께 여기서 첫 번째 CSS 스크롤 스냅 속성을 추가하려고 합니다.

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

- scroll-snap-type: x mandatory; - 이는 가로 축에서 필수적인 스냅을 정의합니다.
- scroll-behavior: smooth; - 캐러셀이 다음 페이지로 스크롤되는 것처럼 보이게하여 기본적으로 거기로 뛰어가는 대신 자연스럽게 이동합니다.
- overflow-x: scroll; - 필요에 따라 오버플로우 콘텐츠가 요소의 패딩 상자 내에서 수평으로 맞출 수 있습니다.

다음은 날씨 정보를 포함하고 빈 weather-carousel-snapper div를 포함하는 weather-template div의 스타일링입니다.

styles.css

```js
.weather-template {
  position: relative;
  flex: 0 0 100%;
  background-size: 780px 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
```

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

"weather-template" div의 스타일을 포함했어요. 이는 "weather-carousel-snapper" 요소의 실제 부모이기 때문에, 다만 표준 CSS 스타일링일 뿐이에요.

styles.css

```js
.weather-carousel-snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  scroll-snap-align: center;
}
``` 

마지막으로 "weather-carousel-snapper" 클래스가 적용된 빈 div에 스크롤 스냅 CSS의 마지막 부분을 추가합니다.

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

- scroll-snap-align: center; - 이 코드를 사용하면 각 항목이 컨테이너의 중앙에 정렬됩니다.

4. 예보 슬라이드를 자동으로 스크롤하는 애니메이션 keyframes를 생성하세요.

CSS 스타일링이 완료되고 scroll snap이 활성화된 후, 다양한 도시들이 화면을 통해 서서히 슬라이드하여 다음 도시로 이동하는 것처럼 보이도록 하는 @keyframes 애니메이션을 만들어보세요.

styles.css

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

위의 코드에서는 세 가지 별도의 애니메이션이 정의되어 있습니다.

- tonext 및 tostart — 각 도시의 날씨 예보의 가로 위치를 캐로셀의 다른 단계에서 관리하며, 오른쪽으로 슬라이딩 효과 또는 매우 왼쪽으로 이동한 후 시작 위치로 재설정합니다(애니메이션을 다시 첫 번째 도시로 끊임없이 반복되게 만듭니다).
- snap— scroll-snap-align 속성을 제어하여 애니메이션 타임라인의 특정 지점에서 스냅 동작을 조정합니다. 이는 캐로셀에서 다음 도시의 날씨 예보를 가운데로 정렬시키는 동적인 스냅 동작을 만듭니다.

이 세 가지 키프레임을 결합하면 데모 비디오에서처럼 캐로셀이 한 예보에서 다음 예보로 부드럽게 슬라이드되는 멋진 애니메이션을 얻을 수 있습니다.

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

5. 날씨 예보 컨테이너(parent div) 내부의 적절한 HTML 요소에 keyframe 애니메이션을 적용해 봅시다.

이제 앞에서 정의한 @keyframes 애니메이션을 적용할 차례입니다.

styles.css

```js
@media (hover: hover) {
  .weather-carousel-snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

.weather-template:last-child .weather-carousel-snapper {
    animation-name: tostart, snap;
  }
}
```

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

- @media (hover: hover) - 대부분의 스마트폰과 태블릿과 같이 호버링이 불가능한 기기에서는 캐러셀 애니메이션 및 스크롤 스냅이 적용되지 않도록 하기 위해, 나는 이러한 애니메이션을 호버 미디어 쿼리 내에 감쌌어요.

.weather-carousel-snapper 클래스는 동시에 animation-name: tonext, snap;으로 실행되는 tonext와 snap 애니메이션을 갖고 있으며, 이 애니메이션은 4초 동안 서서히 반복됩니다.

.weather-template 요소의 마지막 자식을 대상으로 하는 규칙은 weather-carousel-snapper 클래스를 가진 요소에 다른 애니메이션 조합 (tostart와 snap)을 적용하여, 마지막 도시의 날씨 예보가 화면에 표시된 후 캐러셀을 초기 위치로 재설정하여 첫 번째 도시로 다시 이동하도록합니다.

그리고 여기서 CSS만 사용하여 자동 스크롤링 캐러셀을 만들었습니다. 

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

이 비디오에서 끝난 제품을 한번 더 시연합니다.

# 결론

특정 상황에서 웹 애플리케이션이 가능한 한 작아야 하는 경우가 매우 중요합니다. 예를 들어, 해당 앱이 저전력이거나 성능이 낮은 시스템(예: Raspberry Pi)에서 실행될 수 있는 경우입니다.

저는 셀룰러로 Raspi에 다운로드될 작은 데모 앱을 개발해야 했을 때 가능한 한 zip 파일 크기를 작게 유지하기 위해 순수한 HTML, CSS 및 약간의 바닐라 JS를 활용하여 React 또는 Svelte와 같은 JS 프레임워크 없이 구현하기로 결정했습니다.

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

날씨 앱을 개발하고 싶어서, 목록에 있는 도시들의 예보를 표시하고 목록을 자동으로 회전시킨 후 처음으로 돌아가 다시 시작하는 기능을 추가하고 싶어했습니다. 처음에는 이를 구현하기 위해 캐러셀 라이브러리가 필요할 것이라고 생각했지만, CSS 스크롤 스냅과 키프레임 애니메이션만 있으면 JavaScript가 필요하지 않고도 똑같이 구현할 수 있다는 사실을 깨닫게 되었습니다. 정말 좋은 소식이죠!

몇 주 안에 다시 확인해주세요 — 저는 JavaScript, React, IoT 또는 웹 개발과 관련된 다른 주제에 대해 더 많이 다룰 예정입니다.

제가 쓰는 글을 결코 놓치지 않으려면, 제 뉴스레터 구독을 신청해주세요: https://paigeniedringhaus.substack.com

읽어 주셔서 감사합니다. 미래에 캐러셀이 필요하다면 (자동 회전 여부와 상관없이) CSS를 사용해 직접 구현해보기를 권장합니다 — 그렇게 할 때 필요한 코드가 얼마나 적은지 놀라실 거라고 생각합니다. 즐기세요!

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

# 참고 문헌 및 추가 자료

- CSS-Tricks, CSS-Only Carousel article
- MDN 문서, CSS @keyframes
- MDN 문서, CSS scroll snap module
- MDN 문서, CSS scroll-snap-type
- MDN 문서, CSS scroll-snap-align
- GitHub repo, Cellular-Connected Electronic Kiosk

원문은 https://www.paigeniedringhaus.com에서 원래 게시되었습니다.

HTML, CSS로 자동 스크롤되는 캐러셀 애니메이션 만드는 방법



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

안녕하세요! 두 번째로 미디엄에 글을 작성하게 되었어요. 첫 번째 블로그 글과 동일한 형식을 따를 거에요. 이 글을 쓰는 목적은 제 자신을 책임지고 여정을 기록하는 것뿐이에요. 이번 주에는 Headstarter와 Leetcode 덕분에 분명히 레벨을 한 단계 올렸어요. 10일 후에 글을 올리지 않았다는 걸 알아요. 하지만 안심하세요, 코드는 작성했고 GitHub 프로필에서 확인할 수 있어요.

# 11일차: 8/9/24

- 30DaysofJavascript 2일차 연습 완료
- Headstarter의 프로젝트 3를 진행했어요. AI 고객 지원을 만드는 것이었는데, 주로 프론트엔드 측면을 담당했어요.
- 직장에서 코딩했어요. 구체적으로는 모든 페이지에서 버튼 기능을 개선했어요.

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

# 12일차: 8월 10일 화요일

- 30DaysofPython 4일차를 완료했습니다. 메모와 연습문제를 모두 마쳤어요.
- Headstarter 프로젝트 3을 계속 작업했어요. 조금 더 스타일링하고, OpenAI 프롬프트 수정하고, 인증/Firebase 추가했어요.

# 13일차: 8월 11일 수요일

- Headstarter 프로젝트 3을 계속 작업했어요. 현재 Chronicle AI가 거의 끝났고, AI와 모바일 장치용 스타일링을 테스트하기만 남았어요.
- Chronicle AI가 이제 라이브되었고 https://chronicle-ai-omega.vercel.app 에서 확인할 수 있어요.

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

# Day 14: 8/12/24

- 온라인 이력서 및 개인 포트폴리오 V1을 위한 이력서 링크 변경.
- Odin Project의 Flexbox 섹션을 완료했습니다.
- 온라인 이력서는 https://hamim23z.github.io/OnlineResume/에서 확인할 수 있습니다.

# Day 15: 8/13/24

- 30DaysofPython Day 5를 완료했습니다. 노트 및 연습문제를 완료했어요.

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

# Day 16: 8/14/24

- 온라인 이력서 및 개인 포트폴리오 V1을 위해 이력서 링크를 변경했습니다.
- Headstarter의 Project 4인 Smart Study, AI 기반 플래시카드 생성기에 대한 작업을 시작했습니다.

# Day 17: 8/15/24

- Smart Study 작업을 계속했습니다.
- 직장에서 코딩을 하고 웹사이트를 최종화하며 모든 변경 사항이 포함된 웹사이트 최종 작성본을 GitHub에 푸시했습니다.

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

# Day 18: 8/16/24

- "Smart Study" 작업을 계속했습니다.

# Day 19: 8/17/24

- "Smart Study" 작업을 계속했습니다.

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

# Day 20: 8/18/24

- 스마트 스터디 작업 계속
- 스마트 스터디는 이제 라이브 상태이며 https://smart-study-five.vercel.app/에서 찾을 수 있습니다.
- 스마트 스터디는 제가 속한 팀이 아직도 작업 중이며 계속 향상시킬 예정입니다.

그리고 이것이 100일 동안의 코딩 여정 중 다음 10일이었습니다. 총 횟수는 이제 20일 연속입니다.

#cookorgetcooked

Posts