[Typescript/Express] Typescript 를 익힐 겸 백엔드 프로젝트를 해보자! (1)

express Route 를 통해 서버 통신을 할 수 있는 기본적인 URL 매핑을 진행하고, async -await 을 통한 비동기 처리 응답을 가능하게 해보자.

typescript 를 익히는데 그냥 익히기만 하면 재미가 없으니 문법 + 프로젝트를 같이 해보려고 작업을 진행해보고 있습니다.
먼저 프로젝트는 커머스를 타겟으로 하고 있습니다.

오늘은 Route 설정하는 내용 관련해서 공유하려고 합니다.

 

우리가 흔히 Express 라우트 설정하는 부분은 공식페이지만 봐도 알 수 있지만, 한 번 스윽 훑어보면서 이런 점이 다르구나 라는 게 있기를 바랍니다.

import express from 'express';

const app = express().Application;

app.get('/', (req, res, next) => {
  console.log('the response will be sent by the next function ...');
  next();
}, (req, res) => {
  res.send('Hello from B!');
});

위 내용은 공식 라우트 페이지에 있는 내용을 일부 발췌한 것입니다.

기본 형식은 위와 같으나, 이렇게 되면 DB 입출력 같은 비동기적인 처리를 한 이후에 응답을 하는 케이스 처리가 어려울 수 있다. 그래서 보통 async - await 을 사용하여 잡아준다.

export const asyncHandler = asyncFn => {
  return (async (req, res, next) => {
    try {
      return await asyncFn(req, res, next);
    } catch (error) {
      return next(error);
    }
  });
};

이렇게 선언해둔다면 async 메소드 안에서 에러가 발생하는 경우 try-catch 내부에서 next 메소드에 여러 객체를 전달해 express 가 처리할 수 있도록 할 수 있습니다. 또한 불필요하게 여러번 async(req, res, next) 를 호출하지 않고 asyncHandler 라는 이름으로 감싸주면되니 편히 이용할 수 있습니다.

app.get('/', asyncHandler(async (req: express.Request, res: express:Response, next: express.NextFunction) => {
  // await가 필요한 작업을 합니다.
}))

위 작업을 해두면 기본적인 라우트 등록 함수를 만들 수 있다.

 

작업을 하면서 get, post 등에 대해 router 에 하나하나 등록하기가 너무 귀찮았다.. -> 스프링의 영향인걸까...

그래서 decorator 를 써서 자주 사용하는 메서드를 정의했고, 정의한 메소드로 라우트에 자동으로 클래스만 임포트 해주면 등록하도록 기능을 구현했다. ( 많은 블로그, 많은 스택오버플로 글 등을 참고했다.. )

 

다음번엔 우리의 귀찮음을 덜어보자!