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확장자를 통해 파일을 만들면Node가ESM으로 인식해 사용 가능- 프로젝트 전체 설정
package.json에 모듈 방식을 지정"type" : "module"
- 추가
CJS는 동기적으로 로드 /ESM은 비동기적으로 로드
ESM에서는 병렬적으로 스크립트를 가져오지만, 실행은 로더 스펙에 의해 순서대로 실행ESM에서 파일을 읽고 쓸 때에는createRequire()로require를 직접 만들어 사용할 수 있음ESM은 많은 것을 바꾸기 때문에 기본값은CJS
ESM은 기본적으로strict modethis는 전역객체를 의미하지 않음scope가CJS와 다르다
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.json의dependencies의 한도 내에만update가 수행- 즉, 의존성을 해치고 최신 버전으로 업데이트를 수행
package.json뿐만 아니라직접 install 과정도 수행
Developer & PhotoGrapher