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

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

목표? 배울 내용?

프론트엔드 개발에 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(소스 컨벤션 검사) 정도이다.

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

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

이처럼 가장 간단하지만, 만약 CDN 서버 장애가 생겨 라이브러리를 사용하지 못하면 웹 애플리케이션은 정상 동작하지 않을 것이다. 직접 다운로드 라이브러리 코드를 직접 다운 받아 프로젝트 폴더에 담아두면 CDN을 사용하지 않기 때문에 장애로 부터 자유롭다. 그러나, 라이브러리는 계속 업데이트 될 것이고 프로젝트에서도 최신 버전으로 교체해주어야 하기 때문에 매번 다운로드하는 것은 번거로울 것이다. 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 까지를 포함한다. ^(캐럿)을 사용하면 하위 호환성을 유지하기 용이하여 자주 사용된다.

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

from http://dass-develop.tistory.com/38 by ccl(A) rewrite - 2021-10-01 09:01:14