public 폴더
- webpack에 의해 관리됨
- PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능
- 파일 못찾으면 컴파일에러 없이 파일 깨짐
<img src={`${process.env.PUBLIC_URL}/파일명`}/>
src 폴더
- webpack에 의해 관리됨 (import하여 사용가능)
- 파일 못찾으면 컴파일 에러 발생
import logo from "경로";
<img src={logo} />
- require로 불러오기 가능
<img src={require('경로').default} />
VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능
index.html 위치한 곳에 jsconfig.json 파일을 생성해준다.
아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다.
{
"rootDir": "src",
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["*"]
}
}
}
동작방식 설명
baseUrl : 기준디렉토리 → 상대경로가 아닐때 이 디렉토리부터 탐색
paths : {
alias경로: [실제절대경로], → alias경로 입력시 실제절대경로로 변환
}
상대경로가 아니라는 말은
../../../경로명 → 이런 경우가 아니라
Components/경로명... → 이렇게 주어진 경우를 뜻함
이걸 기준디렉토리/Components/경로명... 이렇게 해석하겠다는 뜻.
paths : {
"Image/*": ["./src/image/*"], → src안쓰고 Image만 썼을때 ./src/image로 인식
}
출처
