1. 모듈화의 필요성
- 기본적으로 자바스크립트의 유효 범위는 전역으로 시작합니다.
- 따라서 아래와 같이 작성하면 js를 읽어오지만 원하는 결과를 줄 수는 없습니다.
Test1.js
const a = 10;
const test = () => {
return a;
}test2.js
const 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>
console.log(test()); //20
</script>
</body>
</html>- 모듈화란 다른 파일의 자바스크립트기능을 특정 파일에서 사용하는 것을 말합니다.
- 그 이유는 다른 파일에서 변수나 함수나 객체명이 같을 수 있습니다.
- 그래서 에러 혹은 값이 변경되는 큰 문제가 발생 할 수 있습니다.
- 자바스크립트는 준비구문을 한번 쓰지만 JQuery 같은 경우에는 준비구문을 여러번 작성해서 각각의 라이브러리가 갖고 있는 변수가 겹치지 못하게 미리 막습니다.
- 자바스크립트 같은 경우는 네임스페이스 모듈화패턴이나 프레임워크를 이용해서 막았었으나, ES6부터는 언어 자체에서 모듈화를 지원합니다.
2. Import & Export 문법
1) Import 문법
문법
export 변수, 함수- export는 다른 파일에서 사용할 수 있도록 내보내는 키워드입니다.
- 즉, 모듈을 내보낼 때 사용합니다.
Named Export
const num = 10;
export {num};
export const str = 'hello world';- 미리 선언된 변수나 함수를 export 할 수도 있고, 세번째 line 처럼 바로 export 할 수도있습니다.
- 위와 같이 이름을 지정해서 내보내는 방식을 Named Export 라고합니다.
Default export
- Default Export 는 모듈당 딱 하나의 멤버에만 선언이 가능합니다.
- React에서 많이 사용하는 방법
const a = 10;
const b = 20;
export default a;
//default에는 모듈당 하나밖에 사용할 수 없으므로, 나머지 멤버는 named export를 사용해야 합니다.
export {b};2) import 문법
문법
import {불러올 변수 혹은 함수 이름} from '파일경로';- import는 export된 변수나 함수를 현재 문서로 불러오는 키워드입니다.
여러 멤버 불러오기
import {변수명1, 변수명2 } from '파일경로';as(alias)지시자로 멤버의 별칭 지정하기
import 변수명 as 별명 from '파일경로';3) Import & Export 예제
test1.js
const 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>test.js
const 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 './test.js';
console.log(num);
</script>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/