[React] Node.js 설치와 모듈 시스템 및 패키지

◈ Node.js 알아보기

javascript는 브라우저 엔진에 내장된 자바스크립트 엔진을 사용해야 하기 때문에 javascript는 웹 브라우저에서만 실행할 수 있었다. 따라서 javascript는 버튼 클릭 등의 간단한 인터렉션밖에 수행하지 못했다. javascript를 브라우저에서만 사용하는 것이 아니라 아무 곳에서나 실행시키기 위해 만들어진 것이 Node.js!

->Node.js를 자바스크립트의 실행환경이라 할 수 있으며 이를 Javascript's Runtime이라고 한다.

 

Node.js 덕분에 Javascript로 web server까지 개발이 가능해졌다. server는 클라이언트가 요청하는 것을 전달하는 역할을 하는데 요청하는 주체는 client, 요청을 받는 주체는 server라고 한다. Node.js로 만들 수 있는 web server는 URL이라는 주소로 요청 받아 요청 받은 주소에 알맞는 주소인데 HTML, CSS, javascript로 이루어진 웹 파일들을 브라우저로 던져준다. 

 

◈ Node.js 설치하기

Node.js 홈페이지에 들어가서 원하는 버전으로 설치하면 된다.(안정성 때문에 LTS 버전 추천)

설치 후 터미널을 켜서 node -v 를 입력하여 버전이 뜬다면 정상적으로 설치 된 것이다. 추가로 npm -v를 입력하여 버전이 제대로 뜨는 지 확인해준다.

ex)

 

◈ Terminal이란?

 

-버튼을 더블 클릭하여 명령을 내리는 방 → GUI

-텍스트를 직접 입력하여 명령을 내리는 방식 → CLI

CLI에서 타이핑을 하는 곳이 터미널이다.

 

 

index.js라는 파일을 만들어 다음과 같은 내용을 입력 후 Ctr+s를 눌러 내용을 저장해보자.

console.log("Hello node.js")

터미널에 node index.js 를 입력하면

Hello node.js

이렇게 출력되는 것을 볼 수 있다.

 

◈ Common JS 모듈 시스템

모듈이란? 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미한다. 보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성한다. 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만들게 된다.

 

계산 기능을 담당하는 모듈을 가진 calc.js 파일을 만들어보자.

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

module.exports = {
  moduleName: "calc module",
  add: add,
  sub: sub,
};

index.js에서 모듈을 사용하기 위한 코드를 작성해보자.

const calc = require("./calc")

console.log(calc.add(1, 2));
console.log(calc.sub(10, 3));

이렇게 require와 경로를 이용하여 calc.js의 모듈을 사용할 수 있다. 이렇게 module.exports와 require, 경로를 이용하여 다른 파일의 모듈을 이용하는 것은 Node.js의 Common JS 모듈 시스템을 사용하는 것이다.

 

◈ Node.js 패키지 생성

npm이란? Node Package Manager의 약자. Node.js의 패키지 관리 도구이다.

package란? 누군가가 만들어놓은 Node.js의 모듈을 의미한다.

npm을 이용하여 package를 만들 수 있다.

 

터미널에 npm init를 입력해보자.

name에 패키지 이름을 입력해주면 (나머지 정보들은 선택) package.json 파일이 만들어진다. 이는 만든 패키지의 정보를 기억하는 환경설정 파일이다.

{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sehyun",
  "license": "ISC"
}

여러개의 파일 중 무엇을 실행해야 할 지 진입 파일을 알려주는 것이 "main".

자주 쓰는 명령어를 저장해두는 것이 "scripts".

ex)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },

start라는 명령어를 만들어주면 start만 입력해도 node index.js가 실행된다.

 

◈ 외부 패키지 사용하기

https://www.npmjs.com/ 로 들어가면 남들이 만든 모듈을 사용할 수 있다. 

우리는 randomcolor를 설치 해볼 것이다.

//터미널에 입력
npm i randomcolor

이렇게 randomcolor를 설치해준다면, package.json의 dependencies가 추가된 것을 볼 수 있다.

{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "Sehyun",
  "license": "ISC",
  "dependencies": {
    "randomcolor": "^0.6.2"
  }
}

이렇게 package.json은 어떠한 모듈들을 깔았는지 기록해준다. 여기서 버전은 범위를 나타내준다면, 정확한 범위는 package-lock.json에서 확인해준다.

 

이제 그럼 설치 한 randomcolor를 사용해보자.

//index.js
const randomColor = require("randomcolor");

console.log(randomColor());

이때 외부에서 설치한 패키지는 경로 대신 이름으로 적어줘도 된다.

이때 콘솔값은 #11348e 이런 식으로 텍스트로 랜덤으로 색상이 출력되는 것을 볼 수 있다.