배경
우리 팀의 프로젝트는 규모가 크고, Storybook 파일도 많다.
컴포넌트 하나만 확인하고 싶어도 .storybook/main.ts에 정의된 모든 경로가 실행되면서 Storybook 빌드 시간이 길고 무거운 개발 경험으로 이어졌다.
Open Storybook: 원하는 스토리만 빠르게 실행하기
어떻게 하면 개발자가 보고 싶은 스토리만 골라 빠르게 실행할 수 있을까?
동료분들에게 어떻게 해결하는지 여쭤보니, .storybook/main.ts의 stories 설정을 직접 수정하여 원하는 스토리북만 연다는 얘기를 들었다.
"jest runner처럼 쉽게 특정 Storybook만 실행할 수 없을까?"
그래서 vscode extension으로 이런 기능을 더 쉽게 제공하면 어떨까라는 생각이 들었다.
VSCode Extension으로 자동화하기
핵심 아이디어는 단순하다.
•
선택한 파일/폴더 기준으로 .storybook/main.ts의 stories를 수정
•
스토리북을 실행
•
종료 시 원래 설정으로 복원
이 모든 과정을 VSCode에서 커맨드 팔레트와 우클릭으로 처리하고 싶었다.
VSCode Extension 만들기
프로젝트 세팅
npm install --global yo generator-code
yo code
Shell
복사
개발 및 테스트
1.
cursor가 아닌 vscode를 열어서 개발
2.
커맨드 팔레트(cmd + p)에서 Start Debugging 커맨드를 실행하면 Debugging용 Host 윈도우가 새로 뜬다. 여기서 테스트하고 싶은 프로젝트를 열어서 테스트하면 된다.
주의사항
pnpm X, npm O
vsce에서 pnpm 이슈가 있어서 pnpm이 아닌 npm을 사용한다. 관련 이슈는 여기서 찾아볼 수 있다.
pnpm을 굳이 사용하려면 이 솔루션을 사용하면 된다.
cursor와의 호환성 지키기
cursor에서 vscode와 호환되는 버전이 따로 있으므로 package.json에서 버전을 명시한다. 캐럿(^)이 아니라 고정된 버전을 사용해야 한다.
"engines": {
"vscode": "1.93.0"
},
"devDependencies": {
"@types/vscode": "1.93.0",
}
Shell
복사
만약 실수로 호환이 안되는 버전을 올렸다면 unpublish하거나,
vscode extension 설치할 때 install > 톱니바퀴 > insall specific > 호환되는 버전 선택해서 설치하면 된다.
데모
Open Storybook: 스토리북 파일 하나만 실행
커맨드 팔레트에서 “Open Storybook”으로 원하는 스토리북 파일만 실행
Open Stories
폴더 > 우클릭 > Open Stories로 해당 폴더의 모든 스토리북 실행
구현 과정
코드로 기능 확인하기
•
파일 또는 폴더를 기준으로 가장 가까운 package.json 탐색하여 packageName 추출
모노레포의 경우 여러 패키지에서 스토리북 설정이 되어있으므로 package 별로 스토리북 config를 매핑하기 위해 package name을 추출한다.
// 1️⃣ 가장 가까운 package.json 찾기 → 패키지 이름 가져오기
const packageJsonPath = findNearestPackageJson(focusedDir);
if (!packageJsonPath) {
vscode.window.showErrorMessage("No package.json found.");
return;
}
const packageName = getPackageName(packageJsonPath);
if (!packageName) {
vscode.window.showErrorMessage("Could not determine package name.");
return;
}
TypeScript
복사
•
package 별로 스토리북 설정을 매핑
•
stories 항목을 해당 경로로 덮어쓰기
const newStoriesPath = `${focusedDir.replace(
/\\/g,
"/"
)}/**/*.stories.@(js|jsx|ts|tsx)`;
if (!packageStoriesMap[packageName].current.includes(newStoriesPath)) {
packageStoriesMap[packageName].current.push(newStoriesPath);
}
// 5️⃣ .storybook/main.ts 업데이트
updateStorybookStories(
storybookConfigPath,
packageStoriesMap[packageName].current
);
TypeScript
복사
•
스토리북 터미널 열기
◦
터미널이 종료 이벤트 리스너 등록: 스토리북 서버 종료 후 stories 설정 복구
•
package.json에 등록된 스토리북 실행 스크립트가 있으면 사용
◦
없으면 npx storybook dev 실행
완성된 기능
•
커맨드 팔레트 → “Open Storybook” 실행 시 스토리북 파일 하나만 실행 (스토리북 파일이 아니면 실행 안함.)•
폴더 우클릭 → "Open Stories" 실행 시 해당 폴더의 스토리북만 실행•
여러 번 실행해도 기존 경로 유지하며 새로운 폴더 추가•
Storybook 터미널이 종료되면 원래 설정 복원 (Storybook 터미널은 패키지마다 별개로 실행된다.)•
.storybook/main.ts가 module.exports든 export default든 관계없이 작동배포와 설치 방법
배포
1.
package.json에서 version up
2.
vsce publish 실행해서 .vsix 파일 빌드
3.
vscode marketplace에 .vsix 파일 업로드
설치방법
VSCode / Cursor Extension
•
마켓플레이스에서 roseline-song.open-storybook 검색
•
설치 후 폴더 우클릭 → "Open Stories" 실행 / 또는 커맨드 팔레트에서 “Open Storybook” 실행
•
테스트 끝낸 후에는 Storybook 터미널 종료해서 main.ts 경로 복원하기
GitHub 코드
@storybook/cli 자체에서도 공식적으로 이런 기능이 지원되면 좋겠지만, 그 전까지는 이 extension이 유용한 도구가 되었으면 좋겠다.
