- 팝업 스토어 정보를 볼 수 있는 POPS(팝스)앱 관련 모든 프론트엔드 관련 개발, 보수 및 유지를 맡음
- Nuxt.js로 회사 웹사이트 및 B2C 웹사이트 개발함 (중)
- Golang을 사용하여 백엔드 코드 기여함
- 기획에 없었던 UI/UX 및 기능을 제안하며 앱 개선방향을 상시 고민
- 테스트 시나리오를 꼼꼼히 정리하여 앱 배포 전 테스팅을 함
- 직접 만들 수 있는 한 외부 패키지를 사용하지 않으며 다른 패키지에 대한 의존성을 최소화함
POPS앱 관련:
(1) 성능 개선 (입사 초기에 기존 코드를 처음부터 끝까지 리팩토링):
- 과도한 메모리 사용 개선: RSS 200mb + 줄임
- 불필요한 페이지 및 각 widget 리렌더링 최소화 (Builder + Provider의 context.select, AutomaticKeepAliveClientMixin 구현)- 반복적인 http request 보내는 메소드를 하나로 통일 및 비동기 함수의 효율적인 호출 구현
- 전역 변수 및 함수 최소화, 타입선언을 최대한 활용하여 불필요한 메모리 사용 최소화
(2) 개발 생산성
- 직접 만들 수 있는 한 외부 패키지를 사용하지 않으며 다른 패키지에 대한 의존성을 최소화함
- 재사용 가능한 공통 위젯 개발 (Textfield, Text Button, Dropdown, Dialog, Image, 위로가기 버튼 등)
- 각 페이지/탭을 패키지로 만들어 더 깔끔하고 확장성에 편리한 코드로 분리 (중)
- 배포 전 테스트를 각 디바이스에 직접 빌드하던 시스템을 internal testing 및 test flight을 통하여 각각 테스트 앱을 직접 다운받는 시스템으로 변경
(3) Design Pattern & State Management
- 기존 합쳐져있는 비즈니스 로직 + UI를 MVVM + Repository, Service 구조로 바꿈으로 관심사의 분리 (Separation of Concern) 구현
- repository pattern을 도입하여 통일성 있게 network request, response parsing, error handling 및 로컬 데이터 관리 (sql)
- service (비즈니스 로직)
- Provider를 통한 빠르고 효율적인 상태관리
- ChangeNotiferProxyProvider를 통하여 다른 provider와 연결된 상태에 대한 업데이트 처리
- Builder와 context.select를 위젯의 각 연결된 부분에만 사용하여 필요한 부분만 rebuild
- 서버와 통신에 대한 error handling을 위한 connect provider를 모든 provider에 도입하여 메인 화면 (page view)에서 공통적으로 dialog를 보여줌
(4) 지도 개발
- Google Maps 패키지 사용:
- 패키지의 클래스인 BitmapDescriptor, Marker, LatLng등을 extend하여 custom marker 클래스를 만들어 사용자가 마커를 터치했을 시 해당 정보를 보여주는 기능 개발
- 하나의 스토어를 보여주는 marker vs. 특정 동일한 위치에 있는 여러 스토어를 보여주는 cluster marker 만듬
- 9-Patch 이미지를 사용하여 말풍선 길이를 text길이에 맞게 조절한 후 Canvas를 직접 Paint하여 rendering
- deep copy를 사용한 스토어 종류 및 위시리스트 필터 기능 개발
(5) 공유 및 푸쉬 알림 개발
- Firebase Dynamic Link: deeplink를 직접 생성하는 하나의 메소드를 사용하여 Share패키지를 통한 공유하기
- 공유한 링크 및 푸쉬 알림 눌렀을 시 앱의 상태 (terminated, background, foreground)에 따른 route처리
더보기