본문 바로가기
프로그래밍/React

[React] node.js, npm, yarn의 이해

by 노잼인간이라불립니다 2023. 9. 20.

1. node.js

 일반적으로 Python 또는 JAVA 또는 C#으로 브라우저로 실행되는 웹앱을 만들려고 하면, 무조건 JavaScript을 알아야 한다. 왜냐하면! 브라우저에서 실행될 수 있는 것들은 HTML, CSS, JavaScript이기 때문이다. HTML이 form, CSS가 스타일, JavaScript가 동작을 담당한다. 

 

 웹개발자로써 Python 또는 JAVA, C#을 다뤄보지 않은 개발자들은 많지만, JavaScript를 다뤄보지 않은 개발자는 드물다. 그렇기 때문에 이 JavaScript라는 언어를 가지고, 브라우저 밖에서도 실행가능한 앱을 만들고 싶어하는 사람들이 생겼을 것이고, 이를 실현가능하게 해준 것이 node.js이다.

 

 쉽게 생각하면 JavaScript로 작성된 로직들을 실행해주는 도구라고 생각하면 좋을 듯 하다.

 

2. npm

 JAVA에는 Spring이라는 프레임워크가 존재한다. Spring에서는 남들이 만든 여러가지 기능들은 쉽게 DI받아서 사용할 수 있는데, 이들을 쉽게 검색하고, 다운받아 사용할 수 있도록 돕는 것이 maven 또는 gradle이다. 사이트로는 maven repository에서 필요한 기능을 검색해서 바로 DI 받아서 사용 가능하다.

 

 Python도 마찬가지이다. PYPI 사이트에서 필요한 기능들을 검색해서 필요한 패키지를 install 받아서 사용한다.

 

 위와 같이 JavaScript 진영에서도 npm이라는 것이 존재하는데, 남들이 만든 편리한 기능들을 다운받아서 바로 내 것으로 사용가능하다. 리액트의 기본 개념인 컴포넌트를 조합해서 사용하는 것과도 일맥상통한다고 볼 수 있을 것 같다.

 

 node.js를 설치하게 되면 자동으로 npm이 설치되고, npm install 기능명 을 명령어로 입력하여 쉽게 기능들은 다운로드 받아서 사용할 수 있다. 

 

 npm은 git을 쓰는 것과 비슷하다. git clone 또는 git pull을 통해서 남이 만들어 놓은 프로젝트를 가져다 이용할 수 있듯이 npm install을 통해서 남이 만든 기능을 가져다 사용 할 수 있다. 반대로 git push 와 같이 자신이 만든 기능을 npm에 올리는 것도 가능하다 npm publish 명령어를 통해서 자신이 만든 기능을 등록도 가능하다.

 

3. yarn

 사실은 npm 까지만 해도 굉장히 편리하다고 생각한다. 그러나 npm의 속도에 만족하지 않은 사람이 많았던 모양이다. 그래서 페이스북에서 npm보다 빠른 yarn을 개발한다. yarn도 npm에서 받을 수 있는 기능 중 하나이다. yarn도 npm과 같은 역할을 할 수 있다. 

 

  npm install yarn을 명령어로 입력하면 yarn이 설치되고, yarn add 기능명 을통해서 npm에 등록된 기능들을 다운로드 받아서 쉽게 사용 가능하다.