Link
사용 기술 및 라이브러리
Frontend
React, TypeScript, Styled-component, ReactQuery 및 Axios
Backend
Spring, Mysql, Redis, AWS EC2, AWS RDS, AWS S3
Design
Figma
담당 분야
Web Frontend Developer
상세 내용
‘이커머스 스타트업인 A사에서 블랙프라이데이 이벤트 시 폭발적인 사용자 주문을 처리할 수 있는 아이디어 구현’ 이라는 해커톤 세부 트랙 주제에 맞추어 구현된 서비스입니다. 기업 측에서 무작정 서버를 확장할 때의 비용적 부담과 단기간의 트래픽 과도화를 고려하여, 서버 확장이 아닌 유저의 체감 대기 시간을 줄일 수 있는 서비스를 개발하였습니다.
동접자 500명 미만의 일시적 트래픽일 경우에는 유저에게 ‘오늘의 운세’를 보여줍니다. 금전운, 애정운, 재물운이 있으며 각 운세를 클릭할 경우 그에 추천하는 상품을 보여주어 상품 홍보 효과를 얻고 유저의 관심을 집중시킵니다. 동접자 500명 이상의 장기적 트래픽일 경우에는 긴 시간 동안 진행할 수 있는 카드 게임을 제공하게 됩니다. 각 카드는 모두 상품 이미지들로 이루어져 있어 유저에게 상품에 대한 호기심을 유발할 수 있습니다. 카드게임의 고득점자를 대상으로 하는 이벤트와 연계하여 사이트 유저에 대한 유치를 기대할 수 있습니다. 위 게임들은 모두 프론트단에서 진행되어 서버와 통신이 필요치 않다는 장점이 있습니다.
두 게임 모두 하단에서 자신의 대기 번호를 볼 수 있어 대기 인원을 확인할 수 있으며, 자신의 대기 번호가 0이 될 경우 상품 페이지로 넘어가는 버튼이 활성화됩니다.
데모 영상
깨달은 점
단기간에 진행되는 해커톤인만큼 스스로의 리액트 개발 실력이 어느 정도인지 확인할 수 있는 좋은 기회였습니다. styled-component를 활용한 CSS 구현 및 리액트 쿼리 등을 활용한 API 통신, 타입스크립트를 통한 레이아웃 구현 모두 이전의 경험을 바탕으로 성공적으로 수행할 수 있었습니다. 카드 뒤집기 게임 및 오늘의 운세, 상품 구매 화면을 맡아 구현하였으며 짧은 시간 안에 완성해야하는만큼 팀원들과 지속적으로 소통하며 필요한 사항을 즉시 반영할 수 있도록 하였습니다. 클라이언트의 니즈를 맞추기 위해서는 기술적 내용뿐만 아닌 경제적 비용 또는 추가 효과 등을 고려해야 함을 알 수 있었으며, 이번 경험을 통해 나의 실력을 확인하였으므로 이를 기반으로 더욱 성장하는 개발자가 되고자 하는 계기가 되었습니다.