Home
베팅덕 프로젝트는 두 개의 옵션 중 하나에 코인을 걸며 베팅을 즐길 수 있는 서비스입니다.
실시간 베팅, 채팅 서비스를 구현하기 위해 Socket.IO를 사용하였고, 코인으로 사용하는 3D 오리를 구현하기 위해 Three.js를 사용했습니다.
✔️ 담당 작업:
- 베팅 시스템의 전체 흐름 설계 및 캐시 전략 적용
- 베팅 API 구현
- 베팅 관련 Socket.IO 이벤트 구현
- CI/CD 파이프라인 구축
✔️ 배운 점 및 느낀 점:
- 소켓 IO를 통해 실시간 통신을 구현하며, 실시간 데이터 처리에 대한 이해를 높였습니다.
- Redis를 중점적으로 활용하면서, 데이터 캐싱 및 메모리 설정 작업을 통해 Redis에 대한 이해를 쌓았습니다.
- 프론트엔드와의 협업 과정에서 문서화를 꼼꼼하게 챙기지 못해 프론트 팀원에게 부채가 되었던 적이 있습니다. 문서화의 중요성을 다시 한번 실감했습니다.
✔️ 학습 정리 공유 링크:
✔️ 아쉬웠던 점:
- 부하 테스트 및 안정성 테스트를 충분히 수행하지 못한 점이 아쉽습니다.
- 기능 구현에 집중해 CS 학습을 소홀히 한 것이 아쉽습니다.
✔️ 리팩토링 개인 목표:
- 서비스 안정성을 강화하기 위한 Redis Sentinel 도입
- Redis 메시지 큐를 개선해보기
✔️ 담당 작업:
- 로그인(회원, 비회원)/회원가입 기능 구현
- 베팅 생성 폼 구현 + 성능 개선
- 베팅 관리자 페이지 구현
- 베팅 결과 선택 페이지 구현
- 베팅 종료 후 결과 페이지 구현
- Husky 도입해 커밋 메세지 자동화, Lint 체크 자동화 적용
- UI 개선을 위한 사용자 피드백 반영: 사용자 대상 UI 투표 진행 및 UI 개선
✔️ 배운 점 및 느낀 점:
- CI/CD 과정이 조금 귀찮더라도 한 번 잘 구축해두면 협업에 큰 도움이 된다는 것을 알게 되었습니다.
- 지금 당장 기능 구현이 급해 잘 알지 못 하는 상태에서 라이브러리를 사용해 기능을 구현하려 했을 때 그로 인한 사이드이펙트가 발생할 수 있다는 것을 깨달았습니다. 시간이 많이 없더라도 적어도 지금 당장 구현해야 하는 기능과 관련된 지식은 짚고 넘어가는 게 좋다고 생각하게 되었습니다.
- 관심사를 분리해두지 않았다가 API 명세가 바뀌었을 때 관련 코드를 모두 수정해야하는 불편함을 겪은 이후, 관심사를 분리해두는 것에 대한 중요성을 깨달았습니다.
✔️ 학습 정리 공유 링크:
- 베팅 생성 페이지에서 아이콘이 함께 리렌더링 되는 문제 해결
- useEffect 제대로 사용해서 서버 개발자의 정신 건강 지키는 방법
- commit message에 이슈 번호 추가 자동화 하기
✔️ 아쉬웠던 점:
- Socket의 동작 원리를 충분히 이해하지 못한 상태에서 실시간 기능 구현에만 치중하여 구조적인 완성도가 부족했음
- 베팅 페이지에서 단일 Socket 인스턴스만 필요함에도 불구하고, 페이지마다 Socket을 선언하여 중복 생성 문제를 초래
- 필요하지 않은 API 호출을 방지하지 못해 네트워크 리소스를 낭비
- UI와 로직이 복잡함에도 불구하고 컴포넌트화하지 않아 코드의 재사용성과 유지보수성이 떨어짐
- 에러 처리를 위해 객체 기반 관리가 아닌 단순 문자열 반환 방식을 사용, 확장성과 유지보수성을 저해
✔️ 리팩토링 개인 목표:
- Socket.IO의 이벤트 기반 모델과 연결 관리 방식, 네임스페이스, 룸 구조 등에 대한 심층적인 학습을 통해 실시간 통신의 이해도를 높이고 Socket.IO 사용 코드 개선
- Singleton 패턴을 적용해 Socket 인스턴스를 전역적으로 관리하고, 페이지 간 공유 가능한 구조로 변경하여 성능 최적화 및 자원 낭비 방지
- 요청 로직 최적화를 위해 API 호출 조건에 대한 명확한 검증 로직을 추가하고, 캐싱을 활용해 동일 요청의 중복 전송을 방지
- 에러 코드를 포함한 에러 객체를 정의하고, 에러 핸들링을 중앙에서 관리할 수 있는 구조를 도입. 이를 통해 다국어 지원, 다양한 에러 상황 처리 등 확장성을 고려한 설계로 개선
✔️ 담당 작업:
- 빌드 시간 개선 및 캐싱을 효율적으로 사용하기 위해 Vite을 통한 코드 스플릿, 자원 구조 계층화를 수행
- DX를 위해 개발서버에서 외부 서버 접근시 CORS 문제가 발생하지 않게 프록시 서버 설정
- 협업간 불필요한 의사소통을 줄이기 위한 API 공용 타입 패키지를 생성 및 모노레포 환경 설정
- 서비스의 코인 소유의 의미를 만들기 위하여 3D 오브젝트로 제작된 오리 구매 기능 추가
- 프로젝트의 페이지 아키텍처 설계 및 구현
- 프로젝트의 동적/정적 라우팅 설정 및 사용자 흐름 최적화
- 네트워크 지연 시 사용자가 UI 피드백과 요청 재전송 기능 구현
- FSD 폴더 구조를 이용하여 코드 구조 개선
✔️ 배운 점 및 느낀 점:
- vite이 어떠한 장점이 있고 어떻게 설정해야 효율적으로 빌드를 수행해야 하는지 배웠습니다.
- 서버와 통신을 할 경우 네트워크 지연을 고려하여 어떤 식으로 작업을 수행해야 하는지 배웠습니다.
- 협업간의 의사소통의 중요성에 대해서 배웠습니다.
- 소켓 통신을 수행할 경우 주의해야 하는 점에 대해서 배웠습니다.
✔️ 학습 정리 공유 링크:
✔️ 아쉬웠던 점:
- 프로젝트의 아키텍쳐에서 에러가 발생했을 경우 어떻게 처리할지에 대한 고려를 많이 하지 않고 설계한 것
- 테스트 코드를 작성해보고 싶었는데 한 줄도 작성 해보지 못한 것
- tanstack query에 대해 잘 알지 못하고 사용한 점
✔️ 리팩토링 개인 목표:
- 테스트 코드 작성을 이용하여 안정성 향상
- 프로젝트 아키텍쳐를 에러 상황을 어떻게 다룰 것인지를 고려하여 재설계
- 불필요한 네트워크 작업, 리렌더링 작업 개선