javascript | moudule 기본

기본적으로 js 코드를 불러오는 법

html코드에 js파일을 다 불러온다.

<script src="hello.js"></script>
<script src="main.js"></script>

function hello1() {
  console.log("Hello 1!");
}

function hello2() {
  console.log("Hello 2!");
}

hello1();
hello2();

 

모듈을 사용하여 js 코드를 불러오는 법

만약 불러올 js파일이 10개 이상이면 다 html에 연결을 해줘야하지만,

모듈을 사용한다면 main이 되는 파일 하나만 html에 연결해준다.

js내에서 다른 js를 포함 시킬 수 있기 때문이다.

<script type="module" src="main.js"></script>

html에서 script type을 module로 지정해줘야 한다.

export function hello1() { 
  console.log("Hello 1!");
}

export function hello2() {
  console.log("Hello 2!");
}

다른 파일에서도 함수를 사용할 수 있도록 export로 내보낸다.

import 다음에 중괄호로 감싸지 않은 경우를 볼 수 있는데, 이는 export 코드에서 export default로 기본값을 지정해준 것이다.

import {hello1, hello2} from "./hello.js"; // import로 불러옴. 불러온 경로지정

hello1();
hello2();

import로 js파일을 불러온다. 불러온 파일 경로와 어떤 함수를 불러올 것인지 지정해준다.

 

모듈은 아래와 같이 쓸 수도 있다

import {hello1, hello2} as hello from "./hello.js"; // hello라는 대표 이름으로 가져옴

hello.hello1();
hello.hello2();

전부 다 가져오려면 import * 을 쓰면 된다.

as로 별칭을 지정할 수 있다.

별칭 지정해준 것은 object형식으로 코드를 써준다.