[ React ] Node.js

[ React.js의 기본 환경 Node.js ]

 

 

자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행하게 된다.

 

브라우저는 각각 자신만의 엔진을 보유하고 있음 ex) Micro Edge - Chakra

 

크롬 브라우저의 V8엔진이 가장 대표적인 자바스크립트 엔진이다.

 

브라우저는 HTML 문서를 기반으로 동작하므로 자바스크립트를 HTML 문서 내부에서만 사용했었지만
크롬의 V8 엔진은 C++를 기반으로 만들어졌기 때문에 HTML 문서 내부 뿐만 아닌 외부에서도 사용이 가능해진다.

 

Node.js는 V8 엔진을 이용해서 자바스크립트를 브라우저 뿐만 아닌 어디에서든 사용가능하게 해준다.

 

즉, Node.js는 자바스크립트 실행 환경이 된다. ▶Javascript's Runtime

 

자바스크립트가 브라우저에서 벗어나 독립적으로 실행될 수 있다면 다양한 프로그램을 생성 가능해진다.

 

* 데이터를 요청하는 주체는 클라이언트이고 요청을 받아 데이터를 반환하는 주체는 서버이다.

 

리액트 : 브라우저에서 동작하는 복잡하고 여러 기능을 가진 자바스크립트 파일들을 쉽게 만들어주는 기술

→ 프로그램처럼 동작하기 때문에 리액트로 만들어진 웹 사이트를 웹( 리액트 ) 어플리케이션이라 부른다.

 

---

[ Node.js 기초 ]

 

 

Node.js는 자바스크립트를 웹 브라우저가 아닌 PC에서 독립적으로 실행시켜주는 도구인 Javascript's Runtime이다.

 

GUI( Graphic User Interface ) : 아이콘 같은 그래픽을 기반으로 마우스 클릭만으로 명령을 내릴 수 있는 방식

 

CLI( Command Line Interface ) : 명령어를 입력해서 운영체제에 명령을 내리는 과정

 

명령어를 입력하는 곳을 터미널( Terminal )이라 한다. 

 

 

1. 터미널에서 자바스크립트 파일을 실행시키는 방법

 

node xxx.js

 

2. 자바스크립트 파일을 다른 자바스크립트 파일에서 실행시키는 방법

 

Node.js에는 module.exports를 이용해서 객체 단위로 모듈을 내보낼 수 있다. 

 

a.js

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

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

 

b.js

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

console.log(calc);


// {
//     moduleName: 'calc module',
//     add: [Function: add],
//     sub: [Function: sub]
//   }

 

* exports와 require은 Node.js의 내장 함수이기 때문에 바닐라 JS에서는 사용이 제한된다.

 

 

3. 모듈 내의 함수 사용하기

 

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

console.log(calc.add(1,7));
console.log(calc.sub(9,2));

// 8
// 7

 

module.exports로 모듈을 내보내고 require와 경로를 명시해 모듈을 불러오는 시스템은 Node.js가 기본적으로
제공하는 모듈 시스템인 Common JS 모듈 시스템이다. 

 

모듈 시스템은 모듈을 내보내거나 불러와서 사용하는 함수같은 기능을 제공하는 시스템이다. 

 

---

[ Node.js 패키지 생성 & 외부 패키지 사용하기 ]

 

npm( Node Package Manager ) : Node.js의 패키지 관리 도구

 

npm은 다른 사람이 만들어놓은 모듈을 다운받아 사용할 수 있게끔 도와주고 개발할 프로젝트를 관리하는데 도움을
준다.

 

Package : 누군가가 따로 만들어놓은 모듈 

 

1. package 초기 설정하기

npm init

 

패키지를 생성하기 위한 요소들을 작성하고 나면 package.json 파일이 생성이 된다. 

* 입력할 요소 값이 존재하지 않을 경우 enter 입력하면 됨

package.json 파일은 우리가 만들 package의 정보를 기록하는 환경설정 파일이다. 

 

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

 

- "main" 진입 파일 :  패키지로 개발을 진행하게 될 경우 여러 개의 파일이 존재할 수 있는데 패키지 실행시 어떤 파일을
실행해야하는지 명시하는 파일이다. 

- "scripts" 파일 : 패키지를 개발하면서 자주 실행해야하는 명령어를 사전의 정의해두는 곳

   * scripts를 수정해서 자주 사용하는 명령어를 설정해놓을 수 있다.

 

 

2. 외부 패키지 사용하기

 

① https://www.npmjs.com 접속 → Node.js 패키지들이 대부분으로 오픈 소스로 제공되고 있음. 

② 패키지 다운로드하기

* randomcolor : 랜덤한 색상 코드를 함수 하나로 추출해주는 모듈

 

패키지 설치 코드를 복사해서 터미널에 입력해주면 된다. 

npm i 패키지이름

npm install 패키지이름

 

③ 설치가 완료되면 package.json에 변화가 생김

 

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

 

"dependencies" 필드가 생기고 그 안에 설치한 패키지가 추가가 되있다. 

package.json은 어떤 외부 패키지를 설치했는지, 그 패키지의 버전은 무엇인지 저장이 되어있다.

 

* 버전의 ^ 표시 : 패키지의 정확한 버전을 명시하는 것이 아니라 해당 버전 이상으로만 설치가 진행이 됨을 명시

 

④ root 폴더에 node_modules 폴도와 package-lock.json 파일이 생성되어 있음

 

 

nofr_modules 폴더는 안에 설치한 외부 패키지의 코드들이 들어가게 되므로 외부 패키지 보관소 같은 곳이 된다. 

* 외부 패키지도 패키지이기 때문에 마찬가지로 package.json 파일이 존재한다.

 

package-lock.json 파일은 실제로 우리 패키지에 설치된 외부 패키지들이 정확히 어떤 버전으로 설치되었는지

기록되어있는 곳이다. ^ 없이 정확한 버전이 표시가 된다. 

 

"dependencies": {
    "randomcolor": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
    }
  }

 

즉, package.json에서는 어떠한 패키지 버전을 사용하는지 대략적으로 알 수 있고, package-json에서는 어떠한
패키지 버전을 사용하는지 정확히 알 수 있다. 

 

⑤ 외부 패키지 사용하기

 

외부 패키지를 다운 받는 곳에 대부분 어떻게 사용하는지 명시가 되어 있음.

rnpm i를 통해 다운받은 외부 모듈은 require를 사용할 때 경로를 명시할 필요 없이 이름을 작성해주면 된다.

 

var randomColor = require('randomcolor'); // import the script
var color = randomColor(); // a hex code for an attractive color

console.log(color);

// #1b547c