본문 바로가기

👨‍💻 web.dev51

Storybook loaders 로 story에 비동기 데이터 주입하기 📌 loaders 로 데이터 전달하기 Storybook 6.1 부터 실험적 기능으로 loaders 가 추가되었습니다. 안정화 기간을 거쳐 Storybook 7.0 에서는 stable 로 변경되었는데요. 기존에 args 를 통해 컴포넌트에 데이터를 전달해주는 대신, loaders 에 데이터를 반환하는 함수를 정의함으로서 스토리북 render context 에 이를 할당할 수 있는 방법이 추가되었습니다. 모든 스토리에 적용되는지 유무에 따라 global loader 와 story loader 두 가지 방식으로 나뉘는데, 이번 경우에는 개별 스토리에 주입이 필요해서 story loader 방식을 사용했습니다. 📌 예시로 살펴봅시다. 다음과 같은 웹 컴포넌트가 있다고 하겠습니다. 해당 컴포넌트는 작은 캔버스에 .. 2023. 6. 24.

Storybook 에서 컴포넌트 단위 테스트하기 📌 들어가며 스토리북은 component driven development 패러다임을 위한 유용한 개발 도구로 단순히 UI 를 확인하는 용도를 넘어서서 테스트를 위한 다양한 솔루션도 함께 제공해주고 있습니다. 이번 포스트에서는 이를 활용한 테스트 적용 사례에 대해 살펴보고자합니다. 우선 이번 포스트를 위한 프로젝트의 패키지 버전 정보는 다음과 같습니다. 📦 project dependency - react/react-dom: 17.0.2 - next: 12.1.1 - storybook: 7.0.4 - typescript: 5.0.3 ✨ Next.js + jest & storybook 설정하기 📌 Next.js + jest 설정 유닛테스트, 스냅샷테스트 작성하기 전에 jest 먼저 설치합니다. Next.js.. 2023. 6. 24.

TDD 와 함께 사내 서비스 개선하기 📌 TDD 를 활용해볼까? 이번에 사내에서 사용하고 있는 메일 템플릿 프로젝트를 손볼 기회가 생겼습니다. 새로운 메일 배포 방식 적용이 필요했는데, 이를 위해서는 기존 프로세스에 대한 이해가 필요했습니다. 새롭게 투입된 프로젝트에 기능을 추가하거나 수정하는 것은 영향도에 따라 쉽지 않을 수 있는 작업인데, 이번에 맡은 업무가 해당 서비스 코드 전반적으로 수정이 필요했던 작업이라 더욱 고민이 많았던 것 같습니다. 안정적인 서비스 개발 및 리팩토링을 위해 TDD 를 적극적으로 활용해볼 수 있는 좋은 기회로 보여 적용 및 후기에 관한 포스트를 작성해봤습니다. 💡 이번 포스트에서 TDD 패러다임에 대한 자세한 내용을 다루지는 않습니다. 🤔 TDD 란? 간단하게 TDD 에 대해서 살펴보고 가겠습니다. TDD는 테.. 2023. 5. 15.

DOM event.composed (shadow root 밖으로 이벤트 전파시키기) 📌 CustomEvent 가 shadow root 밖으로 전파되지 않는다? shadow DOM 과 함께 작업하다보면 CustomEvent 로 생성한 이벤트가 shadow DOM boundary 를 벗어나서 전파 되지 않는 이슈를 마주하게 되는데, 이는 의도된 동작입니다. 예시로 살펴봅시다. 다음과 같은 menu 컴포넌트가 있다고 하겠습니다. 재사용성을 위해 공통 메뉴 로직을 담은 컴포넌트입니다. 코드는 단순화시켰지만, open 속성이 true 가 되면 해당 메뉴 엘리먼트의 overlay 선택시에 메뉴를 닫기 위한 커스텀 이벤트를 발생시키는 핸들러를 부착하는 흐름으로 진행됩니다. export default class MyMenu extends HTMLElement { // ... other logics a.. 2023. 5. 15.

GitHub Actions 를 활용한 release bot 만들기 이번에 사내에서 메일 템플릿을 관리하는 프로젝트의 배포 방식을 변경하는 업무를 맡아 진행하며 Github Action (이하 GHA)을 다뤄볼 기회가 생겼습니다. GHA로 PR에서 특정 comment 를 남기면, 변경사항을 배포해주는 자동화 프로세스를 만들고 싶었는데 GHA 사용이 처음이라 꽤나 많은 삽질을 해서 비슷한 기능을 구현하고 싶은 분들을 위해 기록을 남기려고합니다. 📌 PR comment echo 테스트하기 우선 PR에서 특정 명령어를 담은 댓글을 남기면, 이를 감지하는 workflow 를 작성해보겠습니다. release 라는 comment 를 남기면 workflow 가 해당 PR 에 댓글로 응답해주는 workflow 를 작성합니다. comment 추가는 issue_comment event 를.. 2023. 4. 24.

React Framer Motion 톺아보기 📌 Framer Motion? Framer Motion 은 React 로 개발된 Animation Library 입니다. 관련된 패키지중에 지속적으로 사용량 및 관심도가 증가하고 있는 추세입니다. 📈 웹앱에서 애니메이션을 다루는 다양한 방법이 있지만, 다양한 환경에서 충분한 성능을 고려하여 구현하기에는 생각보다 고려할 사항이 많고 까다로운 것이 사실입니다. 이번 위클리에서는 이러한 부분에 도움이 될수도 있는 패키지를 소개해보는 시간을 가져보려합니다. 📌 TL;DR Framer Motion 의 특징 TypeScript 지원 최적화된 성능 및 풍부한 API physics 기반의 사실적인 transition효과 제공 (spring, tween, inertia) 모던 웹앱에서 반복적으로 필요로 하는 여러 모션들.. 2023. 3. 27.

이전 1 2 3 4 5 6 ··· 9 다음

티스토리툴바