React 폴더명 변경 후 이미지 출력이 안될 때

 

프로젝트 진행 도중, 다른 페이지를 추가하며 기존 페이지의 이름을 수정하게 될 때가 있습니다.

Info 페이지를 About 이라는 이름으로 수정하며, Info 페이지 이미지가 들어있던 폴더명을 수정했는데 이미지들이 출력되지 않습니다.

 

 

 

아니 그냥 이름만 바꿨는데!! 라고 생각하며 커밋을 확인해봐도 아무 문제가 없어보이고

경로에 오타를 냈는지 여러번 살펴봐도 문제가 없었습니다.

서버도 껐다가 켜고, 새로고침도 해보고 하다가 지피티에게 물어본 결과, 원인은 웹 캐시에 있다고 생각했습니다. < 끝까지 들어보세요!

 

 

맥에서 크롬 캐시 삭제 방법은 아래와 같습니다.

 

1. 단축키 shift + command + backspace 로 인터넷 사용기록 삭제 창 진입

혹은 

1-1. 크롬 우상단 점 세개 클릭

1-2. 인터넷 사용 기록 삭제

 

2. 캐시된 이미지 및 파일 체크

3. 인터넷 사용 기록 삭제 클릭 

 

웹 캐시 삭제 결과 여전히 안됩니다.

기대했는데......

 

아무리 생각해도 about 스펠링을 틀리진 않았는데... 하며 혹시나 싶은 마음에 env 파일을 열어보았습니다.

 

 

 

env 파일에 제가 경로를 배포된 사이트로 설정해두었네요.

로컬에서만 폴더명을 수정하고, 배포하진 않아 생긴 문제라고 깨닫고 배포를 진행합니다.

 

 

 

서버를 끄고 명령어를 입력해 배포를 합니다.

저는 yarn을 사용했기 때문에 아래 명령어로 배포를 합니다.

$ yarn run deploy

 

 

 

잠시 후, 페이지를 새로고침 해보면, 제대로 나오는걸 확인 할 수 있어요!

 

REACT_APP_PUBLIC_URL을 의심해볼 생각도 못했었는데, 문제가 발생하면 기초부터 차근차근 의심해봐야겠습니다.

 

 

 

또, 매 번 빌드를 해주긴 번거로우니까 로컬 개발 주소를 하나 더 적어두고, 번갈아가며 주석처리 해주는 방식으로 개발해야겠어요.

 

+ 해보니까 리액트 앱은 빌드 과정에서 .env에 정의된 환경 변수를 사용해서, 환경 변수 수정 시 재빌드 과정이 필요하다고 합니다.

번거로우니까 자동배포를 해봐야지 원!

 

 

문제가 생기는 과정을 기록해두고자 작성했습니다.