Large Rainbow Pointer
728x90
[React] Vite 에서 경로 별칭 Path Alias 설정
💜 리액트/React2024. 2. 19. 21:37[React] Vite 에서 경로 별칭 Path Alias 설정

시작하기 앞서...(참고로 react + vite + typescript 프로젝트)프로젝트를 진행하다 보면 경로가 길어져서 코드가 지저분해 보이고 한 눈에 들어오지 않게 된다.import LoginComponent from './components/LoginComponents/LoginComponent';그래서 path alias 를 설정하여 import 경로를 간단하게 줄일 수 있다. tsconfig.json 수정tsconfig.json 에서 원하는 경로 별칭을 설정한다.나는 src/ -> @/ 그리고 src/components/LoginComponents/ -> @/LoginComponents 로 설정하였다.{ "compilerOptions": { ... /* Path Alias */ ..

[React] CRA 대신 Vite 로 프로젝트 세팅
💜 리액트/React2024. 2. 18. 14:24[React] CRA 대신 Vite 로 프로젝트 세팅

Vite 사용 이유Vite 란 무엇일까? Vite빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정을 제공[출처] Vite 공식 문서 ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev Create-React-App 단점우리가 기본적으로 React 프로젝트를 만들 때, Create-React-App(일명 CRA)를 사용한다.CRA에는 다음과 같은 단점들이 있다. 1. node_modules 용량 큼CRA로 만든 프로젝트에는 node_modul..

728x90
image
loading