최근에 알게 된 것들 lerna / storybook / yarn, npm 차이

lerna 

- 만들어진 이유

    -  한 프로젝트 안에서 여러개의 프로젝트를 편하게 관리하려고 만들었다.

    - 여러개의 프로젝트는 각각 패키지라고 부른다.

 

lerna 써보기

mkdir lerna-test

cd lerna-test

npx lerna init

아래와 같이 폴더가 생긴다.

packages 라고 폴더가 만들어지는데 저 안에 각각의 프로젝트들을 넣으면 된다.

예를 들어서 person 서비스, car 서비스, contents 서비스 이런식으로 만들고 개발할 수 있다.

 

lerna.json 의 내용 - lerna의 세팅 정보가 들어있다.

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}

 

packages  [ "packages/*" ] 이 부분은 패키지 안에 항목들의 경로를 적는다.

 

package.json 의 내용

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}

 

lerna 에서 새로운 패키지를 만드는 방법

 

현재 프로젝트의 루트 경로인 lerna-test 에서 

npx lerna create test-package1

명령어를 입력한다.

아래 그림처럼 npm init 했을때 처럼 쭉 물어본다.

 

그렇게 하고 나면 패키지가 만들어진다.

1개 더 만들어 본다.

npx lerna create test-package2

이제 디렉토리를 확인해본다.

잘 만들어졌다!

 

참고할 문서의 주소

github.com/lerna/lerna/tree/main/commands/create#readme

lerna/lerna

만들어진 각각의 test-package1, test-package2 를 살펴보면 둘다 package.json 을 가지고 있다.

그리고 프로젝트의 루트 경로인 lerna-test 에도 package.json 을 가지고 있다.

 

이렇게 되어 있는 이유는 전체 패키지들의 공통 모듈은 루트 경로에 설치되고

각각의 패키지에만 있는 라이브러리는 패키지 안에 설치될 수 있기 때문이다.

 

이쯤에서 npm 모듈을 설치하는 명령어를 소개한다.

 

npx lerna bootstrap

github.com/lerna/lerna/tree/main/commands/bootstrap#readme

lerna/lerna

이 중에서도 --hoist 옵션을 기억해야 한다.

npx lerna bootstrap --hoist

hoist documentation 을 클릭하면 

아래 문서로 이동한다.

아래 부분이 핵심

공통의 의존성은 루트 경로에 설치된다. 

각각의 패키지 안에는 각자의 node_modules 가 설치된다.

npx lerna bootstrap --hoist

node_modules 가 생겼다.

 

이제 각각의 패키지 안에 js 파일을 넣고 한번 동시에 실행해보려고 한다.

index.js 를 각각의 패키지에 만들었다.

function hello() {
    console.log("hello package 1")
}
hello()

function hello2() {
    console.log("hello package 2")
}
hello2()

package.json에 둘 다 아래 그림처럼 써준다.

 

루트 경로에서 아래와 같이 npx lerna run start 한다.

npx lerna run test

npx lerna run start 이런 명령어들은 각각의 패키지 안에 있는 start, test 명령을 실행한다.

 

 

story book

- 만들어진 이유

- 독립적인 컴포넌트를 더 쉽게 개발하려고 만들어졌다.

- 독립적인 컴포넌트들을 조합해서 복잡한 컴포넌트를 만들어낸다.

 

yarn

- npm 같은 패키지 관리도구 

- 지금까지 느낀 장점 : npm install 보다 yarn add 가 속도가 더 빠르다.

여러 자료들에서 크게 차이가 없다고는 하지만 체감상 yarn 이 더 빨랐다.