어드민 페이지 개발 및 유지보수 1. Atomic Design Pattern 기존 어드민 repository는 레거시 코드와 불명확한 아키텍처로 인해 새로운 코드 생성과 위치 설정에 어려움이 있었습니다. 이 문제를 해결하기 위해 어드민 도메인의 특성을 고려하여 Atomic Design Pattern을 도입하였습니다. 이로써 자주 사용되는 컴포넌트를 추상화하여 코드 일관성과 공통화를 강조함으로써 프로젝트 효율성과 코드 유지보수성이 향상되었습니다. 새로운 개발자들의 코드 이해 비용이 감소함으로써 향후 프로젝트 개발과 유지보수에서 생산성과 협업 효율성이 높아졌습니다. 2. 로그인 개선 기존의 로그인 로직에서는 성격과 사용처가 다른 여러 데이터를 하나의 로직에서 처리하고 로컬스토리지에 모두 저장하는 방식으로 운영되어 비효율적이었습니다. 특히 내부 직원 명단 데이터는 변경이 있을시 서비스를 사용하지 못하는 문제가 있었습니다. 이를 해결하기 위해 로그인 시 유저 정보만 로컬스토리지에 저장하고, 자주 수정되지 않는 데이터는 필요 시 서버와 통신하여 가져와 세션스토리지에 저장하였고, 빈번한 수정이 필요한 데이터는 세션스토리지에 저장하지 않고 실시간으로 업데이트할 수 있도록 조치했습니다. 이를 통해 데이터의 특성에 맞게 효율적으로 관리하며, 로그인 프로세스의 성능과 안정성을 향상시켰습니다. 3. typescript 개선 기존의 typeScript 설정에서 strictMode와 noImplicitAny를 false로 설정되어 있어 약 1,000개의 에러가 감춰진 채로 개발이 이루어졌습니다. 이로 인해 런타임 오류 발생 가능성이 높아지고 유지보수에 높은 비용이 소요되었습니다. 이에 strictMode와 noImplicitAny를 true로 변경하여 모든 관련 에러를 해결함으로써 런타임 오류 가능성을 낮추고 유지보수 비용을 감소시켰습니다. 4. Mock Service Worker 활용 프로젝트의 기간이 짧아 백엔드와 프론트엔드 작업이 병행되어야 했습니다. 회의를 통해 API 정의를 내리고 Mock Service Worker를 활용하여 개발을 진행했습니다. MSW의 가상 API 환경을 활용함으로써 독립적으로 테스트 및 개발 생산성을 높였고 응답 값을 유연하게 조절할 수 있어 성공, 로딩, 에러 상황에 대한 빠른 UI 개발이 가능했습니다. 이를 통해 프로젝트 기간을 효율적으로 관리하며 최종적으로 프로젝트를 성공적으로 완료할 수 있었습니다. 프론트엔드 타입 안정성 강화 1. code generator를 통한 타입 추론 자동화 및 백엔드와의 타입 동기화 code generator를 이용한 백엔드와의 타입 동기화로 여러 가지 이점을 얻었습니다. 코드 생성을 통해 클라이언트와 서버 간의 타입 불일치 문제를 사전에 방지하였고, 스키마 변경에 빠르게 대응하여 시스템 안정성을 향상시켰습니다. 더불어 클라이언트에서 잘못된 백엔드 스키마 타입 오류를 빠르게 감지하여 조치할 수 있는 장점도 경험했습니다. 또한 자동화된 타입 추론으로 코드 일관성과 가독성을 향상시켜 개발자들의 생산성을 높였습니다. 2. repository에 type-coverage 도입 프론트엔드의 모든 레포지토리에 type-coverage를 도입하여, 각 레포지토리에서 발생한 잘못된 또는 작성되지 않은 타입을 시각화하여 신속하게 파악하고 수정할 수 있게 되었습니다. 이를 통해 코드 품질을 향상시키고 안정성 및 유지보수성을 강화했습니다. 매칭 도메인 관련 개발 및 유지보수 1. 사용자를 위한 에러핸들링을 통한 유연한 유저플로우 구현 2개의 API 서버를 사용하는 긴 유저 플로우에서 발생한 에러를 사용자가 쉽게 파악할 수 있도록 실패한 데이터를 별도로 표시하는 화면을 구성했습니다. 동시에 성공한 데이터는 유저 플로우를 중단시키지 않고 처리하여 업무 효율성을 향상시켰습니다. 2. graphql subscription을 기반으로 실시간 데이터 통신 매칭 도메인의 특성상 한 유저를 여러 직원이 컨트롤하는 경우를 방지하기 위해 graphql subscription을 기반으로 한 실시간 데이터 통신을 사용하여 유저의 상태가 변경될 때마다 실시간으로 모니터링하고 리스트에서 제거되도록 구현하였습니다. 설탭북스 도메인 관련 개발 및 유지보수 1. windowing 적용 무한 스크롤 리스트에서 불필요한 DOM 생성과 렌더링 성능 이슈를 해결하기 위해 windowing 기법을 도입했습니다. windowing의 가상 리스트를 통해 유저가 현재 보는 화면에만 필요한 DOM 요소를 동적으로 렌더링하여 스크롤 성능과 렌더링 속도를 향상시켰습니다. 또한 대량 데이터셋에 대한 초기 로딩 속도도 개선되었습니다. 2. google analytics, Meta pixel google analytics와 meta pixel을 활용하여 판매 관련 데이터를 관리하고 사용자 행동을 추적하여 데이터를 실시간으로 모니터링하여 데이터 주도의 의사결정과 정확한 마케팅 전략 수립에 기여하였습니다.

更多