프로젝트 소개

현재에도 수많은 예약들이 xxx톡으로 이뤄지고 있습니다. 예약을 확인하고, 자리가 있는지를 확인하는 등 사업자들의 반복적인 행동을 줄여주기 위해 프로젝트를 진행하였습니다.

프로젝트 목표

1. 사업자가 예약시 진행하는 반복적인 작업을 편하게 만들어 줍니다.
   • 채팅 형태소 분석을 통한 예약 진행
   • 명령어 기능을 통해 챗봇 기능을 수행
2. 사용자 (예약자, 사업자)의 사용자 경험을 최대화 합니다.
   • 별도의 메신져를 사용하지 않지 않고 예약을 진행

프로젝트 기술 스택

Frontend

Backend

React, Context API, GraphQL, Apollo client, styled-component

Koa, GraphQL, Apollo server, MongoDB, Mongoose

(링크) 각 기술 스택 선정 이유

프로젝트 특징

• 개발 Flow

  프로젝트를 진행하면서 다음과 같이

  1. 프로젝트에 대한 기획
  2. 구현 방식에 대한 고민
  3. 구현 할 수 있는 방법들
  4. 구현방법을 결정

  을 반복하였습니다.

사용자 권한 처리

Frontend

• HOC를 이용하여, 사용자의 종류에 따른 router 접근 권한을 처리하였습니다.
• HOC를 선택한 이유와 구현 방법
  • 문제점 및 고민
    • 예약을 하는 손님과 예약을 관리하는 사장님, 두 종류의 사용자가 존재합니다.
    • 사용자가 url을 통해 접근 권한이 없는 페이지에 접근하는 것을 막기 위하여 어떻게 해야하는가?
  • 구현할 수 있는 방법들
    • Renderer props를 통해 권한이 있는 경우만 렌더링
    • HOC는 higher order component로, 주로 컴포넌트의 로직을 재사용 하기 위하여 사용
  • 구현 방법 결정
    • 컴포넌트는 props를 UI로 변환하는 반면에, HOC는 컴포넌트를 새로운 컴포넌트로 변환합니다.
    • Renderer props 사용시, 모든 페이지마다 중복되는 코드가 생기는 단점이 있습니다.
    • 중복되어 사용되는 로직을 재사용하기 위하여 HOC를 이용하여 Auth HOC를 구현하였습니다.
    • Jwt에 저장된 type과 인자의 type을 비교하여 랜더링 여부를 결정하였습니다.
  • 구현 코드

    • Auth HOC

      

    • 사용 예시

      

Backend