백오피스, 로플랫 매니저

수집된 와이파이 신호와 매장 정보를 분류 및 검수하고, 위치정보 수집용으로 개발된 앱 사용자들의 문의 및 요청사항을 관리할 수 있는 사내 백오피스입니다.

입사 직후에 시작했던 프로젝트입니다. 기존에 사용하고 있던 vue 기반의 백오피스가 무분별한 양방향 바인드와 컴포넌트간 높은 종속성, style code와 비즈니스 로직의 혼재, 히스토리를 알 수 없는 부족한 문서화 등의 문제점들이 있어 react로 마이그레이션 하였습니다. 또한 제가 처음으로 타입스크립트 도입을 제안하여 개발자 경험을 개선하였습니다.

사내평가

• '회사 히스토리가 문서로 남아있지 않은 상황에서 기능이 잘 구현되었고, 함께 문서화도 잘 진행되었다'는 평가를 받았습니다.
• '기획 및 관리를 전담하는 사람이 없는 상황에서 최선을 다해주셨다'는 평가를 받았습니다.
• '짧은 시간동안 타입스크립트 공부부터 실제 도입까지 잘 해내었고, 실제로 많은 개선을 이뤄냈다'는 평가를 받았습니다.

기간

2019년 8월 - 2021년 10월

기술스택

React, Typescript, MobX, Redux, Redux-Saga, ESLint, Prettier, styled-components, storybook, Firebase hosting

작업내용

• 수집된 와이파이 신호와 매장 정보를 검수하는 기능, 수집할 매장 정보를 담당자들에게 할당할 수 있는 기능, 캐시 리워드 앱인 캐시플레이스 서비스의 유저에게 리워드, 공지, 크레딧을 지급하는 기능 등을 개발하였습니다.

Flux 구조 도입

• Vue 의 양방향 바인딩 로직을 Flux 구조로 변경하였습니다.

Presentational and Container Component Pattern

• Atomic Design 을 사용하지 않고 Presentational and Container Component Pattern을 사용했습니다.
  • 구체적으로는 비즈니스 로직을 담당하는 contaner와 prop에 따라 UI 구현을 담당하는 foundation로 구조화하였습니다.
  • Atomic Design은 atom과 molecule의 구분이 명확하지 않아 혼란을 야기할 수 있다고 판단했습니다. 구분 기준을 합의하는 과정 또한 비용이며 합의를 한다 하더라도 유의미하지 않습니다. 참고자료 (opens in a new tab)
• 특히 부모에 종속되지 않는 범용성있는 컴포넌트를 만들었습니다.
  • 기존 테이블 컴포넌트는 각 페이지마다 데이터의 format이 다를 경우 테이블 컴포넌트 안에서 직접 분기 처리를 하며 format을 입혔습니다. 자식 컴포넌트에서 데이터의 format을 지정하지 않고 부모에서 필요한 format 함수를 내려주는 방식으로 리팩토링하였습니다. 커다란 로직을 작은 순수 함수로 쪼개었을 때 유지 보수 편의성 및 가독성이 올라가는 것을 경험했습니다.

Typescript 도입

• API와의 정합성을 위해 처음으로 Typescript 제안 및 도입했습니다. 또한 동료 개발자들이 TS에 대한 이해도와 활용도를 높이고자 세미나를 진행했습니다.
• API Response로부터 UI 표현까지의 데이터의 타입이 일관되게 안정적으로 유지되어, 개발 경험 향상을 이뤘습니다.