[JS] net::ERR_ABORTED 404 오류 해결

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.

 

GitHub - jisunipark/toodoo

 

ES6 모듈을 사용하면서 script 태그에 type="module"을 사용하지 않아 발생한 에러를 해결했는데(이전 포스트 참고), 문제 하나가 해결되니 또 다른 에러가 생긴다😂

 

 net::ERR_ABORTED 404 에러

 

 

콘솔 창에 net::ERR_ABORTED 404 (Not Found)라는 메시지가 뜨고 있다.

 

이 에러는 말 그대로 404 에러, 브라우저가 요청한 리소스 파일을 서버에서 찾을 수 없을 때 발생하는 에러다.

 

보통의 404 에러를 해결하는 방식이 그러하듯이 우선 파일 경로를 다시 확인해 보자. 잘못된 파일 경로가 가장 흔한 원인이다.

 

import { createInputItemElement, createTodoItemElement } from './createElement';

 

그렇지만 딱히 맞춤법이 잘못된 부분도 없는데 문제가 무엇일까. 열심히 구글링을 해보니 createElement.js 파일을 import 해올 때 .js 확장자를 붙이지 않은 것이 문제였다.

import { createInputItemElement, createTodoItemElement } from './createElement.js';

 

요렇게 .js 확장자명을 붙이니 문제가 해결되었다!

 

이전에 다른 프로젝트를 하면서는 이렇게 꼬박꼬박 확장자명을 적어주지 않았었는데 왜 이번에는 확장자 명을 적어주지 않은 것이 문제가 된 걸까.

 

이 문제는 순수 자바스크립트로만 프로그래밍을 할 때 ESModule을 사용하면서 자주 일어나는 문제라고 한다. React 같은 라이브러리나 프레임워크를 사용하면 Webpack이 알아서 번들링을 해주기 때문에 확장자 없이도 정상적으로 import가 가능하기 때문에, React를 사용했던 이전 프로젝트들에서는 이런 문제를 겪지 않았던 것이었다.

 

ch.48 모듈 (p.899)

 

찾아보니 <모던 자바스크립트 Deep Dive> 책에도 "ESM의 경우 파일 확장자를 생략할 수 없다"고 나와있었다.

 

결론, 번들러를 사용하지 않고 브라우저에서 지원하는 ESModule를 사용할 경우에는 확장자를 꼭 명시하자.

 

참고

ES6 모듈 사용 시 나타나는 ERR_ABORTED 404 (Not Found) 오류

How does JavaScript import find the module without an extension?