미리보기

Github

WebRTC 네이티브 웹 API를 사용해 실시간 mesh 토폴로지 화상통화 구현

• Socket.io를 사용한 시그널링 서버와의 통신 구현 및 React-Query를 활용한 데이터 페칭 관리, Zustand를 활용한 소켓 전역 상태 관리

• WebRTC internals 도구를 통해 ice candidate 교환 실패 문제를 발견했고, 백엔드 코드를 읽어보며 ice candidate 소켓 이벤트 핸들러 코드가 잘못되어 있다는 것을 발견하고 페어프로그래밍으로 해결

• 처음엔 FE만의 문제인 줄 알고 시간을 크게 소모했던 문제가 있었지만, 백엔드 코드를 직접 리뷰하면서 소켓 이벤트 핸들러 코드가 잘못됨을 발견. 해당 경험을 통해 문제를 혼자 안고 있는 것보다 협업을 통한 해결이 훨씬 중요하다는 것을 깨닫게 됨

WebRTC 네트워크 품질 모니터링 및 적응형 미디어 스트리밍 구현 (관련 글)

• 팀 테스트 중 네트워크 이슈로 세션 이탈 현상 발견, 해결하기 위한 네트워크 품질 기반 적응형 미디어 스트리밍 기능 구현

• getStats API를 활용해 패킷 손실률, 지연시간, 대역폭 등의 네트워크 지표를 수집하여 분석

• 사용자의 네트워크 품질에 맞춰 미디어 해상도, 비트레이트 등을 동적으로 조절하는 적응형 스트리밍

• 네트워크 제한 시뮬레이션 도구 Clumsy를 사용하여 네트워크 환경 테스트 경험

• 해상도 자동 조절로 연결 끊김 현상 감소

• 해당 기능 구현을 위해 네트워크 지표 학습을 하고, 어떻게 구현할지 단계적으로 기획 후 실제로 테스트까지 해보면서 불안정한 환경에 대한 대응을 생각하고 배울 수 있었음

UX 및 코드 최적화

• 반복되는 401 에러 처리 로직을 Axios interceptor로 중앙화하여 토큰 갱신, 요청 재시도, 세션 만료 알림 등을 일관적으로 처리하는 인증 시스템 개선

• 600줄 이상이던 RTC 코드를 기능별 커스텀 훅으로 분리하여 75% 까지 코드량 감소

• 컴포넌트 책임 분리로 협업 과정에서 새로운 기능을 선언형으로 추가할 수 있게 되어 기능 개발 시간 단축

개인 블로그 및 포트폴리오 목적 웹사이트 (Deploy) (Github)

• Next.js와 Server Route, MongoDB Atlas, Vercel Blobs를 사용한 풀스택 개발

• 블로그 세부 페이지 CLS, LCP 성능 개선 경험

  • Lighthouse 도구로 페이지의 LCP와 CLS의 개선 필요성을 체감

  • next/image 라이브러리 사용, 로딩 방식 변경, 크기 사전 지정 등으로 최적화

  • CLS 수치를 0.8에서 0.02로 개선

  • LCP를 1.9초에서 0.5초로 개선

• 블로그 검색엔진 최적화를 위한 slug 사용 및 메타데이터, robots.txt, sitemap.xml 생성 경험

  • SEO를 위해 블로그 세부 페이지를 서버 컴포넌트로 전환

  • 블로그의 글을 구글 검색 엔진에 색인 성공 경험

  • 웹페이지를 색인하기까지 필요한 과정에 대해서 깊게 이해

• Github OAuth를 NextAuth를 통해 구현

• 다크모드가 활성화된 상태에서 새로고침 할 경우 FOUC 깜빡임 문제를 인라인 스크립트 삽입으로 페이지 로딩 전 배경 색 지정으로 해결하여 UX 향상

교내 개발 동아리 홍보 및 프로젝트 공유 플랫폼 목적 개발 (Deploy) (Github)

• JavaScript → TypeScript, Webpack → Vite 마이그레이션으로 빌드 시간 50% 이상 단축

• TypeScript로 마이그레이션하면서 기존에 사용하던 객체들에 대한 Interface를 작성하면서 TypeScript에 대한 이해도를 올렸고, 마이그레이션 이후 타입 안정성과 관련된 오류 해결에 소모되는 시간 감소

• Firebase를 사용한 인증 시스템 및 데이터 관리 구현

• Firebase의 회원가입 메서드에 포함된 자동로그인 기능을 제외하기 위한 문제 해결 경험 (관련글)

• Intersection Observer API를 활용한 무한 스크롤 및 UI 애니메이션 구현