모던 자바스크립트 DeepDive 공부 내용 17차

해당 포스트가 마지막 정리 내용이다.

이번 정리 목차는 48 ~ 49장이다.

48장 모듈

모듈의 일반적 의미

-       애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 의미

-       자신만의 파일스코프(모듈스코프)를 가질 수 있어야 한다.

-       모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능 이를 Export라 한다.

-       export된 모듈의 자산은 다른 모듈에서 재사용 가능

-       export된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다.

-       모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 Import라 한다.

-       재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

 

자바스크립트와 모듈

-       JS는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 태어났기에 모듈시스템을 지원하지 않았다. JS가 발전하면서 CommonJS와 AMD가 제안

-       Node.js는 CommonJs를 채택

 

ES6 모듈(ESM)

-       ES6에서도 모듈 기능 추가

-       script 태그에 type=module 어트리뷰트 추가하고 확장자는 mjs 사용

-       기본적으로 stric mode가 적용

 

[모듈 스코프]

-       독자적인 모듈 스코프를 갖는다.

-       모듈 내에서 var 키워드로 선언한 변수는 전역변수도 아니고 window객체의 프로퍼티도아니다.

-       모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없다. 모듈 스코프가 다르므로

-       그래서 export키워드와 import키워드가 있음

 

49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

Babel

-       최신 사양의 소스코드를 구형 브라우저에서도 동작하는 ES5사양의 코드로 변환(트랜스파일링)해 주는 일을 한다.

 

WebPack

-       의존관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러이다.

-       WebPack과 Babel을 사용하여 최신 사양의 소스코드를 브라우저에서 동작 하게 한다.