1. 모듈화의 필요성
- 기본적으로 자바스크립트의 유효 범위는 전역으로 시작합니다.
- 따라서 아래와 같이 코딩하면 js를 읽어오지만 원하는 결과를 줄 수는 없습니다.
## test01.js
var a = 10;
function test() {
return a;
}
## test02.js
var a = 20;
## test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 test</title>
</head>
<body>
<script src="test01.js"></script>
<script src="test02.js"></script>
<script>
document.write(test()); //결과가 20으로 도출
</script>
</body>
</html>- 모듈화란 다른 파일의 자바스크립트기능을 특정 파일에서 사용하는 것을 말합니다.
- 그 이유는 다른 파일에서 변수나 함수나 객체명이 같을 수 있습니다.
- 그래서 에러 혹은 값이 변경되는 큰 문제가 발생됩니다.
- 자바스크립트는 준비구문을 한번 쓰지만 제이쿼리같은 경우는 준비구문을 여러번 작성해서 각각의 라이브러리가 갖고 있는 변수가 겹치지 못하게 미리 막습니다.
- 자바스크립트 같은 경우는 네임스페이스 모듈화패턴이나 프레임워크를 이용해서 막았었으나, ES6부터는 언어 자체에서 모듈화를 지원합니다.
2. import & export 문법
1) export 문법
## 문법
export 변수, 함수- export는 다른 파일에서 가져다 쓸수 있도록 내보내는 키워드 입니다.
- 즉 모듈을 내보낼때 사용합니다.
## Named export
var num = 10;
export { num };
export var str = '안녕하세요';- 미리 선언된 변수나 함수를 export할수도 있고, 세번째 코드처럼 바로 export해버릴 수도 있습니다.
- 위와 같이 이름을 지정해서 내보내는 방식을 Named export라고 합니다.
## Default export
- Default export는 모듈당 딱하나의 멤버에면 선언할 수 있습니다.
let a = 10;
let b = 20;
export default a;
//default에는 모듈당 하나밖에 사용할 수 없으므로, 나머지 멤버는 named export를 사용
export { b };
2) import문법
## 기본 문법
import { 불러올 변수 또는 함수 이름 } from '파일경로';- import는 export된 변수나 함수를 현재 문서로 불러오는 키워드입니다.
## 여러 멤버 불러오기
import { 변수명1, 변수명2 } from '파일경로';
## default 불러오기 - export default로 내보낸 것 불러오기
import 변수명/함수명 from '파일경로';
## as지시자로 멤버의 별명 지정하기
import 변수명 as 별명 from '파일경로';
3) import & export 기본 예제
## test01.js
var num = 10;
export { num };
## test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 테스트</title>
<script>
import { num } from './test01.js';
console.log(num);
</script>
</head>
<body>
</body>
</html>
- 테스트해보면 크롬에서 에러가 발생하는 것을 확인할 수 있습니다.
- ES6문법이어서 바벨로 컴파일하면 바로 됩니다. 이건 리액트나 다른 언어들이 하고 있는 방식이죠.
- 모듈화는 매우 좋게 사용이 가능하나, 아직 내컴퓨터 브라우저에서는 지원하지 않습니다.
- 서버 환경에서는 가능하므로 VS CODE를 사용한다면 [Live Server] 플러그인 설치해서 테스트해주세요.
- 하지만 그래도 그냥은 처리되지 않습니다. script태그의 type을 module로 변경해야 합니다.
4) VS CODE에서 Live Server로 모듈 처리하기
## 문법
//내부 자바스크립트 사용시
<script type="module"></script>
//외부 자바스크립트 사용시
<script type="module" src="파일 경로"></script>
## test01.js
var num = 10;
export { num };
## test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 test</title>
</head>
<body>
<script type="module">
import { num } from './test01.js';
console.log(num);
</script>
</body>
</html>
## 결과 보기
- 아까와는 다르게 에러가 뜨지 않고, 결과가 잘 뜨는 것이 보입니다.
- 이렇게 모듈화를 테스트하면 됩니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 8강 반복문 - for of - 오쌤의 니가스터디 (0) | 2022.11.08 |
|---|---|
| [ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디 (0) | 2021.03.03 |
| [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
| [ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 (0) | 2021.03.01 |
| [ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디 (0) | 2021.02.28 |
