인프런 커뮤니티 질문&답변
작성한 질문수
module 질문있습니다.
작성
·
387
0
.js로 아래와 같은 자바스크립트 파일을 작성했습니다.
export function log(message) {
console.log(message);
}
export function error(message) {
console.error(message);
}해당 자바스크립트 파일을 html에 삽입하기 위해 src에 넣고, type을 module로 지정했습니다.
후에 log함수를 이용하려고 아래 코드를 작성했는데,
"Uncaught ReferenceError: log is not defined at 3-14.html:9:7" 이라고 에러가 납니다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="./scripts/3-13.Module.js" type="module"></script>
<script>
log("메세지 출력"); // Uncaught ReferenceError: log is not defined at 3-14.html:9:7 에러 출력
</script>
</body>
</html>
여기서 질문이 2가지가 있는데,
위의 코드 에러를 해결하려면 어떻게 해야하나요?
모듈을 삽입하는 방법으로 script 안에 type을 모듈로 정의하고 import를 통해 삽입하는 방법과,
src에 자바스크립트를 사용하여 삽입하는 2가지 방법이 존재한다고 이해했습니다. 그럼 후자의 방법은 단순히 src만 입력해 해당 자바스크립트 안에 있는 모든 함수, 변수를 사용하는 방법을 말하는 걸로 이해하면 될까요?
답변주시면 감사하겠습니다.! 항상 강의 잘 듣고 있습니다. 좋은 강의 내주셔서 정말 감사합니다 . ㅎㅎ 😃
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
- 에러를 해결하시려면 HTML 파일 내의 script 태그에서 모듈을 가져와 사용할 수 있도록 import 구문을 추가해주셔야 합니다. 예를 들어:
<script type="module">
import { log } from './scripts/3-13.Module.js';
log("메세지 출력");
</script>
이렇게 script 태그에 type을 module로 지정하고, 필요한 함수를 import 해서 사용하시면 됩니다.
- 모듈을 삽입하는 방법에 대해,
<script>태그에 type을 “module”로 설정하신 경우에는import키워드를 사용하여 필요한 기능만을 선택적으로 가져올 수 있습니다. 반면, type을 “module”로 지정하지 않고, src 속성으로만 자바스크립트 파일을 연결한 경우에는 해당 스크립트 파일 전체가 하나의 전역 스코프로 실행됩니다. 그런데 모듈 시스템을 사용하는 경우에는 파일 별로 독립된 스코프를 가지므로, 모듈로 작성된 스크립트 파일은 다른 스크립트 태그에서 바로 사용할 수 없습니다. 모듈이 아닌 스크립트는 전역 변수를 통해 함수나 변수들을 사용할 수 있지만, 최근의 자바스크립트 개발에서는 모듈 시스템을 사용해 스코프를 분리하고 코드의 관리를 용이하게 하는 것이 일반적인 흐름입니다.
궁금증이 해결되셨길 바라며, 프로그래밍 학습에 더욱 도움이 되시기를 바랍니다. 강두희님, 언제든지 다른 궁금한 사항이 있으시면 질문해주세요. 감사합니다. 😊