Dev JS Blog

자바스크립트 모듈 간단히 사용하기 본문

옛날 창고/개발

자바스크립트 모듈 간단히 사용하기

Dev JS 2021. 2. 8. 23:35
728x90

 

자바스크립트에서 모듈 간단히 사용하기!

사실 나는 잘 사용하지 않아서.. 아니 못해봐서..ㅠㅠ..

지금 공부겸 간단하게 사용법을 공유하려한다..

 

moduleTest.js 에 

export let name = "MANA";

로 코드를 작성하였다.

모듈이 될 js 에서 export 할 데이터를 export 라고 앞에 명시해준다.

그럼 이걸 가져다 쓰려면..?

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="module">
	import {name} from '/js/moduleTest.js';
	document.getElementById('app').innerHTML = name;
</script>
<div id="app"></div>
</body>
</html>

script 에는 type을  module 로 명시해준다.

import {export 한 변수명} from 경로;

를 해서 app 이란 id를 가진 div에 name 변수를 넣어보았다.

moduleTest 라는 파일에서 선언한것처럼 name 의 값을 import 하였다.

그럼 변수만 될까..?

아니다 함수도 가능하다.

export let name = "MANA";
export function hello(){
	alert('Hello world!!');
}

hello 라는 함수를 추가해주고 export 해주었다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="module">
	import {name,hello} from '/js/moduleTest.js';
	document.getElementById('app').innerHTML = name;
	hello();
</script>
<div id="app"></div>
</body>
</html>

import {}(괄호) 안에는 내가 import 하고싶은거를 하나 더 추가해서 작성해주면된다.

그다음 hello 를 실행시켰다.

결과는

module js 에서 설정한 함수를 가져다 쓸 수 있는걸 볼 수가 있다.

 

728x90
저작자표시

'옛날 창고 > 개발' 카테고리의 다른 글

CTI , IVR , ARS 간략 정리  (0) 2021.05.27
JavaScript Moment() 사용법  (0) 2021.02.17
개발자 추천 폰트 - Bitstream Vera Sans Mono  (0) 2021.01.30
이클립스 프로젝트 GitHub에 올리기~  (0) 2021.01.30
[Java] 형 변환 (String to int, int to String)  (0) 2021.01.19
'옛날 창고/개발' Related Articles more
Comments