node.js와 npm에 대해서
node와 npm..
사용하긴 하는데 뭔지 정확히는 알지못하고 사용하는 것 중 하나이기에 자세히 파헤쳐 보고자 한다.
Node.js
자바스크립트는 웹브라우저에서 사용하는 언어이다. 이 자바스크립트를 브라우저가 아닌 다른 환경에서 사용하기위한 런타임 환경이다. 그런데 런타임 환경이 뭐지? 이건 엔진과 다른걸까?
- 런타임 환경이란? 코드가 실행될 때 필요한 것들 예를 들어 엔진, api, 메모리 관리 등을 제공하는 환경이다. 엔진은 런타임 환경에 속하는 것 중 하나로 자바스크립트 코드를 읽고 기계어로 바꿔서 실행하는 일을 한다(브라우저와 노드는 둘다 Chrome의 V8 엔진을 사용). 네트워크 통신(네트워크 모듈)이나 DOM 조작(렌더링/DOM api), setTimeout(web api) 등은 런타임 환경에서 하는 것이지, 엔진의 역할이 아니다.
그럼 우리가 리액트를 사용할 때 node가 왜 필요할까? 리액트는 브라우저에서 실행되는 것 아닌가?
아니다!
우리가 리액트가 브라우저로 실행된다고 생각하는 이유는 리액트에서 개발한 파일을 js로 변환해서 이 js가 브라우저에서 실행되는 것이지 그 전까지의 과정에 필요한 도구들은 node에서 실행된다. 리액트를 만들고 실행할 때 create-react-app, vite, webpack 등의 툴은 node 위에서 돌아간다. 참고로 CRA나 Vite는 리액트 그 자체가 아니다! 리액트는 하나의 라이브러리인데, 이 리액트를 사용하기 위한 개발 환경 및 빌드 도구 세트이다. 리액트설치 + webpack 설정 + babel 설정 + ESLint 설정 등으로 이루어진.. 얘네가 node 위에서 돌아가는 것! 그래서 리액트를 사용할 때는 노드가 필요하다.
그럼 바닐라 자바스크립트를 쓸때는 노드가 필요 없나?
맞다. 바닐라 자바스크립트는 브라우저에서 실행하므로 노드가 필요없다.
NPM
npm은 노드 환경에서 사용할 라이브러리(패키지)를 설치하고 관리하는 도구이다. 예를 들어 리액트 네비게이션이라는 라이브러리가 있는데, 이 라이브러리가 작동하기 위해서는 노드라는 환경 위에서 작동하므로 이를 설치/관리하기 위해서는 npm이 필요하다.
근데 설치는 알겠는데 관리는 뭘 한다는 걸까.? 프로젝트에서 사용하는 라이브러리의 버전과 업데이트 가능 범위 등을 관리해서 팀원이 npm install을 하면 같은 버전환경을 그대로 재현 가능하다. 또한 중요한 것이 의존성 관리인데 사용하는 라이브러리가 무엇을 필요로 하고, 충돌이 나는 버전을 확인하고, 중복 설치를 막는 등 설치된 라이브러리들끼리 잘 적용되어 사용하게 만든다.
그럼 우리가 npm start로 사용하는건 뭘까?
npm start는 package.json에 있는 script의 start를 실행하는 명령어이다. npm start를 하게되면 npm이 package.json을 읽는데 scripts안의 start를 찾아서 그 문자열을 그대로 실행한다.
"scripts": {
"start": "react-script start"
}
그럼 npm 이 리액트를 실행시키는 건가..?
아니다.. npm start는 node로 vite 또는 cra를 실행시키는 트리거인것! 실제로 일을 하는건 node, vite, 브라우저이다.
vite 또는 cra를 실행하면 로컬서버가 실행이 되고(예: localhost:5173)
-> 로컬서버가 오픈된다
-> jsx에서 js 변환준비를 하고
-> 브라우저는 해당 로컬서버에 요청을 보낸다
-> vite 서버가 index.html을 반환
-> vite가 jsx에서 js로, ts에서 js로 변환 등을 수행하여 변환된 js를 브라우저에 보낸다
-> 그럼 브라우저는 js를 실행하고 dom을 렌더링 한다.
개발을 하면서 사용하는데에만 익숙해져서 뭘하는지 제대로 몰랐던 node와 npm에 대해 이번기회에 자세히 알게되었다.
업무를 하면서 이런 기본적인 것들에 대해 물어보면 말문이 막혔는데,
이렇게 블로그로 작성하면서 명확히 알게된 것이 앞으로 디딤판이 되지 않을까 생각한다.