turbo를 세팅을 한 후 packages에 공통적으로사용할 utils함수를 추가하고싶었다.

추가한 파일

// 공통적으로 사용할 유틸리티 함수 예시
export const add = (a: number, b: number) => a + b;

export const subtract = (a: number, b: number) => a - b;

export const testF = () => {
    return "테스트에요"
}

[파일 1] index.ts

{
  "name": "@repo/utils",
  "version": "1.0.0",
  "private": true,
  "scripts": {
  },
  "main": "index.ts",
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

[파일 2] package.json

web에만 적용해보기

1. apps에는 web과 docs가있는데 web에만 추가하려고한다. web의 package.json에 @repo/utils를 추가한다.

   {
     "name": "web",
     "version": "0.1.0",
     "private": true,
     "scripts": {
       "dev": "next dev --turbo",
       "build": "next build",
       "start": "next start",
       "lint": "next lint"
     },
     "dependencies": {
       "@repo/ui": "*",
       "@repo/utils": "*", // <--- 여기
       "next": "14.2.6",
       "react": "18.3.1",
       "react-dom": "18.3.1"
     },
     "devDependencies": {
       "@repo/eslint-config": "*",
       "@repo/typescript-config": "*",
       "@types/node": "^20",
       "@types/react": "^18",
       "@types/react-dom": "^18",
       "eslint": "^8",
       "eslint-config-next": "14.2.6",
       "typescript": "^5"
     }
   }
   
   

   [파일 3] web의 package.json

2. npm install

3. page.tsx에 적용

   import Image from "next/image";
   import { Button } from "@repo/ui/button";
   import styles from "./page.module.css";
   import { testF } from "@repo/utils"
   export default function Home() {
     const res = testF();
     console.log({ res });
     return (
       <div className={styles.page}>
         <h1>{res}</h1>
       </div>
     );
   }
   
   

   [파일 4] apps/web/app/page.tsx

   [파일 1]에서 만든 testF를 [파일 4]에 testF 함수를 import한 후 <h1></h1>에 담아준다.