[인프런] 프론트엔드 개발환경의 이해와 실습 (NPM)

프론트엔드 개발에 있어 Node.js가 필요한 이유와 NPM(Node Package Manager)에 대해 알아보자.

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

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

자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 느리다. 편리한 스펙이 나와도 이것을 구현해 주는 Babel 같은 도구의 도움이 필수적이다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.

Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요한데, 이를 Node.js 환경에서 제공한다.

 

빌드 자동화

예전처럼 코딩 결과물을 브라우저에 바로 올리는 경우는 거의 없다. 파일을 압축하고, 코드를 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친 후 배포한다. Node.js는 이러한 일련의 빌드 과정을 이해하는데 도움을 준다. 뿐만 아니라 라이브러리 설치 후 관리도 가능하고, 각종 테스트를 자동화하는데도 사용된다.

 

개발 환경 커스터마이징

각 프레임워크에서 제공하는 도구를 사용하면 손쉽게 개발환경을 갖출수 있다. React.js의 CRA(create-react-app), Vuejs 의 vue-cli를 사용한다면 말이다. 그러나 개발 프로젝트는 각자의 형편이라는 것이 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징 하려면 Node.js 지식이 필요하다. 어쩌면 자동화된 도구를 사용할 수 없는 환경이라면 직접 환경을 구축해야 할 상황에 놓일 수도 있다.

이렇게 Node.js는 프론트엔드 개발에서 필수 기술로 자리 잡고 있다.

 

프로젝트 생성

npm init으로 프로젝트 생성한다. → package.json 파일 생성된다.

package.json 파일에는 프로젝트의 모든 메타 정보가 담겨져 있다.

• name: 프로젝트 이름
• version: 프로젝트 버전 정보
• description: 프로젝트 설명
• main: 노드 애플리케이션일 경우 진입점 경로, 프론트엔드 프로젝트일 경우 사용하지 않음
• scripts: 프로젝트 명령어를 등록할 수 있음, 초기화 시 "test" 명령어가 샘플로 등록되어 있음
• author: 프로그램 작성자
• license: 라이센스

터미널에 npm을 치면 npm 다음에 올 수 있는 command가 나온다. 보통 자주 사용하는 것은 start(애플리케이션 실행), test(테스트), install(패키지 설치), uninstall(패키지 삭제)이다.

npm command

package.json 파일 안에 scripts 내용은 npm으로 실행시킬 수 있다. 단, 위의 command가 아닌 새로 작성한 경우에는 npm run ~ 이렇게 해주어야 한다. ex) 기존 command "test": npm test vs 새로 만든 command "build": npm run build

프론트엔드 개발 환경 구축을 위해 추가할 scripts는 build(소스 코드 빌드), lint(소스 컨벤션 검사) 정도이다.

 

외부 패키지를 관리하는 방법

1. CDN 이용
   • CDN(컨텐츠 전송 네트워크)으로 제공하는 외부 라이브러리를 직접 가져오는 방식이다.

     <script src="https://unpkg.com/react.dev.js"></script>​

   • 이처럼 가장 간단하지만, 만약 CDN 서버 장애가 생겨 라이브러리를 사용하지 못하면 웹 애플리케이션은 정상 동작하지 않을 것이다.
2. 직접 다운로드
   • 라이브러리 코드를 직접 다운 받아 프로젝트 폴더에 담아두면 CDN을 사용하지 않기 때문에 장애로 부터 자유롭다. 그러나, 라이브러리는 계속 업데이트 될 것이고 프로젝트에서도 최신 버전으로 교체해주어야 하기 때문에 매번 다운로드하는 것은 번거로울 것이다.
3. NPM 이용
   • NPM은 npm install 패키지명 명령어를 통해 외부 패키지를 프로젝트 폴더에 다운로드할 수 있다. 최신 버전의 패키지를 NPM 저장소에서 찾아 다운하고, 다음과 같이 package.json에 설치한 패키지 정보를 기록한다.

다음은 npm install react를 했을 때, package.json에 자동으로 추가된 내용이다.

{
	"dependencies": {
		"react": "^16.12.0"
	}
}

여기서 ^16.12.0 는 무슨 표기일까? NPM은 버전 번호를 관리하기 위해 유의적 버전이라는 체계를 따른다. react의 버전이 16.12.0인데 주 버전이 16, 부 버전이 12, 수 버전이 0이라는 뜻이다.

 

각 버전을 변경하는 기준이 있다.

• 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우
• 부 버전(Minor Version): 기존 버전과 호환되면서 기능이 추가된 경우
• 수 버전(Patchv Version): 기존 버전과 호환되면서 버그를 수정한 경우캐럿을 사용하면 하위 호환성을 유지하기 용이하여 자주 사용된다.

그리고 ^(캐럿)의 의미는 정식버전에서 마이너와 패치 버전을 변경한다는 의미이다. 예를 들어, ^1.2.3은 1.2.3 부터 2.0.0 미만, 그러니까 1.9.9 까지를 포함하는 것이다. 정식버전 미만인 0.x 버전은 패치만 갱신한다. ^0은 0.0.0 부터 0.1.0 미만, 그러니까 0.0.9 까지를 포함한다. ^(캐럿)을 사용하면 하위 호환성을 유지하기 용이하여 자주 사용된다.

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습