[Web] 자취만렙 프로젝트

해당 프로젝트 GitHub Repository

https://github.com/2024-Hansung-Capstone/ProjectJ-Backend

GitHub - 2024-Hansung-Capstone/ProjectJ-Backend

 

1. 주제 설명

 한성대학교 졸업 작품 프로젝트입니다.

졸업 작품인 만큼 주제에 대한 고민이 꽤 길었고, 주제를 제 주변에서 찾는 것이 괜찮을 것 같다는 생각이 들었습니다.

그러다가 사촌동생이 자취를 시작하면서 자취에 대한 고민이 꽤 많다는 것을 알게 되었고, 조금이나마 도움이 될 수 있지 않을까 해서 자취생을 위한 웹사이트로 주제를 선정하게 되었습니다.

 

 우선, 자취할 때 사용자들이 어떤 음식을 해 먹을지 고민을 많이 할 것 같아서 AI 기능이 탑재된 요리 추천 서비스를 구현하게 되었고, 자취를 이제 막 시작하는 사용자들을 위해서 원룸 위치와 정보를 지도에서 한눈에 볼 수 있게 구현하게 되었습니다.

그리고, 자취하면서 필요한 물품을 사용자들끼리 거래할 수 있도록 중고마켓 서비스를 구현하게 되었습니다.

결과적으로, 자취생들에게 필요한 기능이 모두 갖춰진 웹사이트를 구현하는 것을 목표로 하여 프로젝트를 진행했습니다.

---

2. 개발 기간

2024.01.25 ~ 2024.05.30 (약 4개월)

---

3. 역할

백엔드 총괄, 배포 서버 관리

• 설계
  • ERD 설계
  • 로그인 과정 설계
  • 행정기관 코드 설계
  • 사용자 등급 구성
• 구현
  • 로그인 기능 구현
  • 요리 CRUD 구현, 요리 AI 구현
  • 쪽지 기능 구현
  • 알림 기능 구현
  • 포인트 기능 구현
• 배포
  • AWS EC2 인스턴스 배포
  • 이미지 업로드 기능 S3 사용

---

4. 기술 스택

• 언어: TypeScript
• 프레임워크: NestJS
• 데이터베이스: MySQL
• 배포: AWS EC2, S3, Elastic IP
• 도구: Docker, GraphQL, OpenAI API, CoolSMS

---

5. ERD

---

6. 전체 구조

---

7. 상세 구현 내용

이번 프로젝트의 핵심 기술 스택은 NestJS와 GraphQL로 정했습니다.

GraphQL을 사용한 이유

학교에서는 RestAPI 방식만을 배웠는데 저희 팀에게 생소한 GraphQL을 도입하게 된 이유는 두 가지가 있습니다.
첫 번째로, 원하는 데이터만을 클라이언트가 쿼리를 통해 가져올 수 있다는 이점이 있었기 때문입니다.
두 번째로, 학교에서 정해준 기간이 촉박해서 Swagger와 같은 문서화 처리를 하기에 시간이 부족할 수도 있다고 생각을 하여 다른 방식을 생각을 해 보게 되었습니다.
그러다가 GraphQL 방식은 Playground를 통해 Api가 자동으로 문서화되고, 프론트엔드가 사용해 볼 수 있는 환경이 기본적으로 제공되는 이점이 있다는 것을 알게 되면서 도입하게 되었습니다.

7-1. 회원 관리

• JWT를 이용한 로그인 처리

사용자의 로그인 처리와 로그인 유지를 위해서 JWT 기능을 도입했습니다.

JWT 토큰은 accessToken과 restoreToken으로 구성하였고, accessToken의 만료 시간을 10분, restoreToken의 만료 시간을 2주 정도로 잡았습니다.

따라서, accessToken이 만료되어도 restoreToken을 통해 accessToken 재발급이 가능하게 해서 사용자의 로그인 유지 시간을 안정적으로 증가시켰습니다. 

 

[accessToken 발급]

/**
 * JWT 토큰 생성 서비스 메서드
 * @param email 사용자 이메일
 * @param password 사용자 비밀번호
 * @returns accessToken
 */
getAccessToken(user: User | IUserContext['user']): string {
  return this.jwtService.sign(
    { sub: user.id },
    { secret: process.env.JWT_ACCESS_SECRET, expiresIn: '100m' },
  );
}

 

[restoreToken을 통한 accessToken 재발급]

/**
 * JWT 토큰 만료 대비 refresh 토큰 생성 서비스 메서드
 * @param user 사용자 정보
 * @param context context
 */
getRefreshToken(user: User, context: IContext): void {
  const refreshToken = this.jwtService.sign(
    { sub: user.id },
    { secret: process.env.JWT_REFRESH_SECRET, expiresIn: '2w' },
  );

  context.res.setHeader(
    'set-cookie',
    `refreshToken=${refreshToken}; path=/;`,
  );
}

 

• 로그인이 필요한 Resolver 기능 보호

회원가입, 로그인, 게시글 조회와 같은 기능은 로그인 하지 않은 사용자도 쓸 수 있는 기능이지만 회원 정보 수정, 게시글 수정/삭제 등의 기능은 인증이 된 사용자만 호출이 가능하도록 설정해줘야 했습니다.

따라서, 보호가 필요한 기능에게 `@UseGuards` 데코레이터를 붙혀줬고, `AuthGuard('jwt')`를 인자로 넣어서 해결하려 했지만 오류가 발생했습니다.

Cannot read properties of undefined (reading 'headers') 오류가 발행한 이유

잘 작동되지 않은 이유는 GraphQL 환경에서 request 객체가 기본적으로 제공되지 않아서 request 내에 있는 header 정보를 확인할 수 없기 때문입니다.
따라서, GraphQL에서 UseGuards를 사용할 때 header의 값을 정상적으로 불러오기 위해 AuthGuard를 extend하는 클래스를 따로 만들어주어 해결했습니다.

 

[GraphQL 환경을 위해 생성한 AuthGuard]

export class gqlAuthAccessGuard extends AuthGuard('heoga') {
  getRequest(context: ExecutionContext) {
    const gqlContext = GqlExecutionContext.create(context);
    return gqlContext.getContext().req;
  }
}

 

그리고, 'heoga'라고 이름을 지은 PassportStrategy를 구현했습니다.

export default class JwtAccessStrategy extends PassportStrategy(Strategy, 'heoga') {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: process.env.JWT_ACCESS_SECRET,
    });
  }

  validate(payload) {
    console.log(payload);
    return {
      id: payload.sub,
    };
  }
}

 

이제 @UseGuard()의 인자로 위에서 만든 GqlAuthAccessGuard를 넣어주면 해당 기능은 GraphQL 환경에서도 JWT Access Token 인증이 된 상태에서만 사용할 수 있게 되었습니다.

@UseGuards(gqlAccessGuard)
@Mutation(() => User, {
  description: '현재 로그인 된 사용자의 정보를 수정하는 기능입니다.',
})
async updateUser(
  ...
}

 

7-2. Open AI 도입

요리 레시피 자동 생성을 위해서는 AI 기능 도입이 필요했습니다.

따라서, 저희 프로젝트에서는 Open AI API를 사용하여 레시피를 자동 생성했습니다.

 

저희가 AI를 활용해서 만들어야 했던 기능의 흐름은 아래와 같습니다.

사용자에게 식재료 입력받기 -> 식재료 정보 Open AI에게 전달 -> Open AI가 해당 식재료로 만들 수 있는 요리 선정 -> 해당 요리의 필요 재료와 조리방법 등을 JSON으로 생성 -> 프론트엔드에게 GraphQL Query로 넘겨줌

 

해당 기능을 수행하기 위해 Open AI에서 지원하는 기능 중 assistant 기능을 사용했습니다.

Open AI Assistant

Open AI가 지원하는 기능 중 하나로, 해당 assistant에게 명령할 명령어를 웹에서 미리 지정해놓을 수 있습니다.
그 이후에 해당 assistant의 id를 통해 API를 호출하여 미리 지정해놨던 명령을 수행하고 결과값을 가져올 수 있습니다.
매번 동일한 명령을 수행해야 하고, assistant에서 지원하는 JSON 방식의 return이 유용한 상황이었던 저희 프로젝트에 도입하기 알맞은 기능이라고 생각했습니다.

 

[식재료 정보를 AI에게 전달하여 레시피 정보를 받아오는 Service]

async getRecipes(user_id: string) {
  const myIngredients = await this.findIngredientByUserId(user_id);
  const ingredientsInfo = myIngredients.map((ingredient) => ({
    name: ingredient.name,
    volume: ingredient.volume,
    volume_unit: ingredient.volume_unit,
  }));

  const headers = {
    Authorization: `Bearer ${process.env.OPENAI_SECRET}`,
    'Content-Type': 'application/json',
    'OpenAI-Beta': 'assistants=v2',
  };

  const run = await this.httpService
    .post(
      `https://api.openai.com/v1/threads/runs`,
      {
        assistant_id: 'asst_YFQJAwlpvKdljoQuYnZZHBDt',
        thread: {
          messages: [
            {
              role: 'user',
              content: JSON.stringify(ingredientsInfo),
            },
          ],
        },
      },
      { headers: headers },
    )
    .pipe(map((response) => response.data))
    .toPromise();

  let result;
  do {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    result = await this.httpService
      .get(
        `https://api.openai.com/v1/threads/${run.thread_id}/runs/${run.id}`,
        {
          headers: headers,
        },
      )
      .toPromise();
  } while (result.data.status !== 'completed');

  const response = await this.httpService
    .get(`https://api.openai.com/v1/threads/${run.thread_id}/messages`, {
      headers: headers,
    })
    .toPromise();

  return JSON.parse(response.data.data[0].content[0].text.value).recipes;
}

 

7-3. 지역 코드 관리

사용자 지역 관리를 위해 행정안전부에서 2024년 2월 1일 기준의 행정동 코드 데이터를 사용했습니다.

https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000052&nttId=106692

행정기관(행정동) 및 관할구역(법정동) 변경내역(2024.2.1. 시행) | 행정안전부> 업무안내> 차관보>

 

시/도, 시/군/구, 읍/면/동 단위로 코드가 나뉘어진 것을 파악했고, 아래와 같은 구조로 코드가 구성되어 있었습니다.

ex) 혜화동

1 1 / 1 1 0 / 6 5 0 0 0
---   -----   ---------
시도  시군구    행정동

 

결과적으로, 각각 테이블로 만들어 각 하위 단계의 지역 기준 테이블과 One To Many 관계를 이루어 지역코드를 관리했습니다.

 

7-4. 알림 기능 구현

알림이 생성되는 다양한 상황들이 있어 우선 해당 상황들을 정리했습니다.

1. 신규 가입 시
2. 내 제품에 찜이 생길 시
3. 내가 찜한 제품의 가격이 변경될 시
4. 내 게시글에 좋아요가 생길 시
5. 내 댓글에 좋아요가 생길 시
6. 내 게시글에 댓글이 달릴 시
7. 쪽지가 올 시

이 외에도 이후 다양한 알림이 추가될 수 있어서 효과적으로 관리할 수 있는 구조가 필요했습니다.

그래서, HTTP의 Status Code 관리 방식과 비슷하게 알림 상황들을 관리했습니다.

• 1XX : 사용자 관련
• 2XX : 좋아요/찜 관련
• 3XX : 게시글 관련
• 4XX : 쪽지 관련

결과적으로, 알림 상황 별 메시지를 관리하는 클래스를 따로 만들었고, 여기에서 상황 별로 코드를 부여했습니다.

또한, 코드 별로 해당 코드의 상황에 맞는 message를 갖도록 구현했습니다.

 

[알림 상황 별 message 관리 클래스]

export class NotificationMessages {

  /**
   * 알림 메시지 생성 메서드
   * 알림 코드에 따라 알림 메시지를 생성합니다.
   * @param notification 메시지를 조회할 알림 정보
   * @returns 생성된 알림 메시지
   */
  async getMessage(notification: Notification): Promise<string> {
    let message = '';
    try {
      switch (notification.code) {
        case '100':
          message = `${notification.user.name}님의 신규 회원가입을 환영합니다!`;
          break;
        case '200':
          message = `${notification.like.user.name}님이 '${notification.used_product.title}' 제품을 찜하였습니다.`;
          break;
        case '201':
          message = `내가 찜한 '${notification.used_product.title}'의 가격이 ${notification.used_product.price}원으로 변동되었습니다.`;
          break;
        case '202':
          message = `게시글 '${notification.board.title}'에 ${notification.like.user.name}님이 좋아요를 눌렀습니다.`;
          break;
        case '203':
          message = `'${notification.board.title}' 게시글에 단 내 댓글에 ${notification.like.user.name}님이 좋아요를 눌렀습니다.`;
          break;
        case '300':
          message = `게시글 '${notification.board.title}'에 ${notification.reply.user.name}님이 댓글을 남겼습니다.`;
          break;
        case '400':
          message = `'${notification.letter.sender.name}님이 ${notification.letter.category} 카테고리에서 쪽지를 보냈습니다.`;
          break;
        default:
          message = '알 수 없는 알림입니다.';
          break;
      }
      return message;
    } catch (e) {
      console.error(e);
      throw e;
    }
  }
}

 

그리고, 알림 정보가 있는 엔티티에서 해당 알림이 사용자 관련 일 수도 있고, 게시글이나 댓글, 좋아요 혹은 쪽지 관련 알림 일 수도 있기 때문에 모든 정보가 들어올 수 있도록 구성하고 해당 알림과 관련 없는 필드는 NULL을 넣는 방식으로 구현했습니다.

 

그리고, Strategy 기법을 사용하여 알림 별로 필요한 데이터를 가져와 매칭하고 메시지를 구성하여 알림을 생성할 수 있도록 했습니다.

 

[쪽지 관련인 400번대 알림일 때 적용할 strategy]

export class LetterNotificationStrategy implements NotificationStrategy {
  constructor(
    private letterService: LetterService,
    private notificationRepository: Repository<Notification>,
  ) {}

  async createNotification(
    entity_id: string,
    code: string,
  ): Promise<Notification> {
    const letter = await this.letterService.findById(entity_id);
    return await this.notificationRepository.save({
      user: letter.receiver,
      code: code,
      letter: letter,
    });
  }
}

 

최종적으로 해당 알림을 생성시킬 상황의 service에서 알림을 생성하는 service를 불러와 알림 구현을 성공할 수 있었습니다.

 

7-5. 배포를 위한 패키징

로컬이 아닌 aws의 EC2 인스턴스 환경에서 수월한 배포를 위하여 Docker를 사용했습니다.

Docker의 사용으로 다른 운영체제 환경에서도 동일한 프로젝트 실행 환경을 갖추어 안정적인 실행이 가능했습니다.

 

[Dockerfile]

# 1. 운영체제 설치(node 최신버전과 npm과 yarn이 모두 설치되어있는 리눅스)
FROM node:latest

# 2. 내 컴퓨터에 있는 폴더나 파일을 도커 컴퓨터 안으로 복사하기
COPY ./package.json /ProjectJ-Backend/
COPY ./yarn.lock /ProjectJ-Backend/
WORKDIR /ProjectJ-Backend/
RUN yarn install
ENV NODE_OPTIONS="--max-old-space-size=1024"
COPY . /ProjectJ-Backend/

# 3. 도커안에서 index.js 실행시키기
CMD yarn start:dev

ENV NODE_OPTIONS="--max-old-space-size=1024"를 넣은 이유

AWS에서 Free Tier를 사용하기 때문에 저장 공간과 메모리가 한정적이었습니다.
Swap 메모리를 통해 어느 정도 메모리를 올렸지만, JavaScript heap out of memory 오류가 발생하여서 최대 힙 메모리 제한을 위해 해당 옵션을 추가했습니다.

 

데이터베이스인 MySQL 환경도 필요하였는데, EC2 인스턴스에서 MySQL을 설치하는 대신에 Docker의 컨테이너를 사용하면 간편할 것 같았습니다.

따라서, 두 환경을 하나로 관리하기 위해 docker-compose를 도입하였습니다.

 

[docker-compose.yaml]

version: '3.7'

services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./src:/ProjectJ-Backend/src
    ports:
      - '${SERVER_EXTERNAL_PORT}:${SERVER_INTERNAL_PORT}'
    env_file:
      - ./.env.docker

  database:
    image: mysql:latest
    environment:
      MYSQL_DATABASE: ${DATABASE_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
    ports:
      - '${DATABASE_EXTERNAL_PORT}:${DATABASE_INTERNAL_PORT}'
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

 

volume을 지정하여 docker-compose가 down 되더라도 데이터가 사라지지 않도록 설정했습니다.

 

7-6.  배포

배포를 위해 EC2 인스턴스를 Free Tier 성능으로 생성하였습니다.

• 운영체제: ubuntu 
• 인스턴스 유형: t2.micro
• 지역: ap-northeast-2

SSH를 통해 인스턴스에 접속하였으며, 편리한 접속을 위해 아래와 같이 설정을 하였습니다.

 

[ .ssh/config ]

Host project
    HostName 54.180.182.40
    User ec2-user
    IdentityFile ~/key/ssh/project_key.pem

 

24시간 무중단 배포를 해야 했는데, Docker를 사용하고 아래와 같은 명령어를 통해 간단히 배포하였습니다.

 

[백그라운드 실행]

docker-compose up --build -d

 

[종료]

docker-compose down

 

---

8. 실행 시나리오

8-1. 회원가입, 로그인

• 회원가입: 이름, 아이디, 비밀번호, 이메일, 전화번호, 성별, 생년월일을 입력해야 회원가입이 가능합니다.
  • 인증번호 발송을 통해서 안전성을 확보해줍니다.
• 로그인: 회원가입 후, 아이디와 비밀번호를 입력하면 로그인이 됩니다.

8-2. 요리

• 자취생들이 냉장고에 있는 재료를 입력하면 AI가 레시피를 추천해줍니다.
• AI가 추천해준 레시피를 사진과 함께 요리 게시판에 올려 다른 자취생들과 공유할 수 있고, 조회수가 가장 높은 게시글은 인기 레시피 BEST에 보여줍니다.
• 또한, 재료/요리를 검색하면 필터링 되어서 보여줍니다.

8-3. 원룸

• 원룸 api를 이용하여 내 주변 원룸과 그에 대한 정보를 지도로 확인이 가능합니다.
• 또한, 조회수가 많은 순으로 그 지역의 인기 원룸 Best 3를 보여줍니다.

8-4. 자취생 메이트

• 동네 자취생 친구를 만들 수 있는 페이지이며, 회원가입 때 사용자에게 받은 입력값을 바탕으로 친구를 추천하여 지역 커뮤니티를 활성화합니다.
• 추천 자취생 메이트 외에도 본인이 원하는 조건을 필터링하여 추천 메이트에 뜨지 않는 친구와도 연락이 가능합니다.
• 본인이 원하는 자취생 친구를 찾았으면 쪽지를 주고 받을 수 있습니다.

8-5. 중고마켓

• 사용자와 같은 지역에 거주하는 유저가 올린 중고 물품을 볼 수 있고, 쪽지를 통해 거래를 할 수 있습니다.
• 또한, 검색을 통해 필요한 중고 물품을 찾을 수도 있습니다.
• 올린 게시글을 수정, 삭제할 수 있고 찜하기를 통해 원하는 중고 물품을 찜해놓을 수 있습니다.

8-6. 커뮤니티

• 자취생들에게 필요한 정보들을 다른 자취생들과 공유할 수 있습니다.
• 게시글을 사진과 함께 올리면 올린 시간, 조회수 등을 볼 수 있고, 조회수가 가장 많은 게시글은 상단에서 볼 수 있습니다.
• 또한, 공감하는 게시글에 좋아요와 댓글, 답글, 댓글 좋아요를 남길 수 있고, 제목이나 내용을 검색해서 해당하는 게시글을 찾을 수도 있습니다.

8-7. 쪽지

• 중고마켓과 자취생 메이트 카테고리를 사용하는 중에 다른 사용자와 쪽지를 주고 받을 수 있고, 상대방이 내 쪽지를 읽었는지도 확인이 가능합니다.
• 카테고리별로 쪽지가 나눠져서 나오고, 송신함과 수신함 각각 확인이 가능합니다.

8-8. 알림

• 좋아요와 댓글, 쪽지 등을 받거나 내가 찜한 물품의 가격이 변동되는 등의 상황일 때, 알림을 통해 사용자에게 정보를 전달합니다.
• 알림은 오래된 순으로 밑에서부터 배열되고, 개별 삭제와 전체 삭제가 가능합니다.

8-9. 포인트

• 사용자들의 커뮤니티 활동에 동기부여를 제공하기 위해 포인트 서비스를 만들게 되었고, 게시글을 작성하는 등의 활동을 할 경우에 포인트를 제공하도록 구성했습니다.
• 포인트 별로 등급을 매겨 사이트 이용에 재미를 더했습니다.