Web

모듈

필립 2024. 4. 29. 21:03
개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
자바스크립트가 만들어진 지 얼마 안 되었을 때는 자바스크립트로 만든 스크립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었습니다. 새로운 문법을 만들 필요가 없었던 것이죠.
그런데 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 다양한 시도를 하게 됩니다.
코어자바스크립트 

 

모듈이란 

모듈은 하나의 파일이다. 스크립트 하나는 모듈 하나, 특정 기능을 위해 모아놓은 변수와 상수의 집합이다.

여러 특징들 덕분에 코드의 재사용성과 유지보수성, 협업 능률을 향상시킬 수 있다. 

 

대표적인 기능

1. export와 import 같은 지시자를 사용 가능케 한다. 

 

2. 독립적인 스코프를 갖게 된다. 

동일한 이름의 변수도 각각 다른 파일에서 사용 가능하다. 

 

3. 엄격 모드로 실행된다.

4. 선언되지 않은 변수를 사용할 수 없다.

 

5. 단 한 번만 평가된다. 

이는 단 한 번만 실행되고 필요한 곳에 공유되므로 한 모듈에서 내용을 변경하면 다른 모듈에서도 

이를 확인할 수 있다. 협업 시 "설정"을 쉽게 할 수 있게 된다.

6. 지연 실행된다. 

defer가 기본 내장 되어있다. 

 

주의사항

모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작합니다.
로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않습니다. 
예시를 실행하려면 로컬 웹 서버인 static-server나, 코드 에디터의 ‘라이브 서버’ 익스텐션(Visual Studio Code 에디터의
경우 Live Server Extension)을 사용하세요.
코어자바스크립트

 

'Web' 카테고리의 다른 글

IP와 포트.  (0) 2024.05.08
localStorage  (0) 2024.05.07
Import와 export  (0) 2024.05.03
Semantic code  (0) 2024.05.02
git 사용 중인 문법 정리  (0) 2024.05.01