이 영역을 누르면 첫 페이지로 이동
Nuhends 의 Tech Life 블로그의 첫 페이지로 이동

Nuhends 의 Tech Life

페이지 맨 위로 올라가기

Nuhends 의 Tech Life

IT / Tech / 재테크 관련 뉴스를 최대한 알기 쉽게 전달하는 Tech 블로그 입니다.

[node] yarn workspaces 빠르게 알아보기

  • 2021.07.18 01:55
  • 프로그래밍/개발 환경
반응형

[node] yarn workspaces 빠르게 알아보기


node workspaces 옵션 알아보기


workspace 란?

Workspaces는 단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지를 관리할 수 있도록 지원하는 npm cli의 기능 집합을 가리키는 일반 용어입니다.

 

Workspace를 통해 로컬 파일 시스템에서 연결된 패키지를 훨씬 더 효율적으로 처리할 수 있습니다.

npm install의 일부로 연결 프로세스를 자동화하고 현재 node\_modules 폴더에 심볼링해야 하는 패키지에 대한 참조를 추가하기 위해 npm link를 수동으로 사용할 필요가 없습니다.

 

또한 npm install 중에 자동 동기화되는 패키지를 하나의 workspace로 지칭합니다. workspace의 package.json 에 명시적으로 정의된 현재 로컬 파일 시스템 내의 중첩된 package 입니다.

 

즉, 여러 프로젝트가 모여 있는 폴더에서 작업 공간을 worksapce 라고 부릅니다.

사용법

루트(root) 경로에 yarn init 혹은 yarn init -y 로 `package.json를 만듭니다.

workspaces 속성 설정

package.json 파일의 workspaces 속성에 프로젝트의 이름 혹은 프로젝트 폴더의 직접 경로를 배열 요소로 추가합니다.

참고 사항

  1. 프로젝트의 이름은 각 프로젝트 package.json 에 name 속성으로 정의된 값입니다.
  2. root 의 package.json 에 priavte: true 는 공식 배포용이 아니라는 것을 의미합니다. (즉, npm Repository에 배포하지 않는 것을 의미) 참고 : https://docs.npmjs.com/cli/v7/configuring-npm/package-json#private

 

반응형

 

의존성 관계 정리

이렇게 workspaces 속성을 사용하게 되면 의존성 관계가 달라집니다.
프로젝트 루트에서 yarn install 혹은 yarn을 실행하게 되면 알 수 있습니다.

루트 폴더의 package.json 에 있는 dependency 뿐만 아니라 하위 각각의 workspace에 명시되어 있는 dependency가 겹치는 모듈을 최소화하여 루트 폴더의 node\_moduels 폴더 안에 설치됩니다. 또한 dependency로 명시되어있는 모듈은 symbol link로 npm 배포 버전이 아니라 로컬에 있는 코드를 바로 볼 수 있게 해 줍니다.

workspaces 속성을 통해 적용 전, 후를 비교해보자면

 

적용 전

yarn workspaces 적용 전

적용 후

yarn workspaces 적용 후

루트의 node\_modules에 workspace 전체 package를 설치하게 되어, 중복되는 모듈의 설치를 최소화할 수 있습니다.

좀 더 자세한 정보를 알고 싶으시면 npm 공식 DOC을 참고하세요.

  • https://docs.npmjs.com/cli/v7/configuring-npm/package-json#workspaces
  • https://docs.npmjs.com/cli/v7/using-npm/workspaces
반응형
저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > 개발 환경' 카테고리의 다른 글

Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음  (0) 2023.04.08
[VS code] mac에서 완전 제거하는 방법!  (0) 2021.12.27
[VScode] Fira Code 폰트 적용 방법, 간단 정리  (0) 2021.10.09

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

    Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

    2023.04.08
  • [VS code] mac에서 완전 제거하는 방법!

    [VS code] mac에서 완전 제거하는 방법!

    2021.12.27
  • [VScode] Fira Code 폰트 적용 방법, 간단 정리

    [VScode] Fira Code 폰트 적용 방법, 간단 정리

    2021.10.09
다른 글 더 둘러보기

정보

Nuhends 의 Tech Life 블로그의 첫 페이지로 이동

Nuhends 의 Tech Life

  • Nuhends 의 Tech Life의 첫 페이지로 이동
반응형

검색

메뉴

  • 홈
  • 웹 개발
  • 경제 데이터
  • 경제 공부
  • 방명록

카테고리

  • 분류 전체보기 (127)
    • 프로그래밍 (69)
      • React (3)
      • HTML&CSS 사전 (13)
      • JAVASCRIPT 사전 (11)
      • Algorithm (23)
      • 이슈 정리 (2)
      • 개발 환경 (4)
      • NodeJS (1)
      • Typescript (4)
      • NextJS (5)
      • React-Query (2)
      • 인프라 (0)
      • ai (1)
    • 경제 데이터 (22)
      • 주식 순위 (20)
      • 경제지표 (2)
    • 경제 공부 (25)
      • 경제 신문 읽기 (3)
      • 세금 재테크 (7)
      • 인사이트 (4)
      • 경제용어정리 (9)
      • 정부 지원 제도 관련 (2)
    • 팁 모음 (11)
      • 인터넷 (5)
      • 생활 (3)
      • SNS 맛집 (3)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • 코테 풀이
  • javascript
  • 자바스크립트
  • 알고리즘
  • softeer
  • 코테
  • 코딩테스트
  • 프로그래머스

나의 외부 링크

정보

nuhends의 Nuhends 의 Tech Life

Nuhends 의 Tech Life

nuhends

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © nuhends. Designed by Fraccino.

티스토리툴바