의존성 분류에 대해서 ➗

FE 개발을 해보면 dependencies와 devDependencies에 대해 한번쯤은 들어봤을 것이다.

오늘은 이것과 관련된 얘기를 해보겠다.

 

의존성 (dependency) 분류하기

// package.json
{
  "name": “my-project",
  "dependencies": {
    "vue": "^3.5.10"
  },

  "devDependencies": {
    "eslint": "^8.15.0"
  }
}

 

둘의 차이점은 뭘까?

devDependencies: 빌드나 개발 단계에서만 필요한 패키지들을 나열

dependencies: 프로젝트 실행을 위해 필수적으로 필요한 패키지들을 나열

즉,  eslint는 코드를 정해진 규칙에 맞춰 고쳐주는 역할만 하기 때문에 프로젝트에서 배포할 때에는 필요로 하지 않는다.

 

dependencies와 devDependencies의 개념은 원래 Node.js 라이브러리(npm)를 작성하기 위해 도입되었는데 이 분류 외에도 다른 개념으로도 분류될 수 있다고 생각하면 어떨까?

개발 단계에서만 사용되는지, 실행을 위해 사용되는지도 물론 중요하지만 정확이 어떤 작업 때문에 필요한지 더 명확히 해보면 좋지 않을까?

 

 

 

 

• test: 테스트에 사용되는 패키지들 - viest, msw, playwright
• lint: 린트와 관련된 패키지들 - eslint
• build: 빌드와 관련된 패키지들 - vite
• script: 스크립트 작업에 사용되는 패키지들 - tsx
• frontend: 프론트쪽에서 사용하는 패키지들 - vue, pinia
• backend: 백엔드에서 사용하는 패키지들
• types: 타입과 관련된 패키지들 - 타입 체크, 정의 등

 

pnpm 카탈로그 기능

모노레포 워크스페이스에서 의존성 버전을 공유할 수 있도록 도와주는 기능이다. 

pnpm-workspace.yaml 파일에 catalog나 catalogs를 추가하고 package.json에서 catalog:<name>으로 참조해서 사용한다.

 

// pnpm-workspace.yaml (방법 1)
catalog:
    vue: ^3.5.10

// package.json
{
  “dependencies”: {
    “vue”: “catalog”
  }

}


// pnpm-workspace.yaml (방법 2)
catalogs:
  frontend:
    vue: ^3.5.10

// package.json
{
  “dependencies”: {
    “vue”: “catalogs.frontend”
  }
}

 

이 기능을 활용하면 신입사원이나 처음 프로젝트를 접한 사람 등 더 빠르게 프로젝트 구성을 파악하지 않을까 라는 생각도 든다.

 

 

이상 스텔라였습니다 ✍🏻