vue와 react storybook을 동시에 관리하는 과정에 있어서
storybook-root속package.json파일의script부분에 코드를 입력해서 명령어를 관리하는 것을 보고 package.json에 대해 좀 더 구체적으로 알아보고 싶다는 생각이 되어 글을 정리하게 되었다.
🍎 NPM (Node Package Manager)
npm 은 node.js 을 위한 패키지 매니저이자 node.js 를 위한 오픈소스 생태계이다. 즉, node.js에서 사용하는 JavaScript 모듈들을 패키지로 만들어 관리하고 배포할 수 있도록 하는 도구인 셈.
npm에 공개되어 있는 코드들을 가져오기만 하면, 복잡하고 고도화된 기능을 손쉽게 사용할 수 있게 된다.
npm install
🍎 package.json 구조
우리가 프로젝트에서 사용하게 될 패키지들의 버전을 기록하고 관리해주는 공간이 바로 package.json.
개발자가 배포한 패키지에 대해 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서와도 같다.
그렇기 때문에 npm을 사용한다는 것은 곧, package.json 파일이 존재해야 함을 의미한다.
package.json 파일을 생성하기 위해서는 다음 명령어를 입력해야 하며, 이는 npm으로 패키지를 관리하겠다는 의미이기도 하다.
npm init
// package.json 초기 상태
{
"name": "tutorial", // 프로젝트명
"version": "1.0.0", // 프로젝트 버전
"description": "", // 프로젝트에 대한 간단한 설명
"main": "index.js", // 프로그램의 시작점이 되는 모듈의 ID
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}, // 내부에서 사용할 수 있는 스크립트 명령어들 (npm run 명령이름)
"author": "", // 프로젝트 소유자
"license": "ISC" // 다른 사용자들이 이 패키지를 사용할 때 필요한 권한
}🍏 package-lock.json
패키지 설치 명령어를 입력하면 해당 패키지가 프로젝트에 설치되는데, 이 때 package-lock.json 파일과 node_modules 폴더도 함께 생성된다.
npm install <패키지명>
package.json은 수동으로 관리하는 게 가능한 문서라면,
package-lock.json의 경우 자동으로 관리해준다고 생각하면 된다.
🍏 node_modules
npm으로 설치한 패키지 폴더 외에도 해당 패키지가 만들어지고 활용될 때 필요한 다른 패키지들의 폴더가 함께 된 공간이다.
node_modules가 삭제되더라도, package.json 파일 속 devDependencies 또는 dependencies 옵션에 명시되어 있는 패키지 정보를 보고 node_modules를 다시 설치하는 게 가능하다.
npm i/npm install( +패키지명)
🍏 dependency (의존성 모듈)
패키지를 설치하게 되면 package.json 파일 안에 dependencies 및 devDependencies 라는 필드도 새로 생기게 된다.
{
"dependencies" : {
"react": "^17.0.2",
},
"devDependencies" : {
"@testing-library/jest-dom": "^5.11.4",
},
}
dependecies: 애플리케이션 동작과 연관된 라이브러리 (react, underscore 등)devDependencies: 애플리케이션 동작과는 관련 없는, 오로지 개발을 위해 필요한 라이브러리 (ex. lint, 테스트 모듈 등)-D혹은--save-dev와 함께 패키지를 설치하면 개발용 의존성 패키지가 설치된다.
💡 TIL
이번에 vue와 react 스토리북을 각각 관리하기 위해 storybook-root 폴더의 package.json 파일 안에 다음과 같은 스크립트를 추가했었다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "storybook dev -p 6006",
"storybook:react": "cd storybook-react && npm install && npm run storybook",
"storybook:vue": "cd storybook-vue && npm install && npm run storybook",
"build-storybook": "storybook build",
"build-storybook:react": "cd storybook-react && npm install && npm run build-storybook",
"build-storybook:vue": "cd storybook-vue && npm install && npm run build-storybook",
"deploy:react": "cd storybook-react && npm install && npm run build-storybook && npx chromatic --project-token=${react_storybook_token}",
"deploy:vue": "cd storybook-vue && npm install && npm run build-storybook && npx chromatic --project-token=${vue_storybook_token}"
},리액트 스토리북 실행환경을 작동 시키기 위해서는 npm run storybook:react 을 입력해주었고, 뷰 스토리북은 npm run storybook:vue 를 입력하는 등 다양한 명령어 실행이 가능해졌다.
이것을 보고 package.json 의 구조가 궁금해져서 찾아보게 되었고, 다음에는 위 명령어들을 bitbucket pipeline을 통해 자동화 시킬 수 있도록 수정하고 싶어졌다!
