issue209: cra에서 vite로 마이그레이션

[hwinkr]

• closes : cra에서 vite로 마이그레이션 #209

작업 사항

• 맛집 개발, 배포 환경을 cra에서 vite로 마이그레이션

  • vite 환경에서 절대 경로 사용을 위한 설정 추가

   // tsconfig.ts
   {
     "compilerOptions": {
       "target": "ESNext",
       "lib": ["dom", "dom.iterable", "esnext"],
       //...
       "baseUrl": "./src",
       "types": ["kakao.maps.d.ts", "vite/client", "vite-plugin-svgr/client"]
     },
     "include": ["src"]
   }
   
   // vite.config.ts
   export default defineConfig({
     plugins: [react(), tsconfigPaths(), svgr()],
   });

  • vite 환경에서 svg를 사용하기 위한 파일 확장자 수정

   export { default as KoreanCategoryIcon } from "./korean-category-icon.svg?react";

  • index.html 정적파일 경로 public -> app 루트 경로로 이동

why vite? => vite의 장점

1. HMR

   • 번들러가 아닌 ESM을 사용하여 어떤 모듈이 수정되면 수정된 모듈과 관련된 부분만을 교체하고 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.
   • 전 과정에서 완벽하게 ESM을 이용하여, 앱 사이즈가 커져도 HMR을 포함한 갱신 시간에 영향을 끼치지 않는다.

2. 빠른 개발 서버 시작

   • 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 실제 페이지를 제공할 수 있다.
   • Vite는 애플리케이션 모듈을 dependencies, source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선한다.
   • Native ESM을 통해 소스 코드를 제공한다.

3. 타입스크립트 기본 지원

   • 기본적으로 .ts 를 지원한다.
   • 다만, 트렌스컴파일링만 지원하고 tsconfig 를 설정하여 타입 체크를 해야 한다.

4. 번들링 파일 크기 개선

• cra
  

• vite
  

  168.64 kb => 160.76 kb

깃헙 로그인 관련 로컬 환경 설정 방법 문서화

깃헙 로그인 관련 로컬 환경 설정 방법을 노션에 추가해두었습니다!

예외 상황 - 해결 참고하기

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud