모듈파일의 조건

모듈이 되는 파일은 모듈만의 독립적인 스코프를 가져야한다.

모듈파일 안에서 선언한 변수나 함수는 모듈파일 안에서만 쓰여야 한다.

모듈 스코프 만들기

모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 한다. 다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 한다.

HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면 script태그에 type속성을 module이라는 값으로 지정해 주어야 한다.

모듈 문법

독립적인 모듈 스코프를 가지게 된 모듈은 export로 내보내 줘야 쓸 수 있다.

그리고 이걸 다시 받아서 import 로 불러와야한다.

그리고 html 파일에서는 루트 index 하나만 불러오면 된다.

이름 바꾸기

title as printerTitle 이 것 처럼 모듈의변수이름 as 바꿀변수이름 이렇게 쓰면 변수할당이름을 바꿀수 있다.

모듈 문법을 활용할 때 import할 변수나 함수 이름을 조금 더 간결한 이름으로 바꾸거나, 혹은 더 구체적으로 바꾸고 싶을 수도 있다.

그럴 때 import 키워드를 통해 모듈을 불러올 때 as 키워드를 활용하면 import하는 대상들의 이름을 변경할 수 있는데.

이런 상황뿐만 아니라 이름을 바꿔서 import하면 여러 파일에서 불러오는 대상들의 이름이 중복되는 문제를 해결할 수도 있다.

한꺼번에 다루기

모듈 파일의 import 대상을 한꺼번에 불러오는 방법이 있다.
아스트릭스 * 를 활용해 as 모듈담을객체이름 으로 담아주면 된다.

그리고 객체형식으로 불러올 수 있다.

여러개를 한번에 다룰 수 있는 명령문자를 와일드카드 문자라고 한다.

export 도 한번에 해주기
중괄호로 함.

모듈파일에서 내보낼 때 미리 변수이름을 바꿔서 내보낼 수도 있다.

default export

default 키워드는 딱 한 번만 사용할 수 있다.

default import 할 때는 꼭 이름을 붙여주어야 한다.

• default export : 단일 대상으로 내보내기
• named export : 여러 대상으로 내보내기

default export 할 때 중괄호 밖에서 import 할 수도 있다.

export 할 대상이 여러개면 named, 단일이면 default export

이렇게 쓰면 export 한 모듈들을 단일 객체형태로 담아서 export 해줄수 있다.

export를 할 때 default 키워드를 함께 사용하면 모듈 파일에서 기본적으로 export할 대상을 정할 수 있다.

이 default 키워드를 함께 활용하면, 축약형 문법으로 import를 할 수 있어서, 일반적으로 모듈 파일에서 export 대상이 하나라면, default export를 하는 것이 조금 더 간결한 코드를 구성하는 데 도움이 된다.

복습과 활용

그동안 배운 문법만 되돌아봐도 모듈 문법은 정말 다양한 방식으로 작성될 수가 있다.

export를 할 때도 선언문을 export하거나

선언된 변수나 함수를 코드 블록으로 묶어서 export할 수도 있고,

때로는 as 키워드를 통해 이름을 변경해서 export를 할 수도 있었다.

그리고 default 키워드를 통해 표현식을 export하는 방법도 배우면서,


위 코드 처럼 단순히 하나의 대상을 export하는 것뿐만 아니라 아래 코드처럼 여러 대상을 객체 값으로 모아 내보내는 방식도 가능하다는 것도 배웠다.

그리고 import도 import 키워드 이후에 중괄호를 감싸면, 아래 코드 처럼 모듈 파일에서 export하는 항목들을 선택적으로 불러올 수 있고

as 키워드를 통해서 아래 코드 처럼 이름을 바꿀 수도 있었다.

뿐만 아니라 와일드카드 문자(*)를 통해서 아래 코드 처럼 export된 항목들을 모두 불러올 수도 있었다.

그리고 아래 코드 처럼 default export된 대상을 import할 때는

아래 처럼 축약형으로 불러올 수 있다는 부분도 살펴봤었다.

심지어 이러한 방식들을 잘 응용하면,

위 코드들 처럼 여러 개의 기능으로 잘게 나누어진 모듈을 import한 다음 다시 export하는 모듈 파일을 만들 수 있는데,

비슷한 특징을 가진 여러 모듈 파일들을 다시 하나의 모듈 파일로 만들 수 있어서 파일 관리를 유용하게 할 수 있도록 도와준다.

모듈 문법은 나중에 자바스크립트를 기반으로 한 라이브러리나 프레임워크를 사용할 때 꼭 필요할 정도로 정말 많이 활용되기 때문에 다양한 상황들을 경험해보고 어떤 방식으로 풀어나갈지 고민하는 것이 중요하다.

종합 정리

🌟모듈

모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있다.
복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면

1. 코드를 좀 더 효율적으로 관리할 수 있고,
2. 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있다.

🌟모듈 스코프

모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 하는데.
다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 한다.

HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면
script태그에 type속성을 module이라는 값으로 지정해 주어야 한다.

🌟모듈 문법

자바스크립트의 모듈 문법은 기본적으로 export와 import 이다.

모듈 스코프를 가진 파일에서 외부로 내보내고자 하는 변수나 함수를 export 키워드를 통해 내보내고,
모듈 파일에서 내보낸 변수나 함수들은 다른 파일에서 import 키워드를 통해 가져온다.

🌟이름 바꿔 import 하기

import 키워드를 통해 모듈을 불러올 때 as 키워드를 활용하면 import하는 대상들의 이름을 변경할 수 있다.

import 할 변수나 함수 이름을 조금 더 간결한 이름으로 바꾸거나, 혹은 더 구체적으로 바꾸고 싶을 때 활용하면 좋다.
뿐만 아니라 이름을 바꿔서 import 하면 여러 파일에서 불러오는 대상들의 이름이 중복되는 문제를 해결할 수도 있다.

🌟한꺼번에 import 하기

import할 때 와일드카드 문자(*)와 as를 활용하면 모듈 파일에서 export하는 모든 대상을 하나의 객체로 불러올 수 있다.

S%20from%20'.printer.%20js'.png)

🌟한꺼번에 export 하기

변수나 함수 앞에 매번 export 키워드를 붙일 수도 있지만, 선언된 변수나 함수를 하나의 객체로 모아 한꺼번에 내보낼 수도 있다.

이때 as 키워드를 활용하면 이름을 변경해서 export할 수도 있다.

🌟default export

export를 할 때 default 키워드를 함께 사용하면 모듈 파일에서 기본적으로 export할 대상을 정할 수 있다.

일반적으로 모듈 파일에서 export 대상이 하나라면, 이 default 키워드를 함께 활용하는 것이 조금 더 간결한 코드를 구성하는데 도움이 된다.

default export는 import할 때 기본적으로 다음과 같이 불러올 수 있지만,

다음과 같이 축약형 문법으로 import 할 수도 있기 때문이다.