💻 사전작업 - index.html파일 로컬서버에 띄우기
html파일을 간단하게 웹서버를 통해 확인가능한 방법입니다.
npm install -g http-servernpm에 설치한 후에 실행하려는 index.html파일이 있는 디렉토리에 접근한 후에 http-server를 실행시켜줍니다.
http-server ./
💣 Cannot use import statement outside a module
index.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>index.js 파일
import Todo from './Todo.js';
const todo = new Todo();
todo.init();Todo.js 파일
class Todo {
constructor() {
}
init() {
console.log('hojoj')
}
}
export default Todo;index.js파일에서 Todo에 있는 파일을 import하는 구문에서 발생한 에러입니다..
구글링을 통해 찾아보니 index.html에 script태그에 type관련 에러였습니다.
📝 index.html에 script 태그 타입??
<script type="???" >스크립트의 종류를 설정할 수 있습니다.
생략도 가능하고 자바스크립트만 사용된 경우 text/javascript가 사용됩니다.
이 외에도 application/javascript, application/ecmascript등 사용가능하지만
브라우저에 따라 지원하지 않는 경우도 있어 표준인 text/javascript를 사용을 권장합니다.
또한 웹 서버에서 스크립트 파일을 보내줄 때는 반드시 text/javascript를 MIME 타입을 사용해야 합니다.
최근 브라우저에서 새롭게 지원하기 시작한 타입으로는 module이 있습니다.
웹 브라우저는 스크립트를 module script로서 다루게 됩니다.
💡💡💡 모듈 스크립트는 babel,node를 통해서 가능하던 import문법을 웹 브라우저에서 사용할 수 있습니다.
💡💡💡 Cannot use import statement outside a module 원인!!!
모듈을 import하는 구문에서 에러가 발생했었는데 script타입을 기본값으로 세팅하였기 때문에 발생했던 에러였습니다.
script태그의 type값을 module로 수정하니 정상적으로 동작하였습니다!!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>참고로 모듈 타입은 모든 브라우저에서는 지원하지는 않아, 링크를 통해 지원 브라우저 확인 가능합니다.
