[ Node.js, npm, yarn ]

carrotsman·2022년 4월 13일

프론트엔드

목록 보기

9/34

Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다.

공식 문서에서 말하는 Node.js다. 늘 그렇듯 간지나는 말로 도배되있을 뿐, 찰떡같이 이해되지 않는다. 손 많이 가는 녀석들..
나름대로 요약해보면 Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 javascript를 활용하여 구축하며, Non-blocking I/O와 단일 스레드, 이벤트 루프를 통한 높은 처리 성능을 가지고 있는 것이 특징이다. 쉽게 말해 백엔드 소스를 포함하고 있는 일반 어플리케이션보다 경량화되어있고, JAVA가 JVM을 활용하여 운영체제의 영향없이 런타임을 구성하듯 V8 엔진 베이스 javascript 런타임 환경을 구성해 어플리케이션을 구동 가능하게끔 해주는 놈이라 보면 된다.

Node.js 특징

앞서 설명한 바와 같이 javascript 런타임이다. 그럼 뭘 추론해볼 수 있는가. 이전 글에서 javascript 구동 원리에 대해 다룬바 있다. 안봤다면 읽어보는 것을 추천한다. 좋아요도 좀 눌러주고.. Javascript-ES

암튼 Node.js는 javascript의 런타임이기 떄문에 이벤트 루프라던지 스택에 쌓이는 프로세스, callback 큐 등 기본적으로 javascript의 특성을 지닌다. Node.js의 특징을 설명할때 사용되는 키워드는 총 4가지 정도로 요약해볼 수 있겠다.

1. 독립된 javascript runtime 환경

저번 글에서 얘기했듯이 javascript는 스크립트 언어로 웹 브라우저 스크립트 엔진에서 구동된다. 기존엔 javascript를 동작시키려면 웹 브라우저가 필요했다. Node.js는 이 스크립트 엔진과 환경을 독립시킴으로써 각 OS CLI를 통해 웹 브라우저없이 바로 구동시킬 수 있다. 또한 Node.js를 사용하면 프론트엔드와 백엔드 서버 프로그래밍 둘다 구현이 가능하기 떄문에 한가지 스크립트 언어로 웹 앱을 구현할 수 있다는 것이 강점이다.

2. Node 모듈 시스템

기존에 프론트엔드에서 javascript 모듈을 참조하기 위해선 script 태그를 통해 CDN으로 전송받아 사용했다. 특정 모듈만 사용하고 싶은 경우도 파일내에 들어있는 모든 콘텐츠를 다 참조해야하는 불합리함이 있었다. Node에서는 필요한 모듈을 npm이나 yarn으로 설치하고 설치된 모듈 내 특정 콘텐츠만 필요한 곳에 꺼내어 쓸 수있다.

3. Event-driven, Non-Blocking I/O 모델

Node는 스크립트 엔진(V8)과 더불어 libuv라는 라이브러리를 사용한다. libuv를 통해 이벤트 기반 논 블로킹 I/O 모델을 구현하고 있다.

Event-driven

이벤트 기반(Event-driven)이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다.
즉, 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두고, 이를 이벤트 리스너에 콜백함수를 등록한다. 이후 이벤트가 발생하면 리스너에 등록해둔 콜백함수를 호출하며, 이벤트가 끝난 후 Node는 다음 이벤트가 발생할 때까지 대기한다.
Event loop

이벤트 루프(event loop)는 여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백함수를 호출 할지를 이벤트 루프가 판단한다. Node는 이벤트가 종료될 때까지 이벤트 처리를 위한 작업을 반복하므로 루프(loop)라고 부른다.
Non-Blocking I/O

이전 작업이 완료될 때까지 대기하지 않고 다음 작업을 수행하는 것을 Non-Blocking이라 한다. Node로 설명하자면 함수를 호출할때 당장 실행하는 것이 아니라 테스크 큐에 쌓아 놓고 동시에 요청을 처리하고 완료된 순서대로 처리한다는 말이다. 한마디로 빨리 끝내는 놈이 빨리 처리된다 이말이다.

4. 싱글 쓰레드

이전 글에서 설명했듯이 javascript 엔진은 싱글 쓰레드로 동작한다.

PM2는 멀티 스레딩?

가끔 PM2를 얘기하며 멀티 코어로 운영하는 것과 헷갈려하는 사람들이 있는데 멀티 프로세스와 멀티 쓰레딩은 다른 개념이다. PM2는 Node.js 멀티 프로세스 관리자기 때문에 멀티 쓰레드 구조는 아니다.

프로세스 : 운영체제에서 할당하는 작업의 단위
스레드 : 프로세스 내 실행되는 흐름의 단위

멀티 프로세스는 별도의 PID를 지닌 여러 개의 프로세스를 가지는 구조기 떄문에 멀티 스레딩이라 할 수 없다. 그리고 같은 프로세스 내에서 스레드는 메모리 공유가 가능하지만 각 다른 프로세스에 있는 스레드끼리는 메모리 공유가 불가능하다.

npm

npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.

npm은 Node Packaged Manager의 약자로 말그대로 Node 환경에서 사용되는 패키지를 매니지먼트하는 도구다. 패키지는 모듈이라고도 불리는데 Node 환경에 모듈을 추가해 구성할 수 있게 해준다. 프로젝트를 구성하는데 있어 필요한 모듈이 있으면 이 npm을 통해 설치, 제거할 수 있다. 쉽게 말해 기존 CDN(Content Delivery Network)을 통해 라이브러리를 참조했다면 npm을 통해 Node.js 기반 웹 앱에 라이브러리를 추가하고 참조한다고 보면 된다. 별도로 설치할 필요는 없고 Node.js를 설치하면 자동으로 같이 설치된다.

npm과 npx

npx는 npm과 다른 패키지 모듈이 아니라 npm 5.2.0 부터 포함된 패키지 실행 도구로
npm을 좀더 편하게 사용하기 위해 사용된다. 일단 무슨 약어인지에 대해 접근할 필요가있다. npm은 node package manager 라는 패키지 설치모듈이고 npx는 node package eXecute, 즉 패키지 실행 도구란 뜻이다. 이게 뭔 개소린가 싶을 것이다. 요약하자면 npm은 패키지를 설치하기 위함이고 npx는 패키지 정보만 참조하여 최신 버전으로 실행시키는 도구라고 생각하면 된다.

npx를 사용하는 이유

패키지 설치 모듈로 설치할때 2가지 형태가 존재하는데 다음과 같다.

전역으로 패키지를 설치해 어디에서든 참조 가능하게 구성하는 방법
특정 프로젝트에 귀속되게 설치하여 사용하는 방법

1번일때 문제가 발생할 수 있는데 우리가 react 앱을 구성하는데 기존의 전역으로 create-react-app 모듈이 설치되어 있는 상태라고 가정해보자. 그럼 그냥 create-react-app myApp 명령어를 사용해 리액트 앱을 구성하면 전역으로 설치된 버전의 create-react-app 모듈로 구성하게 된다. 만약 '난 최신 버전의 react 앱을 구성하고 싶다.' 하면 어떻게 해야될까? 전역으로 설치된 패키지를 uninstall 하고 재 설치할건가? 이럴때 npx를 사용하면 된다. npx를 이용하면 npm 레지스트리에서 create-react-app을 찾아 다운로드 없이 현재 가장 최신 버전의 파일을 참조하여 실행시킨다. 이처럼 버전이 자주 바뀌거나 최신 버전을 사용하여 작업할때 유용하게 사용할 수 있는 도구다.

yarn

yarn은 Facebook이 2016년에 개발한 npm의 대안으로 속도, 일관성, 안정성 및 보안이 개선된 소프트웨어 패키징 시스템이다.

어렵게 생각할거 없이 기존의 npm을 개선하여 나온 패키지 매니저라고 생각하면 된다. CLI 명령어만 다르지 똑같은 녀석이다. 근데 개선 내용도 과거 얘기기 때문에 지금와서는 크게 차이가 있을라나 싶다.

npm과 yarn 차이

결론부터 말하자면 그냥 똑같은 놈이다. 사용 목적이 같은 녀석들이란 얘기다. 웹 모듈 내부 패키지에 대한 설치, 제거, 버전관리 등 말그대로 패키지를 매니지먼트하는 녀석들이다.
그나마 차이를 나열해보자면 npm의 경우 Node.js를 설치하면 자동으로 같이 설치되는 반면, yarn 은 별도로 설치해줘야하는 번거로운 녀석이다. brew나 npm으로 설치할 수 있다. 또한 npm으로 초기화했을 때 패키지 잠금 파일과 yarn으로 초기화했을 때 패키지 잠금 파일이 다르다. npm의 경우 package-lock.json 파일이 생기고 yarn은 yarn.lock 파일이 생긴다. 차이를 얘기하기 이전에 yarn이 속도, 패키지 설치 프로세스, 보안성 등 개선하여 나온 도구기 때문에 내부 구조상 차이가 존재할 수 밖에 없다. 그리고 성가시게 명령어가 다르다. 명령어 포멧은 거의 동일하니 익숙해지면 그 놈이 그 놈이긴 하다. 그니깐 그냥 차이없다고...

npm/yarn 명령어 구분

명령어	npm	yarn
Install dependencies	npm install	yarn install
Install package	npm install [package]	yarn add [package]
Install dev package	npm install --save-dev [package]	yarn add --dev [package]
Uninstall package	npm uninstall [package]	yarn remove [package]
Uninstall dev package	npm uninstall --save-dev [package]	yarn remove [package]
Update	npm update	yarn upgrade
Update package	npm update [package]	yarn upgrade [package]
Global install package	npm install --global [package]	yarn global add [package]
Global uninstall package	npm uninstall --global [package]	yarn global remove [package]

npm대비 yarn 개선 사항

먼저 속도적인 측면에서 접근해보면 패키지 설치 프로세스에 차이가 있다. npm의 경우 한번에 하나씩 순차적으로 설치하는 프로세스인 반면 yarn의 경우 여러 패키지를 병렬로 처리해 설치하게 되어있다. 그래서 yarn이 설치속도가 빠르다고 주장한다. (지금와서는 그닥..) 또 보안적인 측면 개선 사항이 강조되는데 이는 의존 관계 패키지 설치 여부이다. npm은 의존 관계를 가지는 다른 패키지들도 같이 포함하여 설치한다. 반면 yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 한다. 명시된 패키지 외 다른 패키지를 확인없이 설치하는 것이 보안적인 측면에서 취약점을 야기할 수 있다고 한다. 보안성을 따질 때는 yarn이 더 좋다고 말할 수 있겠다.

그럼 yarn을 쓰는게 맞는거 아녀?

yarn도 npm 대비 단점이 존재한다. yarn 베이스로 구성된 앱의 경우 npm으로 구성된 앱 대비 디스크 용량 사용이 많다고 한다. 또 속도적인 측면에서 yarn이 더 강력하다 어필하는데 초기 설치 속도에 대한 테스트는 2017년 즈음 이루어진 자료라고 한다. npm도 이후 많은 개선이 이루어져 현재는 속도에 있어 거의 차이가 없다고 한다. 개인적으로 따로 설치할 필요도 없 Node.js와 같이 설치되는 npm이 더 근본에 가깝다 생각한다. 난 이거 쓴당.