미리보기

Description

시간적, 공간적 제약으로 현장에서 경기를 관람하지 못하는 학생들을 위해, 한국외국어대학교에서 개최되는 모든 공식 축구 경기 정보와 팀 응원 기능을 제공하는 스포츠 중계 서비스
(Website), (GitHub)

• 사용자 설문을 통해 실제 사용자가 겪는 불편함에 관심을 가졌고, 이를 바탕으로 UX를 개선하여 지난 경기 대비 누적 사용자 수를 약 500% 증대
• 파트 별로 사용하는 용어가 달라 의사소통에 장애를 야기한다고 판단했고, 이벤트 스토밍을 통해 용어 통일 및 문서화 하여 의사소통 비용 절감(관련 문서)
• 사용하지 않는 아이콘을 포함하여 불필요하게 빌드 파일의 크기가 비대해진다고 판단하여 트리쉐이킹 기법을 바탕으로 아이콘 컴포넌트 설계를 수정
  • 이를 통해 빌드 파일의 크기를 350KB에서 200KB로 단축 및 FCP 시간을 2.2초에서 1.1초로 단축
• 공용 패키지의 모듈을 내보내는 export 구문을 일일이 작성하는 것에 불편함을 느꼈고, 누락하는 휴먼 에러가 발생할 수 있다고 판단
  • 이에 Export 구문을 자동으로 생성하는 스크립트를 작성하여 불편함을 해소하고 누락 가능성을 완전히 해소
• 분리된 페이지가 하나로 배포되어 빌드 파일의 크기가 불필요하게 커진다는 점에 문제 의식을 느꼈고, 모노레포를 도입하여 페이지 간의 의존성을 해소
  • 이를 통해 초기 로드 JS를 각각 188kB에서 82 kB, 82.2 kB로 절감

Member

PM 1, FE 3, BE 3, Designer 1

Tech Stack

Next.js vanilla-extract ESLint Prettier Axios Tanstack Query pnpm turborepo Amplitude

Description

OTT 시장의 확대와 구독료 인상으로 인해 합리적인 소비를 원하는 이용자에게 각 OTT 플랫폼에 대한 정보 공유와 소통을 가능하게 하는 커뮤니티 서비스
(Website), (GitHub)

Contribution

• GitHub Actions를 이용하여 배포 자동화 및 코드 리뷰 효율 극대화
  • PR 생성 시 팀원들이 작업한 코드가 화면에서 어떻게 보이는지 확인할 수 없다는 문제 발견
  • 생성한 PR 내용을 바탕으로 자동으로 스토리북 배포를 진행하고 배포 URL을 댓글로 작성하는 GitHub Actions을 통해 문제 해결
  • 이로 인해 팀원들은 손쉽게 스토리북 페이지에 접근할 수 있고 직관적으로 코드 파악 가능
• Tanstack Query를 이용하여 API 응답 결과를 캐싱하고 이를 통해 사용자 경험 개선
  • 페이지 이동 시 불필요하게 API를 재호출하는 문제 발생
  • Tanstack Query의 쿼리 캐싱 기능을 이용하여 기존 응답 결과를 이용하도록 수정
  • 이를 통해 네트워크 통신 횟수 조절 및 로딩 시간 감소로 인한 사용자 경험 개선
• 사용자 로그인 여부에 따른 리다이렉트 구현
  • 사용자 로그인 여부에 따른 리다이렉트 처리를 각 페이지에서 처리하여 코드 중복이 많아진다는 문제 발생
  • react-router-dom의 Navigate 컴포넌트를 이용한 Private/Public Router로 선언적인 리다이렉트 구현
• 효율적인 작업을 위해 사전에 팀 컨벤션 정의 (notion)

Member

FE 5

Tech Stack

React Tailwindcss ESLint Prettier Axios Tanstack Query Storybook

100시간 동안 여러 기술을 학습하고 다양한 기업의 기술과제를 수행하는 교육형 인턴십에 참가하였습니다.