<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/environment">environment</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/environment/monorepo/yarn_workspaces/command/">[Monorepo] Yarn Workspaces의 명령어</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88">블로그 시리즈</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</a></li><li><a href="#workspaces%EC%9D%98-%EB%AA%85%EB%A0%B9%EC%96%B4">Workspaces의 명령어</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성할 때, 각각의 프로젝트의 <code>scripts</code>에 설정된 명령어를 실행하는 방법에 대해서 알아보도록 하겠습니다.<h2 id="블로그-시리즈">블로그 시리즈</h2>이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/environment/repository_strategy/" target="\_blank">[프로젝트 관리] 리포지토리 전략</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/tools/" target="\_blank">[JavaScript] 모노레포(Monorepo)를 위한 도구들</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/module-resolutions/" target="\_blank">[Monorepo] NodeJS의 모듈 불러오기</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/symlink/" target="\_blank">[Monorepo] Symlink</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/" target="\_blank">[Monorepo] Yarn Workspaces</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/hoisting/" target="\_blank">[Monorepo] Yarn Workspaces의 Hoisting</a></li><li>[Monorepo] Yarn Workspaces의 명령어</li><li><a href="https://deku.posstree.com/ko/environment/monorepo/pnpm/" target="\_blank">[Monorepo] pnpm을 사용하여 모노레포 만들기</a></li></ul><h2 id="예제">예제</h2>각각의 프로젝트의 <code>scripts</code>에 설정된 명령어를 실행하는 방법을 알아보기 위해 예제를 만들어 봅시다. 우선, 다음과 같이 폴더와 파일 구조를 생성합니다.<div><pre><code>.
├── package.json
└── src
 ├── module-a
 │ ├── index.js
 │ └── package.json
 └── module-b
 ├── index.js
 └── package.json
</code></pre></div><code>module-a</code>의 <code>package.json</code>은 다음과 같습니다.<div><pre><code>// src/module-a/package.json
{
 "name": "module-a",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
 "start": "node index.js"
 }
}
</code></pre></div><code>module-b</code>의 <code>package.json</code>은 다음과 같습니다.<div><pre><code>// src/module-b/package.json
{
 "name": "module-b",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
 "start": "node index.js"
 }
}
</code></pre></div>그리고 <code>module-b</code>의 <code>index.js</code>는 다음과 같습니다.<div><pre><code>// src/module-b/index.js
console.log('module-b');
</code></pre></div><code>module-a</code>의 <code>index.js</code>는 다음과 같습니다.<div><pre><code>// src/module-a/index.js
console.log('module-a');

require('module-b');
</code></pre></div>마지막으로 루트 폴더의 있는 <code>package.json</code> 파일을 다음과 같이 수정합니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "private": true,
 "workspaces": {
 "packages": ["src/*"]
 }
}
</code></pre></div>이제 다음 명령어를 실행하여 패키지를 설치하고, <code>module-a</code>와 <code>module-b</code>의 <code>scripts</code>에 설정된 명령어를 실행해 봅시다.<div><pre><code>yarn install
cd ./src/module-a
yarn start

cd ../..

cd ./src/module-b
yarn start
</code></pre></div>그럼 다음과 같이 <code>module-a</code>와 <code>module-b</code>가 잘 실행되는 것을 확인할 수 있습니다.<div><pre><code># cd ./src/module-a
# yarn start
module-a
module-b
# cd ./src/module-b
# yarn start
module-b
</code></pre></div><h2 id="workspaces의-명령어">Workspaces의 명령어</h2>예제와 같이 다음 명령어를 사용하여 각각의 프로젝트에 설정된 명령어를 실행할 수 있습니다.<div><pre><code>yarn install
cd ./src/module-a
yarn start

cd ../..

cd ./src/module-b
yarn start
</code></pre></div>하지만 매번 해당 프로젝트로 이동한 후 명령어를 실행할 수는 것은 효율적이지 않습니다.<code>Yarn</code>은 이런 문제를 해결하기 위해 다음과 같은 <code>Workspaces</code>는 명령어를 지원합니다.<div><pre><code>yarn workspace &lt;workspace_name&gt; &lt;command&gt;
</code></pre></div>이 명령어를 활용하면 프로젝트의 폴더로 이동하지 않고도 명령어를 실행할 수 있습니다. <code>&lt;workspace_name&gt;</code>에는 <code>package.json</code>의 <code>name</code>에 설정된 값이 들어가며, <code>&lt;command&gt;</code>에는 <code>scripts</code>에 설정된 명령어가 들어갑니다. 앞선 예제의 명령어를 다음과 같이 실행할 수 있습니다.<div><pre><code>yarn workspace module-a start
yarn workspace module-b start
</code></pre></div>명령어를 실행하면 다음과 같이 결과값이 잘 표시되는 것을 확인할 수 있습니다.<div><pre><code># yarn workspace module-a start
module-a
module-b
# yarn workspace module-b start
module-b
</code></pre></div><h2 id="완료">완료</h2>이것으로 <code>Yarn</code>의 <code>Workspaces</code>로 구성된 모노레포에서 각각의 프로젝트에 설정된 명령어를 간단하게 실행하는 방법에 대해서 알아보았습니다. 여러분도 매번 해당 프로젝트로 이동하여 명령어를 실행하고 계셨다면 <code>Workspaces</code>의 명령어를 사용하여 좀 더 편하게 명령어를 실행해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Yarn의 Workspaces를 사용하여 구성된 모노레포에서, 각각의 프로젝트의 scripts에 설정된 명령어를 실행하는 방법에 대해서 알아보도록 하겠습니다.