프론트엔드 개발환경의 이해 : NPM

inflearn 김정환님의 프론트엔드 개발환경의 이해와 실습을 보며 공부한 내용을 기록

node.js가 단순히 서버 사이드 언어라 백엔드 개발자가 아닌 나에게는 그다지 필요하지 않다고 생각했는데

공부를 하다보니 또 그렇지만은 않은 것 같다

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

• 최신 스펙으로 개발할 수 있다

자바스크립트 언어의 발전 속도는 빠르게 발전하고 있지만 브라우저의 발전 속도는 그에 비해 느리다

그런 자바스크립트의 최신 스펙인 ES6, 타입스크립트, sass등은 바로 브라우저에서 동작하지 않고 바벨같은 트랜스 파일러들의 도움을 받아서 작동한다

이러한 트랜스 파일러들은 모두 node위에서 움직인다

• 빌드 자동화

자바스크립트로 개발을 마쳤다면 개발 이후에 해야할 후속작업들이 있다

파일을 압축하고 코드를 난독화하고 브라우저에 따라 폴리필을 추가하는 등

라이브러리 의존성을 해결해주고 테스트를 자동화하는데도 도움을 준다

• 커스터마이징

개발 환경을 커스터마이징할 수 있게 해준다

리액트의 CRA나 뷰의 CLI을 이용하면 빠르게 개발을 시작할 수 있지만 실제로 개발을 시작할 때는 이러한 자동화 도구를 사용하기 힘든 경우가 많다

그럴 때 처음부터 개발 환경을 구축하는데 필수적으로 알아야할 것이 node이다

프로젝트 생성

터미널로 적당한 폴더를 만들고 npm init명령어를 치면 프로젝트 설정을 하게되고 설정을 마치면 프로젝트가 생성된다

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC"
}

그러면 이러한 package.json 파일이 생성되는데 프로젝트에 대한 정보를 담고 있다

패키지 설치

CDN을 이용한 설치

외부에서 라이브러리를 가져다가 쓰는 방법이다

CDN이란 Contents Delivery Network의 약자로 외부 서버에서 필요한 라이브러리를 받아와서 사용하는 방법인데

단점은 CDN 서버가 불안정하면 이 라이브러리를 받아오지 못하게 된다

직접 설치

외부에서 가져오는 게 불안하다면 내부에 코드를 받아놓으면 해결이 될 일이다

하지만 이러한 방법도 단점이 존재하는데 라이브러리가 업데이트 될 때마다 직접 새 버전을 받아주어야한다는 것

NPM을 이용한 관리

npm install을 이용해서 라이브러리를 설치해보자 npm install react

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "echo \"여기에 빌드를 추가합니다\" "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2"
  }
}

dependencies라는 부분이 추가 된 것과 동시에 설치된 react의 버전 정보를 나타내고 있다

버전 정보

  "dependencies": {
    "react": "^17.0.2"
  }

이런식으로 버전 정보를 나타내는 것을 유의적 버전(Semantic Versioning)이라고 부른다

버전을 주.부.수 로 나누며
(이는 Major.Minor.Patch 와 같다)

1. 기존 버전과 호환되지 않게 API가 바뀌면 주 버전을 올린다
2. 기존 버전과 호환되면서 기능을 추가하면 부 버전을 올린다
3. 기존 버전과 호환되면서 버그를 고치면 수 버전을 올린다

좀 더 자세한 설명은 이 곳에

버전 범위

자세히 보면 버전 앞에 ^가 붙은 것을 볼 수 있다

프로젝트에서 사용할 라이브러리의 버전 범위를 명시하는 것인데

"react" : "17.0.2" 이와 같이 버전만 명시해둔다면 NPM이 버전만을 다운로드하고 사용하게된다

"react" : ">17.0.2"는 17.0.2 보다 높은 버전만 다운로드하고 사용한다 이 대신 >=, <, <= 도 각 부등호에 맞는 의미를 가진다

이것 외에도 틸트(~)와 캐럿(^)도 있다

틸트(~)

틸트는 부 버전이 명시되어있다면 수 버전을 업데이트한다

"~1.2.3"는 1.3.0 이전 까지만 업데이트한다

부 버전이 없다면 부 버전을 업데이트한다

"~1"은 2.0.0 이전 까지만 업데이트한다

캐럿(^)

캐럿은 주 버전이 명시되어있으면 (1이상) 부 버전과 수 버전을 업데이트한다

"^1.2.3"는 2.0.0 이전 까지만 업데이트한다

주 버전이 명시되어있지 않다면 (1미만이라면) 수 버전만 업데이트한다

"~0.2"는 0.3.0 이전 까지만 업데이트한다