인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
모듈(Module)
Module은 scripts 파일에서 원하는 함수만을 확인하고 가져와서 사용할 수 있는 기능이다.
<기본 개념>
//Module 기능 없이, 일반적으로 scripts 파일을 사용하는 경우
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="/scripts/3-13.Module.js"></script>
<script>
log("log로 메시지 출력"); // 결과 : log로 메시지 출력
error("error로 메시지 출력"); // 결과 : error로 메시지 출력
//이 경우에는 scripts 파일에 존재하는 모든 함수를 확인하고,
//에러가 있는지 파악한 후에 함수를 호출한다.
//만약 scripts 파일 안에 상당히 많은 함수가 있고,
//scripts 파일에서 사용하고 싶은 함수는 오직 2~3개 정도라면,
//2~3개의 함수를 사용하기 위해 scripts 파일에 존재하는 모든 함수를
//확인하는 것은 리소스 낭비이며 비효율적이다.
//이러한 문제를 해결하기 위해 Module 기능이 필요하다.
//Module은 scripts파일에서 원하는 함수만을 확인하고,
//가져와서 사용할 수 있는 기능이다.(해당 파일의 모든 함수를 확인할 필요 X)
</script>
</body>
</html>
//scripts 파일
function log(message){
console.log(message);
}
function error(message){
console.error(message);
}
//Module 기능을 사용하는 경우
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script type="module">
import {log, error, PI} from "/scripts/3-13.module.js";
//반드시 type="module"를 정의해야 한다.
log("log로 메시지 출력"); // 결과 : log로 메시지 출력
error("error로 메시지 출력"); // 결과 : error로 메시지 출력
log(PI); // 결과 : 3.14
//이렇게 scripts 파일에서 원하는 함수만을 import { }의
//파라미터로 가져와서 사용할 수 있다.
//이 경우, scripts 파일을 모두 해석할 필요가 없어서,
//더욱 효율적이고 리소스 낭비도 줄일 수 있다.
</script>
</body>
</html>
//scripts 파일
export function log(message){
console.log(message);
}
export function error(message){
console.error(message);
}
export const PI = 3.14; //변수도 export 가능
//Module 기능을 사용하여, scripts 파일에서 다른 scripts 파일을 받는 경우
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="/scripts/3-13.ref.js" type="module">
// 결과 : REF에서 메시지 출력(scripts 파일의 함수가 바로 실행됨)
//scripts 파일을 html 파일뿐만 아니라 scripts 파일에서도 받을 수 있다.
//Module을 사용하면 기능별로 자바스킙트 파일을 분리해서 관리할 수 있고,
//필요한 함수만을 가져올 수 있기 때문에, 더욱 효율적인 코드를 작성하여,
//다양한 기능을 구현할 수 있다.
</script>
</body>
</html>
//scripts 파일(다른 scripts 파일로부터 import한 code 포함)
import {log} from "/scripts/3-13.module.js"
log("REF에서 메시지 출력");
댓글