미리보기

영업양수도에 따른 회사변경

Cartini가 딜러타이어에 인수 합병 되었어요.

Codepush 자체 서버 구축

Microsoft에서 제공하는 AppCenter가 종료됨에 따라, Codepush 서버를 구축해야했습니다. Codepush Standalone

Repogitory를 활용하되, Azure 대신 AWS S3를 통해 구축했습니다. 덕분에, 기존 평균적으로 2-5초 걸리던

환경이 1-3초 이내로 더 빠르고 안정적인 앱 업데이트를 사용자가 경험 할 수 있게 되었습니다.

App CI/CD

Codepush를 구축하면서 좀 더 안정적이고 편안한 App 배포 환경을 구축하고 싶었습니다. github Action과 fastlane을 활용해 자동화 라인을 구축했습니다.

타이어픽 앱 개발을 담당하고 있어요.

Codepush 및 버전 업데이트 전략 설계

사용자에게 불편함 없이 자연스러운 앱 업데이트를 제공하기 어려웠어요. 특히, Codepush 업데이트 시점과 방법에 대한 불확실성이 있었고, 네이티브 변경 시에는 버전 관리가 복잡했어요.

1. 업데이트 체크 및 적용: 유저가 앱을 실행하거나 Background에서 Foreground로 돌아올 때 특정 페이지에서 Codepush 업데이트 여부를 체크하도록 설계했습니다. 업데이트가 가능할 경우, 사용자를 업데이트 페이지로 안내해 원활한 업데이트를 진행할 수 있게 했어요.

2. 버전 관리: Native나 라이브러리의 중요한 변경이 발생하면 앱스토어를 통해 업데이트를 유도했어요. 반면, 중요한 내부 로직 변경 시에는 마이너 버전을 업데이트해 신규 유저가 항상 최신 버전을 받을 수 있도록 했어요.

APP Size 다이어트

기존 App의 용량은 70~80M로 컸으며, Codepush Bundle 용량 또한 30~40M 정도 되어, Codepush 서버 상태에 따라 느린 속도로 Bundle이 다운로드되거나, 업데이트가 중단 되어 Rollback User로 변경 되는 등의 서비스에 영향을 미쳤어요.

1. 라이브러리 최적화: Codepush Bundle에는 라이브러리도 포함되기 때문에, 용량이 큰 Design UI 라이브러리를 제거하고, 직접 컴포넌트를 제작해 대체했어요.

2. 자산 최적화: 불필요한 Asset을 제거하고, 필요한 경우 S3에서 다운로드하도록 변경하여 Bundle 용량을 10MB 이하로 줄였습니다. 이로 인해 앱의 전체 용량도 40MB대로 축소했어요.

DeepLink 설계

유저를 원하는 화면으로 이동시키는 것은 중요한 해결 과제 였어요. 로직에 따라 유저를 이동시켜야할 때가 있었고, 마케팅 이벤트에서 유입될 때도 필수적이였어요.

• 비개발자더라도, 쉽게 유저를 원하는 곳으로 보낼 수 있도록 딥링크 가이드를 작성해 공유하고, 사용할 수 있도록 했어요.

• 직관적인 queryParams로 설계했고, 덕분에 마케팅팀도, Web 담당자도 쉽게 앱 내 원하는 곳으로 이동할 수 있게 됐어요.

• Firebase Dynamic Link,AirBridge 그리고 OneLink까지 다양한 Link 솔루션을 다뤘어요.

상태관리 개선

Navigation Parmas, Zustand, React Query가 나열되어 있고 어떤 기능을 하는지 정확하게 알 수 없어, 디버깅하거나, 오류를 추적하는 것이 꽤나 어려웠어요.

• 상태 관리 방식 개선: 단편적인 데이터 전달에는 Navigation Params를 사용하고, 전역적인 상태 관리는 Zustand를 통해 관리하도록 개선했어요.

• Custom Hook 활용: 복잡한 상태들을 Custom Hook으로 정리해 View와 Business 로직을 나누어 가독성을 개선했어요.

Data Fetching 개선

React Query로 서버 상태를 관리할 때 불필요한 호출이 많고, Background에서 Foreground로 돌아왔을 때 데이터 갱신이 되지 않는 문제가 있었어요.

1. 호출 최적화: Stale time과 cache time을 조절하여 불필요한 서버 호출을 기존의 1/3로 줄였습니다.

2. 데이터 갱신: Background에서 Foreground로 돌아올 때 필요한 데이터를 갱신하도록 개선했습니다.

컴포넌트 제작 및 라이브러리 관리

기존 UI 라이브러리가 무겁고 커스텀이 어려워 사용성 개선이 필요했고, 너무 많은 라이브러리 의존성이 있었어요.

1. 커스텀 UI 구현: 무거운 UI 라이브러리들을 제거하고, 대부분의 UI 컴포넌트를 직접 구현해 용량을 줄였어요.

2. 사용성 개선: 기존 UI 컴포넌트를 새롭게 제작하여 사용자 경험을 개선했어요.

3. 불필요한 라이브러리 제거: 사용하지 않거나, 관리되지 않는 라이브러리들을 제거하여 의존성을 줄였어요.

React Native로 6개의 크고 작은 프로젝트를 담당하여 개발 했습니다.

• 위치를 기반으로 예체능 관련 시설 및 매매 커뮤니티 플랫폼.
• 채팅이 포함된 식자재 직거래 플랫폼
• 화장 구매 플랫폼
• 정비소 예약 및 운영 결제 플랫폼
• 쇼핑몰 광고 플랫폼
• 예술품 또는 미술 아티클 플랫폼

사내 React Native WebView App BoilerPlate 제작

• Web을 간단하게 WebApp형식으로 고객들의 제작 요구가 많아지자, React Native로 간단하게 WebApp을 구축할 수 있는 사내 BoilerPlate를 제작했습니다.

Project 관리 Notion Template 제작

• 기존 방식은 Project Histroy나 Project 관련 내용을 보기가 매우 불편했습니다. 특히 과거에 완료된 프로젝트를 유지 보수 해야 하는 경우엔 더 어려웠습니다. 이를 Notion을 활용하면 해결 할 수 있을 거라 생각해 Project 관리 페이지를 Notion Template으로 제작해 사내에서 사용할 수 있게 요청했으며, 새로운 프로젝트부터 도입되었습니다.

사내 React 세미나 발표

• 사내 React 세미나를 진행하여, 신규 개발자 또는 BackEnd 개발자에게 React의 작동 방식이나 원리, 최근 FrontEnd의 동향에 대한 내용을 발표했습니다.