미리보기

기업 지원 프로젝트 수행

• 중소기업 지원을 위한 다양한 기관과 협업
  • 지자체 행정부서, 시의회 등 유관기관과 협업하며 프로젝트 수행
• 프로젝트 기획부터 운영까지 경험
• 회원사 매출액 증가 등 성과

프로젝트 개요

• 개발자들이 의견을 나누고 토론할 수 있는 커뮤니티 코드숲
• 1인 개발 및 유지보수
• Firebase를 활용한 서버리스 아키텍처를 적용, 풀스택으로 구현
• 회원가입, 유저 및 게시글 CRUD 기능 구현
• 서비스페이지 (ID : readme@test.com, PW : password!@)
• Github
• Blog

구현사항

• ProtectedRoute를 통해 권한별 페이지 접근 인가 관리
• Tanstack Query를 통한 서버 상태관리
  • useQuery, useMutation 등 훅을 활용한 커스텀 훅 사용을 통해 코드 재사용성 및 유지보수성 향상
• Tanstack Query를 활용한 Optimistic Update 구현으로 사용자에게 즉각적인 반응 제공
• React-Helmet을 통해 페이지별 meta tag 동적 설정하여 SEO개선
• Github Action을 이용한 배포 자동화(CI/CD) 구축

최적화

• Vite-Bundle-Analyzer, 네트워크 탭, Lighthouse를 활용하여 LCP 및 빌드 소요시간 등 측정과 분석
• 코드 스플리팅을 통해 빌드 소요시간, FCP, LCP 등 성능 평균 30%이상 향상
• 사용자가 등록한 이미지를 용도에 맞게 3가지 사이즈로 Resize 후 저장하여 사용함으로써 이미지 로드 시간 감소로 사용성 향상

Skills

Typescript, React, TailwindCSS, Tanstack Query, Context API, Firebase, Github, AWS S3・CloudFront・Route53

프로젝트 개요

• 집에서 편하게 친구들과의 술자리를 제공하는 영상통화 서비스
• 시연영상
• Github

구현사항

• 다자간 영상통화로 비대면으로 술자리를 가질 수 있습니다.
• 대화 보조 기능과 미니게임을 통해 대화에 재미를 더해줍니다.
• 음성 인식과 동작 인식을 통해 마우스, 키보드 사용을 줄여 손쉽게 이용할 수 있습니다.

트러블슈팅 : 클라이언트 간 게임 시간 동기화 문제

• 문제상황
  • 개별 클라이언트의 성능 차이와 네트워크 상황에 따라 게임 시작 타이밍이 일치하지 않는 문제 발생
• 해결과정
  • 개별 클라이언트가 아닌 서버를 중심으로 시작과 종료 신호를 전달하여 동기화
  • [1단계] 각 클라이언트가 게임 화면으로 이동하여 준비가 완료되면 신호를 서버로 전송
  • [2단계] 모든 유저가 준비 완료되면 서버를 통해 게임 시작 신호 전송

Skills

JavaScript, React, NestJS, Amazon EC2, Amazon Aurora, NGINX, OpenVidu, MediaPipe, WebSpeech API, Github