나의 전용 템플릿 엔진(?) 제작기 - tsconfig

개요

점차 기본구성이 완성되고 있다.

이번에는 config설정 마지막인 Typescript 설정 부분을 보겠다
이부분도 아마 굉장히 쉬울 것이다. 기본 타입 스크립트만 적용할 것이고, 그외에는 오버라이드 구조로 프로젝트에 위임할 예정이다

환경구성

my-monorepo-template/      
├── packages/
│   ├── eslint-config/
│   ├── prettier-config/
│   ├── **tsconfig/**
│   ├── react-template/
│   └── nextjs-template/
├── package.json
└── pnpm-workspace.yaml

기존 구조에서 packages/tsconfing 부분에 넣을예정이다

초기설정

1. 패키지내부에 폴더랑 파일을 추가해 주도록한다

    mkdir -p packages/tsconfig
    cd packages/tsconfig
   
    # 패키지 초기화
    pnpm init

2. 내부 파일을 만들어서 넣는다

    # 다음 파일들 생성
    touch base.json next.json react.json

3. typescript 패키지를 설치한다.

    pnpm --filter **${본인 패키지 이름}**/tsconfig add typescript

프로젝트 환경 설정

• base.json: 기본 설정 (모든 프로젝트 공통)
• next.json: Next.js 전용 설정
• react.json: React 전용 설정

프로젝트 코드

1. package.json

    {
      "name": "@rendardev/tsconfig",
      "homepage": "https://github.com/RendarCP/rendar-mono-template",
      "repository": {
        "type": "git",
        "url": "git+https://github.com/RendarCP/rendar-mono-template.git",
        "directory": "packages/tsconfig"
      },
      "version": "1.0.0",
      "description": "TSConfig configurations for Rendar Mono Template",
      "private": false,
      "files": [
        "base.json",
        "next.json",
        "react.json"
      ],
      "publishConfig": {
        "access": "public"
      },
      "license": "MIT",
      "dependencies": {
        "typescript": "^5.7.3"
      }
    }
   

2. base.json

    {
      "$schema": "https://json.schemastore.org/tsconfig",
      "display": "Default",
      "compilerOptions": {
        "target": "ES2020",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "ESNext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "incremental": true,
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
      },
      "exclude": ["node_modules"],
      "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
    }
   

3. react.json

    {
      "$schema": "https://json.schemastore.org/tsconfig",
      "display": "React",
      "extends": "./base.json",
      "compilerOptions": {
        "jsx": "react-jsx",
        "plugins": [
          {
            "name": "typescript-plugin-css-modules"
          }
        ]
      }
    }
   

4. next.json

    {
      "$schema": "https://json.schemastore.org/tsconfig",
      "display": "Next.js",
      "extends": "./base.json",
      "compilerOptions": {
        "jsx": "preserve",
        "plugins": [
          {
            "name": "next"
          }
        ],
        "noEmit": true,
        "moduleResolution": "bundler"
      },
      "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
      "exclude": ["node_modules"]
    }
   

배포하기

pnpm publish-tsconfig             

https://www.npmjs.com/package/@rendardev/tsconfig

npm에 잘 배포되었음을 확인 할수 있다.

마무리

config설정이 마무리 되었다

모노레포를 통해 템플릿엔진 어떻게 따지면, 기본 틀을 만드는 작업의 밑천이 완성된 셈이다.
사실 React, Nextjs 설정은 크게 어려울것이 없을 것 같지만, 내부 구조등에 많은 생각이 들어갈 것 같다.

프로젝트할땐 무조건 이 템플릿을 써서 사용할수 있는 상태를 만들예정이다
react의 경우 react-rotuer, tanstack-query, zustand, axios(or fetch)
nextjs의 경우도 크게 다를게 없지만 react-router제외하고 다 비슷하게 가져갈 것같다

다음편에는 react 템플릿을 제작해서 넣어볼예정이다 (webpack이 아닌 Vite로)