webpack1. 모듈과 추상화

목차

1. 모듈
2. 추상화(abstraction) 개념
3. 웹팩 모듈
4. 웹팩에서 지원하는 모듈의 유형들

 

 

---

 

 

1. 모듈

1-1. 모듈방식 프로그래밍

모듈방식 프로그래밍에서 개발자들은 프로그램들을 모듈이라고 불리는 개별 기능상의 덩어리들로 쪼갠다.

각각의 모듈은 검증생성, 디버깅, 세부 사항 테스트하기 등 완전한 프로그램보다 더 작은 표면을 가진다.

 

잘 작성된 모듈은 완전한 추상화와 캡슐 경계를 제공하며,

각각의 모듈들은 전체 어플리케이션 내에서 논리적으로 일관적인 디자인과 명확한 목적을 가지게 된다.

 

1-2. 모듈의 특성

• 식별가능한 유일한 이름을 가짐
• 독립적으로 컴파일됨
• 독립적인 기능을 가져야 함
• 다른 프로그램 또는 다른 모듈에서 사용 가능
• 모듈 자체로서 재사용 가능

 

 

2. 추상화 (Abstraction)

2-1. 추상화 개념

• 문제의 전체적이고 포괄적인 개념을 설계한 후 차례로 세분화하여 구체화 시켜 나가는 것
• 최소의 비용으로 실제 상황에 대쳐 가능하게 하며, 시스템 구조 및 구성을 대략적으로 파악할 수 있게 해줌
• 객체 지향에서는 객체들의 공통점을 뽑아 클래스라는 이름을 붙여놓는 것이 추상화의 예시이다.
• cf) 클래스로부터 객체를 생성하는 과정은 인스턴스라고 함

 

2-2 추상화 유형

• 과정 추상화: 자세한 수행 과정을 정의하기 보다는, 상위 수준에서 전반적인 흐름에 대한 파악
• 데이터 추상화: 데이터의 세부적인 속성이나 용도를 정의하기 보다는, 데이터 구조를 대표하는 표현으로 대체
• 제어 추상화: 이벤트 발생의 정확한 절차나 방법을 정의하기 보다는, 대표하는 표현으로 대체

 

3. 웹팩 모듈(webpack Module)

NodeJS 모듈과는 달리 웹팩 모듈은 다양한 방식으로 dependncies를 표현한다.

• An ES2015 import statement
• A CommonJS require() statement
• An AMD define and require statement
• An @import statement inside of a css/sass/less file.
• An image url in a stylesheet url(...) or HTML <img src=...> file.

 

 

4. 웹팩에서 지원하는 모듈의 유형들

4-1. 기본 지원 모듈 유형들

• ECMAScript modules
• CommonJS modules
• AMD modules
• Assets
• WebAssembly modules

 

4-2. 기타 지원 모듈 유형

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus
• Elm