[Project] pnpm 으로 React 18 & typescript 프로젝트 환경 세팅하기

pnpm 패키지 매니저 설치

npm install pnpm

React app 프로젝트 생성

pnpm create react-app <프로젝트 폴더경로>

📦 typescript 설치 및 환경 설정

패키지 설치

pnpm add typescript@4 -D

패키지 환경설정 파일 생성

pnpm tsc --init

// tsconfig.json
{
  "compilerOptions": {

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["ES2016","DOM", "DOM.Iterable", "ScriptHost"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "preserve",                               
    /* Modules */
    "module": "ESNext",                                /* Specify what module code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    "paths": {
	  "@components/*": ["src/components/*"],
      "@config/*": ["src/config/*"],
      "@routes/*": ["src/routes/*"],
      "@styles/*": ["src/styles/*"],
      "@resource/*": ["src/resource/*"],
      "@test/*": ["src/test/*"],
      "@@types/*": ["src/types/*"],
      "@src/*": ["src/*"]
    },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    
    /* JavaScript Support */
    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    "checkJs": true,                                  

    /* Emit */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "declarationMap": true,                                    /* Specify an output folder for all emitted files. */
    "removeComments": true,                           /* Disable emitting comments. */
    "noEmit": true,                                   /* Disable emitting files from a compilation. */
    "importHelpers": true,                            
    "sourceRoot": "./",                                 /* Specify the root path for debuggers to find the reference source code. */
    "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 
    "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    
    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
  

    /* Completeness */
    "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },
  "exclude": ["node_modules", "**/*.test.ts"]
}

💡 5버전이 아닌 4버전을 설치한 이유?

현재 날짜 기준(24.03.10)으로 typescript 5 버전은 react-scripts 5.0.1 버전과 unmet peer 충돌이 일어나는데, typescript 4버전 중 가장 최신 버전으로 설치하면 해당 충돌 이슈를 해결할 수 있기 때문이다.

📦 전역 상태관리 zustand 설치

pnpm add zustand

📦 react-query 설치

pnpm add @tanstack/react-query

📦 react-router 설치

pnpm add react-router-dom

📦 tailwind CSS 설치

pnpm add tailwindcss

📦 styled-components 설치

pnpm add styled-components 

📦 daisy UI 라이브러리 설치

pnpm add daisyui@latest -D

📦 react-icons 설치

pnpm add react-icons

📦 테스팅 라이브러리 Jest, RTL 설치

Jest 설치

pnpm add jest-environment-jsdom -D

Jest 환경 파일 생성 및 세팅

jest 버전이 >=28 일 경우, 아래와 같이 환경파일을 설정한다.

// jest.config.js 

module.exports = {
  testEnvironment: 'jsdom'
}

RTL 설치 (React Testing Libary)

pnpm add @testing-library/react -D