● 줌줌투어 개발 여행객들의 취향에 맞는 여행을 안전하게 인증된 현지 전문가들과 연결 시켜주는 O2O플랫폼에 서 App을 1인 개발 하였습니다. 기술 스택 React Native, Nextjs, Typescript 주요 작업 - 결제 시스템 연동(Iamport) - 앱 마이그레이션 (줌줌투어, 줌줌파트너스) - CodePush 연동 - 배포 파이프라인 구성 ● 줌줌 파트너스 개발 현지 전문가들과 여행객들간 소통 및 일정 관리를 위한 App을 1인 개발하였습니다. 기술 스택 React Native, Typescript 주요 작업 - 앱 마이그레이션(줌줌투어, 줌줌파트너스) - 채팅 시스템 구현(Socket) - 코드푸시 연동 - 배포 파이프라인 구성 ● 유저 앱 리부트 & 파트너스 앱 리부트 기존 앱의 패키지들이 의존성 관리가 되어있지 않고, Javascript로 작성되어 있어 타입 추론이 어려운 상태였습니다. 또한 각 기능 및 코드에 관련된 문서가 없는 상태였습니다. 그래서 내부 논의 후 RN 0.70.6버전의 Typescript로 앱을 마이그레이션을 했습니다. 이로 인 해 기존 엉켜있던 의존성 관리를 새롭게 하였고, Typescript를 통해 코드의 가독성을 높혔습니 다. - React Native 0.61 -> 0.74.5로 버전 지속적인 관리 - Javascript -> Typescript로 전환 - 기존 기능 정상적으로 마이그레이션 및 로직 최적화(기존 대비 로딩 성능 7초 -> 2초) - 비정상 종료 버그 발생 1000여건 -> 10건 미만 ● 파트너앱 Socket 연동을 통한 채팅 리스트 및 채팅방 구현 기존 Javascript로 작성되어있던 코드를 Typescript로 새롭게 구현하였습니다. 구현하는 과정에서 신규 UI 적용도 같이 진행하였습니다. - Javascript -> Typescript로 전환 - useSocket 구현하여 socket 관련 함수들 정의 - 신규 메시지 작성 시 React Query의 캐시 업데이트 ● 로깅 연동 및 SDK 수정 유저의 소비 패턴 및 행동 분석을 위해 로깅 툴 도입이 필요했습니다. 팀 내 논의 결과 Google Analytics 4, AirBridge, Notifly 도입을 결정하였습니다 앱SDK 내 특정 이벤트의 타입들이 웹SDK과 다르게 적재되는 것을 확인하였습니다. 그래서 Android와 iOS의 SDK내 브릿지 함수를 추가 작성하여 해당 함수를 호출하도록 변경하 였습니다. - Android와 iOS의 SDK 내 타입 변환하는 브릿지 추가로 웹 SDK와 타입 통일

더보기

● 신규 앱 개발 및 운영 초기 멤버로 팀에 참가하여 키덜트 상품을 사용자들에게 제공하는 B2C 플랫폼의 개발 및 운영에 적극적으로 참여 2인 개발하였습니다. 기술 스택 React Native, Typescript 주요 작업 - 결제 시스템 연동(tosspayments) - 각종 로그 연동(Google Analytics, Google Crashlytics, AirBridge, Facebook, 내부 로깅) - 코드 푸시 연동 - 개발 환경 분리(local, Dev, Staging, Production) - 배포 파이프라인 구성 (Firebase Distribution, Google Play Store, App Store) ● PushNotification과 CodePush의 우선 순위 조절을 이용한 이벤트 이탈률 감소 CodePush가 적용된 상태에서 PushNotification으로 앱 실행 시 강제 종료 및 재 실행으로 인한 이탈이 생겼고, 아래 작업을 통해 해결하였습니다. 문제점 파악 PushNotification을 통한 앱 실행 시 CodePush의 업데이트 시점을 조절해야 할 필요를 느끼게 되었습니다. 업데이트 팝업 추가 선택적 업데이트의 경우 앱 실행 시 사용자가 업데이트를 진행할 것인지 말 것 인지에 대한 팝업이 필요하다고 판단하였고, UpdateDialog를 추가하여 사용자가 업데이트 여부를 선택할 수 있게 개선하였습니다. 코드 푸시 업데이트 시점 변경 checkFrequency 옵션을 ON_APP_START에서 MANUAL로 변경, 초기 앱 실행 시, PushNotification을 통한 접근 인지에 대한 여부를 확인 후 CodePush 팝업 노출 여부를 제어하는 방향으로 업데이트 시점을 변경하였습니다 - PushNotification을 통한 앱 실행 인지에 대한 체크 - CodePush의 installMode값 IMMEDIATE -> MANUAL 변경 - Event 참여율 기존 300대 -> 500대로 상승 ● 이벤트 페이지 개선 작업 이벤트 페이지를 작업을 하면서 안드로이드에서 긴 이미지에 대해 품질 저하가 발생하였고, 아래 작업을 통해 해결하였습니다. 문제점 파악 AOS의 Fresco Downsampling으로 인해 해당 문제가 발생한다는 것을 파악하였습니다. 먼저 원본 이미지의 길이 자체를 줄이는 것에 대해 논의하였고 이미지를 1000px씩 잘라서 사용하는 방법을 채택했습니다. 이미지 렌더링 최적화 렌더링 시 성능이 떨어지는 Image 태그 대신 FastImage로 사용하였습니다. FastIamge의 캐싱 기능 사용과 resize 옵션을 이용해서 이미지 렌더링을 최적화 하였습니다. FlatList 최적화 작업 이미지를 잘라서 사용하면서 너무 많은 이미지가 렌더링 되었고, 이로 인해 프레임 저하가 발생하였습니다. Perf Monitor를 사용하여 20FPS까지 떨어지는 걸 확인했습니다. initialNumToRender를 조절하여 초기 렌더링 개수를 수정, WindowSize를 조절하여 동시 렌더링 개수를 변경, getItemLayout을 사용하여 아이템의 크기를 미리 정해주었으며, keyExtractor를 설정하여 각 아이템의 고유한 키 값을 설정함으로써 중간에 아이템이 변경되더라도 불필요한 리렌더링이 일어나지 않도록 수정하였습니다. - 페이지 로딩 속도 8초 -> 3초로 개선 - 프로모션 페이지 프레임 20FPS -> 60FPS 개선 ● 배포 파이프라인 구성 업무 효율성 증대 및 QA 테스트 등을 위해 빌드 환경을 분리하였습니다. 문제점 파악 테스트 진행 시 env의 값을 변경하는 일이 반복되어, 업무 효율성이 떨어진다고 판단했고, 개발 환경 분리 작업을 주도적으로 맡아 진행하였습니다. 빌드 환경 분리 작업 android는 flavor 셋팅, ios는 스키마 생성 및 각 스키마의 pre-action에 빌드 환경에 맞게 env를 가져오는 스크립트를 작성하여 구현하였습니다. - 빌드 환경 분리로 QA기간 2주 -> 1주 감소 - 기존 배포 주기 3주 -> 2주 변경

더보기

● 서버 상태 및 에너지 사용량 트래킹을 위한 서버 구현 서버가 중단되었을 때 빠르게 확인하고 대처하기 위해서 서버 상태 및 에너지 사용량을 트래킹하여 알림을 보내주는 서버를 구현하였습니다. 미리 정해놓은 Memory, CPU 사용량 등이 최대의 80%에 도달하면 Jandi 메신저를 통해 알림을 보내주어 이슈가 발생하기 전에 미리 빠른 대처를 할 수 있게 개선하였습니다. ● 전력 에너지 사용량 예측을 통한 사용량 관리 시스템 구현 전력의 경우 누진세의 구간이 정해져 있다 보니 해당 구간에 접어들지 않도록 관리가 필요했고 다음과 같은 시스템을 기획 및 구축하였습니다. 10분마다 전력 에너지 사용량을 토대로 향후 사용될 에너지를 계산하여 임곗값을 넘어서지 못하도록 기기들을 관리하는 시스템을 구축하였습니다. 우선 각 기기들을 중요도 순으로 나누어 5개의 그룹으로 묶었습니다. 이후 전력 사용량에 따라 해당 기기들을 순차적으로 제어하여 사용량을 조절하는 시스템을 구현하였습니다. 각 단계별로 순차적으로 실행이 되도록 하되, 예측값이 임곗값보다 현저히 낮아졌다면 다시 역순 으로 기기들을 가동하는 로직을 추가하였습니다. 이 기능을 통해 전력을 효율적으로 관리하였습니다.

더보기