Automation 제품의 프론트엔드 개발을 담당하고 있습니다

[모바일 웹 에디터 텍스트 편집 화면 이동 문제] - 모바일에서 텍스트 편집 모드 진입 시 화면이 편집하려는 요소와 상관 없는 곳으로 이동되는 문제가 존재했음 - 화면 확대와 화면 이동을 담당하는 각 비동기 함수의 순서가 보장되지 않던 것이 원인임을 발견 - 3년정도 유지되던 모바일 웹 문제를 해결하여 모바일 사용자들의 세션 수 증가와 편집 매출액에 기여함 [모바일 웹 텍스트 편집 툴박스 위치 조정] - 모바일에서 텍스트 편집을 편하게 해주는 툴박스가 사용자의 키보드에 가려지는 현상 - visualViewport에 resize 이벤트 핸들러를 등록하여 사용자의 키보드 위에 편집 툴박스가 보이도록 개선 - 해결 과정에서 알게 된 사파리와 크롬의 resize 이벤트 발생 순서의 차이에 대해 문서화 하여 팀 내에 공유함

更多

[신분증 OCR 기능 연동] - 관리팀에서 웹사이트 신규 가입자의 신분증의 유효 여부를 수동으로 검사해서 업무 부담이 다소 과중됨 - 사진 촬영에 react-webcam을 사용하고, OCR API를 연동하여 신분증 인증 기능을 자동화함 - 신분증 심사가 자동화 되어 사용자가 서비스를 바로 사용 가능하게 되었고, 관리 팀의 업무 부담을 줄임 [타입스크립트 마이그레이션] - 같은 함수 내 혹은 props drilling 과정에서 발생하는 잦은 변수의 타입 변경으로 인한 유지 보수의 어려움과 런타임 환경에서 빈번하게 발생하는 오류로 타입스크립트 도입의 필요성을 느낌 - 팀 회의에서 이 생각을 나누고, 동료와 함께 타입스크립트 스터디를 진행하며 타입스크립트 도입 - 일부 코드에 리팩터링까지 같이 진행되어 전체적인 코드의 품질이 올라감. - 타입 명시로 인해 코드의 신뢰성과 개발 생산성이 증가했다는 동료의 평가. - API Response에 대한 타입 작성으로 인해 API 구조에 대한 이해도를 올릴 수 있었음 [redux-saga에서 react-query로 전환] - 상태를 관리하기 위해 필요한 보일러 플레이트 코드가 다소 많다고 느껴졌고, 서버 상태를 선언적으로 관리할 수 있는 라이브러리를 도입한다면 개발 생산성을 향상시키고 코드의 복잡도를 줄일 수 있을 것이라는 생각을 하게 됨 - react query 공식 문서를 통해 간단한 학습을 진행, 브런치를 하나 생성하여 react-query 도입 시 코드가 어떻게 변경될 수 있는지 팀 회의 시간에 공유 - data fetching 과 관련된 코드가 단순화 되었고 코드의 가독성 및 개발 생산성이 향상됨. 또한 caching 기능을 이용해 API 요청 수를 줄임 [Container Presenter 패턴 제거] - 과도하게 사용된 Container Presenter 패턴으로 프로젝트 폴더 구조가 복잡해졌고, 디버깅 및 코드 추적 시 불편함을 야기함 - 일부 코드를 병합하고 반복되는 로직을 커스텀 훅으로 재사용 할 수 있도록 분리. - 170개 이상의 파일을 줄임. 코드 추적 및 프로젝트 폴더 구조가 단순화 되었음

更多

[스티커메이커(스티커 편집 서비스) 전체 UI 개발] - 조금씩 차이가 있는 디자인이 쌓여 디자이너와 의사소통에 불편함이 발생했고, 협업하여 디자인 시스템구축하여 일관된 느낌의 디자인을 제공하는 데 기여 - 제품의 전체 UI 개발을 맡아 진행하여 각 요소를 스타일링 하고 구조를 잡는 경험을 하게됨 - 개발 과정에서 디자이너와 적극적으로 소통하며 가상 키보드 등의 UI/UX 를 개선함 [프린터기 상태를 알리기 위한 에러 페이지 개발] - 스티커 인쇄를 위해 프린터기와 API 통신을 해야 하는 상황. 프린터기 상태에 이상이 있을 시 서비스를 사용할 수 없었고, 각 매장 관리자가 어떤 부분을 해결해야 하는지 쉽게 알 수 있어야 했음 - 프린터기의 문서를 통해 에러 코드 내용을 파악하고 이에 맞는 메세지를 작성함 - 프린터기 상태를 일정 시간마다 확인하여 에러 메세지를 업데이트 하고 정상적인 서비스 화면으로 복귀할 수 있도록 로직 작성 [사용자 위치를 기반으로 키오스크 입점 매장 목록 제공 및 지도 검색 기능 개발] - 스티커 편집 키오스크가 입점되어 있는 매장을 보다 편하게 보고 싶다는 고객들의 요청이 있었음 - Geolocation API를 사용하여 사용자들의 위치를 기반으로 가까운 매장부터 볼 수 있도록 개발 - 스티커 서비스의 종류 별로 검색 할 수 있도록 필터링 기능 제공 - 카카오 맵 API를 연동하여 지도에서도 위치 기반으로 주변 매장을 확인할 수 있도록 개발

更多