일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 커리어
- 딥다이브
- 모던 자바스크립트 Deep Dive
- package management
- 빌트인 객체
- 제너레이터와 async/await
- DOM
- 전역변수의문제점
- 자바스크립트
- 프론트엔드 성능 최적화 가이드
- 인터넷 장비
- Set과 Map
- 비전공이지만 개발자로 먹고삽니다
- 올림픽 통계 서비스 최적화
- 스코프
- Babel과 Webpack
- 이벤트
- peerdependencies
- 자바스크립트 패턴
- 자바스크립트 딥다이브
- 이미지 갤러리 최적화
- 프로그래머스
- var 사용금지
- 디스트럭처링
- 브라우저의 렌더링 과정
- 블로그 서비스 최적화
- 프로퍼티 어트리뷰트
- ES6함수 추가기능
- Property Attribute
- const
- Today
- Total
Dev Blog
48. 모듈 본문
48.1 모듈의 일반적 의미
모듈_module 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.
모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.
자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다.
즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다.
모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다.
모듈 사용자는 모듈이 공개_export 한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. import라 한다.
모듈은 기능별로 분리되어 개별적인 파일로 작성된다. 따라서 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.
48.2 자바스크립트와 모듈
자바스크립트 런타임 환경인 Node.js는 모듈 시스템의 사실상 표준_de facto standard인 CommonJS를 채택했고 독자적인 진화를 거쳐, 현재는 CommonJS 사양과 100% 동일하지는 않지만 기본적으로 CommonJS 사양을 따르고 있다. 즉, Node.js는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원한다. 따라서 Node.js 환경에서는 파일별로 독립적인 파일 스코프(모듈 스코프)를 갖는다.
48.3 ES6 모듈(ESM)
ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가했다. IE를 제외한 대부분의 브라우저(Chrome 61, FF 60, SF 10.1, Edge 16 이상)에서 ES6 모듈을 사용할 수 있다.
script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. 일반적인 자바스크립트 파일이 아닌 ESM임을 명확히 하기 위해 ESM의 파일 확장자는 mjs를 사용할 것을 권장한다.
-알라딘 eBook <모던 자바스크립트 Deep Dive> (이웅모 지음) 중에서
'Tech Books > Javascript_Modern JS Deep dive' 카테고리의 다른 글
49. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 (0) | 2023.02.25 |
---|---|
47. 에러 처리 (0) | 2023.02.25 |
46. 제너레이터와 async/await (0) | 2023.02.25 |
45. 프로미스 (2) | 2023.02.25 |
44. REST API (0) | 2023.02.25 |