모듈화의 필요성
하나의 파일에 많은 코드를 작성하게 되면 각 코드들의 의미를 빠르게 파악하기 힘들고 ,기능 수정이 필요할 때도 그 부분을 찾기가 힘들기 때문에 코드를 관리하기가 어려워진다.
그렇기 때문에 하나의 파일로 관리하는 것이 아닌 각 기능 별로 여러가지 파일로 분리해서 관리하는 것이 좋다.
이러한 과정을 모듈화라고 하고, 각각의 파일을 모듈이라고 한다.
모듈화를 통해 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용이 가능하다.
모듈 스코프
기본적으로 모듈이 되는 파일은 파일만의 독립적인 스코프를 가져야 한다. 이러한 스코프를 모듈 스코프라고 한다.
이는 모듈 파일 내에서 선언한 변수나 함수는 파일 내에서만 사용이 가능하도록 하는 것이다.
<script type="module" src="index.js"></script>위와 같이 type을 module이라는 값으로 지정해주어서 모듈화 시킨다.
Live server
html을 웹브라우저에서 불러오게 되면, 자바스크립트의 모듈 문법을 사용할 수 없기 때문에 문법 자체의 보안 요구 사항으로 에러가 발생한다. 그렇기 때문에 서버를 통해 html문법을 시행해야 한다.
vsc를 사용하는 경우 'live server' 설치를 통해 시행할 수 있다.
모듈 문법
대표적인 모듈 문법으로는 export와 import가 있다.
export는 모듈 내부의 변수나 함수를 다른 모듈로 내보내고자 할 때 사용하며, import는 모듈 내부에 다른 모듈의 변수나 함수를 사용하고자 할 때 사용한다.
변수나 함수의 이름을 변경해서 불러올 때 밑에와 같이 작성하면 된다.
import {Index as Content} from index.js이름을 변경함으로써 다른 모듈에서 import한 함수나 변수의 이름과 중복되는 현상을 막을 수 있다.
한 번에 모든 변수와 함수를 다 불러오려면 밑에와 같이 작성하면 된다.
import * as Content from index.jsexport default
export default는 오로지 하나의 값만 지정해줄 수 있다.
값 부분에는 꼭 정의된 함수나 변수가 아니더라도 밑에와 같은 문자열도 가능하다.
export default 'hello'하지만 export default를 사용할 때
export default {Hello, Bye} 식으로 사용할 수도 있는데 이는
{Hello: Hello, Bye: Bye}를 축약한 형태로 모듈에서 불러오고 사용할 때 객체의 불러오는 형식으로 불러와야 한다는 사실을 잊지 말자.
