Home

프로젝트 소개

베팅덕 프로젝트는 두 개의 옵션 중 하나에 코인을 걸며 베팅을 즐길 수 있는 서비스입니다.

실시간 베팅, 채팅 서비스를 구현하기 위해 Socket.IO를 사용하였고, 코인으로 사용하는 3D 오리를 구현하기 위해 Three.js를 사용했습니다.

관련 링크

‣ 프로젝트 레포지토리로 이동
‣ 배포 사이트로 이동

팀원 및 개인 목표 소개

정동교[BE]

✔️ 담당 작업:

• 베팅 시스템의 전체 흐름 설계 및 캐시 전략 적용
• 베팅 API 구현
• 베팅 관련 Socket.IO 이벤트 구현
• CI/CD 파이프라인 구축

✔️ 배운 점 및 느낀 점:

• 소켓 IO를 통해 실시간 통신을 구현하며, 실시간 데이터 처리에 대한 이해를 높였습니다.
• Redis를 중점적으로 활용하면서, 데이터 캐싱 및 메모리 설정 작업을 통해 Redis에 대한 이해를 쌓았습니다.
• 프론트엔드와의 협업 과정에서 문서화를 꼼꼼하게 챙기지 못해 프론트 팀원에게 부채가 되었던 적이 있습니다. 문서화의 중요성을 다시 한번 실감했습니다.

✔️ 학습 정리 공유 링크:

• 동시성 문제 제어 방법
• 베팅덕에 적용한 다양한 캐시 전략
• Redis 메모리 설정 및 최적화

✔️ 아쉬웠던 점:

• 부하 테스트 및 안정성 테스트를 충분히 수행하지 못한 점이 아쉽습니다.
• 기능 구현에 집중해 CS 학습을 소홀히 한 것이 아쉽습니다.

✔️ 리팩토링 개인 목표:

• 서비스 안정성을 강화하기 위한 Redis Sentinel 도입
• Redis 메시지 큐를 개선해보기

정지호[FE]

✔️ 담당 작업:

• 로그인(회원, 비회원)/회원가입 기능 구현
• 베팅 생성 폼 구현 + 성능 개선
• 베팅 관리자 페이지 구현
• 베팅 결과 선택 페이지 구현
• 베팅 종료 후 결과 페이지 구현
• Husky 도입해 커밋 메세지 자동화, Lint 체크 자동화 적용
• UI 개선을 위한 사용자 피드백 반영: 사용자 대상 UI 투표 진행 및 UI 개선

✔️ 배운 점 및 느낀 점:

• CI/CD 과정이 조금 귀찮더라도 한 번 잘 구축해두면 협업에 큰 도움이 된다는 것을 알게 되었습니다.
• 지금 당장 기능 구현이 급해 잘 알지 못 하는 상태에서 라이브러리를 사용해 기능을 구현하려 했을 때 그로 인한 사이드이펙트가 발생할 수 있다는 것을 깨달았습니다. 시간이 많이 없더라도 적어도 지금 당장 구현해야 하는 기능과 관련된 지식은 짚고 넘어가는 게 좋다고 생각하게 되었습니다.
• 관심사를 분리해두지 않았다가 API 명세가 바뀌었을 때 관련 코드를 모두 수정해야하는 불편함을 겪은 이후, 관심사를 분리해두는 것에 대한 중요성을 깨달았습니다.

✔️ 학습 정리 공유 링크:

• 베팅 생성 페이지에서 아이콘이 함께 리렌더링 되는 문제 해결
• useEffect 제대로 사용해서 서버 개발자의 정신 건강 지키는 방법
• commit message에 이슈 번호 추가 자동화 하기

✔️ 아쉬웠던 점:

• Socket의 동작 원리를 충분히 이해하지 못한 상태에서 실시간 기능 구현에만 치중하여 구조적인 완성도가 부족했음
• 베팅 페이지에서 단일 Socket 인스턴스만 필요함에도 불구하고, 페이지마다 Socket을 선언하여 중복 생성 문제를 초래
• 필요하지 않은 API 호출을 방지하지 못해 네트워크 리소스를 낭비
• UI와 로직이 복잡함에도 불구하고 컴포넌트화하지 않아 코드의 재사용성과 유지보수성이 떨어짐
• 에러 처리를 위해 객체 기반 관리가 아닌 단순 문자열 반환 방식을 사용, 확장성과 유지보수성을 저해

✔️ 리팩토링 개인 목표:

• Socket.IO의 이벤트 기반 모델과 연결 관리 방식, 네임스페이스, 룸 구조 등에 대한 심층적인 학습을 통해 실시간 통신의 이해도를 높이고 Socket.IO 사용 코드 개선
• Singleton 패턴을 적용해 Socket 인스턴스를 전역적으로 관리하고, 페이지 간 공유 가능한 구조로 변경하여 성능 최적화 및 자원 낭비 방지
• 요청 로직 최적화를 위해 API 호출 조건에 대한 명확한 검증 로직을 추가하고, 캐싱을 활용해 동일 요청의 중복 전송을 방지
• 에러 코드를 포함한 에러 객체를 정의하고, 에러 핸들링을 중앙에서 관리할 수 있는 구조를 도입. 이를 통해 다국어 지원, 다양한 에러 상황 처리 등 확장성을 고려한 설계로 개선

최정민[FE]

✔️ 담당 작업:

• 빌드 시간 개선 및 캐싱을 효율적으로 사용하기 위해 Vite을 통한 코드 스플릿, 자원 구조 계층화를 수행
• DX를 위해 개발서버에서 외부 서버 접근시 CORS 문제가 발생하지 않게 프록시 서버 설정
• 협업간 불필요한 의사소통을 줄이기 위한 API 공용 타입 패키지를 생성 및 모노레포 환경 설정
• 서비스의 코인 소유의 의미를 만들기 위하여 3D 오브젝트로 제작된 오리 구매 기능 추가
• 프로젝트의 페이지 아키텍처 설계 및 구현
• 프로젝트의 동적/정적 라우팅 설정 및 사용자 흐름 최적화
• 네트워크 지연 시 사용자가 UI 피드백과 요청 재전송 기능 구현
• FSD 폴더 구조를 이용하여 코드 구조 개선

✔️ 배운 점 및 느낀 점:

• vite이 어떠한 장점이 있고 어떻게 설정해야 효율적으로 빌드를 수행해야 하는지 배웠습니다.
• 서버와 통신을 할 경우 네트워크 지연을 고려하여 어떤 식으로 작업을 수행해야 하는지 배웠습니다.
• 협업간의 의사소통의 중요성에 대해서 배웠습니다.
• 소켓 통신을 수행할 경우 주의해야 하는 점에 대해서 배웠습니다.

✔️ 학습 정리 공유 링크:

• 네트워크 요청 캐싱이 필요해졌다.
• Vite 설정 가이드
• API 응답에 딜레이가 있던 문제

✔️ 아쉬웠던 점:

• 프로젝트의 아키텍쳐에서 에러가 발생했을 경우 어떻게 처리할지에 대한 고려를 많이 하지 않고 설계한 것
• 테스트 코드를 작성해보고 싶었는데 한 줄도 작성 해보지 못한 것
• tanstack query에 대해 잘 알지 못하고 사용한 점

✔️ 리팩토링 개인 목표:

• 테스트 코드 작성을 이용하여 안정성 향상
• 프로젝트 아키텍쳐를 에러 상황을 어떻게 다룰 것인지를 고려하여 재설계
• 불필요한 네트워크 작업, 리렌더링 작업 개선