미리보기

• 국내 290만 유저와 370개 제휴 골프장을 지원하는 WebView 기반 하이브리드 앱 개발

• 코드 리뷰 문화 개선 및 사내 리액트 스터디 리딩을 통해 함께 성장하는 문화 조성

국내 대표 골프 매체의 다양한 콘텐츠를 제공하는 앱 서비스

React, Typescript, Vite

• KB카드 전용 결제 페이지 개발: KB카드만 결제할 수 있는 기능을 추가 구현하여 맞춤형 결제 시스템을 제공

• React 마이그레이션: 스터디를 통해 학습한 React를 실무에 적용하여 기존 Vue 기반 결제 페이지를 React로 마이그레이션

• Typescript 도입: API 응답 구조 변경으로 발생할 수 있는 데이터 타입 오류를 방지하기 위해 TypeScript를 도입하여 런타임 에러를 사전에 예방하고 코드의 안정성을 높임

골프장 마케팅에 필요한 유저 데이터를 제공하는 웹 서비스

Vue3, Pinia, Highcharts, Vite

• 차트 기능 개발: Highcharts를 사용하여 유저 통계 데이터를 시각화하는 다양한 차트 기능을 개발

• 성능 최적화: Intersection Observer API를 활용해 Viewport에 진입한 차트만 호출하도록 최적화하여, TBT(Total Blocking Time)를 약 90% 단축.

골퍼들을 위한 커뮤니티 앱 서비스

Vue2, Vuex, Webpack

• 게시글 및 댓글 작성 기능 개발

• Optimistic Update 적용: 댓글 기능 구현 시 서버 응답을 기다리지 않고 UI를 즉시 업데이트하도록 최적화. 서버 비용 절감과 응답 지연 최소화를 통해 사용자 경험 개선

• Android 웹뷰 UI 문제 해결: Android 환경의 웹뷰에서 키패드 활성화 시 발생하는 하단 공백 문제를 User-Agent를 활용하여 해결.  Android 환경에서만 bottom 영역을 0으로 설정해 공백을 제거했으며, 이를 통해 유사한 이슈에 대한 대응력 개선. 

• Webpack 번들링 최적화: Webpack의 동적 import와 webpackChunkName 옵션을 활용하여 기능별로 청크를 생성하고, 모듈을 필요한 시점에만 로드되도록 구성함으로써 초기 번들 크기를 줄임

글로벌 골프장을 대상으로 당사 서비스를 홍보하는 다국어 웹 서비스

Vue3,  i18n, Vite

• 다국어 웹사이트 개발:  i18n을 활용해  6개국 언어로 서비스를 지원하는 다국어 웹 개발

• 기기별 맞춤 번역 플러그인 개발: 각국 언어의 문장 길이 차이로 발생하는 레이아웃 깨짐 문제를 해결하기 위해, PC와 모바일 환경에 맞춰 번역 키를 분리 적용. 이를 통해 반응형 웹사이트에서 기기별로 일관된 사용자 경험을 제공