소개
Buddha는 실시간으로 커피를 주문하고 알림을 받을 수 있는 서비스 입니다.
Buddha의 사용자는 고객/업주로 나눠집니다.
고객은 카페에 메뉴를 골라서 주문을 합니다.
업주는 주문 요청이 온 메뉴를 수락/거절/완료 상태로 변경하여, 고객에게 알려줍니다.
 |
 |
 |
|---|---|---|
네이버 로그인, 회원가입 |
카페 메뉴 조회 |
장바구니 관리 |
 |
 |
 |
주문 내역 및 현황 조회 |
실시간 주문 현황 조회 |
주문 수락/거절/제조완료 |
아키텍처 설계
수련일지 🏃♂️
개발을 진행하며 겪은 메인 이슈들을 트러블 슈팅한 과정입니다!
BE
🏃♂️ Polling으로 주문 상태를 확인하자! 근데 이거.. 괜찮은건가? - 캐시 도입기
주문 상태 조회나 새로운 주문 확인 API는 Polling 방식으로 서버에서 항상 DB를 조회하고 있었습니다. 이들은 다른 API의 응답시간에 영향을 주었습니다. 인덱스를 추가해봤지만 여전히 해결되지는 않았습니다.
따라서 저희는 캐시를 이용해 이 문제를 해결하고자 했습니다. Redis와 DB를 동기화 해주는 상황에서 여러가지 문제를 마주쳤습니다. 자세한 내용은 노션을 참조해주세요!
결과적으로 캐시를 이용해 서버의 DB 접근 작업이 줄어들고 응답속도를 개선할 수 있었습니다.
🏃♂️ 주문 생성 로직의 여행기, 나는 어디에 있어야 하는거지?- 테스트 코드 & 리팩토링
주문 API가 호출하는 주문 생성 함수는 복잡한 로직을 가지고 있었습니다. 정상적으로 동작하는 API 였기에 바로 리팩토링할 수 없었습니다. 그래서 리팩토링 하기전에 테스트 코드를 짜보고자 했습니다.
만만치 않았습니다. 주문 API 테스트 코드를 작성하면서 여러가지 고민들이 생겨났습니다.
저희 팀에서 테스트 코드를 작성하는 방법 보다는, 테스트 코드를 작성하며 어떤 노동을 했고, 어떤 고민을 했고, 또 어떤 해결책을 떠올렸는지에 대해 이야기합니다.
🏃♂️ Docker 캐시 적용이 웨 않되..? 아 설마?? - Github Action에 Docker 덧붙히기
Docker는 layer라는 개념을 통해 이미지를 구성합니다. 각각의 layer에서 변화를 감지해 변화가 없으면 이전에 캐싱해둔 것을 가져다 쓰는 방식으로 이미지 빌드 시간을 단축합니다.
하지만 github action에서 docker 이미지를 그냥 빌드하는 경우, 로컬 환경과 달리 캐싱이 되지 않는다는 것을 알고 계셨나요? 이 부분을 확인하고 개선한 결과 이미지 빌드 과정은 2분 30초에서 46초로 약 1분 40~50초 정도, 66%가량 줄었습니다.
github action runner상에서 docker 이미지를 위한 캐싱을 적용하는 방법을 알아봅니다.
FE
🏃♂️ 실시간 데이터를 원해 ❗
저희 서비스는 실시간 커피 주문 서비스로 고객과 업주라는 사용자를 두고 있습니다.
고객이 주문을 하게 되면 업주는 새로운 주문을 동기화 할 수 있어야 하고, 업주가 주문의 상태를 바꾸게 되면 고객은 주문의 상태를 동기화 할 수 있어야 합니다.
저희는 이 데이터들을 서버 상태로 구분 짓고 Polling 방식을 사용해 동기화 했습니다.
이 기능을 구현하기 위해 WebSocket과 Polling을 비교해보고 어떤 것이 서비스에 더 적합한 방식일 지 고민했던 내용이 담겨 있습니다.
🏃♂️ 테스트 코드로 버그를 잡아보자
개발을 진행하면서 예상치 못한 각종 버그를 잡고, 코드 리팩토링 시 발생하는 이슈에 대해 빠르게 대응하기 위해 테스트를 도입했습니다.
Jest와 Testing Library, 그리고 서버 Mocking을 위한 MSW를 활용해 테스트 코드를 작성했으며 커버리지 90% 이상을 달성했습니다.
테스트 코드를 작성하는 것이 생산성을 떨어트리긴 했지만 테스트를 통해 기능 개발 및 리팩토링 시 예상치 못한 이슈에 발빠르게 대응하는 것이 가능했습니다.
저희의 테스트 이야기가 더 궁금하시다면 Notion을 확인해주세요 !
🏃♂️ React Memoization 으로 리렌더링 최적화
저희 서비스는 모바일 환경을 타겟으로 기획 됐습니다.
모바일 환경은 접근성이 좋은 대신 PC 환경보다 디바이스 성능, 네트워크가 좋지 않은 경우가 많습니다.
따라서 저희는 FE 최적화를 시도 했고 현재 React Memoization으로 리렌더링 개선, 청크 분리를 통한 번들링 크기 감소를 실현했습니다.
자세한 이야기가 궁금하시다면 Notion을 확인해주세요 !
팀원소개
| J020_김건 | J089_박진우 | J117_오혁진 | J147_이언호 |
|---|---|---|---|
 |
 |
 |
 |
| Gonnnnn | jinoo7099 | qmdl980 | unho-00 |
| Backend | Backend | Frontend | Frontend |