Webpack - 개념 / 특징 / 배경 & 외부 패키지 관리 (표기법, ncu)

김정욱·2022년 4월 1일
2

Webpack

목록 보기
1/5
post-thumbnail

Webpack

[ 개념 / 특징 ]

[ 개념 ]

  • JS 애플리케이션을 위한 정적 모듈 번들러(module bundler)

[ 특징 ]

  • 다수의 파일을 각 확장자 별로 하나의 파일로 번들링 하는 과정을 수행
  • 웹팩에서 모듈은 js 뿐만 아니라 html, css, image와 같은 file 들도 포함
  • JS코드 난독화 / 주석 제거 / Babel을 통한 트랜스 파일링 등을 수행 가능
  • ref : https://webpack.kr/concepts/

[ 웹팩이 등장한 이유 ]

1) 파일 단위의 JS 모듈 관리의 필요성

  • 기존에 브라우저에서는 각 파일로 존재하는 JS파일을 가져오기 위해 여러번의 네트워크 통신이 필요했다
  • 하나의 html에 포함된 JS 변수의 scope가 명확하지 않아 전역 scope를 더럽히게 된다
    => CJS / AMD / UMD 등의 모듈 방식을 사용하다 ES2015 표준 모듈 시스템인 ESM(ECMAScript Modules) 등장
    => ESM 방식은 모든 브라우저에서 지원하지는 않아서 Webpack의 도움이 여전히 필요
    => IIFE 패턴을 통해 전역 scope 깨끗하게 유지

2) 웹 개발 작업 자동화 도구 (Web Task Manager)

  • 코드 수정 뒤 새로고침 후에야 반영된 내용 확인 가능
  • 웹 서비스 배포시 html, css, js 파일을 압축하여 변환해주는 작업이 필요했다
    => 이것을 해주는 자동화 도구 등장 (Grunt / Gulp)

3) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

  • 페이지 로딩 속도가 느림
    => 필요한 자원을 나중에 로딩하는 Lazy Loading 등장
    => 하나의 파일로 번들링 하여 네트워크 요청 횟수를 줄이고, 난독화minimizer를 통해 용량을 줄임

[ JS의 다양한 모듈 방식 ]

[ ES2015 표준 모듈 시스템 등장 전 ]

: 각 커뮤니티에서 각자의 스펙으로 등장한 다양한 모듈 형태가 유지되던 환경

  • CommonJS
    • require() / exports() 를 사용
    • JS를 사용하는 모든환경에서 모듈을 사용하는 것이 목표
    • 대표적으로 Server Side 플랫픔인 Nodejs에서 사용
  • AMD(Asynchronous Module Definition)
    • 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표
    • 주로 브라우저 환경
  • UMD(Universal Module Definition)
    • AMD 기반으로 CommonJS 방식도 지원하는 통합 형태

[ ES2015에서 표준 모듈 시스템 등장 후 ]

  • 표준 모듈 시스템인 ESM(ECMAScript Modules) 등장
  • 모든 브라우저에서 ESM을 지원하지는 않아서 바벨, 웹팩의 도움이 필요
  • 사용 방법
    • import() / export() 로 모듈을 가져오고 내보낼 수 있다
    • 사용 가능한 브라우저에서는 type="module" 을 지정해서 읽을 수 있다
      ( <script type="module" src="src/app.js"></script> )
    • 파일 단위 설정
      • .mjs 확장자를 통해 파일을 만들면 NodeESM으로 인식해 사용 가능
    • 프로젝트 전체 설정
      • package.json에 모듈 방식을 지정 "type" : "module"
  • 추가
    • CJS는 동기적으로 로드 / ESM은 비동기적으로 로드
      • ESM에서는 병렬적으로 스크립트를 가져오지만, 실행은 로더 스펙에 의해 순서대로 실행
      • ESM에서 파일을 읽고 쓸 때에는 createRequire()require를 직접 만들어 사용할 수 있음
    • ESM은 많은 것을 바꾸기 때문에 기본값은 CJS
      • ESM은 기본적으로 strict mode
      • this는 전역객체를 의미하지 않음
      • scopeCJS와 다르다

Node.js

[ 개념 ]

  • ref : https://nodejs.org/ko/
  • Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임
    • 런타임(runtime) : 프로그래밍 언어가 구동되는 환경

[ 정보 ]

  • 최초 JS는 브라우저 위에서만 구동될 수 있었으나, Node.js의 등장으로 별도의 구동 환경을 구성할 수 있게 되었다
  • 싱글 스레드(single thread)를 가진 이벤트 루프 기반비동기 논 블록킹 I/O 모델의 서버를 구축 가능
    • express / nestJS 등의 프레임 워크를 통한 개발 (비교)
  • Node.js를 서버개발에만 사용되는 것으로 착각하지 말자
    • Node.js는 확장성 있는 네트워크 애플리케이션(서버 애플리케이션)을 만들 수 있도록 설계된 것은 사실이다 (공식문서)
    • 하지만, 프론트 영역에서 npm / Webpack / Babel 등을 구동하기 위해 사용되는 JS 런타임이기도 하다
    • 즉, JS를 구동 할 수 있는 런타임 으로 다양하게 사용될 수 있으며, 네트워크 애플리케이션을 개발할 수 있도록 설계된 것이 핵심

[ 프론트엔드 개발에 Node.js가 필요한 이유 ]

  • 최신 스펙으로 개발할 수 있다
    • 바벨 같은 도구를 사용하는 환경
    • TS / SASS 같은 고수준 프로그래밍 언어의 전용 트랜스 파일러 사용
  • 빌드 자동화
    • 파일 압축 / 코드 난독화 / 폴리필 추가 등의 개발 이외 작업도 필요
    • 일련의 빌드 과정에 중심이 바로 Node.js
  • 개발 환경 커스터마이징
    • 직접 개발하는 환경을 커스텀해서 자유롭게 설정 가능
    • 프레임워크의 자동화 도구들에 의존하지 않게 됨 (ex) React의 CRA)

npm / 외부 패키지 관리

[ npm ]

  • Node Packaged Manager : Node.js 생태계에서 사용되는 패키지 매니저
  • 공용 npm 레지스트리에서 다양한 패키지를 업로드 / 다운로드 가능
  • package.json 파일을 통해 프로젝트의 정보과 패키지들의 의존성을 관리

[ 외부 패키지 설치 ]

1) CDN을 이용한 설치

  • 간단하게 외부 CDN(컨텐츠 전송 네트워크)으로 라이브러리를 가져올 수 있음
  • CDN 서버가 장애가 나면 사용하는 코드에 영향을 받을 수 있음
    --> 위험성 존재
    ---> npm 패키지로 제공한다면 굳이 CDN은 사용하지 않는 것이 좋다

2) npm을 통한 패키지 설치

  • $ npm install 을 통해서 패키지를 설치
  • CDN과 다르게 직접 프로젝트에 포함시키기 때문에 안전하다

[ 외부 패키지 버전 표기 ]

[ 유의적 버전(Semantic version) ]

  • 설명 : 버전 번호를 관리하기 위한 규칙 / npm은 이것을 따른다
  • 구분
    • 주 버전(Major Version) : 기존 버전과 호환되지 않게 변경한 경우
    • 부 버전(Minor Version) : 기존 버전과 호환되면서, 기능이 추가된 경우
    • 수 버전(Patch Version) : 기존 버전과 호환되면서 버그를 수정한 경우
  • 버전의 범위 표기
    • >1.2.3 : 1.2.3 버전보다 높은 것
    • >=1.2.3 : 1.2.3 버전보다 높거나 같은 것
    • <1.2.3 : 1.2.3 버전보다 낮은 것
    • <=1.2.3 : 1.2.3 버전보다 낮거나 같은 것
    • ~1.2.3 (틸트)
      • 마이너(Minor) 버전이 명시되어 있으면, 패치(Patch)버전을 변경
        ex) ~1.2.3 : 1.2.3 부터 1.3.0 미만
      • 마이너 버전이 없으면, 마이너 버전을 갱신
        ex) ~0 : 0.0.0 부터 1.0.0 미만
      • 틸트는 옛날에 표기했던 방식이고 요즘에는 캐럿을 사용
        • 보통 라이브러리 정신 버전 출시 전에는 마이너(Minor)가 올라가도 호환되지 않는 일이 많다
        • 그래서 틸트(~)로 표기하면 마이너(Minor)가 올라가서 호환 문제가 생기지만, 캐럿(^)은 정식 버전 출시 전에는 패치(Patch)만 올라가서 안전하기 때문
    • ^1.2.3 (캐럿)
      • 정식버전인 경우
        • 마이너(Minor) / 패치(Patch) 버전만 갱신
          ex) ^1.2.3 : 1.2.3 부터 2.0.0 까지
      • 정식버전이 아닌 경우
        • 패치(Patch)버전을 변경
          ex) ^0 : 0.0.0 부터 0.1.0 미만
    • npm package version 계산 사이트 : https://semver.npmjs.com/

[ ncu : npm-check-updates ]

  • 개념 / 특징
    • ncu는 외부 패키지들간의 의존성을 해치지 않고 최신 버전으로 업데이트 할 수 있도록 도와주는 패키지
    • 최신 stable 버전을 패키지 간 의존성을 해치지 않고 유지하는 것이 핵심
    • 오직 package.json만 수정 => 직접 npm i를 통한 설치 필요
  • ref : https://www.npmjs.com/package/npm-check-updates
  • npm update 명령어
    • package.jsondependencies의 한도 내에만 update가 수행
    • 즉, 의존성을 해치고 최신 버전으로 업데이트를 수행
    • package.json 뿐만 아니라 직접 install 과정도 수행
profile
Developer & PhotoGrapher

0개의 댓글