Storybook 8 → 9 마이그레이션
Storybook 8에서 9로 마이그레이션 하는겸 react 버전도 같이 올림 (18 → 19)
기본적으로 크게 달라진건
- @storybook/blocks 제거 → 이젠 @storybook/addon-docs/blocks 를 사용해야함. @storybook/blocks가 @storybook/addon-docs/blocks 내부에 들어감.
- @storybook/react → @storybook/react-vite or @storybook/react-webpack5 이렇게 상세하게 작성해야함.
- @storybook/addon-essentials 제거,
@storybook/addon-viewport,@storybook/addon-controls,@storybook/addon-interactions,@storybook/addon-actions이런것들은 storybook core로 들어갔다고 함.
그냥 npx storybook@latest upgrade 하면 알아서 잘 해줌.
react 18 → react 19 마이그레이션
역시 그냥 딸깍 해주면 된다.
달라진점은 기존 react 18에서는 children.props를 하면 unknown 타입이 아니였는데 19부턴 unknown으로 잡혀서 타입을 좁혀줘야한다곤 하는데…
react 공식문서를 보니 Children API를 사용하는건 불안정하기 때문에 좋지 않은 방법이라고 함. 추후에 변경 할 예정! (children에 넣을 배열을 props로 넘긴다던가…등등)
vite 5 → vite 7
너무 확 올렸긴한데 react를 19로 올리면서 vite도 버전을 올렸어야했었음
그러다보니 또 에러가 발생하는데 vite 7은 node version이 22 이상이 되어야한다고 함.
그래서 바로 nvm 설치해서 node 22 설치
node 20 → 22로 변경
nvm install 22 라고 설치하면 됨
이러면 끝인데
다른 레포에선 node 20으로 고정되어 써야하기 때문에 해당 레포에만 node 22 버전을 써야한다.
그렇기 때문에 .nvmrc 파일을 해당 레포 루트에 둠.
원하는 버전을 적어두면 된다.
// .nvmrc
v22.20.0이러면 nvm use를 할때 알아서 .nvmrc 파일을 감지해서 해당 버전으로 설정해준다고 한다.
하지만 터미널을 새로 띄울때마다 nvm use 명령어를 해줘야하기 때문에 번거롭다.
그렇기 때문에 다른 사람들이 잘 짜놓은 script를 이용하면 된다.
vim ~/.zshrc 로 가서 아래 내용을 입력해주면 된다.
# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
local node_version="$(nvm version)"
local nvmrc_path="$(nvm_find_nvmrc)"
if [ -n "$nvmrc_path" ]; then
local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")
if [ "$nvmrc_node_version" = "N/A" ]; then
nvm install
elif [ "$nvmrc_node_version" != "$node_version" ]; then
nvm use
fi
elif [ "$node_version" != "$(nvm version default)" ]; then
echo "Reverting to nvm default version"
nvm use default
fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc그런 뒤 터미널을 켜보면 자동으로 node 버전이 세팅된다!
