[JS] 모듈

들어가며

여러 자바스크립트 파일을 연결하다 보면 식별자 이름이 겹쳐서 중복선언때문에 오류가 나는 경우가 생깁니다. 이에 대한 해결 방법으로 즉시 실행 함수나 네임스페이스를 만들어서 코드의 스코프를 조절하는 방법이 있는데, ES2015부터 모듈을 적용할 수 있게 되었습니다. 이런 모듈에 대해서 알아보는 시간을 가지겠습니다!!

요약

• 자바스크립트 파일이 많아지고 식별자가 겹치는 일들이 생길 때 모듈화하여 스코프를 조절합니다.
• 모듈 시스템에는 여러가지 종류가 있으며, 모듈을 지원하는 브라우저 버전을 잘 확인해야합니다.
• import와 export를 사용하여 모듈 스코프의 외부에서도 기능을 쉽게 사용할 수 있습니다.
• 항상 HTML 문서가 다 파싱된 이후에 실행되기 때문에 사용자에게 로딩중을 알려줘야 합니다.
• 모듈의 실행 환경에 따라서 구체적인 로딩 순서나 동작방식이 달라질 수 있습니다.

본격적으로

모듈 시스템

공식문서 등에서 다음과 같이 같은 코드인데도 여러가지 방법을 탭으로 제공하는 곳을 볼 수 있습니다. ESM, UMD 등이 모듈 시스템 입니다.

모듈 시스템이란?

모듈 스코프를 가지며, 여러 파일과 폴더에 나누어 작성하더라도 효율적으로 서로가 서로를 불러올 수 있도록 해주는 시스템입니다.

모듈 시스템의 종류

• ES Module : ES6(ES2015)에서 도입된 javascript module system
• CommonJS : NodeJS 환경을 위해 만들어진 module system
• AMD : 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해서 처음 개발되었습니다.
• UMD : AMD와 CommonJS 와 같은 다양한 모듈 시스템을 함께 사용하기 위해서 만들어졌습니다.

모듈 시스템마다 사용방법이 다르지만, 이러한 모듈 시스템을 구성하는 각각의 파일들을 모듈이라고 부르며, 대부분 mjs 확장자로 사용합니다. js 확장자도 가능하나 명시적으로 모듈을 사용했다는 것을 보여주기 위해서 mjs를 써줍니다. 브라우저에서 사용하기 위해서는 다음과 같이 type="module"을 써주며 해당 파일의 확장자는 mjs로 써주면 됩니다!

<script type="module" src="index.mjs"></script>

모듈 사용하기

ES6 모듈 포맷이며, 브라우저에서 코드를 실행하기 전에 Babel 과 같은 변환기를 사용해 ES5 모듈 포맷(AMD 또는 CommonJS)으로 코드 변환이 필요합니다!

가장 바깥쪽 스코프에서 export, import로 모듈을 내보내고 가져올 수 있습니다.

• export로 선언문을 내보낼 수 있습니다. 외부에서 접근 가능하도록 만드는 것입니다.

login.mjs

//const 키워드로 선언한 경우
const login = () => {};
export default login;

signup.mjs

//function 키워드로 선언한 경우
export function signup(){}

• import로 해당 모듈을 가져올 수 있습니다.

index.mjs

//export default로 내보낸 경우
import login from 'login.js'

//export default로 내보낸 경우가 아니라면 {} 안에 써주어야 합니다.
import { signup as sign } from 'signup.js'
//모듈 내에 같은 식별자 이름을 사용한 경우 as로 import한 모듈 내부에서는 이름을 바꿀 수 있습니다.

모듈의 특징

• import 또는 export 구문을 사용합니다.
• 엄격 모드(strict mode)로 동작합니다.
• 모듈의 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됩니다.
• 동일한 모듈을 여러 곳에서 사용하라도 모듈은 처음 호출시 한번만 실행됩니다.
• 항상 지연 실행됩니다. html이 다 만들어진 후에 실행됩니다.

모듈의 장점

• 기능을 분리할 수 있습니다.
• 모듈의 재사용으로 개발과 유지보수가 좋습니다.
• 프로그램의 효율적인 관리 및 성능을 향상시킬 수 있습니다.
• 디버깅, 테스트, 통합, 수정 시 모듈 별로 작업을 할 수 있기 때문에 용이합니다.

모듈 사용시 주의할 점

• import, export는 모듈 간 관계를 나타내는 것일 뿐, 코드를 실행시키라는 명령이 아닙니다.
• 같은 모듈을 여러 다른 모듈에서 불러와도, 모듈 내부의 코드는 단 한 번만 실행됩니다.
• import, export는 모듈의 가장 바깥쪽 스코프에서만 사용할 수 있습니다.
• 모듈을 어떤 환경에서 실행하느냐에 따라서 구체적인 로딩 순서나 동작방식이 조금씩 달라질 수 있습니다.

결론

자바스크립트의 파일이 많아질수록 식별자 이름을 짓기가 힘들었는데, 모듈이라는 기능을 알고 난 이후로는 정말 좋았습니다. 사용하기에 편하기도 했습니다. 다만 제가 최신 버전의 크롬 브라우저 환경에서만 작업을 하고 있었는데 모듈이라는 것을 지원하지 않는 브라우저가 생각보다 있어서 놀랐습니다. 실무에서는 웹팩이나 바벨 등의 모듈 빌더로 한다는데 이 부분도 추가적으로 공부하면 좋을 것 같습니다.

점점 공부할 게 쌓이고 있습니다! 삼천포로 빠지지 않도록 조심해야겠습니다. 매일매일 채용공고를 보면서 목표를 되새기는 요즘 조급하기도 하지만 블로그를 쓰면서 이런 기본적인 부분을 알아갈 수 있기에 블로그를 포기하지 않고 이어나갈 수 있는 것 같습니다. 두번째 코로나도 이겨내고 다시 열심히 달리겠습니다! 화이팅!!

참고

엄격모드
파일의 가장 위쪽에"use strict"을 사용하여 설정합니다.

1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다.
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.
   
   === 엄격 모드일 경우 예시

• 키워드 없이 변수를 선언할 경우 전역 변수로 등록하는 것이 아닌 에러로 알려줍니다.
• NaN 에 할당하는 것은 예외를 발생시킵니다.
• 삭제할 수 없는 프로퍼티를 삭제할 때 예외를 발생시킵니다.
• 프로퍼티 이름을 중복하는 것은 구문 에러입니다. 일반 코드에서는 중복된 프로퍼티 이름 중 나중에 정해진 프로퍼티 이름의 값으로 덮어씌웁니다.
• 원시 값에 프로퍼티를 설정하는 것을 금지합니다.

모듈 스코프
자신만의 스코프를 가집니다. 파일마다 별도의 스코프로 존재하고 있어 전역 객체에 등록되는 것이 아닌 모듈 스코프에 등록됩니다. 따라서 모듈 내에서 가장 상위 객체를 가리키는 this는 window가 아닌 undefined입니다. 그러나 모듈 스코프도 결국 전역 스코프의 하위 스코프여서 window.a로 선언한 전역 변수를 a라는 이름으로 참조할 수 있습니다!

index.mjs

import login from './login.js';
window.a = 1;
login();

login.mjs

export default function login(){
  console.log(a); //1
}

자료를 조사하면서 쉽게 쓰여진 블로그 글들을 많이 참고하였습니다!

hello world javascript >
mdn strict mode >
youngDev >
colin's blog >
참고:노션 블로그 >
mingule >

브라우저 호환성 : CAN I USE >