설 연휴에 푹 쉬었으니 다시 공부 해보자ㅎㅎ
img는 Public에..!
필자는 img파일을 src폴더 안에 넣고 import를 하는 방식을 사용했었다.
그런데 오늘 강사님께서 img는 보통 Public 파일에 넣는다고 하셨다.
아하..! 필자의 코드에 이미지가 많이지는 일이 있을때 Import문이 너무 많아져 보기 불편한 경험이 있다.
그래서 사실 필자는 동적으로 해당 이미지를 불러오는 방식을 통해 해당 Import문을 좀 줄이고 첫 로딩에 대한 속도를 개선하고자 하였다. 그런데 사실 Import문이 지저분해지는게 문제였다면 Public에 Img를 넣는게 더 좋구나 라고 생각이 들었다.
그리고 그 외에 public에 Img를 넣는 다양한 이유가 있다.
- 일단 정적인 파일들은 특별한 처리없이 그대로 클라이언트로 보내준다.
- 이미지는 번들링을 할 필요가 없다.
- 정적파일들은 클라이언트의 브라우저에 의해 캐싱이된다. 그래서 사용자가 다시 방문할 때 해당 파일을 서버에 다시 요청하지 않아도 됨으로 성능을 향상시킬 수 있다.
- 경로의 직관성
마지막 4번 경로의 직관성을 좀 더 설명해보자.
일단 Public에 있는 파일은 이렇게 접근할 수 있다. 만약 파일 이름이 Example.jpg라면
src="/Example.jpg"
바로 이렇게 사용이 가능하다.
우리는 Public폴더의 절대경로를 사용할 수 있다.
절대경로?상대경로?
절대경로-> 최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부기입
상대경로-> 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성
즉, 절대경로는 내가 어디 폴더에 있던 가장 맨위부터 내려오는거고
상대경로는 내가 어디에있다면 그 위치를 기준으로 파일을 찾아가는거다.
본론으로 돌아와서
Public폴더에 보통 절대경로로 접근을 하는데 이렇게 접근할 수 있다.
// public/imgaes폴더
// 이 안에 coffee.jpg가 있다면
<img src=`${process.env.PUBLIC_URL}+/imgaes/coffee1.jpg`/>
다음과 같이 접근이 가능하다.
process.env.PUBLIC_URL의 역할?
예를들어 프로젝트의 루트 디렉토리가
/Users/username/my-project라면 public 폴더는
/Users/username/my-project/public
process.env.PUBLIC_URL은 프로젝트가 호스팅된 URL을 가져온다.
애플리케이션이 https://example.com/my-app에 호스팅된다면, process.env.PUBLIC_URL은 /my-app을 반환한다.
헷갈렸던점
흠. 그럼 node환경에서 이미 process.env를 통해 환경변수에 접근하게 해주는데
왜 dotenv를 쓰지?
라고 생각을 했었다. 여기서 Node.js가 제공하는 환경변수는 노드 환경변수만을 뜻한다. 즉, .env파일을 만들어 내가 원하는 정보를 저장하고 불러오는데는
dotenv가 필요했던 것이다.
즉, process.env로 접근하는 방식은 이미 같지만
dotenv를 쓰면 process.env객체에 내가 커스텀한 env파일에 접근할 수 있게 해주는 것이다.
보통 CRA에서는 dotenv를 기본적으로 제공하니 따로 설치해주지 않아도 된다.
