NodeJS Express를 통해서 API 서버 구축 및 DB 업데이트 하기

이전 포스팅

2023.12.06 - [프로젝트/Github Rest API로 프로젝트 리뷰 대시보드 구성하기] - Github RestAPI를 통해서 Repository 정보 크롤링 및 알림 서비스 구현

2023.12.09 - [프로젝트/Github Rest API로 프로젝트 리뷰 대시보드 구성하기] - Repository 정보 크롤링 및 알림 서비스 구현 요구사항 정리하기

필요 배경 지식

• NodeJS
• Typescript
• HTTP Request 기본 이해

Prerequisite

• NodeJS 설치
• Typescript 환경 설정

Express.js 설치

Typescript 환경설정에 아래와 같이 express를 설치해야한다.

express.js는

npm install express
npm install --save-dev typescript @types/express @types/node

Express.js를 통해서 API 서버 구성하기

기본 API 서버 구성은 아주 쉽다.

아래와 같이 src/index.ts에 파일을 작성한다. (기존에 다른 index.ts 파일이 있다면 server.ts라고 정의해도 좋다.)

아래 코드를 통해서 localhost:3000번 포트 API Server를 정의 할 수 있다.

import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello from TypeScript!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

app.get 줄의 정의는 GET http://localhost:3000/ 와 같은 요청을 주면 response로 'Hello from Typescript' 라는 response를 주도록 한다.

Express의 추가적인 설정들

• Express Middleware: JSON 데이터 처리나 기타 미들웨어를 추가할 수 있습니다.
• 라우트 모듈화: 라우트를 별도의 파일로 분리하여 관리하는 것이 좋습니다.
• 환경 변수 관리: dotenv와 같은 패키지를 사용하여 환경 변수를 관리할 수 있습니다.
• 보안 강화: helmet, cors 등의 보안 관련 미들웨어를 추가합니다.

미들웨어란

미들웨어는 요청과 응답 객체에 대한 접근을 제공하며, 요청 처리 파이프라인의 중간에서 다양한 작업을 수행할 수 있게 해준다.

쉬운 예제로는 기본적으로 내장된 미들웨어를 사용하는 방법이다.

1. 내장 미들웨어 사용하기 (Json)

http request나 response는 json의 형태로 주고 받는 경우가 많다.

그 경우에는 내장되어있는 json 미들웨어를 통해서 이를 더 쉽게 처리할 수 있다.

아래와 같이 app.use(express.json()); 을 추가해서 활용할 수 있다.

import express, { Request, Response } from 'express';

const app = express();

// JSON 요청 본문을 파싱하기 위한 미들웨어
app.use(express.json());

app.post('/api/data', (req: Request, res: Response) => {
  console.log(req.body); // JSON 데이터 출력
  res.send('Data received');
});

// 서버 실행 코드...

2. 커스텀 미들웨어 작성하기

아래의 예시는 로깅하는 미들웨어를 추가했다.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

// 로깅 미들웨어
const loggerMiddleware = (req: Request, res: Response, next: NextFunction) => {
  console.log(`${req.method} ${req.path}`);
  next(); // 다음 미들웨어로 이동
};

app.use(loggerMiddleware);

// 라우트 및 다른 미들웨어 설정...

// 서버 실행 코드...

3. 외부 미들웨어 패키지 사용

NPM에서 제공하는 미들웨어를 사용할 수 있다.

아래는 자주사용하는 cors 미들웨어를 설치하고 사용하는 예시이다.

npm install cors

이를 아래와 같이 app.use(cors())를 추가해서 활용할 수 있다.

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors()); // 모든 요청에 대해 CORS 정책 적용

// 다른 미들웨어 및 라우트 설정...

// 서버 실행 코드...

API 서버를 통해서 DB 업데이트

위의 내용을 이용해서 내가 필요로 하는 DB 업데이트를 위한 API 서버를 만들어 보았다.

위의 설정에서 사용한 json 미들웨어와 cors 미들웨어가 필요하여 아래와 같이 추가했다.

src/app.ts

// src/app.ts
import express from "express";
import cors from "cors";
import userRoutes from "./routes/user.routes";
import repoRoutes from "./routes/repo.routes";

const app = express();
const corsOptions = {
    origin: "http://localhost:8081"
}
app.use(cors(corsOptions));
app.use(express.json());

app.use('/users', userRoutes);
app.use('/repos', repoRoutes);

export default app;

이 부분에는 routes라는 모듈화된 라우터를 추가해서 api-주소/users, api-주소/repos 에 대한 처리를 모듈화 해서 분리했다.

분리된 코드는 아래와 같다.

src/routes/repo.route.ts

// src/routes/repo.routes.ts
import express from 'express';
import { createRepo, getRepos, deleteRepo } from '../controller/repo.controller';

const router = express.Router();

router.get('/', getRepos);
router.post('/', createRepo);
router.delete('/:id', deleteRepo);

export default router;

src/routes/user.route.ts

// src/routes/user.routes.ts
import express from 'express';
import {createUser, deleteUser, getUser} from '../controller/user.controller';

const router = express.Router();

router.get('/', getUser);
router.post('/', createUser);
router.delete('/:name/:company_id', deleteUser);

export default router;

라우터를 통해서 GET, POST , DELETE 요청에 대한 처리를 추가했다.

각 처리 방법은 controller라는 모듈을 따로 두어 추가했다.

src/controller/user.controller.ts

// src/controller/UserController.ts
import { Request, Response } from "express";
import { AppDataSource } from "../../../shared/src/db/database";
import { RepoService } from "../../../shared/src/db/service/repo.service";
import { Repos } from "../../../shared/src/db/entity/repo.entity";

export const createRepo = async (req: Request, res: Response) => {
    try {
        const repoInstance = new RepoService(AppDataSource);
        const repos = new Repos();
        repos.name = req.body.name;
        repos.is_internal = req.body.is_internal;
        repos.owner = req.body.owner;
        await repoInstance.CreateRepos(repos.name, repos.is_internal, repos.owner);
        console.log(repos)
        return res.status(200).send();
    } catch (error) {
        console.log(error)
        return res.status(500).send({ message: "Internal Server Error" });
    }
}

export const getRepos = async (req: Request, res: Response) => {
    const repoInstance = new RepoService(AppDataSource);
    const results = await repoInstance.getRepoList()
    return res.send(results);
}

export const deleteRepo = async (req: Request, res: Response) => {
    const repoInstance = new RepoService(AppDataSource);
    const results = await repoInstance.deleteRepo(Number(req.params.id)).catch((err) => {
        console.log(err)
    })
    console.log("deleted repo : ", results)
    return res.send(results);
}

코드 자체가 기존의 여러 코드들과 얽혀있어서 대충 이런식으로 모듈화를 했음만 이해하면 좋을것 같다.

최종적으로는 src/server.ts를 통해서 api server를 구동할 수 있도록 설정되었다.

server.ts를 실행하면 DB처리에 대한 준비를 하고 이 준비가 끝나면 API 서버가 8080 포트에서 작동하도록 추가했다,

src/server.ts

// src/server.ts
import "reflect-metadata";
import { initDatabase,AppDataSource } from "../../shared/src/db/database"
import app from "./app";

initDatabase().then(() => {
    app.listen(8080, () => {
        console.log("Server is listening on port 8080");
    });
}).catch((error) => {
    console.log(error);
    process.exit(1);
});

단순히 글만보고는 이해가 되지 않을 수 있으니 실제로 작성된 코드는 아래 Repository에서 확인하시길!

[GitHub - ray5273/Github-Review-Dashboard-and-Alarm-Bot

Contribute to ray5273/Github-Review-Dashboard-and-Alarm-Bot development by creating an account on GitHub.

github.com](https://github.com/ray5273/Github-Review-Dashboard-and-Alarm-Bot)

테스트

테스트 코드 추가 및 Postman으로 테스트하기

1. DB를 작동시키고.

2. API server를 아래와 같이 작동시킨다.

서버가 8080포트로 실행됨

3. 그리고 Postman을 통해서 미리 정의한 API를 요청해본다.

user 정보에 대해서 요청을 보냈더니 아래와 같이 정상 동작함을 볼 수 있었다.

위는 요청 보내기, 아래 출력된 부분은 결과다

이 부분을 React등의 Frontend와 연결시켜주면 Admin Page 추가를 위한 작업은 완료된다.