JavaScript 런타임과 node.js

이번 시간에는 JavaScript 런타임(runtime)에 대해 알아보겠습니다. 뭔가 런타임하면 어려운 개념인것 같지만 여러분은 이미 JavaScript 런타임을 사용하고 있습니다. 다들 웹 브라우저 사용하시죠?! 이게 바로 JavaScript 런타임입니다.

런타임이란 프로그래밍 언어가 구동되는 환경입니다.환경이라는 말이 조금 어려울 수 있습니다. 쉽게말해 환경은 프로그램 입니다. 런타임 이란 "어떤 프로그래밍 언어가 동작할 수 있는 프로그램"입니다.우리가 JavaScript를 이용해서 코드를 적었으면 코드가 실행이 되어야겠죠? 바로 실행되는 곳이 바로 런타임입니다.

우리는 JavaScript를 다루고 있으니 JavaScript 런타임이 무엇이 있는지 살펴보겠습니다.먼저 아까 말씀드렸던 브라우저가 대표적인 JavaScript 런타임입니다. 이전에는 JavaScript 런타임이 브라우저 밖에 없었습니다. 하지만 이제 node.js라는 새로운 JavaScript 런타임이 나왔습니다. JavaScript가 브라우저가 아닌곳에서 실행될 수 있으니, 이제 우리는 JavaScript를 이용해서 웹페이지 뿐만 아니라 서버와 같은 다른 프로그램을 만들 수 있습니다.

이제 우리는 우리가 쓴 JavaScript 코드를 브라우저에서 실행시킬수도 있고, node.js라는 환경에서 실행시킬수도 있습니다.HTML <script> 태그 내에 JavaScript 코드를 작성한다면 우리가 작성한 코드는 브라우저에서 동작합니다.또는node <file_name> 명령어를 입력하시면 작성하신 코드가 node.js라는 환경에서 실행되게 됩니다. 예제를 하나 더 볼까요?

// runnode.js
const testFunction = function(arg){
console.log("Arg is : ", arg);
}

testFunction(20);

자 이렇게 runnode.js라는 파일을 만들어 위와같이 코드를 작성해 보았습니다. 저 코드를 실행시키려면 어떻게 해야할까요? 저 파일을 브라우저에서 실행시키려면 html 파일을 만들어 그 안에 넣어주시면 됩니다. 이번에는 node에서 한번 실행시켜 보겠습니다. 아래와 같이 명령어를 입력해 보세요.

$ node runnode.js

그럼 터미널창에"Arg is : 20" 이라는 메시지를 확인하실 수 있습니다. 자 이제 우리가 작성한 코드가 어디에서 동작하고 있는지 구분하실 수 있겠죠?!

정리하자면 런타임이란 프로그래밍 언어가 돌아가는 환경, 그리고 node.js는 JavaScript 런타임입니다.

NVM

앞서 JavaScript가 돌아가는 환경이 브라우저와 node.js라는 곳이 있다고 말씀드렸습니다. 브라우저는 뭔지 잘 알고 계시니(사실 브라우저 내부도 다룰게 많이 있긴 합니다만...) 이 부분은 넘어가도록 하고 이제부터는 node.js 에 대해 이야기해 보겠습니다.

우리가 node.js에서 JavaScript를 실행시키려면 당연히 node.js를 설치해야겠죠?! "Install node.js" 라고 검색해 보시면 nvm 이라는 키워드를 많이 보셨을 겁니다. 그 전에 버전에 대해 간단하게 짚고 넘어가보겠습니다. 모든 프로그램은 버전이 있습니다. version 12.13.0, version 10.13.0 많이 보셨죠? 버전에는 많은 의미가 담겨 있습니다. 우리는 버전만 봐도 이 프로그램이 어느 정도 관리되는지 알 수 있습니다.

node.js 역시 하나의 프로그램이니 당연히 버전이 있습니다. 일반적으로 node.js 홈페이지에 들어가서 node를 설치하면 가장 최신 버전과 LTS 버전(LTS는 Long Term Support 약자로 장기 서포트를 보장한다는 의미를 담고 있습니다. )을 보여줍니다. 하지만 사실 저 두 가지 버전뿐만 아니라 많은 버전들이 있습니다. 개발을 하다 보면 다양한 node.js 버전에 대응해야 할 일이 생깁니다. 예를 들면 node 10.13.0 버전에서는 내가 짠 코드가 잘 돌아갔는데, node 12.13.0 버전에서는 안 돌아간다! 하는 일들이 생깁니다. 그럼 node 12.13.0에서 테스트를 해봐야겠죠?!

문제는 여기부터입니다. 내가 설치한 node는 10.13.0 버전이라고 해봅시다. 그럼 우리는 설치한 node를 업데이트해야겠죠?! 업데이트는 쉽게 할 수 있습니다. 근데 다시 이전 버전으로 가려면 어떻게 해야 할까요? Node를 지우고 다시 설치하면 되겠죠? 근데 이렇게 버전을 옮길 때마다 지우고 설치해야 한다면 작업할 때 마다 엄청 귀찮겠죠?! 이런 문제를 NVM이 해결해 줍니다.

NVM은 Node Version Manager입니다. NVM을 통해 간단한 명령어로 node를 설치하고, 다양한 node version을 손쉽게 옮겨 다닐 수 있습니다. NVM역시 하나의 프로그램이므로 설치해야 합니다.

Getting Started

NVM을 설치하고 아래 명령어를 입력해 보세요.

$ nvm ls

그럼 현재 nvm을 통해 설치한 node version들이 나옵니다. 자, 새로운 node version을 설치하고 싶으면 다음과 같이 입력합니다.

$ nvm install 10.13.0

이렇게 하면 우리가 원하는 node version이 설치됩니다. 물론 이전 것을 지우지 않고 설치할 수 있습니다.

다른 node version을 사용하고 싶을 땐 아래 명령어만 입력하면 됩니다.

$ nvm use (사용하고 싶은 node version : use 명령어 전에 해당 node version이 설치되어있어야 합니다.)
ex) nvm use 12.13.0

정말 편하게 node를 설치하고 version을 바꿀 수 있습니다.

정리해보면 NVM은 다양한 node version를 설치하고 관리할 수 있는 프로그램 입니다.

Node js 설치

자신의 컴퓨터에 node.js를 설치합니다. 우리는 NVM(Node Version Manager)를 이용해 node.js를 설치합니다. NVM을 사용하면 다양한 node.js version을 쉽게 설치하고 사용할 수 있습니다.

macOS 및 Linux(ubuntu)에서 node.js 설치

1. NVM 설치

아래 명령어를 터미널에 입력합니다.

$ touch ~/.bash_profile 
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

---

1.1. 주의사항

우분투의 경우 Command 'curl' not found 메세지가 터미널에 출력될 수 있습니다. 이는 curl이라는 프로그램이 설치되어 있지 않기 때문입니다.

아래 명령어를 통해 curl을 설치한 다음, 다시 위에 있는 NVM설치 명령어를 입력해 주세요.

$ sudo apt-get update
$ sudo apt install curl

---

성공적으로 NVM이 설치되었으면 NVM 버전을 확인합니다.

$ nvm --version

버전이 잘 나온다면 성공적으로 NVM이 설치된 것입니다.

2. node.js 설치

NVM을 설치했으니 이제 NVM을 이용하여 node.js를 설치해 봅시다.
NVM을 이용해 node.js를 설치하는 방법은 간단합니다. 아래 명령어와 같이 설치하고자하는 node version을 적어주시면 됩니다.

$ nvm install 12.18.3

성공적으로 node가 설치되었으면 node 버전을 확인합니다.

$ node -v

버전이 잘 나온다면 성공적으로 node가 설치된 것입니다.

Package.json

하나의 프로그램은 다양한 모듈이 합쳐져서 만들어집니다. 하지만 우리가 개발을 할 때 모든 것을 만들어서 쓰지는 않습니다. 우리가 다 만들지 않는 이유는 여러 가지가 있습니다. 가장 먼저 시간이 많이 걸리고요, 우리가 만든 것을 100% 신뢰하기가 힘듭니다. 그래서 우리는 우리보다 잘하는 사람들이 만들어놓은 검증된 코드(모듈)를 가져다가 사용합니다.

NPM

NPM은 Node Package Manager로 일종의 앱스토어입니다. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어입니다. 앞으로 필요한 모듈은 대부분 NPM에서 다운로드해서 사용하면 됩니다.

node 모듈을 사용하는 프로젝트에서 npm이라는 키워드는 하나의 명령어처럼 사용되기도 합니다. npm start처럼, 프로젝트를 실행시킬 때 npm 키워드를 사용하기도 합니다.

package.json

내가 만든 프로젝트면 어떤 모듈이 필요하고, 이 프로그램을 어떻게 실행시킬지를 잘 알고 있겠죠?! 하지만 아무것도 모르는 사람이 내가 만든 프로젝트를 실행시킬 땐 이야기가 달라집니다. 어떻게 해야 프로그램을 실행시킬 수 있는지, 이걸 실행시키려면 어떤 모듈이 있는지를 알 수 없습니다.

내가 만든 프로그램을 나 혼자만 개발하고 사용한다면 큰 문제가 되지 않을 수 있지만, 우리는 대부분 다른 사람과 함께 개발하고 사용하게 됩니다. 그럼 다른 사람에게 이 프로젝트에 대해 알려주어야겠죠?! 그 역할을 하는 것이 바로 package.json 입니다.

package.json에는 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있습니다.

헷갈리시면 안 되는 점은 이 프로그램을 실행시키기 위해 필요한 실제 모듈은 node_modules이라는 폴더에 다 들어가 있다는 것입니다. package.json에는 어떤 모듈인지만 적혀 있습니다. 즉, 전자제품을 보러 갔을 때 제품 카탈로그가 바로 package.json이라 생각할 수 있습니다. 카탈로그만 보면 어떤 제품이 있는지 파악할 수 있는 것처럼 package.json만 보면 어떤 모듈이 들어가 있는지를 알 수 있습니다.

package.json이 주는 또 하나의 이점은 프로젝트 코드를 전달할 때, 포함하고 있는 모든 모듈을 다 전달하지 않아도 된다는 점 입니다. 우리는 프로젝트 코드를 넘겨줄 때, "우리 코드는 여기있고, 필요한 모듈은 package.json에 적어 놨으니 너가 직접 다운받아서 쓰면 돼" 라고 하면 됩니다.

필요한 모듈까지 모두 넘겨주는 것은 전달해야 하는 파일도 너무 많거니와 필요가 없는 일입니다. 사용하는 사람이 직접 다운 받아서 쓰라고 하면 됩니다. 우리는 무엇이 필요한지만 알려주면 됩니다.

자 앞으로 스프린트를 진행하실 때, 해당 스프린트의 레파지토리를 열어보시면 node_modules 는 없고, package.json 만 있을겁니다. 그럼 여러분은 package.json에서 필요하다고 하는 모듈을 npm을 이용해 다운받으시면 됩니다.

npm install 명령어를 입력하시면, package.json에서 필요하다고 하는 모듈을 다운받습니다. npm install이 완료되면 node_modules 디렉토리가 생긴 걸 확인하실 수 있습니다.

package.json 파헤치기

1. dependencies

이 프로젝트가 돌아가기위해 반드시 필요한 모듈들이 무엇인지가 적혀 있습니다.

"dependencies": {
  "react": "^16.8.6",
}

2. devDependencies

이 프로젝트를 개발하는 환경에서 필요한 모듈들이 무엇인지가 적혀 있습니다. 예를 들면 코드 모양을 잡아주는 lint나 테스팅 모듈처럼, 실제 프로젝트 동작에 직접적으로 영향을 주지 않는 모듈들을 명시합니다.

"devDependencies": {
  "jest": "^2.3.0",
  "eslint" : "^2.0.0"
}

3. scripts

npm 으로 실행시킬 수 있는 명령어를 정의합니다. 명령어를 입력하면 어떤 동작을 해야하는지가 적혀 있습니다. 예를들면 npm test 명령어를 입력하면 "test.js 파일을 node 에서 실행시켜라!" 하는 내용들이 들어있습니다. 만약 npm test와 같은 명령어를 실행시켰는데 "정의되지 않은 명령어" 라는 오류 메시지가 나오면, package.json 파일 scripts 에 해당 명령어가 정의되어 있는지를 확인해 보시면 됩니다.

"scripts": {
  "start": "node app.js",
  "test": "node test.js",
}