인프런 커뮤니티 질문&답변
작성한 질문수
로그 이미지 주소 중 절대 경로 원리에 관한 질문
해결된 질문
작성
·
263
0
본 강의 중 로그가 나오지 않는 이슈에 관하여
경로 설정에 문제가 있다고 하셨고,
grab_market_web/src/App.js의 내용 중 로그 src의 경로를
"./imgages/icons/log.png"에서 -> "/imgages/icons/log.png"으로 변경하라고 하였습니다.
작동은 잘 되는데, 작동 원리가 궁금합니다.
/ 절대값 root경로의 시작은 어디로 설정되어 있나요?
이전에는 메인 화면에서는 ./ 상대 경로 중, 현재 경로로 설정되어 있었는데 잘 작동했던 이유도 궁금합니다.
App.js파일의 내용이니까 App.js가 존재하는 grab_market_web/src 디렉토리가 현재 경로라고 이해되는데,
그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어
grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며
/ 절대 경로로 설정시에도
grab_market_web/public/images가 호출되는 것이 잘 이해가 되지 않습니다.
답변 2
0
안녕하세요~! 좋은 질문 감사합니다.
실제로 절대경로(/로 시작)로 작성할 때는 루트 디렉토리가 퍼블릭 폴더(public/)가 됩니다. 즉 해당 디렉토리가 프로젝트의 루트 디렉토리로 간주됩니다. 이에 대한 설정은 react에서 webpack이라는 도구를 사용해서 빌드 작업(react코드를 브라우저에서 인식하도록 돕는 작업)을 할 때 설정이 됩니다.
따라서 /images/icons/log.png라고 하면, 이는 public/images/icons/log.png 경로를 가리키게 됩니다. 이 경로는 절대 경로로, React 프로젝트의 루트 디렉토리(즉, public/ 디렉토리)를 기준으로 합니다.
반면, ./images/icons/log.png라는 상대 경로를 사용하면, 이는 현재 작성 중인 JS 파일이 위치한 디렉토리를 기준으로 경로를 잡게 됩니다!
그리고 "그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어 grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며" 라고 말씀하신 부분이 잘 이해가 안갔는데, src="./images/..."를 이야기하시는 걸까요? 그러면 원래라면 동작이 안되야 맞긴 합니다!
0
안녕하세요, 인프런 AI 인턴이에요.
로그 이미지 주소 설정에 관련된 질문이시군요. 경로 설정은 프로젝트 내에서 파일을 찾아가는 방법을 정하는 규칙입니다.
”./“은 현재 파일이 위치한 디렉토리를 뜻하고, “/“는 프로젝트 전체를 뜻하는 절대 경로입니다. 이전에는 메인 화면에서 “./“상대 경로로 설정하여 현재 경로의 디렉토리 내에서 파일을 찾아갔었기 때문에 작동이 잘 되지 않았을 것입니다. /imgages/icons/log.png으로 설정한 것은 절대 경로로 프로젝트 전체에서 imgages 디렉토리 아래에 있는 icons 폴더 안의 log.png 파일을 가져오라는 의미입니다.
public 디렉토리는 React 프로젝트에서 정적 파일을 저장하는 폴더로, 웹팩 빌드 시 public 디렉토리의 내용을 dist 디렉토리에 복사해서 포함시킵니다. 따라서 public 디렉토리의 이미지 파일은 절대 경로로 설정하더라도 프로젝트에서 사용 가능합니다.
추가적인 궁금하신 점이 있으시다면 언제든지 댓글로 문의해주세요. 감사합니다.