Node.JS와 Express는 항상 함께 언급되며, NodeJS는 React를 사용할 때에도 출현한다. 도대체 무엇일까?
Node.JS
Node.JS는 웹의 발전에 따라 등장했는데, 단 방향 통신 위주였던 웹 1.0에서 사용자와 상호작용을 하는 웹 2.0이 등장했다. 이에 따라 구글에서는 고성능의 자바스크립트 동작을 위해 크롬 웹 브라우저를 위한 V8이라는 자바스크립트 엔진을 개발했다. 오픈소스인 V8를 활용해 자바스크립트를 웹뿐만 아니라 어느 환경에서나 사용할 수 있도록 개발된 실행기가 Node.JS이다.
Node.JS의 등장에 따라 자바스크립트로 다양한 역할을 할 수 있게 되었다.
- 크로스 플랫폼 실행
- 제한 없는 동작
- 다양한 어플리케이션 실행 가능
- Front-End(React), Back-End(Express), Mobile(ReactNative), Desktop(Electron), MachineLearning(Brain)
흔히 알고 있는 RN 뿐만 아니라 Slack과 Discord에 사용된 Electron, 심지어는 머신러닝까지 가능하게 해주는 런타임 실행기이다.
추가로, Babel이라는 컴파일러 도구를 내장하고 있어 React에서 사용하는 JSX 문법을 사용할 수 있게 해 주고 구 웹브라우저를 지원해주며, 내장된 Webpack 도구는 SPA(Single Page Application)의 개발에서 생산되는 정적 파일들을 번들링 하게 도와준다.
Node.JS 특징
Node.JS 특징은 3가지로 간단하게 설명할 수 있다.
싱글 쓰레드
쓰레드란 명령을 실행하는 단위로, 한 번에 하나의 동작만 수행 가능하다. 리소스 관리에 효율적이지만 작업의 효율이 떨어진다.
비동기
동작을 실행한 후 완료까지 기다리지 않고 다른 동작이 실행된다. 싱글 쓰레드의 작업 효율이 떨어지는 단점을 수동적으로 보완할 수 있다.
이벤트 기반
비동기 동작의 완료를 처리하는 방법으로, 비동기 동작의 완료 시 미리 등록된 함수를 실행한다. 쉽게 말해 then과 같은 함수를 의미한다.
Express
Express는 웹 애플리케이션을 구축하는 NodeJS 기반 프레임워크이다. API 통신을 지원하며 간단하게 백엔드 서버를 구축할 수 있다. 자유도가 높지만 기본적으로 제공되는 CRUD 이외에 데이터베이스나 심지어 관리자 페이지까지도 직접 개발해야 한다. 커뮤니티가 크고 이미 많은 서비스에서 사용되고 검증된 프레임워크이기 때문에 사실 간편하게 입맛에 맞는 라이브러리를 찾을 수 있다.
Express 구축
간단하게 TypeScript Express를 구축해보고 API 서버를 로컬로 열어보자.
패키지 설치
//터미널에 입력한다. TypeScript용으로 설치한다.
//cors 패키지는 외부 접근을 차단하는 cors 에러를 해제하기 위해 설치한다.
npm i @types/express @types/cors express cors ts-node typescript nodemonHeroku에 배포하기 위해 npm으로 설치해주자!
기본 설정 파일 생성
//프로젝트의 기본 이름, 설명 등을 입력받게 한다.
npm init -y
//TypeScript config 파일을 생성한다.
tsc --init
//Ts 파일을 생성한다. index.js와 같은 역할이다.
touch server.ts//package.json에 다음을 추가한다.
"scripts": {
"start": "ts-node server.ts", //JavaScript는 'node server.js'
"dev": "nodemon -x ts-node server.ts"
},
"engines": {
"node": "v14.16.1",
"npm": "6.14.12"
},
package.json에 다음과 같이 설정해주면 'npm start'를 입력했을 때 자동으로 'ts-node server.ts'로 변경되어 서버가 실행된다.
백엔드 구축하기
설정을 모두 완료하면 다음과 같은 파일 구성이 된다. server.ts가 메인 코드를 실행하는 파일이 되며 내부에 다음과 같은 코드를 삽입해보자.
//express를 import 한다. JavaScript에서는 'const express = require('express')'가 일반적이다.
import express, { Request, Response } from "express";
const app = express();
//외부 접근시 발생하는 cors를 해제하기 위한 라이브러리이다.
const cors = require("cors");
//서버에 사용될 port 번호이다. 현재는 환경 변수 파일이 없으므로 3001이 된다.
const PORT = process.env.PORT || 3001;
//express에 cors 라이브러리를 삽입한다.
app.use(cors());
//GET API를 정의한다.
app.get("/", (req: Request, res: Response) => {
res.send("Server is running");
});
app.get("/user/1", (req: Request, res: Response) => {
res.json({
id: 1,
name: "yusang",
major: "computer",
});
});
//서버 가동 시 실행하는 동작이다.
app.listen(PORT, () => console.log("server running.."));
실행
npm start
이처럼 Express는 간단하게 Restful API를 생성할 수 있고, fetch, axios 등으로 간단하게 프런트엔드와 통신할 수 있는 HTTP를 제공한다. 앞서 말한 것처럼 데이터베이스 등을 별도로 연결해야 하지만 필요에 맞게 NoSQL을 사용할 수도 있는 자유도가 있다.