Node Express RESTful API 프로젝트 만들기

이번 시간에서는 Node Express MVC 패턴 기반으로 RESTFul API 샘플 프로젝트를 하나 간단히 만들어서 Postman을 통해 테스트까지 진행해보도록 하겠습니다.
Node와 Express 에 대해 익숙하지 않으신분들은 추후 제공될 Node 백엔드 개발환경 구성 및 Express 기반 프로젝트 생성하기 블로깅을 참고해주시를 바랍니다.

현재 가이드는 윈도우즈 컴퓨터를 기반으로 설명드리며 MAC OS 사용자분들은 구글링을 통해 NODE Express 백엔드 개발환경 구성하기 블로깅/유튜브 내용을 참고해 기본 프로젝트 구조를 만들어주세요.

1) Node Express 프로젝트 만들기

개발 선행조건으로
여러분 Windows 컴퓨터에 Node Framework 16,18,20 버전중 하나 이상과 VSCode 개발툴이 설치되어 있어야합니다.

-Node Framework 다운로드 설치하기 (v20.12.2 LTS)
https://nodejs.org/en

-VSCode 코드 에디터 설치하기
https://code.visualstudio.com/

A) VSCode 작업폴더 지정하기

자 그러면 VSCode를 실행시켜주시고 VSCode 상단 메뉴 File>Open Folder 메뉴를 클릭해서 작업폴더를 지정합니다.
-작업폴더는 탐색기에서 영어로 된 특정 경로내에 영어로 생성해주시면 좋습니다.
-예시) D:\Projects

B) VSCode Terminal 만들고 디버깅 환경 설정하기
-VSCode 상단메뉴 Terminal>New Terminal 메뉴를 클릭합니다.
-새로운 터미널이 VSCode 오른쪽 하단에 추가됩니다.
-터미널 창 오른편 +표시옆에 콤보박스를 클릭> Select Default Profile메뉴를 클릭한후 상단 JavaScript Debug Terminal 메뉴를 선택하여 VS Code의 기본 디버깅 환경 구성을 마무리합니다.
-터미널 창의 하단 맨우측 x버튼이나 쓰레기통 아이콘을 클릭해 터미널 닫고 VSCode 상단메뉴 Terminal>New Terminal 메뉴를 클릭하여 새로운 터미널을 오픈하면 터미널 하단 우측에 디버거가 JavaScript Debug Terminal로 선택되어 있어야합니다.

C) 로컬 개발환경에 설치된 Node/NPM 버전확인하기

-VSCode 하단 터미널창에서
node -v 를 입력하고 엔터하여 출력되는 Node Framwork 버전을 확인합니다.
npm -v 를 입력하고 엔터하여 출력되는 NPM 버전을 확인합니다.

정상적으로 설치된 버전이 확인되면 Node환경에서의 기본적인 백엔드 개발환경 준비가 완료된것입니다.

D) Node Express 개발환경 구성하기

Step1) Express-generator 패키지를 npm 명령어를 통해 전역으로 최초 한번 설치
npm i -g express-generator

Step2) express-generator 설치 후 CLI 를 통해 Node Express 기반 노드 웹 프로젝트 생성
express node-epxress-app --view=ejs

- MVC 패턴 기반의 물리적 노드 백엔드 웹 프로젝트(프로젝트명= node-epxress-app) 생성 및 샘플 코드 자동 생성해줌
- 프로젝트 생성시 View(화면,HTML) 제어 엔진 기술로 EJS 를 기반으로 프로젝트를 생성

Step3) 생성된 프로젝트 경로 로 이동 후 프로젝트 실행에 필요한 node 패키지 일괄 복원설치 진행

cd node-epxress-app

npm i

- 프로젝트 폴더내 package.json 파일내 dependencies에 정의된 패키지들이 일괄 복원 설치됨
- 상기 npm i 명령어는 반드시 프로젝트 폴더내의 package.json 파일과 동일경로상에서 실행 해야 함.

Step4) 웹 프로젝트 실행하기

npm start

- package.json 파일내 scripts에 start 명령어 등록되어 있고 node ./bin/www.js 시작 모듈파일이 실행되게 설정되어 있음
-www.js파일을 통해 노드 어플리케이션(app.js)가 서비스되는 서버환경을 구성해주고 지정된 포트(기본포트 3000)를 통해 서비스됨.
-웹브라우저를 오픈하고 http://localhost:3000 주소를 호출하면 정상적으로 웹페이지가 오픈된다.

Step5) 실행중인 노드 프로젝트 종료하기

-터미널에서 Ctrl + C 키를 입력하고 y선택하여 어플리케이션 실행 종료 시킵니다.

Step6) 개발 편리/효율성을 위한 nodemon 패키지 설치 및 환경구성하기

-실행중인 노드 프로젝트를 종료하고 하기 명령어를 실행해 개발 환경 전역 패키지 설치공간에 nodemon 개발용 패키지를 설치합니다.

npm install nodemon -g

-package.json 파일내 "start" : "node ./bin/www" 코드영역을 아래 예시코드처럼 "start" : "nodemon ./bin/www" 으로 변경 후 package.json 파일 설정을 저장합니다.

"scripts": {

"start": "nodemon ./bin/www"

}

npm start 명령어 실행을 통해 다시 노드프로젝트를 실행해봅니다.

http://localhost:3000

2) 블로깅 C/R/U/D API 샘플 기능 구현하기

상기 준비된 프로젝트에 간략한 블로깅 서비스를 위한 게시글 등록/수정/조회/삭제 기능을 제공하는 RESTFul API를 구현해보도록 하겠습니다.

Step1)routes/api/blogAPI.js RESTFul 전용 라우터 파일 만들기

node-epxress-app 프로젝트 루트에 routes폴더내에 api폴더를 생성하고 api폴더내에 blogAPI.js 파일을 생성합니다.
-폴더/파일생성하기: 폴더선택 오른쪽 마우스클릭> 새폴더 또는 새파일 클릭 폴더명 또는 파일명 입력 routes/api/blogAPI.js파일을 오픈합니다.

Step2) blogAPI.js RESTFul 전용 라우터 파일 구성하기

-blogAPI.js 파일 맨 상단과 맨 하단을 하기와 같이 구성합니다.

var express = require("express");

var router = express.Router();

...

module.exports = router;

Step3)전체 블로깅 게시글 목록 조회 라우팅 API 기능 구현하기

router.get("/all", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    const blogs = [
      {
        article_id: 1,
        title: "제목1입니다.",
        contents: "내용1입니다.",
        view_count: 0,
        ip_address: "111.111.111.111",
        is_display_code: 1,
        reg_date: Date.now(),
        reg_member_id: 1,
      },
      {
        article_id: 2,
        title: "제목2입니다.",
        contents: "내용2입니다.",
        view_count: 2,
        ip_address: "222.222.222.222",
        is_display_code: 1,
        reg_date: Date.now(),
        reg_member_id: 1,
      },
    ];

    result.code = 200;
    result.data = blogs;
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step4)신규 블로깅 게시글 등록 라우팅 API 기능 구현하기

router.post("/", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    const article = {
      article_id: 0,
      title: req.body.title,
      contents: req.body.contents,
      view_count: 0,
      ip_address: "111.111.111.111",
      is_display_code: req.body.is_display_code,
      reg_date: Date.now(),
      reg_member_id: 1,
    };

    result.code = 200;
    result.data = article;
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step5)단일 블로깅 게시글 조회-쿼리스트링방식 라우팅 API 기능 구현하기

router.get("/", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    var blogId = req.query.id;
    console.log("게시글 고유번호 : ", blogId);

    //DB관련 테이블에서 단일 게시글 정보조회

    const blog = {
      article_id: blogId,
      title: "제목1입니다.",
      contents: "내용1입니다.",
      view_count: 0,
      ip_address: "111.111.111.111",
      is_display_code: 1,
      reg_date: Date.now(),
      reg_member_id: 1,
    };

    result.code = 200;
    result.data = blog;
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step6)단일 블로깅 게시글 정보 수정처리 라우팅 API 기능 구현하기

router.patch("/", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    const article_id = req.body.article_id;
    const title = req.body.title;
    const contents = req.body.contents;
    const is_display_code = req.body.is_display_code;

    const article = {
      title,
      contents,
      view_count: 0,
      ip_address: "111.111.111.111",
      is_display_code,
      modify_date: Date.now(),
      modify_member_id: 1,
    };

    //DB 게시글 테이블 해당 게시글 수정처리

    result.code = 200;
    result.data = 1; //수정적용건수
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step7)단일 블로깅 게시글 조회-파라메터방식 라우팅 API 기능 구현하기

router.get("/:id", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    const articleId = req.params.id;
    console.log("게시글 고유번호 : ", articleId);

    //DB관련 테이블에서 단일 게시글 정보조회

    const blog = {
      article_id: articleId,
      title: "제목1입니다.",
      contents: "내용1입니다.",
      view_count: 0,
      ip_address: "111.111.111.111",
      is_display_code: 1,
      reg_date: Date.now(),
      reg_member_id: 1,
    };

    result.code = 200;
    result.data = blog;
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step8)단일 블로깅 게시글 삭제 처리 라우팅 API 기능 구현하기

router.delete("/:id", async (req, res, next) => {
  let result = { code: 400, data: null, msg: "" };

  try {
    const articleId = req.params.id;
    console.log("게시글 고유번호 : ", articleId);

    //DB관련 테이블에서 단일 게시글 삭제처리

    result.code = 200;
    result.data = 1; //삭제건수
    result.msg = "Ok";
  } catch (err) {
    result.code = 500;
    result.data = null;
    result.msg = "Failed";
  }

  res.json(result);
});

Step9)blogAPI.js RESTFul 전용 라우터 파일 app.js 서비스 구성하기

-app.js 파일을 오픈합니다.
- 분홍색 라인이 app.js파일내 추가된 코드들입니다.

- blogAPI 라우터 파일을 app.js 에서 참조합니다.

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

var blogAPIRouter = require("./routes/api/blogAPI");

- blogAPI 라우터 파일의 기본 서비스 라우팅주소를 설정합니다.
-블로깅 라우터 파일내 모든 API기능들은 하기 기본 라우팅 주소 설정을 통해 http://localhost:3000/api/blogs 기본경로를 사용하고 해당 경로를 포함한 라우터 파일내 각각의 기능에서 추가 정의한 라우팅 주소체계를 따르게 됩니다.

app.use("/", indexRouter);
app.use("/users", usersRouter);

app.use("/api/blogs", blogAPIRouter);

3) CORS 설정하기

4) Postman을 통한 샘플 RESTFul API 테스트하기

다음 연계 블로깅에서는 위에서 만들어보본 Node Express RESTFul API 프로젝트에 Swagger 환경을 구성해서 RESTAPI 문서 및 테스트 자동화 환경을 구성해보도록 하겠습니다.
다음 단계 : Node Express 프로젝트 Swagger 적용하기
https://mixedcode.com/blog/detail?pid=5