[자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export

html에서 js코드를 불러올 때

script 태그에 type 속석으로 module이라는 값을 지정해주면, 모듈 스코프를 가지게 된다.
이렇게 되면 다른 파일에서는 해당 js 파일을 사용할 수 없게 된다.

<------ index.html --------->

<!DOCTYPE htmel>
<html lange="ko">
	<head>
    	<meta charset="UTF-8">
        <title>JS 나도 할 수 있다</title>
    </head>
    <body>
    	<script type="module" src="printer.js"></script>
        <script type="module" src="index.js"></script>
    </body>
</html>

다른 파일에서도 모듈 js에 있는 변수와 함수를 쓸 수 있게 하는 방법

1. 각각의 선언문 앞에 export 라는 선언문을 붙여주면 다른 파일에서도 사용할 수 있다.

// ======== printer.js =========

export const title = '자바스크립트도 뚝딱!';

export function print(value) {
	console.log(value);
}

2. 불러오는 파일에서 import 라는 키워드를 사용해야 한다.

vscode의 라이브서버를 사용하면 바로 값이 반영되는 모습을 확인할 수 있다.

// ====== index.js =======

import { title, print } from './printer.js';

print(title);



// 결과
// 자바스크립트도 뚝딱!

3. index.html 수정

printer.js는 모듈 문법으로 index.js에서 사용되기 때문에 각각의 파일을 다 불러올 필요가 없다.
모듈화된 파일들은 서로서로 연결될 수밖에 없기 때문에 자바스크립트의 진입점 역할을 하는 js 파일만 불러오면된다. => 진입점 파일만 두고 삭제하기.

<!------ index.html --------->

<!DOCTYPE htmel>
<html lange="ko">
	<head>
    	<meta charset="UTF-8">
        <title>JS 나도 할 수 있다</title>
    </head>
    <body>
        <script type="module" src="index.js"></script>
    </body>
</html>

as 키워드 : 모듈 안에서 이름 변경하기

title을 printer.js에서 불러왔는데 index.js에서 title을 또 사용하고 싶은 상황이 오면,
as 키워드를 사용하여 불러오는 printer.js의 title을 변경해주어야 한다.

// ====== index.js =======

import { title as printerTitle, print } from './printer.js';

conset title = '두올다 하거나 죽거나'

print(title);



// 결과
// 두올다 하거나 죽거나

혹은

// ======== members.js ===========

export const title = 'TooktakMEmbers';

export const data = [
	'하진', '한나', '예슬', '지현', '아라', '재은', '향아',
    '반석', '광택', '현태', '지훈', '나라', '원홍', '달중'
]

// ====== index.js =======

import { title as printerTitle, print } from './printer.js';
import { title, data as members} from './members.js';

print(title);
print(members);



// 결과
// TooktakMembers
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']

' * ' 와일드 카드 문자 (Wildcard Character)
: import 파일에서 export파일로부터 모두 가져오기

import 파일에서 export 파일에서 대상을 모두 가지고 올 필요는 없다.
import 파일에서는 사용하고 싶은 것만 가져오면 된다.
import 파일에서 export파일로부터 가져올 대상이 너무 많거나 모두 가져와야 한다면 ' * ' 사용하기.
* 사용할 때는 객체의 형식으로 사용할 수 있음. (프로퍼티 형식)
* 는 모든 내용을 가져오기 때문에 항상 효율적이라고 할 수 없다.
즉, 무분별하게 * 사용하지 말고, 필요한 상황에 따라 사용하기!

// ====== index.js =======

import * as printJS from './printer.js';
import {
	title as memebersTitle,
    data as membersData
} from './members.js'

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);



// 결과
// 자바스크립트도 뚝딱!
// 두올다 하거나 죽거나
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']

Named export : export를 할 때 코드를 한꺼번에 다룰 수 있는 방법

export 키워드 다음에 내보낼 대상을 중괄호로 묶어주기.
이렇게 하면 내보내는 내용이 뭔지 확인할 수 있어서 편리하다.
한꺼번에 export를 하면 as 키워드도 사용 가능하다. (미리 이름 바꿔서서 import 파일에 전달하기)

//======== printer.js =========

const title = '자바스크립트도 뚝딱!';

function print(value) {
	console.log(value);
}


export { title as printerTitle, print };

Default export

export 키워드 하나만 사용하는 것과는 다르게, default를 사용하면 그 뒤에는 반드시 하나의 대상만 내보낼 수 있게 된다.
예시 1) export default title
예시 2) export default 'Tooktak' => 이렇게 바로 값 하나를 바로 내보낼 수 있다.
default 키워드는 모듈 파일에서 딱 한번만 사용 가능하다. 중복 사용X

//======== members.js ===========

export const title = 'TooktakMEmbers';

export const data = [
	'하진', '한나', '예슬', '지현', '아라', '재은', '향아',
    '반석', '광택', '현태', '지훈', '나라', '원홍', '달중'
];

export default 'Tooktak';

import를 할 때도 default 키워드로 구분이 된다.
키워드 자체로는 사용할 수 없고 as키워드를 사용해서 이름을 붙여줘야 한다.

// ====== index.js =======

import * as printJS from './printer.js';
import {
	default as myName,
	title as memebersTitle,
    data as membersData
} from './members.js'

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);
console.log(myName);



// 결과
// 자바스크립트도 뚝딱!
// 두올다 하거나 죽거나
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']
// Tooktak

default 내용을 다른 문법으로도 사용할 수 있다.
default 값에 붙여진 이름을 중괄호 밖으로 빼낼 수 있다.

// ====== index.js =======

import * as printJS from './printer.js';
import myName, {
	title as memebersTitle,
    data as membersData
} from './members.js'

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);
console.log(myName);



// 결과
// 자바스크립트도 뚝딱!
// 두올다 하거나 죽거나
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']
// Tooktak

주의! default export와 named export를 함께 사용하면 코드가 조금 복잡해진다.

보통은 한 가지 방식만 사용하는 걸 권장한다.
1. 보통 모듈 파일에서 export할 대상이 여러개라면 named export를 활용한다.
2. export할 대상이 하나라면 default export를 활용한다.
아래와 같은 방법으로 *와일드카드 문법을 사용할 수 있는데, 자주 사용되진 않는다.
와일드카드 문법을 사용하게 되면 default값을 파라미터로 접근할 수 있다.

// ====== index.js =======

import * as printJS from './printer.js';
import * as memebersJS from './members.js'

console.log(printerJS.title);
printerJS.print(membersJS.Title);
printerJS.print(membersJS.data);
console.log(membersJS.default);



// 결과
// 자바스크립트도 뚝딱!
// 두올다 하거나 죽거나
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']
// Tooktak

잠깐만!
export할 대상이 여러개일 때 무조건 named export만 활용할 수 있는 건 아니다.
default export도 사용할 수 있다는 것을 알아두자.

default 키워드를 사용하면,
중괄호가 각 대상을 export하는 코드블록으로 평가되는 게 아니라, 객체를 표현하는 중괄호로 평가된다.

//======== printer.js =========

const title = '자바스크립트도 뚝딱!';

function print(value) {
	console.log(value);
}


export default { title, print };
// { title : title, print: print }

위 모듈 파일에서 하나의 객체값을 export하게 되니까, 아래 파일에서도 printJS라는 축약된 문법을 사용할 수 있다.
사용할 때도 객체의 형태로 사용할 수 있다.
장점
1. import 부분의 코드를 간결하게 사용할 수 있다.
2. 객체 형태로 값을 활용하기 때문에 다른 모듈과 이름 중복을 피할 수 있다.
단점
1. 객체 형식으로 활용하면 매번 .표기법으로 프로퍼티에 접근해야 한다.
2. 모듈 파일을 불러오는 입장에서 각 대상의 이름을 변경할 수가 없다.

// ====== index.js =======

import printJS from './printer.js';
import myName, {
	title as memebersTitle,
    data as membersData
} from './members.js'

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);
console.log(myName);



// 결과
// 자바스크립트도 뚝딱!
// 두올다 하거나 죽거나
// (12) ['하진', '한나', '예슬', '지현', '아라', '재은', '향아',
// '반석', '광택', '현태', '지훈', '나라', '원홍', '달중']
// Tooktak

728x90

'코딩도 합니다 > JS' 카테고리의 다른 글

[자바스크립트 js] 객체 지향 프로그래밍이란 (0)	2021.06.19
[자바스크립트 js] 모듈 복습 및 활용 / 직전 게시물 정리 (0)	2021.06.19
[자바스크립트 js] 모듈 개념 (0)	2021.06.16
[자바스크립트 js] Map / Set (0)	2021.06.16
[자바스크립트 js] sort 메소드 / reverse 메소드 (0)	2021.06.16

디발자 뚝딱

[자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export

html에서 js코드를 불러올 때

다른 파일에서도 모듈 js에 있는 변수와 함수를 쓸 수 있게 하는 방법

1. 각각의 선언문 앞에 export 라는 선언문을 붙여주면 다른 파일에서도 사용할 수 있다.

2. 불러오는 파일에서 import 라는 키워드를 사용해야 한다.

3. index.html 수정

as 키워드 : 모듈 안에서 이름 변경하기

' * ' 와일드 카드 문자 (Wildcard Character)
: import 파일에서 export파일로부터 모두 가져오기

Named export : export를 할 때 코드를 한꺼번에 다룰 수 있는 방법

Default export

주의! default export와 named export를 함께 사용하면 코드가 조금 복잡해진다.

잠깐만!
export할 대상이 여러개일 때 무조건 named export만 활용할 수 있는 건 아니다.
default export도 사용할 수 있다는 것을 알아두자.

'코딩도 합니다 > JS' 카테고리의 다른 글

티스토리툴바

[자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export

html에서 js코드를 불러올 때

다른 파일에서도 모듈 js에 있는 변수와 함수를 쓸 수 있게 하는 방법

1. 각각의 선언문 앞에 export 라는 선언문을 붙여주면 다른 파일에서도 사용할 수 있다.

2. 불러오는 파일에서 import 라는 키워드를 사용해야 한다.

3. index.html 수정

as 키워드 : 모듈 안에서 이름 변경하기

' * ' 와일드 카드 문자 (Wildcard Character): import 파일에서 export파일로부터 모두 가져오기

Named export : export를 할 때 코드를 한꺼번에 다룰 수 있는 방법

Default export

주의! default export와 named export를 함께 사용하면 코드가 조금 복잡해진다.

잠깐만! export할 대상이 여러개일 때 무조건 named export만 활용할 수 있는 건 아니다.default export도 사용할 수 있다는 것을 알아두자.

'코딩도 합니다 > JS' 카테고리의 다른 글

'코딩도 합니다/JS' Related Articles

티스토리툴바

' * ' 와일드 카드 문자 (Wildcard Character)
: import 파일에서 export파일로부터 모두 가져오기

잠깐만!
export할 대상이 여러개일 때 무조건 named export만 활용할 수 있는 건 아니다.
default export도 사용할 수 있다는 것을 알아두자.