![]()
들어가기 React를 처음 공부하면서 프로젝트를 만들었을때 생긴 의문점이였다.vite.svg 파일은 public에 들어가있고 react.svg 파일은 src/assets 에 위치해 있었다.그래서 이번에는 해당 내용에 대해서 개념적으로 공부하면서 정리해보고자 한다. public 폴더의 특징public 에서는 정적 파일을 다루게 된다. 직접 URL 접근예를 들어 처음 react 프로젝트를 만들었을때를 가정해보자App.tsx 파일에서 다음과 같이 불러오게 된다.// 실제 코드에선 import 로 파일을 넣어준 다음 src={viteLogo} 를 사용// 아래 코드에선 풀어 쓴 내용 이렇게 사용하게 되면 다음과 같이 직접적인 URL을 통해서 접근할 수 있다.경로는 프로젝트 루트 / 를 기준으로 한다.빌드 후에 ..
패스트 캠퍼스 강의를 보면서 Vite 기반 React 프로젝트에서 Path Alias 설정하는 부분에 대해서 조금 다른 부분이 있어 해당 부분에 대해서 작성해보려고 한다. Path Alias 는 왜 사용하는가?Path Alias 는 프로젝트 내부에서 특정 경로를 별칭(alias) 를 설정하여 import 하게 해주는 기능이다.만약 내가 import 해야되는 파일이 src/pages/main/lui/MainPage.tsx 파일이라고 가정해보자그러면 기존의 방법론으론 경우에 따라 다르지만 상대경로 또는 절대경로를 사용하게 된다 그러면 다음과 같이 가독성이 떨어지는 문제가 발생한다.import { MainPage } from "../pages/main-page/ui/MainPage"; 근데 Path Alias..
![]()
초보 React 개발자의 세팅 방법이다.사실 기존에 정리된 글은 많은데 Tawilwind CSS 가 4.0 이상 버전에서 기존의 설치 방법과는 다른 부분이 있어 해당 내용에 대해서 정리하려고한다. 1. React + Vite + TypeScript 프로젝트 생성npm create vite@latest react-templete 다음의 명령어를 치고 아래 이미지와 같이 따라하면 된다 React를 사용하므로 React 설정 TypeScript 설정 이렇게하면 React + Vite + TypeScript 의 설정은 끝이다. 2. Tailwind CSS 설치위에서 말했듯이 해당 내용은 4.0 이상 버전의 Tailwind CSS 설치에 대해서 다룬다. 크게 다른건 없는데 설치해야되는 라이브러리, 설정 내용들의..
