React

Node.js와 React (유데미 한입 크기로 잘라 먹는 리액트)

sognociel 2022. 11. 7. 19:53

01. Node.js

JavaScript's Runtime (자바스크립트 실행환경)

자바스크립트의 코드를 브라우저 없이 컴퓨터에서도 실행할 수 있게 되는 것. 자바스크립트의 실행환경이라고도 할 수 있으며 자바스크립트의 코드를 브라우저 없이 컴퓨터에서도 실행할 수 있게 되는 것.

 

React.js는 Node.js위에서 돌아가는 기술이기 때문에 React.js를 다루기 전에 Node.js는 필수적으로 알아야 한다.

 

cf.) 런타임(실행환경)이란 특정 언어로 만든 프로그램을 실행할 수 있는 기본 환경을 의미한다. 예를 들어 자바스크립트를 실습하고 직접 실행해보기 위해서 브라우저(크롬)를 이용하였는데, 이런 상황에서는 크롬 브라우저가 자바스크립트의 런타임이 되는 것.

 

자바스크립트 파일은 node.js가 설치되어 있다면 node 명령어를 통해 실행시킬 수 있다. (해당 파일이 있는 경로로 터미널 이동)

node index.js(실행할 파일)

 

 

 

02. 모듈

코드를 역할에 따라 여러 가지 파일에 나누고, 나뉜 파일들을 모듈단위로 불러와서 재사용하는 방법.

module.exports 내장 함수와 require 내장 함수는 Node.js의 내장 함수이기 때문에 바닐라 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

//기능별로 파일을 구현하고, 각각의 기능을 불러와서 사용하는 모듈 시스템
// 내보낸 모듈을 경로와 require라는 내장함수로 불러온다.

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

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

bash에서 node 명령어를 통해 실행시킨 결과

 

 

 

03. 프로젝트(패키지) & npm

npm(Node Package Manager) | 로그인이나 전화인증, 메일 발송 등 다른 사람들이 만들어놓은 모듈로 제작된 패키지들을 쉽게 사용할 수 있다.

package.json

패키지 초기 설정 (npm init)을 수행하였을 때 루트 폴더에 생기는 파일. 우리가 만들 패키지의 정보를 기록하는 환경설정 파일이라 할 수 있으며 패키지의 이름, 버전, 진입 파일, 스크립트, 저자, 라이센스 등을 명시할 수 있다.

 

  • main(진입 파일) | 이 패키지는 main에 명시된 파일을 통해 실행된다
  • script(스크립트) | 이 패키지를 개발하면서 자주 실행해야 하는 명령어들을 정해둘 수 있는 곳. npm start 명령을 입력 했을 때 실행되는 파일이다.