🧭 공통 라이브러리 선택

공통

• TypeScript
• TypeScript 컴파일러(tsc vs. swc)
• 패키지 매니저 npm vs. pnpm vs. yarn
• ESLint
• Prettier
• 디자인 + 와이어프레임 툴 (Figma vs. Creatie)

  • creatie

    https://www.youtube.com/watch?v=bI7ZfJMi6Pk

모노레포? npm vs. pnpm vs. yarn?

모노레포

• J025 : server와 client 폴더를 분리하고 공통의 패키지를 관리하는 것은 npm이나 yarn의 workspace 기능을 사용해서 루트 디렉토리에서 관리하는 것으로 해결되는 문제라고 보입니다. 모노레포는 단순히 서버, 클라이언트 구분이 아니라 여러 가지 프로그램을 같은 디렉토리에서 한 번에 관리할 때 도입이 필요한 개념으로 생각됩니다. 보통 용량 문제나 설치하는데 걸리는 시간을 걱정하는데 저희 규모(하나의 프로그램 개발)에선 필요없는 것 아닌지?
• J046 : 모노레포는 규모가 큰 회사, 다수의 프로젝트를 한 번에 관리하는 의미가 큰 것 같다. 그래서 우리 프로젝트를 모노레포라고 할 수 있을지는 잘 모르겠음 여러 프로젝트의 패키지를 한 번에 관리하는 것 = 모노레포 하나의 프로젝트의 프론트엔드⋅백엔드 패키지를 한 번에 관리하는 것 ≠ 모노레포 라고 생각
• J166: 모노레포는 프로젝트간 공유가 필요한 패키지가 있을 때 쓰는거 같음. 우리는 각각 FE, BE 프로젝트가 공유해야하는 패키지/파일이 없는거 같아서 필요없다고 생각합니다. 공통으로 eslint, prettier 같은 패키지를 설치할 필요도 있어보임
• J290 : 같은 저장소에 있기만 해도 모노레포라고 하는가?

my-monorepo/
├── packages/             # 각 패키지를 관리하는 폴더
│   ├── client/           # 클라이언트 코드 (예: React, Vue 등)
│   │   ├── src/
│   │   └── package.json
│   ├── server/           # 서버 코드 (예: Express, Nest 등)
│   │   ├── src/
│   │   └── package.json
│   └── shared/           # 클라이언트와 서버에서 공통으로 사용하는 코드
│       ├── src/
│       └── package.json
├── package.json          # 루트 package.json (워크스페이스 관리와 스크립트 설정)
└── pnpm-workspace.yaml   # pnpm 모노레포 설정 파일 (pnpm을 사용할 때만 필요)

npm vs yarn vs pnpm

npm vs yarn vs pnpm

yarn

솔직히 npm 쓰는게.. 낫지 않나?

npm

• node_modules에 파일로 작성

pnpm

• node_modules에 하드링크로 작성
• 사실 npm이랑 다를 건 크게 없음
• 어차피 크게 의존성이나 성능 문제를 크게 좌지우지할 프로젝트는 아닌 것 같음

yarn berry 장점

https://toss.tech/article/lightning-talks-package-manager

https://toss.tech/article/node-modules-and-yarn-berry

• PnP → node_modules 대신 pnp.cjs 파일을 사용
• Zero-install

yarn berry 단점

https://devocean.sk.com/blog/techBoardDetail.do?ID=166592&boardType=techBlog

https://engineering.ab180.co/stories/yarn-to-pnpm

• VSCode 호환 문제
• ESLint 안 된다?
• 러닝 커브

결론

• npm
• workspace를 사용해서 eslint, prettier 패키지 공유

yarn은 npm과 크게 다른 점이 없는 것 같고, yarn berry는 러닝 커브가 너무 높음.

npm의 성능 문제를 직접적으로 경험한 팀원이 없고 기존에 팀원들이 모두 사용하던 npm을 사용하기로 결정.

ESLint

• import vs. require
• eslint:recommended https://eslint.org/docs/latest/rules/
• prettier? eslint-config-prettier eslint-plugin-prettier
• typescript? @typescript-eslint/eslint-plugin https://typescript-eslint.io/rules/

// eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
);

// eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,
    {
        rules: {
            "no-unused-vars": "warn"
        }
    }
];

// tsconfing.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

// tsconfig.app.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

// tsconfig.node.json
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    open: true,
  },
});

Prettier

• "editor.formatOnSave": true → VSCode

• useTabs: false → spaces vs tab

• tabWidth: space 2 vs space 4

• endOfLine: CRLF(/r/n) vs LF?(/n)

  → 통일을 하지 않으면 Git에서 충돌 https://www.lesstif.com/gitbook/git-crlf-20776404.html

• singleQuote: true → Double Quote vs Single Quote

• semi: true

• trailingCommas: all https://prettier.io/docs/en/options.html#trailing-commas

  • 예시

    [
    	12,
    	34,
    	56,
    	78,
    ]
    
    function fn(
    	ab,
    	cd,
    	ef,
    ) {
    
    }

• bracketSpacing: true ({ test: 1234 }) https://prettier.io/docs/en/options.html#bracket-spacing

• arrowParrens: always

• printWidth: 100

• // prettier-ignore

• +) 화살표 함수 vs 일반 함수