[Node.js] express 프레임워크로 백엔드 웹 서버 구축하기

1. 개발 환경 구축하기

express프레임워크를 사용할려면 Node.js를 컴퓨터에 설치해야 한다. 다음의 링크에서 설치가 가능하다.
https://nodejs.org/ko/

LTS 버전은 안정된 버전을 의미하고 current버전은 최선버젼을 의미한다. 아무거나 설치하여도 상관은 없지만 Node.js의 다른 라이브러리를 사용할때 버전 문제로 오류가 발생하는 문제가 있을 수 있다. 자바스크립트를 작성하기 위해서는 메모장에서도 가능하지만 대체적으로 사용하는 에디터인 Visual Studio Code를 사용할 것이다. 다음의 링크에서 설치가 가능하다.
https://code.visualstudio.com/

작업 폴더를 생성한 후 Visual Studio Code를 실행하여 생성한 작업 폴더를 열어 준 다음 아래의 명령어를 명령 프롬프트에 입력하여 실행한다.

npm init

명령어를 실행하면 package.json파일이 생성된다. 해당 파일은 다음과 같이 사용한 npm패키지를 저장해두거나 메인 자바스크립트 파일이 저장되어 파일이다.

{
  "name": "express-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // 메인 자바스크립트 파일
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {  // 사용한 패키지 목록
    "express": "^4.18.2"
  }
}

하지만 이름과 버전만 기록되고 버전도 명확하게 저장되는 것이 아니기 때문에 package-lock.json이라는 파일이 생성되며 해당 파일에는 사용한 npm패키지에 대한 구체적인 내용이 저장된다.

2. 웹 서버 구축하기

다음의 명령어를 명령 프롬프트에 입력하여 express를 설치한다.

npm install express

package.json의 main에 저장되어 있는 이름으로 자바스크립트 파일을 생성한 후 아래의 코드를 입력한다.

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 3030); // 포트 설정
app.set("host", process.env.HOST || "0.0.0.0"); // 아이피 설정

// 루트 접속시 아이피 출력
app.get("/", function (req, res) {
  res.send("접속된 아이피: " + req.ip);
});

// 서버 동작중인 표시
app.listen(app.get("port"), app.get("host"), () =>
  console.log(
    "Server is running on : " + app.get("host") + ":" + app.get("port")
  )
);

3030포트로 접속할 경우 접속한 유저의 아이피를 보여주는 웹 서버이다. 위의 코드처럼 서버의 아이피를 0.0.0.0으로 설정하면 다른 네트워크에서도 접근이 가능하도록 아이피를 개방하겠다는 의미다. post방식으로 데이터를 보내고 싶으면 다음과 같이 코드를 작성하면 된다.

app.post("/", function (req, res) {
  res.send({ ip : req.ip });
});

3. cors 설정하기

일반적인 웹브라우저에서는 post로 데이터를 전송하고 전송 받는 것은 불가능하므로 서버에 접속하는 코드를 작성하여 post방식으로 통신하여야 한다. 하지만 출저가 다른 서버와 통신을 할 경우는 웹브라우저에서 cors오류가 발생하므로 백엔드 서버에서 cors설정이 필요하다. 다음의 명령어를 명령 프롬프트에 입력 후 실행한다.

npm install cors

설치가 완료되면 해당 라이브러리를 포함시킨다.

const cors = require("cors")

일반적으로 모든 프론트엔드 서버를 허용할 경우는 다음과 같이 코드를 작성하면 된다.

app.use(cors())

하지만 특정 아이피에서만 접속을 허용하고 데이터 접근 권한을 설정하고 싶으면 다음과 같이 코드를 작성한다.

const whitelist = ["http://localhost"]; // 접속 허용 주소

// cors 설정 (허용된 주소면 접속 허용)
app.use(
  cors({
    origin(req, res) {
      console.log("접속된 주소: " + req),
        -1 == whitelist.indexOf(req) && req
          ? res(Error("허가되지 않은 주소입니다."))
          : res(null, !0);
    },
    credentials: !0,
    optionsSuccessStatus: 200,
  })
);

// 허용된 주소면 데이터 접근 허용
app.all("/*", function (req, res, next) {
  let ip = req.headers.origin;
  (-1 == whitelist.indexOf(ip) && ip) ||
    (res.header("Access-Control-Allow-Origin", ip),
    res.header("Access-Control-Allow-Headers", "X-Requested-With"),
    next());
});

cors를 사용한 예제 코드는 다음과 같다.

const express = require("express");
const cors = require("cors");
const app = express();
const whitelist = ["http://localhost"];

app.set("port", process.env.PORT || 3030);
app.set("host", process.env.HOST || "0.0.0.0");

app.use(
  cors({
    origin(req, res) {
      console.log("접속된 주소: " + req),
        -1 == whitelist.indexOf(req) && req
          ? res(Error("허가되지 않은 주소입니다."))
          : res(null, !0);
    },
    credentials: !0,
    optionsSuccessStatus: 200,
  })
);

app.all("/*", function (req, res, next) {
  let ip = req.headers.origin;
  (-1 == whitelist.indexOf(ip) && ip) ||
    (res.header("Access-Control-Allow-Origin", ip),
    res.header("Access-Control-Allow-Headers", "X-Requested-With"),
    next());
});

app.get("/", function (req, res) {
  res.send("접속된 아이피: " + req.ip);
});

app.listen(app.get("port"), app.get("host"), () =>
  console.log(
    "Server is running on : " + app.get("host") + ":" + app.get("port")
  )
);