[React + Typescript + Vite]로 프로젝트 시작하기

이번에 또 새로운 프로젝트를 진행하게 되었습니다. (with. 레고)

주차장의 모든 것을 알려주는, 기존 주차장 관련 서비스의 단점을 개선한 서비스입니다. (아직 이름은 미정..)

 

일단, 굵직하게 [React + Typescript + Vite] 요 조합으로 시작해보려고 합니다. 

 

1. 왜 [React + Typescript + Vite] ??

사용자의 인터랙션에 따라 매번 다른 주차장 정보를 불러와야 하기 때문에, Next(SSR)보다는 React(CSR)가 더 적합하다는 판단을 내렸습니다.

Typescript는 이제 선택이 아닌 필수가 되어버린 느낌,,,

Vite는 번들링(소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결)없이 서버를 구동하고 빌드하기 때문에, 일반 webpack과 비교해서 매우 빠르다고 합니다. 이전 프로젝트에서 webpack을 활용했기 때문에, 그 차이점에 대해서도 궁금해졌습니다.

vite를 깔기 위해, 사용하던 node 버전 16.xx 에서 20.10.0(LTS) 버전으로 업그레이드도 해주었습니다. (18 이상 부터 가능)

 

추가적으로 설치한 라이브러리는 다음과 같습니다. 

prettier: 원활한 코드 포맷팅을 위하여
storybook: CDD를 위하여
msw: 백엔드로부터의 독립적인 개발을 위하여
tanstack-query: 편리한 요청/응답을 위하여
styled-components: emotion과 고민했지만, 큰 차이를 모르겠어서 그냥 이걸로 선택
style-lint: 어지러운 css 속성을 정리하기 위하여 

---

2. tsconfig.json에서 설정해준 것들

      

      

      

    
    

      <javascript />
    
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "outDir": "./dist",

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Path */
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@assets/*": ["src/assets/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"]
}

2.1. moduleResolution은 bundler vs node 둘 중에 무엇인가요?

vite의 기본 설정은 'bundler'로 되어 있습니다. 하지만, 파일들을 열면 무수히 많은 에러들이 뜨는데요 ㅜ

이를 node 로 바꿔주면 된다고 chatGPT 포함 여러 글에서 말하고 있습니다.

Bundler
: This is the recommended setting in TypeScript 5.0+ for applications that use a bundler

하지만, typescript 5.0 이상부터는 moduleResolution: bundler 라는 옵션이 타입스크립트에게 코드가 다른 툴에 의해 번들링될 거라고 알려주고, 이에 맞게 규칙을 완화해준다고 합니다. 에러가 뜨는 이유는 알고보니, vscode 자체 버그라고 합니다 ㅎㅎ
vscode 도 주기적으로 업데이트 시켜주는걸로 ㅎㅎ

[Vite] tsconfig 설정하기

2.2. tsconfig.node.json은 무엇인가요

tsconfig.node.json 파일은 Node.js 환경에 특화된 추가 옵션을 설정하는 데 사용됩니다.

저희 프로젝트에서는 nodeJs 관련 설정을 해줄 필요성을 아직 느끼지 못했으므로, 자동으로 생성된 tsconfig.node.json은 삭제했습니다.마찬가지로, tsconfig.json에 존재하던 "references": [{ "path": "./tsconfig.node.json" }] 도 삭제해주었습니다.

 

2.3. allowImporingTsExtensions는 true 추천

임포트 경로를 식별하는 것은 최악의 경우 많은 비용이 드는 작업이 될 수 있다고 합니다.

예를들어, 다음과 같은 코드에서

      

      

      

    
    

      <javascript />
    
import { something } from "./Component"

1. ./Component가 존재하는지 확인, 없음
2. ./Component.mjs가 존재하는지 확인, 없음
3. ./Component.js가 존재하는지 확인, 없음
4. ./Component.mts가 존재하는지 확인, 없음
5. ./Component.ts가 존재하는지 확인, 없음
6. ./Component.jsx가 존재하는지 확인, 있음!

요과정을 매번 해줘야하는 것이죠... 따라서 무슨 확장자의 파일인지 명시적으로 지정해주기 위해서 해당 옵션을 사용합니다.

이 옵션은 꼭 noEmit: true 와 함께 해줘야 한다구 합니당

 

2.4. Vite환경에서 배포를 위한 빌드시에 정적 파일들을 dist 폴더 한 곳에 모이게 해당 옵션을 추가했습니다.

      

      

      

    
    

      <javascript />
    
"outDir": "./dist",

 

2.5. allowSyntheticDefaultImports를 true로 하면,

      

      

      

    
    

      <javascript />
    
import * as React from "react"
// 대신에

import React from "react"
// 이걸로 가능하게 함

 

2.6. [Typescript + Vite]에서 절대경로 설정해주는 방법

[Typescript + Vite] 조합에서는 vite.config.json 과 tsconfig.json 둘다 사용하는 경로를 일치시켜주셔서 설정해줘야 합니다.

      

      

      

    
    

      <javascript />
    
// tsconfig.json
"paths": {
      "@pages/*": ["src/pages/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
 }
 
 // vite.config.ts
 resolve: {
    alias: [
      { find: '@pages', replacement: '/src/pages' },
      { find: '@components', replacement: '/src/components' },
      { find: '@assets', replacement: '/src/assets' },
      { find: '@hooks', replacement: '/src/hooks' },
      { find: '@utils', replacement: '/src/utils' },
    ],
  },

3. vite.config.ts 에서 설정해준 것들

      

      

      

    
    

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@pages', replacement: '/src/pages' },
      { find: '@components', replacement: '/src/components' },
      { find: '@assets', replacement: '/src/assets' },
      { find: '@hooks', replacement: '/src/hooks' },
      { find: '@utils', replacement: '/src/utils' },
    ],
  },
  build: {
    rollupOptions: {
      external: ['./sb-preview/runtime.js'],
    },
  },
  assetsInclude: ['/sb-preview/runtime.js'],
});

 

3.1. storybook 설치 중 에러 해결

문제상황: [vite] Pre-transform error: Failed to load url /sb-preview/runtime.js (resolved id: /sb-preview/runtime.js). Does the file exist?

 

해결방법: 하단의 코드를 추가해줍니다.

      

      

      

    
    

      <javascript />
    
build: {
    rollupOptions: {
      external: ['./sb-preview/runtime.js'],
    },
  },
assetsInclude: ['/sb-preview/runtime.js'],