미리보기

Github 바로가기

배포주소 이동하기

Mock API 및 테스트 환경 구축 → MSW이야기로 이동(클릭), Test Coverage이야기로 이동(클릭)

• 백엔드 API 개발 전에도 프론트엔드 개발이 원활히 이루어지도록 Mock Service Worker(MSW)를 도입해 개발 및 테스트 환경을 구축

• 초기에는 MSW 초기화 전에 React 애플리케이션이 렌더링되어 API 요청이 가로채지지 않는 문제가 있었고, worker.start()를 prepare() 함수로 감싸 비동기로 초기화하여 문제를 해결

• 개발 환경뿐 아니라 테스트 환경에서도 MSW를 활용하여 실제 서버와 독립된 상태에서 테스트를 수행 중

• Vitest + Istanbul을 기반으로 커버리지 측정을 도입해, 1차 기준 53.5% → 70% 이상 확보를 목표로 테스트 품질 개선을 진행 중

성능 및 사용자 경험 개선 → 자세한 이야기로 이동(클릭)

• 상품 목록 페이지의 UX와 검색 최적화를 위해 Lighthouse 리포트를 분석하고, LCP(Largest Contentful Paint) 및 SEO 점수를 중심으로 개선 작업을 수행

• 초기 측정 시 LCP는 1,450ms 수준, 이미지 로드 시간 140ms으로 측정되어 퍼포먼스 개선이 필요한 상황

• 상위 노출 예상 이미지에 loading="eager" 및 fetchpriority="high" 속성을 적용해 로딩 우선순위를 명시하고, 이미지 포맷을 WebP로 전환하여 용량을 최적화

• LCP는 1,450ms → 1,050ms (약 27.5% 개선), 이미지 로드 시간은 140ms → 40ms (71% 개선)으로 단축되었고, SEO 점수는 82점 → 100점으로 개선 (22% 상승)

배포 환경 구축 → 배포 환경 구축 이야기로 이동(클릭) , SEO 점수 개선 이야기로 이동(클릭)

• GitHub Actions를 활용하여 코드 푸시 또는 PR 병합 시 자동으로 테스트, 빌드, 배포가 이루어지는 파이프라인 구축
  .store 도메인에 DNS 레코드를 설정하고, HTTPS 인증서를 적용하여 보안과 신뢰성을 강화

• 초기 설정에서 Slack Webhook URL 오류로 인해 알림이 전송되지 않는 문제 발생 → Webhook 재설정 및 JSON 포맷 수정으로 해결

• 초기 측정 시 SEO 점수는 82점으로 측정되어 SEO 개선이 필요한 상황

• CloudFront 사용자 정의 오류 응답을 /index.html로 처리하여 SPA의 라우팅 문제 해결

• 각 페이지에 동적 메타 태그를 설정(react-helmet-async) 하여 검색 엔진 인덱싱과 SNS 미리보기 대응이 가능하도록 개선

• SEO 점수는 82점 → 100점으로 개선 (22% 상승)

느낀 점

• React의 렌더링 구조와 브라우저의 요청 흐름을 깊이 이해하며 MSW, 테스트 초기화 문제 등을 해결

• 테스트 커버리지 도구(Istanbul)를 활용해 코드의 취약 지점을 시각적으로 분석하고, 이를 기반으로 개선 작업을 진행하며 효율적인 작업 방식과 코드 품질 관리의 중요성을 체감

• Lighthouse 기반의 성능 분석을 통해 LCP 및 SEO 최적화를 직접 수행하며, 기술적인 수치 개선뿐 아니라 실제 사용자 경험에 긍정적인 영향을 주는 개선의 의미를 경험

• 배포 프로세스 자동화와 Slack 알림 연동을 통해 문제를 신속히 파악하고 대응하며, 협업과 운영 관점에서도 서비스 품질을 높이는 것에 기여

Github 바로가기

시연 동영상 바로가기

Polingo - 번역과 언어 학습을 지원하는 올인원 어플리케이션

담당 역할 및 기여 내용

• UI 및 API 통신 총괄:

  • 회원가입 및 로그인 스크린 UI 설계 및 OAuth 2.0 기반 Kakao, Google 로그인 구현.

  • 홈, 번역, 단어장, 문제집, 뉴스, 상황별 회화집 스크린의 UI 및 API 통신 로직 개발.

  • 사용자 경험을 개선하기 위한 화면 간 데이터 흐름 최적화.

트러블 슈팅

문제 1: Kakao 로그인과 Google 로그인 방식의 차이로 인한 문제

• 이유: Kakao 로그인은 WebView를 통해 토큰을 추출하는 방식으로 진행되었으나, Google 정책상 WebView 기반 로그인 방식이 지원되지 않아 400 에러 발생

• 해결:

  • expo-auth-session/providers/google을 활용해 Google의 OAuth 2.0 인증 플로우를 구현하여 문제 해결

  • React Native 환경에서 권장되는 방식으로 Google 로그인을 구현, Google.useAuthRequest 훅을 통해 인증 요청 생성 및 처리

  • WebView 기반 방식을 대체해 문제를 효과적으로 해결.

문제 2: 뉴스 스크린의 성능 문제

• 이유: 뉴스 디테일 스크린에서 각 단어에 이벤트를 개별적으로 설정해 렌더링하던 방식으로 인해 데이터 양이 많아질수록 속도 저하 발생.

• 해결:

  • React-Query 도입: Cache 기능을 활용해 한 번 로드한 뉴스 데이터를 재사용, 로딩 속도 7초 → 0.1초로 단축.

  • ActivityIndicator 사용: 데이터 로딩 중 사용자에게 진행 상태를 명확히 전달해 UX 개선.

성과 및 개선 효과

• OAuth 2.0 인증 플로우 구현으로 Google 정책 준수 및 크로스플랫폼 로그인 기능 안정화.

• React-Query와 렌더링 최적화로 뉴스 스크린의 성능 문제 해결, 로딩 시간 98.6% 단축.

Github 바로가기

배포주소 이동하기

대학생을 위한 팀 프로젝트 관리 플랫폼, Colla

담당 역할 및 기여 내용

• Custom Hook 테스트 코드 작성:

  • Custom Hook의 테스트 코드 작성: 프로젝트의 다양한 커스텀 훅(useMenu, useOverlay, useOutSideClick 등)에 대한 테스트 코드 작성 및 검증을 통해 기능의 안정성과 코드의 신뢰도를 확보

트러블 슈팅

문제 내용:

• useOutSideClick.tsx와 같은 사용자 상호작용 기반 Hook의 테스트 과정에서 컴포넌트 외부와의 상호작용을 효과적으로 검증하는 방법을 찾는 데 어려움을 겪음.

해결 방법:

• @testing-library/react와 user-event를 활용하여 테스트 컴포넌트를 생성하고, 컴포넌트 외부와 내부 요소의 클릭 이벤트를 시뮬레이션하여 문제 해결.

• 테스트 컴포넌트는 커스텀 훅의 기능과 의도를 명확히 검증하기 위해 설계되었으며 복잡한 상호작용을 재현하기 위한 효율적인 선택.

• 결과적으로 유사한 상호작용 기반 Hook의 테스트 작성에도 활용 가능한 패턴과 방법론을 마련.

성과 및 개선 효과

• Hook 테스트 패턴을 표준화하여 유사 기능 추가 시 검증 비용 감소 및 테스트 재사용성 증가.

• 테스트 코드의 가독성과 유지보수성을 높이며, 팀원들이 쉽게 이해하고 활용할 수 있도록 기반 마련.

• 발표 주제: 다중 입력 기반 통합 번역 및 학습 플랫폼 Polingo 구축 및 시스템 설계

• 성과: 학술대회에서 은상 수상

• 역할: 프론트엔드 트랙장 및 해커톤 팀장

• 주요 활동:

  • 총 두 번의 해커톤에서 팀장으로 프로젝트를 주도하며 팀원들과 협업

  • 프로젝트 관리 및 팀원 간 의견 조율을 통해 효율적인 개발 환경 조성

  • 프론트엔드 관련 지식을 공유하며 팀원들의 성장을 지원

• 성과:

  • 팀 프로젝트를 성공적으로 완수하며 팀워크와 리더십 강화

  • 갈등 해결 및 협업 경험을 통해 조직 내 소통 능력 향상

• 역할: 프론트엔드 트랙 부원 (아기사자)

• 주요 활동:

  • 기본적인 프론트엔드 지식 습득 및 실전 적용

  • 총 3번의 해커톤에 참가하여 팀 프로젝트 경험 축적

  • HTML, CSS, JavaScript와 같은 기초 기술에서 React와 같은 실무 기술까지 학습 및 적용

• 성과:

  • 해커톤 참여를 통해 실력을 단기간에 비약적으로 향상

  • 협업 기반 프로젝트 경험을 통해 실무 감각과 팀워크 강화