<React 파헤치기-01> npm이랑 webpack은 무엇일까?

1. npm이란 무엇일까?

 

npm. react를 사용하면서 라이브러리를 설치하거나, 코드 작성 후 로컬에서 결과 확인을 위해 'npm run start'를 입력하며 이미 수백번  마주했던 단어이다. 이 npm은 어떤 역할을 수행하고 있었을까?

 

npm : Node Package Manager 

npm의 동작 방식

npm은 http://www.npmjs.com에서  필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램이다.  npm은 실제로 node_modules 폴더에 라이브러리를 내려받아 저장하고 package.json 파일에 설치된 라이브러리의 정보를 저장한다.

 

라이브러리와 라이브러리의 명세 파일을 따로 관리하는 이유는 무엇일까?

node_modules에 저장되는 라이브러리의 용량은 매우 크다. 개발자 A가 개발자 B에게 프로젝트를 공유할 때, 용량이 큰 라이브러리까지 전달할 필요없이 라이브러리 명세인 package.json을 전달함으로써 개발자 B는 필요한 라이브러리를 손쉽게 설치할 수 있다.

 

추가로 yarn은 페이스북에서 npm의 단점을 ㅂ완하여 성능과 속도를 개선한 라이브러리 관리 도구로, npm과 비슷한 방식으로 동작한다. 

 

2. webpack이란 무엇일까?

 

webpack은 프로젝트에 사용된 파일을 분석해 기존 웹 문서 파일로 변환해주는 도구이다.

 

webpack이 필요한 이유

프레임 워크가 .html, .js, .css 등과 같은 기존 웹 문서 파일을 사용하지 않기 때문이다. 예로 트위터의 부트스트랩 템플릿은 .css가 아닌 .sass파일을 통해 스타일을 작성한다. 웹 브라우저는 기존 웹 문서가 아닌 .sass 파일을 해석하지 못하기 때문에 중간에서 해석해 줄 역할이 필요하다. 이 역할을 하는 도구가 바로 webpack이다.

 

webpack은 js, png, jpg등의 파일을 적절한 크기로 자르거나 묶어주는 역할도 수행한다. 이러한 작업을 통해 불필요한 파일을 제외하거나 압축하여 프로젝트의 용량을 줄여준다.