JavaScript

모듈(Module)

2023. 9. 1. 16:37
목차
  1. 요약
  2. 설명
  3. Ref

요약

모듈이란 특정 기능을 갖는 작은 코드 단위이며 이러한 코드를 파일로 나누어서 관리하는 것을 모듈화라고 합니다.

모듈 번들러란 여러개의 어플리케이션을 구성하는 JS,CSS, 이미지 등의 파일을 하나의 파일로 합쳐주는 도구 입니다.

설명

👩🏻‍💻 왜 모듈을 하나로 합칠까요?

<html>
	<script src ="module1.js" /> <!-- var age = 1 -->
	<script src ="module1.js" /> <!-- var age = 20 -->
	<script src ="module1.js" /> <!-- console.log(age) // 20-->
</html>

자바스크립트를 여러개의 파일로 분리해서 script 태그로 로드해도

결국 하나의 자바스크립트 파일처럼 동작합니다.

분리된 파일간의 스코프 구분이 없어 로드 순서를 정하는데 많은 시간을 소모했습니다.

그래서 등장한 CommonJS와 AMD 하지만..

  • commonJS 코드 예시
// 다른 모듈에서 함수 가져오기
const math = require('./math.js');

// 가져온 함수 사용하기
const sum = math.add(5, 3);
console.log(sum);

const difference = math.subtract(10, 4);
console.log(difference);

CommonJS로 인해 각 파일간 스코프가 분리가 되었지만 여전히 문제는 존재했습니다.

CommonJS는 브라우저 외의 환경(Node.js)에서 동작하기 위해 만들어진 모듈 시스템이었습니다.

비동기 모듈 로드에 대해서는 고려되지 않았기 때문에 사용자와 빠르게 소통해야하는 브라우저 특성상 사용하기 어려웠습니다.

이를 해결하기위해 AMD(Asynchronous Module Definition)가 등장하였지만,

규격이 다른 두가지 방식의 불편함으로 인해 언어자체에 모듈 시스템을 도입하게 되었습니다.

JS표준 모듈 시스템 ESM(ES6 Module)의 탄생 그러나..

<script type="module" src="main.js"/>
  • script 태그에 type="module" 요소를 추가하면 해당 자바스크립트 파일은 모듈로서 동작합니다.
// util.js
export function greet(name) {
  console.log(`Hello, ${name}!`); // Hello Alice!
}

// main.js
import { greet } from './utils.js';

greet('Alice');
  • export import 키워드를 이용해 함수,변수 등을 다른 모듈에서 사용할 수 있게 합니다.

그러나.. 각각의 모듈(JS 파일)을 개별 네트워크 통신을 통해 가져와야 했고

→ 통신 횟수가 증가하여

→ 초기 로딩 속도가 저하되었습니다.

그럼 모듈을 하나로 합치자! ⇒ 번들러(bundler)탄생✨

현대 대부분의 모듈 번들러는 개발 서버를 지원하며 아래와 같은 이점이 있습니다.

  1. 코드 변경 사항을 새로고침 없이 바로 반영시켜주는 기술 HMR(Hot Module Replacement)
  2. 바벨과 같은 트랜스 파일러를 연결해서 번들링과정에서 실행
  3. minify - 코드를 같은 기능을 하는 더 작은 용량의 코드로 변환
  4. Tree Shaking - 코드 번들링과정에서 사용하지 않는 코드들을 제거해서 최적화

webpack은 현재 가장 널리 사용되는 모듈 번들러 중의 하나입니다.

Ref

  1. 모자딥다
  2. 유튜브 - [10분 테코톡] 도밥의 모듈 번들러와 빌드도구

'JavaScript' 카테고리의 다른 글

This  (2) 2023.09.12
실행컨텍스트 (Execution Context)  (0) 2023.09.04
클로저 (Closure)  (0) 2023.08.30
스코프(scope)  (2) 2023.08.28
[JS] 호이스팅  (0) 2023.04.23
  1. 요약
  2. 설명
  3. Ref
'JavaScript' 카테고리의 다른 글
  • This
  • 실행컨텍스트 (Execution Context)
  • 클로저 (Closure)
  • 스코프(scope)
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 메모이제이션
  • 알고리즘

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
모듈(Module)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.