vite 빌드로 구성한 리액트 앱의 경우 import 경로를 @로 절대 Path 대체하여 사용하는 방법에 대해서 정리하였습니다. 이 방법을 사용하면 ../../../…….. 등의 상대 경로의 불편함을 해소할 수 있습니다. 상대 경로를 @로 지정하기 리액트에서 컴포넌트를 import 할 때 다음과 같이 현재 폴더를 기준으로 다음과 같이 선언하여 사용합니다. import MyComponent from “../components/pages/MyComponent” 하지만 관리 차원의 폴더가 늘어나면서 그 … Read more
오늘은 타입스크립트 기반 리액트 TO DO 앱을 만들어 보고자 합니다. 아주 자세한 리액트 TODO앱의 로직보다는, 타입스크립트를 처음 적용하는 경우 고려할 사항을 정리해보았습니다. 이전 포스팅에서 VITE 환경에서 리액트 타입스크립트를 구성해보았으니, 참고하시기 바랍니다. 리액트 타입스크립트 vite 환경 구성 튜토리얼(2023) 스캐폴딩 후 불필요한 파일 삭제 위에서 생성된 기본 스켈리톤 구조에서 쓸떼없는 것은 다 지워줍니다. public > *.svg assets … Read more
vite 빌드 환경에서의 타입스크립트 리액트 개발 환경 구성 방법을 정리해 보도록 하겠습니다. 타입스크립트 언어로 구성된 리액트 개발 환경을, 매우 빠른 빌드 환경을 가진 VITE 로 구성함을 목표로 하고 있습니다. VITE 빌드 환경으로 REACT 타입스크립트 프로젝트 생성 프로젝트를 생성하고자 하는 폴더로 이동합니다. vite 환경을 생성합니다. npm create vite@latest 프로젝트, 패키지 이름 설정한 후, 리액트 프로젝트를 선택합니다. … Read more