[Node.js] 12에서 16으로! (storybook을 곁들인..)

글쓰게된 계기

요새 팀(혹은 주니어들..) 사이에서 storybook 도입에 대해 논의를 하고있다. 그런데 node.js 버전이 매우 낮아서 설치가 안되는 이슈가 발생했다. node.js 버전을 높이는 건 괜찮을거 같은데? 라는 팀장님의 말씀에 업무 일정도 (살짝) 여유있고, 재밌을 거 같아서 바로 시작했다!

storybook, 설치 히스토리

현재 개발환경

우리의 개발환경은 Node.js(12.18.0), VueJS(2.x) 이다.
Node.js LTS 버전이 20.9.0인 것을 보면 개발 환경이 굉장히 오래된 편이다.. 그러나 여건과 일정 상 업데이트가 불가능한 상황이라 현재 환경을 기준으로 storybook 설치를 시도했다.

storybook 설치 시도 방법

template clone을 통한 프로젝트 설치
chromaui/intro-storybook-vue-template 에서 template 을 clone 받아서 현재 프로젝트 내에 설치하면 된다. 방법은 다음과 같다.

# storybook-vue-template clone 받기
npx degit chromaui/intro-storybook-vue-template taskbox

# 디렉토리 이동
cd taskbox/

# dependencies 설치
npm install

이렇게 하면 다음과 같은 구조로 storybook 이 설치된다.

.
├── .storybook
├── node_modules
├── public
├── src
├── .eslintrc.cjs
├── .gitignore
├── .index.html
├── LICENSE
├── package.json
├── yarn.lock
├── vite.config.js
└── README.md

그리고 해당 경로로 들어가서 실행해주면 된다!

# 디렉토리 이동
cd taskbox/

# 실행
npm run storybook

하지만 문제가 발생했다. 우리는 node.js 12 버전을 쓰고있는데, 위와 같이 설치하면 node.js 18 이상을 사용해야한다는 문제점이...ㅠㅠ

... requires Node.js 18.0.0 or higher

package.json 을 살펴보니 storybook 이 8.2.5였고, 8.0.0 이상은 node.js 18 이상을 써야한다는 조건이 있었다. 그래서 어떻게 해결할까 고민을 하다가 나온 결론은!!

run configuration 에 node.js 버전 변경 스크립트 추가 (중단)

빌드 스크립트도 보면 빌드 전에 해줘야하는 여러 작업을 미리 정의하는 것처럼 run configuration 설정에도 사전 작업을 정의할 수 있지 않을까? 하는 고민에서 시작된 방법..

하지만 프로젝트 세팅을 할 때, nvm을 설치해야한다는 점과 node.js 12와 18 모두 설치해야한다는 점이 번거로울 것 같다는 의견에 동의하여 구글링하다가 중단하였다.

가장 중요한 건 더 좋은 제품을 위해 귀찮은 작업을 하나 더 해야하는 셈이니, 현재 작업 형상대로 사용하면서 작업하기! 가 포인트였다. (thx to 강동료님...)

Node.js 업데이트 (with 여러 오류)

그리고 오늘 진행한 Node.js 버전 업데이트! 사실 Node.js 버전 업데이트하는 건 굉장히 간단했다. nvm 으로 16버전을 설치하고, 사용해주면 끝!!

가장 중요한 건 기존에 설치된 라이브러리의 의존성을 확인하는 작업이었다.

node-sass 오류

node.js 를 16 버전으로 변경하자마자 발생한 오류는 다음과 같다.

npm ERR! code 1
npm ERR! path ~~~~node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
...

이건 node-sass 버전과 node.js 버전이 맞지 않을 때 발생하는 오류로 아래 표를 보면서 node-sass와 sass-loader 의 버전에 맞게 설치해주었다.

# 기존 node-sass, sass-loader 제거 
npm uninstall node-sass
npm uninstall sass-loader

# node-sass, sass-loader 재설치
npm install node-sass@6.0.0
npm install sass-loader@10.2.0

하지만... 또 발생한 다른 오류 ㅠㅠㅠㅠ

gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
...

위의 문제는 sass-loader 관련해서 python 오류가 발생한 거 같은데, 다행히도 stackoverflow 에서 해결방법을 찾을 수 있었다!!!

node_module 폴더 삭제한 후, 다음과 같이 진행했다.

# windows-build-tools 설치
npm install --global windows-build-tools

# pakcage.json 기반 npm 재설치
npm install

vueJS 버전 관련 오류

휴.. 여기서 끝나지 않고, 또 발생한 오류 ㅠㅠ

ypeError: Cannot read property 'parseComponent' of undefined
    at parse (/var/www/site/node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
    at Object.module.exports (/var/www/site/node_modules/vue-loader/lib/index.js:67:22)

...

If you are using vue-loader@>=10.0, simply update vue-template-compiler.

이건 vuejs의 github에서 해결 방법을 확인했다.
pakcage.json에서 vue와 vue-template-compile 의 버전이 일치해야한다고 해서 동일하게 맞춰줬더니 해결이 되었다!!

이외에도 현재 유지보수가 중단된 dropdown 관련 라이브러리에서 오류가 발생했는데, 다행히 해당 라이브러리를 사용하는 곳이 없어서 제거하였다. 이렇게 node.js를 12.x 에서 16버전으로 올리기 대성공!!

storybook 6.5.15 설치

그리고 시작된 storybook 설치. 하지만 vue2도 지원하는 storybook 6점대 버전을 설치하려니 막막했다. 구글링을 하다보니 나랑 비슷한 상황에 있는 블로그를 보았다. 해당 블로그를 보며, 큰 도움을 받았다!

1. storybook 6.5.15 설치

npm install storybook@6.5.15 init --type vue

첫번째 시도에서 무참히 실패하며 오류가 발생했다. (ㅠ3ㅠ)

>> 9 verbose stack     at D:\workspace\front\npm\node_modules\graceful-fs\polyfills.js:287:18
9 verbose stack     at FSReqCallback.oncomplete (node:fs:203:5)
10 verbose cwd D:\workspace\front
11 verbose Windows_NT 10.0.19045
...
13 verbose node v16.20.2

흠........ 주요 키워드가 graceful-fs 인 거 같아서 이걸로 검색했더니 다행히 문제 해결~!
package.json 에 resolution 에 graceful-fs 를 4.2.4 로 작성하였더니, 수정완료!!

"resolutions": {
    "graceful-fs": "4.2.4"
} 

2. storybook 실행

npm run storybook

후후.. 이제는 단번에 되는 걸 기대하지 않는 지경이 되었다. (오류가 나면 블로그에 적을게 많아져서 오히려 좋아~)
이번에는 다음과 같은 오류가 났는데, 참고한 블로그에서도 동일하게 발생해서 해결완료 ㅎㅎ

start-storybook: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT

package.json 에 기본으로 설치된 storybook 관련 라이브러리가 8점대 버전이라서 6.5.15로 맞추어줬다!

Today I Learned!

다양한 삽질을 하면서 많은 공부가 되었다. 그러면서 알게된 내용들을 정-말 간단하게 정리해보려고 한다!

npm 과 npx 차이

npm	npx
라이브러리를 담고 있는 레지스트리	npm에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 도구
package.json 에 정의되어 있음	패키지를 설치하지 않고도 npm 레지스트리에서 원하는 패키지를 실행 할 수 있음

한마디로 npm은 라이브러리 모음, npx는 npm을 실행하는 도구이다.

--legacy-peer-deps 와 force 차이

npm 7버전부터 peer dependencies가 있으면 설치가 안되는 이슈가 있어서 생긴 옵션이다.

• --legacy-peer-deps 는 peerDependency가 맞지 않아도 일단 설치한다.
• force 는 package-lock.json에 몇가지의 다른 의존 버전들을 추가한다.

사용방법은 npm install --force 혹은 npm install --legacy-peer-deps 로 사용한다.

peerdepedency

실제로 패키지에서 직접 import 하지는 않더라도 호환성이 필요한 경우 명시하는 패키지들이다.
예를 들어 hello-library 는 vue 2.6.1 버전을 사용한다면 hello-library를 사용하는 프로젝트에게 vue 2.6.1 을 사용해주세요! 알려주는 것과 같은 용도로 사용한다.