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

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

자바스크립트 스펙의 빠른 발전에 비해서 브라우저의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.

 

마찬가지로 Tyepscript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트래스파일러가 필요하다. 물론 이것 역시 Node.js 환경이 뒷받침 되어야 우리가 말하는 프론트엔드 개발 환경을 만들 수 있다!

 

 

2. 빌드 자동화

과거처럼 코딩 결과물을 브라우저에 바로 올리는 경우는 거의 없다. 파일을 압축하고, 코드를 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친 후 배포한다. Node.js는 이러한 일련의 빌드 과정을 이해하는데 적지않은 역할을 하고 있다. 이 뿐만 아니라 라이브러리 의존성을 해결하고, 각종 테스트를 자동화하는데도 사용할 수 있다.

 

3. 개발 환경 커스터마이징

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

 

이렇기 때문에 Node.js는 프론트엔드 개발에서 필수 기술로 자리매김하고 있다. 

 

 

Node.js 설치

우선 Node.js를 설치해보자.  nodejs.org/ko/ 사이트에서 최신 버전을 설치할 수 있다.

사이트에 접속하면 이렇게 두 개의 버전이 있다.

• LTS버전은 안정적이고 장기간 지원을 해준다.
• 현재 버전은 조금은 불안정할 수 있지만 최신 기능을 지원해준다

 

설치를 마친 뒤 터미널에서 아래의 코드를 입력해보자

• 이것을 노드 REPL(read-eval-print loop)라고 부른다. 자바스크립트 코드를 입력하고 즉시 결과를 확인할 수 있는 프로그램이다.
• .exit 명령을 실행하거나 ctrl+c를 두번 입력하면 REPL프로그램에서 빠져나올 수 있다.

 

이번에는 --version을 입력해서 노드 버전을 확인해보자.

 

Node.js를 설치하면 npm이 같이 설치된다! 마찬가지로 npm의 버전도 --version을 통해 확인해보자.

 

 

 

 

프로젝트 초기화

 1. mkdir명령어를 통해 sample파일을 하나 만들어보자

 

2. cd명령어를 통해 그 파일로 들어가보자

 

3. npm init 명령어를 실행해보자.

npm init은 프로젝트를 하나 생성하고, 프로젝트의 메타정보를 입력할 수 있는 화면이 제공된다!

Enter를 입력해 디폴트로 입력된 값으로 설정할 수 있다.

 

 

이렇게 설정을 완료하고 sample폴더에 들어가보면

package.json파일이 만들어졌을것이다.

• name : 프로젝트 이름
• version : 프로젝트 버전 정보
• descripton : 프로젝트의 설명
• main : 노드 어플리케이션일 경우 진입점 경로(프론트엔드 프로젝트일 경우 사용 x)
• scripts : 프로젝트 명령어를 등록할 수 있다.
• author : 프로젝트 작성자
• license : 라이센스

 

프로젝트 명령어

생성한 프로젝트는 package.json에 등록한 scripts를 이용해 실행한다. 

에러 메세지를 출력하고 그 다음줄에 npm에러가 발생한다. 이것은 npm 스크립트에 등록된 쉘 스크립트 코드를 실행했기 때문이다.

 

 

npm에서 사용할 수 있는 명령어는 또 어떤것들이 있을까? 터미널에서 npm을 입력해서 알아보자.

 

뭐 엄청 여러개가 있다. 자주 사용하는 것들은 start, test, install, uninstall이다.

• start : 어플리케이션 실행
• test : 테스트
• install : 패키지 설치
• uninstall : 패키지 삭제

 

명령어를 추가 하는 것도 가능하다. 가령 빌드를 위한 build 스크립트는 package.json의 scripts부분에 build키를 추가하고 쉘 스크립트를 문자열로 등록하면 된다!

커스텀으로 등록한 명령어는  run을 추가해서 실행한다.

 

 

패키지 설치

 

1. CDN을 이용한 방법

외부 라이브러리를 가져다 쓰는 것은 무척 흔하다. 간단한 방법은 CDN(Contents Delivery Network)를 통해 라이브러리를 직접 가져오는 것이다. 예를 들어 Vue.js를 사용한다고 해보면 아래와 같이 사용할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

하지만 CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없다면? 

아무리 서버가 정상적이더라고 필수 라이브러리를 가져오지 못한다면 정상적으로 동작하지 못한다.

 

2. 직접 다운로드하는 방법

라이브러리 코드를 우리 프로젝트 폴더에 다운받아 놓는건 어떨까? CDN을 사용하지 않기 때문에 장애와 독립적으로 웹 어플리케이션을 제공할 수 있을 것같다.

하지만 이런 상황도 있다. 라이브러리는 계속해서 업데이트 될 것이고 우리 프로젝트에서도 최신 버전으로 교체해야 한다. 매번 직접 다운로드하는 것은 매우 귀찮은 일이 될 것이다. 버전에 따라 하위 호환성 여부까지 확인하려면 실수할 여지가 많다.(휴먼에러가 발생할 수 있다.)

라이브러리를 어느 한 곳에서 업데이트하고 하위 호환되는 안전한 버전만 다운받아 사용할 수 있다면 어떨까?

 

 

3. NPM을 이용하는 방법

NPM은 이러한 방식으로 패키지를 관리해준다.

npm install 명령어를 통해 외부 패키지를 프로젝트 폴더에 다운로드 해보자.

package.json을 확인해보면 아래의 내용이 추가된것을 확인해볼 수 있다.

 

유의적 버전

그런데 ^2.6.12 는 무슨 뜻일까 ??

일단 이 질문에 답하기 전에 버전 관리에 대해 생각해보자.

만약 프로젝트에서 사용하는 패키지의 버전을 엄격하게 제한한다면 어떻게 될까? 프로젝트를 버전업 하는데 좀 힘들것이다. 왜냐하면 사용하는 패키지를 전부 버전업해야하기 때문이다. 

 

그럼 프로젝트에서 사용하는 패키지 버전을 느슨하게 풀어 놓으면 문제가 해결될까???

오히려 여러 버전별로 코드를 관리해야하는 혼란스러움을 겪게될 수 있다.

 

버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 "유의적 버전"이라고 한다.

NPM은 이 유의적버전을 따른다!

 

유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해 버전을 관리한다.

위에서 설치한 vue의 버전은 ^2,6,12 인데 

주 버전이 2, 부 버전이 6, 수 버전이 12라는 셈이다.

 

각 버전을 변경하는 기준은 다음과 같다

• 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우
• 부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우
• 수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우

버전의 범위

npm이 버전을 관리하는 방식은 유의적 버전 명세 뿐만아니라 버전의 범위를 자신만의 규칙으로 관리한다.

가장 단순한 것이 특정 버전을 사용하는 경우이다.

1.2.3

특정 버전보다 높거나 낮을 경우에는 다음과 같이 명시한다.

>1.2.3
>=1.2.3
<1.2.3
<=1.2.3

 

마지막으로 틸트(~)와 캐럿(^)을 이용해 범위를 명시한다.

~1.2.3
^1.2.3

• 틸트(~)는 마이너 버전이 명시되어 있으면 패치버전만 변경한다
• 예를 들어 ~1.2.3 표기는 1.2.3 부터 1.3.0미만 까지를 포함한다. 
• 마이너 버전이 없으면 마이너 버전을 갱신한다.
• ~0 표기는 0.0.0 부터 1.0.0미만 까지를 포함한다.

 

• 캐럿(^)은 정식버전에서 마이너와 패치 버전을 변경한다.
• 예를 들어 ^1.2.3 표기는 1.2.3부터 2.0.0미만까지의 버전을 포함한다.
• 정식버전 미만인 0.x버전은 패치만 갱신한다
• 예를 들어 ^0표기는 0.0.0 부터 0.1.0미만 까지를 포함한다.

 

Node.js는 예전에는 틸트를 이용해 버전을 관리했지만 현재는 캐럿을 이용해 버전을 관리한다.

보통 라이브러리 정식 릴리즈 전에는 패키지 버전이 수시로 변경되는데 0.1에서 0.2로 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번한다. 때문에 하위 호완성을 지키지 못하는 0.2로도 업데이트가 되어버리는 문제가 발생할 수 있다.

 

반면 캐럿을 이용해 ^0.0으로 표기한다면 0.0.0부터 0.1.0미만 내에서만 버전을 사용하도록 제한시킨다.

따라서 하위 호완성을 유지할 수 있다.

 

NPM으로 패키지를 설치하면 package.json에 설치한 버전을 기록하는데 캐럿 방식을 이용한다. 초기에는 틸트를 사용하다가 캐럿을 도입해 기본 동작으로 사용했다. 그래서 방금 설치한 vue가 ^2,6,12 이런식으로 나온것이다.

^2.6.12 는 3.0.0 미만까지를 포함한다는 뜻이다.

 

참고

blog.outsider.ne.kr/1041

kr.vuejs.org/v2/guide/

jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html