참고링크 | 프론트엔드 개발환경의 이해: NPM
개발환경
Node.js
자바스크립트 런타임 환경
런타임 환경이란 소프트웨어 애플리케이션을 구축하고 실행하기 위한 인프라
왜 Node.js를 쓰는가 ?
- (터미널) node -v로 Node.js version 확인
- node.js버전을 아래와 같이 업데이트 했다.
v16.15.0 -> v16.15.1
npm(node pkg manager)
자바스크립트 기반 프로젝트 빌드 도구
- npm init
- (개별설정 건너뛰기) npm init -y
👉🏻 package.json에 정보를 기록하고 프로젝트를 초기화
Webpack
여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러(module bundler)
- 웹팩 핸드북
- 모듈 번들러란 앱을 구성하는 자원(html, css, javascript, images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
Babel
비슷한 추상화를 가진 언어를 다른 실행환경에서도 돌아갈 수 있도록 형태만 변경해주는 트랜스파일러
- Babel
- 바벨을 사용하는 이유?
크로스 브라우징(각 브라우저의 렌더링 엔진의 차이로 각각 다르게 보이는 부분을 최적화를 통해 동일하게 보이게 해주는 것)을 위해 사용한다. 최신 브라우저에서 동작하는 기능을 이전 브라우저에서 구현하는 경우 코드의 일관성을 해칠 수 있기 때문에 이를 보완해주기 위해 사용하는 것!
💡 node.js이란?
Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
💡 프론트엔드 개발환경에서 node.js를 쓰는 이유?
최신 스펙으로 개발할 수 있고, 빌드 자동화, 개발 환경의 커스터마이징이 가능하다.
💡 npm이란?
node package manager로, node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아놓은 저장소 역할과 패키지 설치 및 관리를 위한 CLI(command line interface)를 제공한다.
Superduper-India