m2ndy 개발 블로그

본 글은 2024.12.31에 마지막으로 수정되었습니다.  Storybook 버전 : 8.4.5Typescript 버전 : 5.6.2Vite 버전 : 5.4.10   프로젝트에서 FeedItem 컴포넌트의 스토리북을 구현하던 중 이런 에러를 마주했다.createRoot(...): Target container is not a DOM element.  preview.ts와 FeedItem 스토리북의 코드는 아래와 같았다.// .storybook/preview.tsimport React from 'react';import { MemoryRouter } from 'react-router-dom';import type { Decorator, Preview } from '@storybook/react';impor..

본 글은 2024.12.23에 마지막으로 수정되었습니다.  CI를 왜 구축하는 거야?운영 브랜치, 또는 개발 브랜치로 병합하기 전 해당 브랜치가 잘 동작하는지, 병합 시 이상은 없는지 확인하는 단계가 필요합니다. 주로 테스트, lint, 빌드가 이상 없이 완료되는지 확인을 해야 하는데요. 매번 PR을 올리고 추가 커밋을 할 때마다 이 단계를 모두 수작업으로 하기에는 번거로우니, CI라는 단계로 자동화하여 시스템을 구축할 수 있습니다.  CI 구축 시작하기"메리 트리스마스" 서비스에서 프론트엔드 CI 구축을 담당하며 어떤 전략이 필요할지 검토해 보았습니다. 먼저 저희 서비스에서는 jest를 아직 도입하지 않았기에 CI 과정에 lint, 빌드 단계가 필요했고, 추가로 Storybook 자동 배포를 추가하고자..