48. 모듈

2023. 2. 25. 21:52·Tech Books & Lectures/Javascript_Modern JS Deep dive

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 & Lectures > 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
'Tech Books & Lectures/Javascript_Modern JS Deep dive' 카테고리의 다른 글
  • 49. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축
  • 47. 에러 처리
  • 46. 제너레이터와 async/await
  • 45. 프로미스
JTB
JTB
웹/앱 개발 정보를 공유하고 있습니다.
  • JTB
    JTechBlog
    JTB
  • 전체
    오늘
    어제
    • All About Programming;) N
      • Computer Science
        • Terminology and Concepts
        • Network
        • Operating System
        • Database
        • Data Structure
      • Frontend
        • Javascript Essentials
        • Perfomance Optimization
        • JS Patterns
        • Next.js
        • Flutter
      • Backend
        • Node.js
      • DevOps
        • Docker & Kubernetes
      • Coding Test N
        • LeetCode N
        • Programmers
      • Tech Books & Lectures
        • Javascript_Modern JS Deep d..
        • Network_IT 엔지니어를 위한 네트워크 입문
      • Projects
        • PolyLingo_2025
        • Build Your Body_2024
        • JStargram_2021
        • Covid19 Tracker_2021
        • JPortfolio_2021
      • BootCamp_Codestates
        • TIL
        • TILookCloser
        • Pre Tech Blog
        • IM Tech Blog
        • Daily Issues and DeBugging
        • First Project
        • Final Project
        • Sprint Review
        • Good to Know
        • Socrative Review
        • HTML &amp; CSS
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 글쓰기
    • 관리
  • 공지사항

  • 인기 글

  • 태그

    Binary Tree BFS
    JavaScript
    딥다이브
    polylingo
    Operating System
    How memory manage data
    need a database
    자바스크립트 딥다이브
    Time complexity and Space complexity
    Data Structure
    스코프
    자바스크립트
    Threads and Multithreading
    VoiceJournal
    DOM
    mobile app
    프론트엔드 성능 최적화 가이드
    Shared resources
    testing
    js pattern
    structure of os
    Network
    indie hacker
    leetcode
    모던 자바스크립트 Deep Dive
    TCP/IP
    커리어
    이벤트
    CPU scheduling algorithm
    database
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
JTB
48. 모듈
상단으로

티스토리툴바