Main Project 5/8

오늘 한 일

---

오늘은 작업했던 피그마를 바탕으로 로그인 페이지와 회원가입 페이지를 만들었다.
만드는 과정에서 image1.png를 import하기 위해 경로를 지정하는데 아래와 같은 오류가 발생했다.
이미지를 src폴더 밖에서 불러 오는 과정에서 문제가 발생한 것 같은데 뭐가 문제인지 알아봤다.

Module not found: Error: You attempted to import ../../public/assets/image1.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

문제 원인

---

이미지가 불려올 때 경우는 다음과 같다.

1. 이미지 태그에 src속성으로 바로 설정
2. 맨 상단에서 이미지 자체 import
3. css 파일에서 backgound-imgae로 사용

2번과 3번은 불러오는 이미지가 src폴더 내에 있어야 하고, 1번은 public 폴더 아래에 위치 해 있어야 한다. 나는 2,3번 방법을 쓰고 있지만, 경로는 ../../public/assets/image1.jpg 이여서 계속 오류가 났던 것이다.

문제 해결

---

내 이미지 경로는 ../../public/assets/image1.jpg 이므로 1번을 사용하거나 2,3번 처럼 경로를 src로 바꿔야 한다는 걸 알게 됐다.
나는 경로를 바꾸기도 싫고 1번처럼 쓰기 싫어서 방법을 찾던 와중에
Public폴더의 절대경로를 이용하고 싶다면
js에서는 process.env.PUBLIC_URL을 이용을 해 사용할 수 있다는 걸 찾았고 이 방법을 사용해 Public폴더의 이미지를 사용했다.