Email: dnjsgh1204j@gmail.com

Address:서울 은평구 신사동

Phone: 010-8942-4994

GIT:https://github.com/Jeong-wonho

💻프로젝트

VTP 차량 유통 추적 관리 시스템 개발

(기간: 2025.03 ~ 2025.07, 인원: 4명, 역할: 프론트엔드 개발)

• 기간 : 2025.03 ~ 2025.07
• 인원: 4명
• 담당: 프론트엔드
• Redux 기반 검색 조건 스냅샷 저장 및 탭 간 전환 UX 구현
  • 요구사항: 사용자가 차량 유통 과정에서 자주 사용하는 최대 12개의 Master Data(모델, 딜러사, 운송사 등) 조합을 탭 형태로 저장하여, 탭 전환만으로 동일 조건을 즉시 재조회할 수 있도록 한다.
  • 문제
    • 대규모 마스터 데이터 기반의 복합 검색 요구
    • 탭 기반 검색 스냅샷 복구 UX의 복잡함
      • 화면 상태, 필터 상태, API 상태 간의 불일치 문제
  • 해결

    • 전역 상태 관리를 도입하기 위해 Redux와 Zustand를 비교한 뒤, 요구사항의 복잡성, 확장성, 협업 환경을 고려해 Redux Toolkit을 최종 선택하였습니다.

    • 복잡한 전역 상태에 더 적합한 구조

      • 탭마다 서로 다른 검색 조건 스냅샷을 저장·복구해야 하고, 이 상태가 모달, 리스트, 대시보드 등여러 화면에서 동시에 사용되기 때문에 단순 전역 상태 하나로는 관리가 어려웠습니다.
      • Redux Toolkit의 slice 구조를 활용하면searchTabs, searchFilters, searchApi처럼 도메인 단위로 전역 상태 트리를 명확하게 나누어 관리할 수 있었고, 장기적인 리팩터링에도 안정적이라고 판단했습니다.

    • 예측 가능한 상태 변경 &. 강력한 디버깅 능력

      • Redux는 모든 상태 변경이 액션 기반으로 이루어져 “어떤 탭에서 어떤 조건이 어떤 액션으로 저장·복구되었는지”를 정확하게 추적할 수 있습니다.

      • 이전/이후 상태 비교

      • 액션 히스토리 확인

      • 불필요한 리렌더링 분석

        등을 할 수 있어, 탭 복구 시 스냅샷이 어긋나는 문제를 빠르게 디버깅할 수 있었습니다.

    • 일관된 패턴과 협업 효율성

      • Zustand는 가볍고 설정이 편하다는 장점이 있지만,

        사용하는 사람마다 상태 구조와 업데이트 패턴이 쉽게 달라져

        프로젝트 규모가 커질수록 유지보수 비용이 증가할 위험이 있었습니다.

      • 반면 Redux는 액션–리듀서–스토어 구조가 명확해

        새 팀원이 합류해도 상태 흐름을 빠르게 이해할 수 있고,

        이후 검색 조건 기능이 계속 확장될 것이라는 점을 고려해 구조화된 Redux를 선택했습니다.

    • 스냅샷 기반 UX와의 높은 적합성

      • 탭 전환 UX는 “특정 시점의 검색 조건 스냅샷”을 정확하게 저장하고, 복구 시 UI·모달·API 파라미터가 모두 동일한 상태로 재조립되어야 했습니다.
      • Redux의 단일 스토어 + 불변성 기반 업데이트 패턴 덕분에 스냅샷 생성 → 수정 → 복구의 흐름을 액션 단위로 명확히 모델링할 수 있었고, 이로 인해 탭 간 전환 시 상태 꼬임이 사라지고 UX 안정성이 크게 향상되었습니다.
  • 결과
    • 탭 클릭 시 원하는 조건으로 데이터가 표출되었습니다. 정확도 100%
    • 탭 클릭 후 search관련 Modal창 오픈 시 해당 선택된 데이터가 정상적으로 표현되게 되었습니다.
• Axios Interceptor 기반의 인증 만료 처리 및 Token Refresh Queuing 구조 설계
  • 문제
    • 인증 토큰이 만료되었을 때(401) 자동으로 Refresh Token을 사용하여 Access Token을 재발급받는 로직을 구현하고, 동시에 다수의 요청이 발생해도 단 한 번만 재발급 요청이 전송되도록 Promise Queue 구조를 설계하였습니다.
  • 해결
    • 대기 중인 요청들은 내부 큐(failedQueue)에 보관되며, 토큰 재발급 완료 후 각 요청을 자동으로 재시도하도록 처리했습니다.
  • 결과
    • 해당 구조 도입 전에는 사용자 인증 오류가 빈번히 발생했고, 다수의 Refresh 요청이 중복되어 서버 부하가 증가하는 문제가 있었습니다. 개선 후 인증 오류 발생률 100% 이상 감소, Refresh 요청은 1회로 제한되어 안정성 및 성능이 향상되었습니다.
• 권한 기반 페이지 접근 제어 개선
  • 문제
    • 메뉴 접근 권한 정보를 로컬스토리지에서 비동기로 불러오는 과정에서, 페이지 렌더링이 먼저 진행되어 menuAccess가 빈 배열인 상태에서 권한 검사가 수행되는 문제가 있었습니다.
  • 해결
    • React Context API를 도입하여 menuAccess를 전역 상태로 관리하고, isMenuLoaded 플래그를 추가해 권한 데이터가 완전히 로딩될 때까지 라우팅 및 권한 검사를 유예하도록 구조를 개선하였습니다.
  • 결과
    • 개선 후 페이지 접근 흐름이 권한 상태에 동기화되며 오류 로그가 제거되었고, 복잡한 Role 기반 화면에서도 안정적인 접근 제어를 구현할 수 있었습니다.
• heremap 라이브러리 활용한 동적 Clustering 개발
  • 문제
    • HERE Map을 활용해 지역마다 배송되는 차량을 카운팅하는 기능을 구현했습니다. 지도가 렌더링 될 때 백엔드에서 반환해주는 데이터를 활용해서 지역별 클러스터링을 구현하였습니다.
  • 해결
    • 구현 이 후에 백엔드와 실제로 반영되는 클러스터링이 다르다는 점을 확인했고, 해당 문제가 지도에 데이터를 표현하는 좌표계의 차이라고 생각했습니다. (WGS84 와 EPSG:3857) 하지만 그 차이가 아닌, 처음에 설정한 eps에 문제가 있는 점을 확인했습니다.
  • 결과
    • eps옵션이 변경되지 않고 clustering을 하게되면 지도에 있는 클러스터링 해야할 반경이 zoom-in, zoom-out 마다 달라진다는 것을 알았고, 줌 크기마다 eps를 동적으로 처리하는 함수를 만들어 정상적으로 클러스터링 되도록 처리하였습니다. 정확도 100%
• 라이트 하우스를 활용한 성능 개선 및 불필요한 백엔드 호출 제거
  • 문제
    • 라이트하우스를 활용해 CSR 구조의 성능 병목 구간을 분석한 결과, 초기 진입 시 모든 페이지의 JS 번들을 한 번에 가져오면서 로딩 속도가 약 3초까지 지연되는 문제가 있었습니다.
  • 해결:
    • 이후 반복 사용 중에도 매번 컴포넌트가 재생성되는 현상이 발견되어, useMemo/useCallback 등을 활용해 불필요한 리렌더링을 제거하고, 컴포넌트 레벨에서도 캐싱 구조를 적용하여 최종적으로 0.3초 수준까지 속도를 개선하였습니다.
    • 페이지 단위로 실제 사용하는 데이터와 컴포넌트만 메모이제이션(memoization) 및 동적 import하도록 개선하여, 초기 로딩 시간을 3초 → 1초로 약 66% 단축하였습니다.
  • 결과
    • 이를 통해 CSR 기반의 대형 대시보드 환경에서도 사용자 체감 속도가 크게 개선되었으며, 실제 라이트하우스 지표에서도 성능 점수 42점 → 85점으로 상승한 것을 확인할 수 있었습니다.
• context-api를 활용한 고객사별 테마 변경
  • 문제
    • 고객사별로 서로 다른 디자인 테마(hyundai, kia, glovis 등)를 적용하기 위해 React Context API 기반의 useTheme 전역 상태를 사용했는데,로그아웃 후 다른 계정으로 로그인할 때 이전 계정의 테마가 그대로 유지되는 버그가 발생했습니다.
    • 분석 결과, 테마 정보를 저장하는 Context Provider가 Wrapper Component의 상태 변경에 반응하지 않는 구조였고,테마 초기화와 재설정 로직이 명확하게 분리되어 있지 않아 계정 변경 시 테마 상태가 갱신되지 않는 문제로 이어졌습니다.
  • 해결

    • 테마 변경 로직을 Context Provider 내부 상태에 묶어두는 방식에서 벗어나,

      setTheme 함수를 Context 외부에서도 명시적으로 호출할 수 있도록 구조를 개선했습니다.

    • 로그인 성공 시 사용자 정보에 포함된 테마 값을 기반으로 setTheme를 직접 호출하여,

      로그인/로그아웃/계정 전환 시점에 테마를 확실하게 초기화 → 재적용하는 흐름을 구축했습니다.

    • 또한 테마 상태를 모듈 단위로 분리해

      • 초기 테마 로딩
      • 계정 전환 시 초기화
      • 로그인 완료 시 재적용
  • 결과

성과관리 Tool PXR 개발

(기간: 2024.08~2025.02, 인원: 2명, 역할: 프론트엔드 개발자)

• Highcharts 기반 Gantt 차트 개발 중 비정상 렌더링 이슈 해결 (React useRef 기반 상태 관리 개선)
• 성과 관리 시스템 내 트리 구조 조직 뷰 구현
• WebRTC 기반 화상회의 UI 기능 구현 및 상태 제어 경험