React - Node.js 설치 및 사용 (기본, npm)

- Node.js

 

- JS는 JS 엔진 위에서 동작하게 된다. 대표적으로 Chrome의 V8 JS 엔진이 대표적인 JS 엔진이다.

- JS는 웹브라우저 안에서만 동작하고 html 문서 안에서 동작하게 된다.

 

- Chrome의 V8 엔진을 브라우저가 아닌 어디서든 사용할 수 있도록 시작한 프로젝트가 Node.js이다.

- 즉, Node.js JS의 실행 환경이고 JS엔진이며 어디서든 JS를 사용할 수 있도록 도와준다. + JS로 Web Server를 생성하는 것이 가능해졌다.

 

- 결론적으로 React는 JS 파일을 쉽게 만들어내는 기술이다. React는 Node.js를 기반으로 실행된다.

 

 

https://nodejs.org/ko

Node.js

- 공식 홈페이지를 통해 다운 받을 수 있다.

- 설치 후 cmd를 통해 버전이 확인된다면 정상적으로 설치된 것이다.

 

- node.js를 사용하기 위해 Visual Studio Code를 사용할 것이다.

- node.js는 cli를 통해 JS 파일에 대해 명령을 내릴 것이다.

 

- vsc에서 터미널을 통해 node.js에 명령어를 보내 파일들을 실행시키거나 여러가지 명령을 내릴 수 있다.

 

1. node [파일명]을 통해 해당 파일을 직접적으로 실행 시킬 수 있다.

 

- calc.js

// 계산 기능을 하는 파일

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

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

- module.exports를 사용하면 외부에서 해당 파일을 사용할 수 있게 된다. 아래 add: add를 통해 외부에서 해당 변수를 통해 calc.js 파일 안의 add 변수를 사용할 수 있게 된다.

 

- index.js

const calc = require("./calc");

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

- require에 파일 경로를 넣게 되면, 해당 파일에 있는 코드들을 사용할 수 있게 된다.

- calc라는 변수를 통해 calc.js 파일을 불러 올 수 있다. java에서 외부 클래스를 사용하는 것과 유사한 것을 볼 수 있다.

- 이전에 calc.js의 add 변수를 export를 통해 외부에서 add 변수로 사용할 수 있도록 지정했기 때문에 calc.add를 통해 calc.js 파일의 add 함수를 외부에서 사용할 수 있게 된다.

 

- 터미널에서 node.js를 실행하게 되면 

- 위와 같이 결과를 얻을 수 있다.

- 위 결과를 통해 알 수 있는 것은 require를 통해 해당 module를 사용할 수 있고, module은 node를 통해 사용할 수 있다.

---

- npm

- npm (Node Package Manager)

- node.js를 사용하면서 다른 사람들이 만든 module을 사용하거나 프로젝트 관리에 있어서 유용하다.

- 최초 npm 패키지를 생성하기 위해선 npm init을 통해 생성해준다.

- npm 초기 설정을 마치고 실행하게 되면 위와 같이 pakage.json 파일이 생성되게 된다.

- pakage.json 파일에는 패키지의 정보를 담고 있는 환경설정 파일이라고 생각하면 된다.

 

- package.json

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

- package.json 파일에 scripts 부분에 start를 넣게 되면 아래와 같이 터미널에 npm start 명령어를 실행하게 되면 터미널에서 node index.js를 실행한 것과 같이 실행되게 된다.

---

- npm 패키지 사용 방법

https://www.npmjs.com/

npm

- npmjs라는 사이트를 통해 여러 유용한 npm 패키지들을 다운 받아서 사용할 수 있다.

- 원하는 패키지를 찾아 위와 같이 설치 방법에 따라 터미널에 해당 명령어를 실행하게 되면

- 해당 패키지를 다운 받을 것을 확인 할 수 있다.

- 다운 받은 패키지를 확인해보면 위와 같이 누군가 만들어놓은 js파일이 있는 것을 확인 할 수 있다.

const randomColor = require('randomcolor')

let color1 = randomColor();
let color2 = randomColor();

console.log(color1, color2)

- 위와 같이 require를 통해 해당 패키지를 불러와 사용하게 되면,

- 위와 같이 랜덤한 색상 코드 2개가 출력된 것을 확인 할 수 있다.