TIL 80. 2024-04-24

여러 번의 이력서 수정 끝에 만들어진 최종 이력서 후.. ㅎㅎ🤣😀
자기소개 부분만 간단히 명시해본다앙! ㅎㅎ

자기소개

JavaScript, TypeScript, React, Next.js 등 다양한 프론트엔드 기술을 활용하여 총 10개의 팀 및 개인 프로젝트를 수행하며 개발 경험을 쌓아왔습니다. 또한, Java를 이용하여 모바일 앱을 개발한 경험이 있어 백엔드와의 소통에 자신있습니다. 클라이언트 상태 관리에는 Zustand를 활용하고, 서버 상태 관리에는 Tanstack Query를 사용합니다. 이외에도 Redux와 RTK를 사용한 경험이 있습니다. 새로운 기술을 빠르게 습득하고 적용하는데 능숙하여, 최종 프로젝트에서 socket.io와 WebRTC Livekit 라이브러리에 대해 익히고 활용하여 실시간 통신 기능과 화상 서비스를 구현하였습니다. 또한, 매일 학습한 내용을 'Today I Learned' 형식으로 정리하여 자기개발 지속하는 것을 좋아합니다.

프로젝트

프로젝트 설명

• 젭, 줌 등 화상채팅을 기반으로 한 모임에서 다양한 게임을 통해 IceBreaking을 하는 웹사이트 서비스
  
  

프로젝트 내용
1. Github 프로젝트 관리

• Git Flow 전략 도입: 브랜치를 효율적으로 관리하여 프로젝트를 체계적으로 관리했습니다.
• 협업 도구 활용: Git 프로젝트 티켓, 라벨, 마일스톤, 주기를 설정하여 프로젝트의 진행 상황 및 팀원 간의 작업 현황을 쉽게 파악했습니다.
• 프로젝트 안정성 확보:
  • main 브랜치를 잠금 상태로 설정하여 의도하지 않은 변경을 방지
  • dev 브랜치는 Pull Request 및 2명 이상의 승인 후에만 Merge될 수 있도록 조치하여 코드 오류 및 문제점 최소화시켰습니다.

2. Web RTC 기반의 라이브러리인 livekit을 활용

• 마피아 게임의 화상 카메라 및 마이크 기능 구현: Next.js 13 버전 지원 및 React Hooks과 Components를 지원하는 LiveKit 라이브러리를 활용
• 사용자별 토큰 발급: 각 사용자의 카메라 및 마이크 데이터(트랙) 관리
• 사용자 구분: useLocalParticipant()와 useParticipants() 훅을 사용하여 특정 사용자의 카메라 ON/OFF 상태가 다른 사용자에게 영향 미치지 않도록 구현

3. 실시간 양방형 통신을 위한 socket IO 활용

• 실시간 플레이어 정보 업데이트: 플레이어 상태 (참여, 퇴장 등), 역할 할당 (마피아, 시민 등), 게임 진행 상황 (투표, 처형 등)

• Socket.IO 메서드 사용:

  • 이벤트 수신 및 콜백 함수를 통해 수신된 데이터 처리를 위해 socket.on() 메서드
  • 이벤트 송신을 위한 socket.emit() 메서드
  • 특정 방이나 그룹으로 이벤트를 전달하기 위해 to() 메서드
  • 서로 다른 기능을 분리하기 위해 of() 메서드를 사용하여 'mafia'라는 새로운 네임 스페이스를 생성

• 서버 과부하 방지:
  동시에 많은 이벤트가 서버에 전달될 경우, 서버의 과부하를 방지하기 위해 클라이언트 측에서setTimeout() 메서드를 활용하여 일정 시간이 경과한 후, 이벤트가 실행되도록 설정