4. 프로젝트 세팅 (eslint, prettier, tsconfig)

프로젝트 세팅

우선 하나의 프로젝트로 진행하고 추가로 다른 프로젝트를 진행할 때 세팅을 또 하지 않아도 되도록 모노레포로 구성

추후 다시 세팅하는 상황을 고려해 최대한 상세히 기록해 놓으려 함

---

2024.10.14 - 아래 코드는 온전히 동작하지 않는 부분이 있으니, 참고만 하세요. 추후 재작성 예정입니다.

---

터보레포 생성

npx create-turbo@latest playground

패키지 매니저는 기존에 사용하던 pnpm 선택.

Vite + React + TypeScript 프런트엔드 생성

pnpm create vite@latest apps/maplem.gg/frontend --template react-ts

Fastify 백엔드 생성

mkdir -p apps/maplem.gg/backend
cd apps/maplem.gg/backend
pnpm init
pnpm add fastify @fastify/mongodb@5.0.0 dotenv @fastify/autoload
pnpm add -D typescript ts-node @types/node

src/index.ts 파일 생성 후 아래 내용 입력

import { FastifyReply, FastifyRequest } from "fastify";

const fastify = require("fastify")({ logger: true });

// Declare a route
fastify.get("/", async (request: FastifyRequest, reply: FastifyReply) => {
  return { hello: "world" };
});

// Run the server!
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

package.json에 ts-node를 통해 실행하는 스크립트 추가

"scripts": {
    "start": "node --loader ts-node/esm --experimental-specifier-resolution=node src/index.ts",   
},

이때 apps 폴더 아래 바로 프로젝트 폴더가 아니라 한 뎁스 더 들어가야 하기 때문에 pnpm-workspace.yaml 파일에 - apps/**/*를 추가 해 줬음.

터보레포 eslint, prettier, tsconfig 설정

터보레포에서 기본적으로 packages 폴더 내부에 eslint와 ts에 대한 설정이 들어있는데 패키지보다는 설정쪽에 가깝다 생각해 configs폴더를 새로 만들어 설정.

- configs
    - eslint
        - base.js
        - package.json
    - pretter
      - base.js
      - package.json
  - tsconfig
      - base.json
      - package.json

추가적으로 프로젝트 root package.json에 의존성 추가

"devDependencies": {
    "@playground/eslint": "workspace:^",
    "@playground/prettier": "workspace:^",
    "@playground/tsconfig": "workspace:^",
}

eslint 설정

configs/eslint 에서 설치

pnpm add -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-unused-imports

configs/eslint/base.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  ignorePatterns: ['dist'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    'no-unused-vars': 'off',
    'import/no-unused-modules': 'error',
    'no-restricted-imports': 1,
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'warn',
      {
        vars: 'all',
        varsIgnorePattern: '^_',
        args: 'after-used',
        argsIgnorePattern: '^_',
      },
    ],
  },
};

frontend 폴더 내 패키지 설치

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh

frontend/.eslintrc.js

module.exports = {
  extends: [
    require.resolve('@playground/eslint/base.js'),
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  settings: {
    react: {
      version: '18.2',
    },
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: true,
  },
  plugins: ['react-refresh'],
  ignorePatterns: ['**/public/**'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      {
        allowConstantExport: true,
      },
    ],
  },
};

prettier

configs/prettier 에서 설치

pnpm add -D prettier @trivago/prettier-plugin-sort-imports 

configs/prettier/base.js

module.exports = {
  "printWidth": 120,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
  "endOfLine": "auto",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "singleAttributePerLine": true,
  "jsxSingleQuote": true,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "always",
  "importOrder": [
    "^react(.*)$",
    "^@components(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^[./]"
  ],
  "importOrderSeparation":false,
  "importOrderSortSpecifiers": true,
  "importOrderCaseInsensitive": true,
  "importOrderParserPlugins": ["typescript", "jsx"]
}

frontend/.prettierrc.js

module.exports = {
  ...require('@playground/prettier/base.js'),
};

TypeScript

configs/typescript 폴더 내 설치

pnpm add -D typescript

configs/tsconfig/base.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "composite": true
  }
}

frontend/tsconfig.json

{
  "extends": "@playground/tsconfig/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

우선은 최대한 중복을 줄이는 방향으로 설정 완료함.

추후에 백엔드는 공부하면서 필요한 설정값들을 추가할 예정