미디엄 게시글을 읽고 - 2025/02/11

제목	Storybook | React & Typescript	Interaction testing in Storybook
출처	https://medium.com/@xiaominzhu/storybook-react-typescript-ac667cb54eed	https://medium.com/storybookjs/interaction-testing-in-storybook-32935c657b39
요약	Next.js 프로젝트 만들기 : 아직 만들지 않았다면 create-next-app다음 명령을 사용하여 Next.js 앱을 만들어 시작하세요. Storybook 설정 : 스크립트를 사용하여 Next.js 프로젝트 내에서 Storybook을 초기화하고 sb initWebpack 5와의 호환성을 보장합니다. Next.js 페이지에 대한 스토리 만들기 : Storybook 내에서 문서화와 테스트를 간소화하기 위해 Next.js 페이지에 대한 스토리를 개발합니다. 스토리용 Next.js 글로벌 스타일시트 가져오기 : Next.js 글로벌 스타일시트를 파일로 가져와서 스토리북 스토리에 반영되도록 합니다 .storybook/preview.js. Story Args를 사용하여 Next.js 페이지 Props에 컨트롤 추가 : Storybook Args를 활용하여 페이지 스토리에 컨트롤을 추가하고, 구성 요소 매개변수와의 동적인 상호작용을 활성화합니다. next/image구성 요소 구성 : next/imageStorybook에서 사용할 구성 요소를 구성하여 이미지를 최적으로 렌더링하고 호환성 문제를 해결합니다. MSW와 Storybook 통합 : Storybook에 Mock Service Worker(MSW) 라이브러리를 통합하여 API 엔드포인트를 시뮬레이션하고 개발 및 테스트 기능을 향상시킵니다. MSW 및 Storybook 로더를 사용하여 getServerSideProps요청 시뮬레이션 : Storybook 로더를 활용하여 스토리에 포함 하고 내보내고, MSW로 가져오기 요청을 모의합니다.	Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 프론트엔드 워크샵 도구입니다. 작성자는 마이크로프론트엔드 프로젝트에서 React/TypeScript와 함께 Storybook을 사용했습니다. Storybook 설치 및 초기 설정 방법을 설명합니다. 간단한 사용자 컴포넌트를 만들고 이에 대한 스토리를 작성하는 과정을 보여줍니다. 컴포넌트 메타데이터 설정, 스토리 내보내기, args 사용 등 Storybook의 기본 개념을 설명합니다. - Meta : 컴포넌트를 설명하고 구성하는 메타 데이터 - 스토리에 UpperCamelCase 사용 - args : 인수를 정의하는 메커니즘이며 리렌더링 일으킴 데코레이터를 사용하여 스토리에 추가 마크업이나 컨텍스트를 제공하는 방법을 소개합니다. Storybook을 사용하면 개발자와 디자이너가 컴포넌트의 다양한 상태를 쉽게 이해할 수 있다고 강조합니다. 실제 프로젝트에서 Storybook을 사용할 때 발생할 수 있는 문제들(예: i18next 사용)과 그 해결 방법을 간단히 언급합니다.