미리보기

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와 같은 실무 기술까지 학습 및 적용

• 성과:

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

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