모듈(Module)

• 특정 기능 단위로 구분된 개별 소스 코드 파일

• 전통 방식: 기능별 or 페이지별로 js 파일을 분리하고, html 파일에서 <script> 태그로 로드하는 것

  • 모든 파일이 같은 전역 스코프 사용
    • 스코프 오염. 의도와 다르게 다른 파일에 영향을 줌.
  • 의존성 문제 발생
    • 순서 보장 어려움

  → 모듈 단위 개발의 필요성

• 모듈 방식

  • 모듈(파일) 단위의 스코프
    • 명시적으로 export 한 경우에만 외주에서 접근 가능
  • 여러 모듈을 관리하기 위해 ‘번들러’ 등장

• 모듈 시스템

  • AMD(Asynchronous Module Definition)
    • define 함수를 사용하여 비동기 방식으로 모듈 API와 의존성 관계 정의
    • 문법 직관적이지 않음
    • 브라우저에서 바로 사용 가능
    • RequireJS 라이브러리에서 사용
  • CommonJS
    • require 함수로 의존성 모듈 로딩
    • module.exports 객체로 모듈 API 정의
    • 브라우저에서 바로 사용 불가능(번들러 필요)
    • NodeJS에서 사용
      • NodeJS 최신 버전에서는 ES6 Module 지원
  • UMD(Universal Module Definition)
    • 코드 패턴
    • AMD나 CommonJS를 지원하는지 확인하여 지원하는 모듈 방식을 사용
    • 번들러에 의해 생성되는 코드
  • ES6 Module(표준)
    • export 와 import 키워드로 모듈 정의
    • 최신 버전 브라우저에서 바로 사용 가능
      • 구버전에서는 트랜스파일러 및 번들러(Webpack, Rollup) 필요

PoiemaWeb

의존성 관리

번들러

• 의존성 있는 모듈을 하나(또는 여러 개)의 파일로 만들어주는 도구
  • 에셋 리소스(css, image, font 등)까지 관리 됨
• 브라우저에서 작동하도록 만들어 줌
• 번들러 종류: webpack, rollup, parcel 등
• entry file을 시작으로, 의존성에 맞게 모듈 키워드(import, export 등)나 함수를 사용해서 소스 코드를 작성

번들러

패키지

• 모듈과 라이브러리를 재사용하기 위해 묶어놓은 것

• package.json 파일: 프로젝트 정보와 패키지 의존성 명세를 작성. 의존성 관리에 용이.

• 패키지 매니저: 패키지를 설치하고 패키지의 버전, 의존성 등을 관리하기 위한 툴

  • 기능
    • 프로젝트의 메타데이터 관리
    • 의존성 설치, 업데이트, 추가, 제거
    • 스크립트 실행(yarn start 같은)
    • 패키지 배포, 보안 audit
  • 종류
    • NPM(Node Package Manager)
      • 2020년 이후 Github이 인수
    • Yarn
      • Facebook 개발
      • NPM의 일관성, 보안, 빌드 성능 개선
    • pnpm(performant npm)
      • 중첩된 폴더로 의존성 효율적으로 저장
      • npm의 drop-in replacement