CHAYAN.LOG

목차 webpack 5를 위한 스토리북 Storybook 6.2버전부터Storybook은 webpack5를 공식 지원하기 시작했다. 이 과정을 통해 Snowpack, EsBuild, Vite와 같은 차세대 빌더를 탐색할 수 있는 플러그형 빌더도 만들었다. Storybook은 본질적으로 편집한 컴포넌트, 테마, 스토리등등을 실시간으로 번들링 하는 빌드 툴이다. 이렇다보니 webpack의 메이저 버전 업그레이드는 Storybook에게 큰 문제였다. (웹팩자체 뿐만 아니라, 사용되는 다양한 플러그인 등등이 다 연관되어있다보니...) 그래서 Storybook 6.2버전부터 번들러 의존성, 플러그인 의전성, 구성 처리까지 추상화해 webpack 4와 5를 동시에 지원하기 시작했다. 현재, webpack 4가 디폴..

공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용할 수 있다. 기본 설정 기본적으로 ts 변환을 위해 babel-loader를 사용하고, 옵션으로 타입 체킹을 위한 fork-ts-checker-webpack-plugin을 제공한다. 더보기 [fork-ts-checker-webpack-plugin?] 간단하게 말하면 기본적으로 ts-loader, babel-loader와 같은 것들을 이용해 Typescript 컴파일을 수행하게 되면, 타입 변환과 타입 검사 과정을 수행하게 된다. 이때, 이 두 과정이 순서대로 이뤄지기에 컴파일하는데 ..

Storybook 사용중, 컴포넌트의 보여지는 순서가 코드에서 export한 순서가 아닌 문자순으로 자동정렬 되는 이슈가 있다. 이는 현재 최신 버전(v6.4.x )에서 발생하는 문제로 이미 이슈로 등록되었던 문제이다. 이 이슈를 해결하기 위해 개발자 측에서 v.6.5.0-alpha.17 의 prelease 버전을 내놓았고 npx sb upgrade --prerelease 명령어를 통해 v6.5.x를 사용함으로서 해결 할 수 있다. (만약 이를 원하지 않는다면 다운그레이드를 수행하는 수밖에...)