<div id="readability-page-1" class="page"><div id="entry-view">
 
 <main>
 <div>
 <article id="mainContent">
 <div>
 <a href="/m/category/React">React</a><h3>TurboRepo로 monorepo 환경 구성하기</h3>
 </div>
 <cite>하늘을난모기</cite>
 2021. 12. 25. 19:38
 
 

<ins data-ad-client="ca-pub-9763075603101547" data-ad-slot="8257651518" data-ad-format="auto" data-full-width-responsive="true"></ins>
 <div>
 최근에 vercel에서 turborepo를 인수하면서 공식적으로 turborepo를 지원하기 시작했다.
아직 vercel에 바로 연결은 안되지만, 로컬환경에서 멀티모듈 환경을 구성하기는 확실히 간편해졌다.
배포를 하기 위한 작업은 조금 더 시간이 필요할거 같다만..
<a href="https://turborepo.org/docs/getting-started" target="_blank" rel="noopener">https://turborepo.org/docs/getting-started</a>
<figure id="og_1640423829718" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Getting Started | Turborepo" data-og-description="" data-og-host="turborepo.org" data-og-source-url="https://turborepo.org/docs/getting-started" data-og-url="https://turborepo.org/docs/getting-started" data-og-image="https://scrap.kakaocdn.net/dn/lkKN4/hyMQorQUHU/C3XzUqjkIO2dDZ0YrDt0T0/img.png?width=1686&amp;height=882&amp;face=0_0_1686_882"><a href="https://turborepo.org/docs/getting-started" target="_blank" rel="noopener" data-source-url="https://turborepo.org/docs/getting-started">

<div>
Getting Started | Turborepo

turborepo.org
</div>
</a><img src="https://scrap.kakaocdn.net/dn/lkKN4/hyMQorQUHU/C3XzUqjkIO2dDZ0YrDt0T0/img.png?width=1686&amp;height=882&amp;face=0_0_1686_882"></figure>
위 페이지를 참고하여 시작할 수 있다.
npx create-turbo@latest
위 명령어를 치면 간편하게 vercel 환경을 구성할 수 있다.
하지만, yarn으로 시작하는 방법을 다뤄보도록 한다.

1. 프로젝트 폴더를 생성
yarn init 으로 프로젝트 초기 설정을 진행한다.

2. vercel을 추가
yarn&nbsp;add&nbsp;turbo&nbsp;-W&nbsp;--dev
이제 최소한의 vercel을 다룰 준비가 됐다.

3. 필요한 폴더 구축하기
mkdir apps
mkdir packages
apps에는 보통 실제로 화면을 구성하기 위한 페이지들의 프로젝트 폴더가 된다.
예를들어 admin페이지와 client페이지를 구분하며 다른 독립적인 폴더로 구성하고 싶다면
apps폴더 안에 admin과 client폴더를 만들고 각각 다른 환경을 구성하면 된다.
packages에는 각종 util이나 config 파일 그리고 library처럼 쓸 수 있는 컴포넌트들로 구성된다.
cd apps mkdir admin mkdir client
cd packages mkdir components mkdir tsconfig
4. next 및 typescript 환경 구성하기
apps에 사용할 프레임워크로 next.js를 택했기 때문에 next.js에 사용할 tsconfig에 대한 환경을 구성해준다.
cd tsconfig vi base.json
<blockquote data-ke-style="style3">
<div>
{

&nbsp; "display": "Default",
&nbsp; "compilerOptions": {
&nbsp; &nbsp; "composite": false,
&nbsp; &nbsp; "declaration": true,
&nbsp; &nbsp; "declarationMap": true,
&nbsp; &nbsp; "esModuleInterop": true,
&nbsp; &nbsp; "forceConsistentCasingInFileNames": true,
&nbsp; &nbsp; "inlineSources": false,
&nbsp; &nbsp; "isolatedModules": true,
&nbsp; &nbsp; "noUnusedLocals": false,
&nbsp; &nbsp; "noUnusedParameters": false,
&nbsp; &nbsp; "preserveWatchOutput": true,
&nbsp; &nbsp; "skipLibCheck": true,
&nbsp; &nbsp; "strict": true
&nbsp; },
&nbsp; "exclude": ["node_modules"]
}

</div>
</blockquote>

vi nextjs.json
<blockquote data-ke-style="style3">{ &nbsp; "$schema": "https://json.schemastore.org/tsconfig", &nbsp; "display": "Next.js", &nbsp; "extends": "./base.json", &nbsp; "compilerOptions": { &nbsp; &nbsp; "target": "es5",&nbsp; &nbsp; &nbsp; "lib": ["dom", "dom.iterable", "esnext"], &nbsp; &nbsp; "allowJs": true, &nbsp; &nbsp; "skipLibCheck": true, &nbsp; &nbsp; "strict": false, &nbsp; &nbsp; "forceConsistentCasingInFileNames": true, &nbsp; &nbsp; "noEmit": true, &nbsp; &nbsp; "incremental": true, &nbsp; &nbsp; "esModuleInterop": true, &nbsp; &nbsp; "module": "esnext", &nbsp; &nbsp; "moduleResolution": "node", &nbsp; &nbsp; "resolveJsonModule": true, &nbsp; &nbsp; "isolatedModules": true, &nbsp; &nbsp; "jsx": "preserve" &nbsp; }, &nbsp; "include": ["src", "next-env.d.ts"], &nbsp; "exclude": ["node_modules"] }</blockquote>

vi react-library.json
<blockquote data-ke-style="style3">{ &nbsp; "$schema": "https://json.schemastore.org/tsconfig", &nbsp; "display": "React Library", &nbsp; "extends": "./base.json", &nbsp; "compilerOptions": { &nbsp; &nbsp; "lib": ["ES2015"], &nbsp; &nbsp; "module": "ESNext", &nbsp; &nbsp; "target": "ES6", &nbsp; &nbsp; "jsx": "react-jsx" &nbsp; } }</blockquote>


vi package.json
<blockquote data-ke-style="style3">{ &nbsp; "name": "tsconfig", &nbsp; "version": "0.0.0", &nbsp; "private": true, &nbsp; "main": "index.js", &nbsp; "files": [ &nbsp; &nbsp; "base.json", &nbsp; &nbsp; "nextjs.json", &nbsp; &nbsp; "react-library.json" &nbsp; ] }</blockquote>

tsconfig의 설정이 끝났다.
이제 이 설정한 파일을 다른 쪽에서 사용할 수 있다.

5. components 구성하기
cd components vi package.json
<blockquote data-ke-style="style3">{ &nbsp; "name": "components", &nbsp; "version": "0.0.0", &nbsp; "main": "./index.tsx", &nbsp; "types": "./index.tsx", &nbsp; "license": "MIT", &nbsp; "devDependencies": { &nbsp; &nbsp; "@types/react": "^17.0.37", &nbsp; &nbsp; "@types/react-dom": "^17.0.11", &nbsp; &nbsp; "tsconfig": "*", &nbsp; &nbsp; "typescript": "^4.5.2" &nbsp; } }</blockquote>
react를 사용하기 위해 react에 대한 작업과 앞서 만들었던 tsconfig를 불러온다.
가볍게 샘플용 버튼을 하나 만든다. mkdir Button vi Button.tsx
<blockquote data-ke-style="style3">export const Button = () =&gt; { &nbsp; return ( &nbsp; &nbsp; &lt;button&gt; Button &lt;/button&gt; &nbsp; ) }</blockquote>

components 루트 페이지로 돌아와서 index.ts 파일을 만든다.
vi index.ts
<blockquote data-ke-style="style3">export * from "./Button/Button";</blockquote>

6. 페이지 구축하기
위에서 만들었던 apps안에 admin과 client 페이지를 구축하기 위한 작업을 진행한다.
next.js 기반으로 만들 예정이다.
next.js가 아니더라도 각각 프로젝트별로 원하는 구성으롤 만들 수 있다. (ex, admin은 vue.js, client는 svelt.js 등)

cd client yarn init vi package.json
<div>
<blockquote data-ke-style="style3">{ &nbsp; "name": "client", &nbsp; "version": "1.0.0", &nbsp; "private": true, &nbsp; "scripts": { &nbsp; &nbsp; "dev": "next dev", &nbsp; &nbsp; "build": "next build", &nbsp; &nbsp; "start": "next start", &nbsp; }, &nbsp; "dependencies": { &nbsp; &nbsp; "next": "latest", &nbsp; &nbsp; "react": "^17.0.2", &nbsp; &nbsp; "react-dom": "^17.0.2", &nbsp; &nbsp; "components": "*" &nbsp; }, &nbsp; "devDependencies": { &nbsp; &nbsp; "@types/react": "^17.0.37", &nbsp; &nbsp; "@types/react-dom": "^17.0.11", &nbsp; &nbsp; "config": "*", &nbsp; &nbsp; "next-transpile-modules": "^9.0.0", &nbsp; &nbsp; "tsconfig": "*", &nbsp; &nbsp; "typescript": "^4.5.3" &nbsp; } }</blockquote>
</div>

vi next.config.js
<blockquote data-ke-style="style3">const withTM = require("next-transpile-modules")(["components"]); module.exports = withTM({ &nbsp; reactStrictMode: true, });</blockquote>

vi tsconfig.json
<blockquote data-ke-style="style3">{ &nbsp; "extends": "tsconfig/nextjs.json", &nbsp; "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], &nbsp; "exclude": ["node_modules"] }</blockquote>

mkdir pages cd pages vi index.tsx
<blockquote data-ke-style="style3">import { Button } from "components";export default function Main() { &nbsp; return ( &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Client Main&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;Button /&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; ); }</blockquote>

기본적인 client 파일 구성이 완료됐다.
admin도 위와 같이 만든다.
cd admin yarn init vi package.json
<div>
<blockquote data-ke-style="style3">{ &nbsp; "name": "admin", &nbsp; "version": "1.0.0", &nbsp; "private": true, &nbsp; "scripts": { &nbsp; &nbsp; "dev": "next dev --port 3001",&nbsp; &nbsp; &nbsp; &nbsp; "build": "next build", &nbsp; &nbsp; "start": "next start", &nbsp; }, &nbsp; "dependencies": { &nbsp; &nbsp; "next": "latest", &nbsp; &nbsp; "react": "^17.0.2", &nbsp; &nbsp; "react-dom": "^17.0.2", &nbsp; &nbsp; "components": "*" &nbsp; }, &nbsp; "devDependencies": { &nbsp; &nbsp; "@types/react": "^17.0.37", &nbsp; &nbsp; "@types/react-dom": "^17.0.11", &nbsp; &nbsp; "config": "*", &nbsp; &nbsp; "next-transpile-modules": "^9.0.0", &nbsp; &nbsp; "tsconfig": "*", &nbsp; &nbsp; "typescript": "^4.5.3" &nbsp; } }</blockquote>
</div>
여기서 한 가지 client와 다른점은, 두 프로젝트를 동시에 실행시키기 위해 next의 port를 다르게 지정한다는 점이다.
vi next.config.js
<blockquote data-ke-style="style3">const withTM = require("next-transpile-modules")(["components"]); module.exports = withTM({ &nbsp; reactStrictMode: true, });</blockquote>

vi tsconfig.json
<blockquote data-ke-style="style3">{ &nbsp; "extends": "tsconfig/nextjs.json", &nbsp; "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], &nbsp; "exclude": ["node_modules"] }</blockquote>

mkdir pages cd pages vi index.tsx
<blockquote data-ke-style="style3">import { Button } from "components";export default function Main() { &nbsp; return ( &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Admin Main&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;Button /&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; ); }</blockquote>
페이지 구분을 위해 h1태그 안에 값을 admin이라고 바꿔주자

이제 마지막으로 turbo로 연결하는 작업만이 남았다.
프로젝트의 루트 폴더로 돌아온다.
package.json파일을 연다.
vi package.json
<blockquote data-ke-style="style3">{ &nbsp; "name": "turbo-repo-test", &nbsp; "version": "1.0.0", &nbsp; "main": "index.js", &nbsp; "repository": "https://github.com/KimHunJin/turbo-repo-test.git", &nbsp; "author": "mos", &nbsp; "license": "MIT",&nbsp; &nbsp; "private": true, &nbsp; "scripts": { &nbsp; &nbsp; "build": "turbo run build", &nbsp; &nbsp; "dev": "turbo run dev --no-cache --parallel --continue" &nbsp; }, &nbsp; "baseBranch": "origin/main", &nbsp; "workspaces": [ &nbsp; &nbsp; "packages/*", &nbsp; &nbsp; "apps/*" &nbsp; ], &nbsp; "devDependencies": { &nbsp; &nbsp; "turbo": "^1.0.23" &nbsp; }, &nbsp; "dependencies": { &nbsp; &nbsp; "typescript": "^4.5.2" &nbsp; }, &nbsp; "turbo": { &nbsp; &nbsp; "pipeline": { &nbsp; &nbsp; &nbsp; "build": { &nbsp; &nbsp; &nbsp; &nbsp; "outputs": [ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "dist/**", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ".next/**", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "public/dist/**" &nbsp; &nbsp; &nbsp; &nbsp; ], &nbsp; &nbsp; &nbsp; &nbsp; "dependsOn": [ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "^build" &nbsp; &nbsp; &nbsp; &nbsp; ] &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; "test": { &nbsp; &nbsp; &nbsp; &nbsp; "outputs": [ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coverage/**" &nbsp; &nbsp; &nbsp; &nbsp; ], &nbsp; &nbsp; &nbsp; &nbsp; "dependsOn": [] &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; "lint": { &nbsp; &nbsp; &nbsp; &nbsp; "outputs": [] &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; "dev": { &nbsp; &nbsp; &nbsp; &nbsp; "cache": false &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; "clean": { &nbsp; &nbsp; &nbsp; &nbsp; "cache": false &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; } &nbsp; } }</blockquote>
yarn install
yarn run build
yarn run dev

세가지 작업이 모두 정상적으로 이뤄지면 된다.
localhost:3000 으로 들어가면 client 페이지가,
localhost:3001 으로 들어가면 admin 페이지가 실행됨을 확인할 수 있다.

전체 프로젝트 구성은
<a href="https://github.com/KimHunJin/turbo-repo-test" target="_blank" rel="noopener">https://github.com/KimHunJin/turbo-repo-test</a>
<figure id="og_1640428594616" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="GitHub - KimHunJin/turbo-repo-test" data-og-description="Contribute to KimHunJin/turbo-repo-test development by creating an account on GitHub." data-og-host="github.com" data-og-source-url="https://github.com/KimHunJin/turbo-repo-test" data-og-url="https://github.com/KimHunJin/turbo-repo-test" data-og-image="https://scrap.kakaocdn.net/dn/XEuoB/hyMQnNlels/m5JKvaVL5Ent5LXF1PC9AK/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"><a href="https://github.com/KimHunJin/turbo-repo-test" target="_blank" rel="noopener" data-source-url="https://github.com/KimHunJin/turbo-repo-test">

<div>
GitHub - KimHunJin/turbo-repo-test
Contribute to KimHunJin/turbo-repo-test development by creating an account on GitHub.
github.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/XEuoB/hyMQnNlels/m5JKvaVL5Ent5LXF1PC9AK/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"></figure>
위 폴더를 참고하면 된다.

추가로 다른 프로젝트를 구성하고 싶다면,
turbo-repo의 공식 깃헙을 확인하자
<a href="https://github.com/vercel/turborepo/tree/main/examples" target="_blank" rel="noopener">https://github.com/vercel/turborepo/tree/main/examples</a>
<figure id="og_1640428636709" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="GitHub - vercel/turborepo: The High-performance Build System for JavaScript &amp; TypeScript Codebases" data-og-description="The High-performance Build System for JavaScript &amp; TypeScript Codebases - GitHub - vercel/turborepo: The High-performance Build System for JavaScript &amp; TypeScript Codebases" data-og-host="github.com" data-og-source-url="https://github.com/vercel/turborepo/tree/main/examples" data-og-url="https://github.com/vercel/turborepo" data-og-image="https://scrap.kakaocdn.net/dn/bzNzSF/hyMQq4mmOp/qB4bBCQJc6KTArxYKFvJ91/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"><a href="https://github.com/vercel/turborepo/tree/main/examples" target="_blank" rel="noopener" data-source-url="https://github.com/vercel/turborepo/tree/main/examples">

<div>
GitHub - vercel/turborepo: The High-performance Build System for JavaScript &amp; TypeScript Codebases
The High-performance Build System for JavaScript &amp; TypeScript Codebases - GitHub - vercel/turborepo: The High-performance Build System for JavaScript &amp; TypeScript Codebases
github.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bzNzSF/hyMQq4mmOp/qB4bBCQJc6KTArxYKFvJ91/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"></figure>

 
 
 </div>

<ins data-ad-client="ca-pub-9763075603101547" data-ad-slot="8257651518" data-ad-format="auto" data-full-width-responsive="true"></ins>

 

 </article>
 
 
 
 
 
 
 
 
 
 
 
 </div>
 </main>
 
 </div></div>

하늘을 난 모기

최근에 vercel에서 turborepo를 인수하면서 공식적으로 turborepo를 지원하기 시작했다.
아직 vercel에 바로 연결은 안되지만, 로컬환경에서 멀티모듈 환경을 구성하기는 확실히 간편해졌다.
배포를 하기 위한 작업은 조금 더 시간이 필요할거 같다만..
https://turborepo.org/docs/getting-started
위 페이지를 참고하여 시작할 수 있다.
npx create-turbo@latest
위 명령어를 치면 간편하게 vercel 환경을 구성할 수 있다.
하지만, yarn으로 시작하는 방법을 다뤄보도록 한다.
 
1. 프로젝트 폴더를 생성
yarn init 으로 프로젝트 초기 설정을 진행한다.
 
2. vercel을 추가
yarn add turbo -W --dev
이제 최소한의 vercel을 다룰 준비가 됐다.
 
3. 필요한 폴더 구축하기
mkdir apps
mkdir packages
apps에는 보통 실제로 화면을 구성하기 위한 페이지들의 프로젝트 폴더가 된다.
예를들어 admin페이지와 client페이지를 구분하며 다른 독립적인 폴더로 구성하고 싶다면
apps폴더 안에 admin과 client폴더를 만들고 각각 다른 환경을 구성하면 된다.
packages에는 각종 util이나 config 파일 그리고 library처럼 쓸 수 있는 컴포넌트들로 구성된다.
cd apps
mkdir admin
mkdir client
cd packages
mkdir components
mkdir tsconfig
4. next 및 typescript 환경 구성하기
apps에 사용할 프레임워크로 next.js를 택했기 때문에 next.js에 사용할 tsconfig에 대한 환경을 구성해준다.
cd tsconfig
vi base.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": false,
    "isolatedModules": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true
  },
  "exclude": ["node_modules"]
}
 
 
vi nextjs.json
{ 
  "$schema": "https://json.schemastore.org/tsconfig", 
  "display": "Next.js", 
  "extends": "./base.json", 
  "compilerOptions": { 
    "target": "es5",  
    "lib": ["dom", "dom.iterable", "esnext"], 
    "allowJs": true, 
    "skipLibCheck": true, 
    "strict": false, 
    "forceConsistentCasingInFileNames": true, 
    "noEmit": true, 
    "incremental": true, 
    "esModuleInterop": true, 
    "module": "esnext", 
    "moduleResolution": "node", 
    "resolveJsonModule": true, 
    "isolatedModules": true, 
    "jsx": "preserve"
  }, 
  "include": ["src", "next-env.d.ts"], 
  "exclude": ["node_modules"]
}
 
vi react-library.json
{ 
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Library", 
  "extends": "./base.json", 
  "compilerOptions": { 
    "lib": ["ES2015"], 
    "module": "ESNext", 
    "target": "ES6", 
    "jsx": "react-jsx" 
  }
}
 
 
vi package.json
{  "name": "tsconfig",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "files": [
    "base.json",
    "nextjs.json",
    "react-library.json"
  ]
}
 
tsconfig의 설정이 끝났다.
이제 이 설정한 파일을 다른 쪽에서 사용할 수 있다.
 
5. components 구성하기
cd components
vi package.json
{  "name": "components",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "tsconfig": "*",
    "typescript": "^4.5.2"
  }
}
react를 사용하기 위해 react에 대한 작업과 앞서 만들었던 tsconfig를 불러온다.
가볍게 샘플용 버튼을 하나 만든다.
mkdir Button
vi Button.tsx
export const Button = () => { 
  return ( 
    <button> Button </button> 
  )
}
 
components 루트 페이지로 돌아와서 index.ts 파일을 만든다.
vi index.ts
export * from "./Button/Button";
 
6. 페이지 구축하기
위에서 만들었던 apps안에 admin과 client 페이지를 구축하기 위한 작업을 진행한다.
next.js 기반으로 만들 예정이다.
next.js가 아니더라도 각각 프로젝트별로 원하는 구성으롤 만들 수 있다. (ex, admin은 vue.js, client는 svelt.js 등)
 
cd client
yarn init
vi package.json
{  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "components": "*"
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "config": "*",
    "next-transpile-modules": "^9.0.0",
    "tsconfig": "*",
    "typescript": "^4.5.3"
  }
}
 
vi next.config.js
const withTM = require("next-transpile-modules")(["components"]);
module.exports = withTM({ 
  reactStrictMode: true,
});
 
vi tsconfig.json
{ 
  "extends": "tsconfig/nextjs.json", 
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 
  "exclude": ["node_modules"]
}
 
mkdir pages
cd pages
vi index.tsx
import { Button } from "components";
export default function Main() {
  return (
    <div>
      <h1>Client Main</h1>
      <Button />
    </div>
  );
}
 
기본적인 client 파일 구성이 완료됐다.
admin도 위와 같이 만든다.
cd admin
yarn init
vi package.json
{  "name": "admin",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3001",    
    "build": "next build",
    "start": "next start",
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "components": "*"
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "config": "*",
    "next-transpile-modules": "^9.0.0",
    "tsconfig": "*",
    "typescript": "^4.5.3"
  }
}
여기서 한 가지 client와 다른점은, 두 프로젝트를 동시에 실행시키기 위해 next의 port를 다르게 지정한다는 점이다.
vi next.config.js
const withTM = require("next-transpile-modules")(["components"]);
module.exports = withTM({
  reactStrictMode: true,
});
 
vi tsconfig.json
{  "extends": "tsconfig/nextjs.json",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
 
mkdir pages
cd pages
vi index.tsx
import { Button } from "components";
export default function Main() {
  return (
    <div>
      <h1>Admin Main</h1>
      <Button />
    </div>
  );
}
페이지 구분을 위해 h1태그 안에 값을 admin이라고 바꿔주자
 
이제 마지막으로 turbo로 연결하는 작업만이 남았다.
프로젝트의 루트 폴더로 돌아온다.
package.json파일을 연다.
vi package.json
{  "name": "turbo-repo-test", 
  "version": "1.0.0", 
  "main": "index.js",
  "repository": "https://github.com/KimHunJin/turbo-repo-test.git", 
  "author": "mos", 
  "license": "MIT", 
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --no-cache --parallel --continue"
  },
  "baseBranch": "origin/main",
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "devDependencies": {
    "turbo": "^1.0.23"
  },
  "dependencies": {
    "typescript": "^4.5.2"
  },
  "turbo": {
    "pipeline": {
      "build": {
        "outputs": [
          "dist/**",
          ".next/**",
          "public/dist/**"
        ],
        "dependsOn": [
          "^build"
        ]
      },
      "test": {
        "outputs": [
          "coverage/**"
        ],
        "dependsOn": []
      },
      "lint": {
        "outputs": []
      },
      "dev": {
        "cache": false
      },
      "clean": {
        "cache": false
      }
    }
  }
}
yarn install
yarn run build
yarn run dev
 
세가지 작업이 모두 정상적으로 이뤄지면 된다.
localhost:3000 으로 들어가면 client 페이지가,
localhost:3001 으로 들어가면 admin 페이지가 실행됨을 확인할 수 있다.
 
전체 프로젝트 구성은
https://github.com/KimHunJin/turbo-repo-test
위 폴더를 참고하면 된다.
 
추가로 다른 프로젝트를 구성하고 싶다면,
turbo-repo의 공식 깃헙을 확인하자
https://github.com/vercel/turborepo/tree/main/examples

TurboRepo로 monorepo 환경 구성하기

댓글