NPM + NPM Scripts(2021-02-14)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

NPM(Node PackageManager)은 개발자들이 작성한 자바스크립트 코드를 공유하기 위해 만들어짐. 

Yarn도 NPM과 비슷한 기능을 수행하는 것이며 본강의에서는 잘 다루지 않을 예정이지만 NPM과 거의 동일하기 떄문에 많은 걱정을 하지 않아도 된다. 

NPM에서 다운받은 파일(모듈, 패키지)은 자바스크립트 파일 + package.json (해당 패키지를 설명하는 메타파일)으로 구성되어있다. 

다른사람이 작성한 코드를 가져다 쓸 수 있기 떄문에 매우 편하지만 모든 패키지가 좋은 코드가 아니기때문에 주의가 필요하다. 

NPM에는 대채로 이하의 3가지 형태의 패키지가 존재한다.

- 프론트엔드 영역의 코드
- 터미널에서 쓸수 있는 커맨드파일
- Node.js 파일

Node.js를 다운받으면 NPM이 포함되어있다. (Node는 일단 브라우저 바깥환경에서 자바스크립트를 돌릴수 있게 해주는 것이라고 생각할것 차후 강의에서 더 자세하게 다룰 예정임)

nodejs.org/en/

Node.js

터미널에서 npm init 명령어를사용하면 현재 디렉토리에 package.json 파일이 만들어진다. 

package.json 파일은 해당 프로그램을 구동하는데 필요한 dependency를 나열해준다. 

npm에서 패키지를 다운받는 법은 2가지이다.

- local -> 현재 디렉토리에서만 패키지 사용가능 
- global -> 컴퓨터 어디서든지 패키지 사용가능(터미널 어느 경로에서든지 사용가능) -g 명령어와 함께 다운받게됨. 

본강의 에서 설치한 패키지는 live-server와 lodash이다. 

live-server 는 가짜서버를 만들고 파일의 변화를 자동으로 감지해서 자동으로 업데이트해준다. 
live-server를 실행하면 http://127.0.0.1:8080/ 으로 주소가 뜨는데 디폴트주소로 로컬호스트(local host) 라고한다. (차후강의에서 더 자세히 다룰 예정)

lodash는 자바스크립트의 익스텐션으로 생각할 수 있다.
수많은 메소드를 가지고 있음. 

이런 패키지들을 프로그램에 추가시킬때 주희해야할점은 프로젝트크기가 커진다는 점과 이제는 depedency가 생겨서 해당 패키지가 있어야만 돌아갈 수 있다는 것이다. 

dependency에는 또한 dev dependency가 있는데 개발자만이 사용하고 실제 프로덕트를 출시할때는 제외되어 프로덕트의 용량을 줄어들게 할 수 있는 dependency이다. 

package.json 파일에 남겨둔 script는 npm run 명령어를 활용해 실행할 수 있다. 

build 명령어를 실행하는 모습

프로젝트 dependency의 버전 업데이트는 이하의 링크를 통해서 어느 버전을 다운받아야는지 확인 해볼 수 있다.

semver.npmjs.com/

npm semantic version calculator