미리보기

프로덕트 팀에서 챌린저스 앱/웹, 백오피스 개발 및 유지 보수를 주로 담당하고 있으며, AU 확보를 위한 신규 피처를 개발하는 셀에 속해있습니다.

• React Native 버전 v0.66 -> v0.73 마이그레이션 (의존성 라이브러리 업데이트 및 대응)

• 휴먼 에러 최소화를 위한 복잡한 챌린지 생성/수정 폼의 전반적인 구조 및 UI/UX 리팩토링 작업

• 사용자 경험을 위한 다양한 애니메이션 개발

• iOS/Android 앱 검수 및 출시 업무 및 CodePush를 통해 앱 업데이트 관리

• 레거시 코드 제거 (JS -> TS로 점진적 마이그레이션)

• 비개발자 직군과의 원활한 소통 및 온보딩을 위한 앱 스크린 문서화

뷰티 관련 피처를 빠르게 기획/개발하는 실험 프로젝트를 진행하며, 속도감있는 개발 과정 속에서도 사용자 경험을 위한 애니메이션으로 완성도를 챙겼습니다.

• react-native-reanimated로 동전이 뒤집히며 빛나는 애니메이션 구현

• framer-motion을 사용한 팝업의 scale-up 애니메이션 구현

• 탭 인디케이터가 자연스럽게 이동하는 애니메이션 구현

• 웹뷰와 앱 간의 안정적인 데이터 송수신을 위한 메시지 포맷을 설계하여 통신 구조를 체계화

• 챌린지 참가 인원을 실시간으로 반영하기 위해 socket.io를 도입

• 앱 전역에서 해당 데이터에 접근 가능해야 하는 요구사항을 위해 최상단에 Provider를 감싸는 구조

• 상태는 Map 구조로 관리하였으며, key는 챌린지 id, value는 참가 인원 수로 구성하여 효율적으로 접근할 수 있도록 설계

세일즈 부스터 어드민은 광고(챌린지)를 세팅하고, 집행 현황을 검토할 수 있는 비즈니스 광고 어드민입니다. 디자인 시스템을 설계하면서 변화하는 요구사항에 대응할 수 있는 유연한 인터페이스를 만드는 것에 집중했습니다.

• 디자인 시스템 구현

  • 컬러, 타이포그래피, 레이아웃 등 파운데이션 설계

  • 생산성을 고려한 MUI 기반의 래핑 컴포넌트 개발

  • renderProps 패턴을 활용한 복잡한 테이블 컴포넌트 설계

  • Compound 패턴을 활용한 Form 컴포넌트 개발

  • 텍스트 에디터 컴포넌트 구현

• 목표/캠페인/챌린지 계층 구조의 복잡한 폼 상태 관리

  • 좌측에 폴더 구조, 우측에 선택한 폼을 렌더링하는 구조

  • 상단에서 전체 리스트 상태를 관리하고, 폼 컴포넌트 내부에서 react-hook-form을 사용하여 선택한 데이터를 defaultValues로 넣어주는 방식으로 설계

  • 입력 항목이 많을 때 onChange로 인한 성능 저하를 debounce로 개선

• 필드 입력 값을 iframe으로 전송하여 미리보기 기능 제공

  • RxJS의 Pub-Sub 패턴을 사용하여 메세지 전송 구조 구현

  • 큐를 활용하여 iframe 로드 지연 시 발생하는 메세지 누락 문제 해결

• 인증샷 검토 생산성을 위한 드래그 기능 제안 및 개발

  • 마우스 이벤트를 활용하여 시작 지점과 종료 지점의 인덱스를 계산하여 일괄 체크 기능 구현

FCM SDK 버전 업데이트에 따른 react-native, react-native-firebase 및 관련 의존성 라이브러리의 마이그레이션 프로젝트입니다. 이 과정에서 iOS와 Android 플랫폼별로 발생한 여러 문제들을 해결하며, 각 플랫폼에 대한 이해도를 높일 수 있었습니다. 이후 더 깊은 이해를 위해 사내 Android 스터디를 진행하며 이슈에 신속하게 대응할 수 있는 역량을 강화했습니다.

• iOS: 포그라운드 및 백그라운드 모드에서 이벤트가 트리거되지 않는 Notifee(v7.0.0+)와 react-native-firebase간의 충돌 해결

• Android: Android 13 이상 기기에서 로컬 알림이 동작하지 않는 문제 해결

  • 13 이상부터 사용자로부터 알림 권한을 요청해야 하므로 POST_NOTIFICATIONS 권한을 manifest 파일에 추가

• Android: 백그라운드 서비스에서 신체활동 센서가 동작하지 않는 문제 해결

  • Oreo 버전 이상에서는 startService 대신 startForegroundService를 사용해야 하므로, SDK 버전에 따라 분기 처리

물류 출고/배송 현황 관리 및 결과 리포트 제작할 수 있는 어드민입니다. 프로젝트 기획부터 배포까지 주도적으로 참여했습니다.

• D3.js로 데이터 시각화 컴포넌트 개발(원형, 도넛형, 막대형 등 그래프)

• Google Forms API를 활용하여 설문 응답 데이터를 가공하여 그래프로 시각화

• contenteditable 속성으로 텍스트 에디터 기능 구현

• html2canvas + jsPDF 라이브러리를 사용하여 화면을 캔버스로 변환 후 pdf로 추출하는 기능

실시간 회의록 작성과 화상회의가 동시에 가능한 웹사이트 개발

1. 시그널링 서버 연결 커스텀 훅 npm 패키지에 배포

2. 블로그 정리

기술 스택

React, Express, MongoDB, Socket.io

• 프로젝트 기획

• 프론트엔드 및 채팅 서버 개발

기술 스택

React Native, Nest.JS, MongoDB, Socket.io