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

개요

이번엔 React 템플릿을 만들어볼려고한다.

기본적인 구조는 리액트 프로젝트를 따라갈건데 기초 패키지는 정하고 템플릿을 만들예정이다.

• TanStack Query (데이터 페칭)
• Zustand (상태 관리)
• Axios(API통신)
• React Router V7

기본적으로 위 패키지는 기본장착을 할 예정이다
스타일 부분은 tailwind, emotion, vanilla-extract 등이 고민되지만 (대세는 tailwind이긴하나…)
사실 각 css 프레임워크 별로 나눠서 템플릿을 분기처리할까 생각중이다.

또 테스트 라이브러리도 cypress, playwright 고민을 하엿으나, 대세는 playwright라고 하였다.
(무엇보다 다양한 언어에 지원되는게 좋았던것같다.)

환경구성

my-monorepo-template/
├── packages/
│   ├── eslint-config/     # ESLint 설정 패키지
│   ├── prettier-config/   # Prettier 설정 패키지
│   ├── tsconfig/          # TypeScript 설정 패키지
│   ├── **react-template**/    # React 템플릿 패키지
│   ├── **create-react**/      # React 프로젝트 생성 도구
│   └── nextjs-template/   # (예정) Next.js 템플릿
├── package.json
└── pnpm-workspace.yaml

초기설정

# 패키지 디렉토리 생성
mkdir -p packages/react-template
cd packages/react-template

# 패키지 초기화
pnpm init

# 기본 의존성 설치
pnpm add react-router-dom@^7.4.1
pnpm add -D @vitejs/plugin-react@^4.3.4 vite@^6.0.7

# 모노레포 내 다른 패키지 의존성 추가
pnpm add -D @rendardev/eslint-config@workspace:* @rendardev/prettier-config@workspace:* @rendardev/tsconfig@workspace:*

프로젝트 환경 설정

• package.json: 패키지 정보 및 스크립트 설정
• tsconfig.json: TypeScript 설정 (@rendardev/tsconfig/react.json 상속)
• .eslintrc.js: ESLint 설정 (@rendardev/eslint-config/react 상속)
• .prettierrc: Prettier 설정 (@rendardev/prettier-config 상속)
• vite.config.ts: Vite 빌드 도구 설정
• playwright.config.ts: Playwright 테스트 설정

프로젝트 코드

1. package.json

{
  "name": "@rendardev/react-template",
  "version": "1.0.4",
  "description": "React + TypeScript + Vite 템플릿",
  "private": false,
  "type": "module",
  "files": [
    "src",
    "index.html",
    "vite.config.ts",
    "tsconfig.json",
    ".eslintrc.js",
    ".prettierrc",
    ".gitignore",
    "README.md",
    "playwright.config.ts",
    "e2e",
    "playwright.d.ts"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "format": "prettier --write \\"src/**/*.{ts,tsx,css,md}\\"",
    "test": "playwright test",
    "test:ui": "playwright test --ui",
    "test:debug": "playwright test --debug",
    "test:report": "playwright show-report"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.24.1",
    "@tanstack/react-query-devtools": "^5.24.1",
    "axios": "^1.8.4",
    "react-router-dom": "^7.4.1",
    "zustand": "^4.5.1"
  },
  "devDependencies": {
    "@rendardev/eslint-config": "workspace:*",
    "@rendardev/prettier-config": "workspace:*",
    "@rendardev/tsconfig": "workspace:*",
    "@playwright/test": "^1.42.1",
    "@types/node": "^20.11.30",
    "@vitejs/plugin-react": "^4.3.4",
    "vite": "^6.0.7"
  },
  "peerDependencies": {
    "react": ">=19.0.0",
    "react-dom": ">=19.0.0"
  }
}

2. tsconfig.json

{
  "extends": "@rendardev/tsconfig/react.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "types": ["node"]
  },
  "include": ["src", "e2e", "playwright.config.ts"],
  "exclude": ["node_modules"]
}

3. .eslintrc.js

module.exports = {
  extends: ["@rendardev/eslint-config/react"],
  root: true
};

4. .prettierrc

{
  "extends": "@rendardev/prettier-config"
}

5. vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

6. src 디렉토리 구조

src/
├── components/       # 재사용 가능한 UI 컴포넌트
│   ├── Header.tsx    # 헤더 컴포넌트
│   ├── Footer.tsx    # 푸터 컴포넌트
│   ├── Counter.tsx   # 카운터 예제 컴포넌트
│   └── Layout.tsx    # 레이아웃 컴포넌트
├── pages/            # 페이지 컴포넌트
│   ├── Home.tsx      # 홈 페이지
│   ├── About.tsx     # 소개 페이지
│   └── NotFound.tsx  # 404 페이지
├── routes/           # 라우팅 설정
│   └── index.tsx     # 라우터 구성
├── main.tsx          # 앱 진입점
└── index.css         # 전역 스타일

주요 기능

1. React 19 지원: 최신 React 버전 사용
2. TypeScript 통합: 타입 안정성을 위한 TypeScript 설정
3. Vite 빌드 시스템: 빠른 개발 환경과 효율적인 빌드
4. React Router v7: 최신 라우팅 라이브러리 통합
5. ESLint & Prettier: 코드 품질과 일관성 유지
6. 모듈화된 설정: 설정 파일을 별도 패키지로 분리하여 재사용성 향상
7. Playwright 테스트: E2E 테스트 환경 제공
8. TanStack Query: 데이터 페칭 솔루션
9. Zustand: 간결한 상태 관리 라이브러리
10. Axios: 강력한 HTTP 클라이언트

테스트 기능

테스트 기능도 추가하여 테스트도 가능하게 만들어두었다.

e2e/                     # 테스트 디렉토리
├── example.spec.ts      # 예제 테스트 파일
└── global.d.ts          # 타입 정의
playwright.config.ts     # Playwright 설정
playwright.d.ts          # 타입 선언

마무리

https://www.npmjs.com/package/create-rendardev-react

사실 배포까지 마무리되었다.
글쓰기전에 이미 템플릿 제작을 완료하여서 관련된 create 명령어까지 만들어두었다

# npm 사용
npm create rendardev-react my-app

# yarn 사용
yarn create rendardev-react my-app

# pnpm 사용
pnpm create rendardev-react my-app

@rendardev 패키지로 배포할려고하였으나 create명령어에는 create라는 예약 명령어가 name에 있어야된다구 오류를 뿜어대었다.

이름은 아쉽지만 상당히 보람찬 부분이였다.
이제 해야될건 내부 템플릿제작이다.

• layout작업 (모바일,pc, 대시보드화면 등)
• Page작업 (로그인, main, 대시보드, admin)
• 컴포넌트 → 사실 디자인시스템 구축해놓은거 쓸 예정

Nextjs도 해야되지만… create-next-app도 충분히 좋으니 일단 나중으로 미루고,
react프로젝트나 계속 할 예정이다.