[JS/트러블슈팅] 404 오류 해결하기(Failed to load resource: ~ )

오류 이미지

문제 상황

Animal Album 프로젝트를 진행하면서 Live Server로 실행했을 때,

브라우저에서 다음과 같은 오류가 발생했습니다

Failed to load resource: the server responded with a status of 404 (Not Found)
ERR_CONNECTION_REFUSED

프로젝트 구조와 코드가 강의 내용과 완전히 동일함에도 불구하고, 404 Not Found 오류가 계속 발생했습니다.

---

원인 분석

1. Live Server 경로 문제

프로젝트 폴더 전체를 VS Code로 열지 않고, index.html 파일만 열어 Live Server를 실행했습니다.

이 경우, 서버가 루트 디렉토리를 index.html 파일의 상위 폴더가 아니라 파일이 있는 위치로 인식합니다.

 

2. 경로 지정 문제

HTML 코드에서 상대 경로를 사용할 때도, 루트 경로를 기준으로 작성하면

Live Server에서 잘못된 경로로 인식할 수 있습니다.

예를 들어, 아래 코드처럼 작성하면 안 됩니다

<a href="/penguin.html"><div>펭귄</div></a> <!-- 잘못된 경로 -->

---

해결 방법

1. 프로젝트 폴더를 VS Code로 열기

프로젝트 루트 폴더(예: project 폴더)를 워크스페이스로 직접 열고,

index.html 파일에서 우클릭 → Open with Live Server를 선택합니다.

 

2. HTML 경로 수정

• 상대 경로를 올바르게 작성합니다.

<a href="./penguin.html"><div class="clicked">펭귄</div></a>
<a href="./koala.html"><div>코알라</div></a>
<a href="./panda.html"><div>판다</div></a>

• Live Server를 켰을 때 브라우저 주소가 다음과 같아야 합니다.

http://127.0.0.1:5500/project/index.html

• 탭을 클릭하면 아래와 같이 경로가 변경되어야 합니다.

http://127.0.0.1:5500/project/penguin.html

---

결론

Live Server에서 404 오류가 발생하는 가장 큰 이유는 경로 문제와 서버 실행 위치 문제입니다.

VS Code에서 프로젝트 루트를 제대로 설정하고, 경로를 상대 경로로 올바르게 지정하면 문제를 해결할 수 있습니다.