Resume

하우저

2023.11 - 2025.10

문의 및 배송설정 백오피스 고도화 (B2B / Admin, B2C)

Next.jsReactTanStack Querystyled-componentsReduxCypressDatadogGit

API 호출 최적화 (TanStack Query)

queryKey와 invalidation 범위가 세분화되지 않아, 단건 갱신에도 관련 없는 하위 쿼리까지 refetch되며 API 호출과 화면 갱신 비용이 함께 증가하는 문제가 있었습니다.
queryKey를 ['board', 'detail' , srl]과 같이 도메인 단위로 설계하여 mutation 이후 필요한 캐시만 선택적으로 갱신하도록 구조를 변경해, 불필요한 refetch 범위를 축소했습니다.
개선 과정에서 stale UI가 발생하지 않도록 주요 시나리오를 직접 체크리스트로 관리했으며, 배포 후 Datadog 지표를 통해 문의게시판 API 호출이 약 50% 감소했음을 확인했습니다.
이 경험을 토대로, '게시물 개수+상세 내역' 동시 응답 API를 '개수/상세 API'로 분리하는 방향을 백엔드에 제안하여 API분리가 적용되었습니다.

공통 Button 컴포넌트 타입 안정성 강화 (TypeScript)

'as' props로 렌더링 태그를 변경해도 해당 태그 고유 props가 Button 타입에 반영되지 않아 TypeScript 오류가 발생했고, 이를 우회하기 위한 유사 Button 컴포넌트가 팀 내에 다수 산재해 있었습니다.
제네릭 기반의 polymorphic props 구조를 적용해 공통 Button props와 요소 고유 props를 함께 추론하도록 개선했습니다. 구체적으로는 ComponentPropsWithoutRef<T>로 요소 props를 확장하고, Omit<..., keyof TButtonProps>로 충돌하는 속성을 제거했습니다.
그 결과 스타일은 같고 사용 요소만 달랐던 컴포넌트들을 공통 Button으로 통합해 중복 구현을 줄였고, 팀 내 버튼 컴포넌트 사용 방식을 일관되게 가져갈 수 있었습니다.

문의게시판 CRUD QA 자동화를 위해 Cypress E2E 테스트를 도입해, 기능 업데이트 시 주요 흐름을 빠르게 검증하고 payload-서버 간 데이터 불일치를 조기에 발견할 수 있었습니다.

의뢰 관리 백오피스 고도화 (B2B / Admin)

JSPjQueryJavaScriptNext.jsReactGit

설정 관리 페이지 개발 (Next.js)

getServerSideProps에서 주요 설정 API를 사전 요청하고 TanStack Query hydration으로 클라이언트 초기 상태를 구성해, 설정 데이터가 초기 렌더 시점에 함께 반영되도록 했습니다.
전역 설정·센터별 설정·예외일 등 도메인별 커스텀 훅과 ViewModel 생성 함수로 상태·로직·표현을 분리하고, 서버 상태와 별도로 로컬 편집 상태를 유지해 저장 전까지 변경이 서버에 반영되지 않는 안전한 편집 흐름을 구현했습니다.

문의게시판 페이지 개발 (Next.js)

복수 필터를 단일 모델로 통합 관리하고, URL 쿼리와 동기화해 새로고침·URL 공유 시에도 동일한 검색 조건이 복원되도록 설계했습니다.
사용자 회사 유형에 따른 버튼·필터·옵션 노출 분기를 훅 내부에 집중시켜, UI 컴포넌트는 결과값만 의존하도록 구성하고 역할 추가 시 수정 범위를 훅으로 한정했습니다.

레거시 JSP 구조 개선 (jQuery)

기존 JSP 기반 화면은 UI, DOM 직접 조작, 전역 상태, API 호출이 하나의 큰 모듈에 섞여 있어 사이드 이펙트 추적과 유지보수가 어려웠습니다.
함수 흐름과 의존 관계를 도식화해 변경 영향 범위를 파악했고, 영향 범위가 작은 영역부터 공통 로직 분리, 화면 책임 분리, 중복 상태/변수 제거 등 점진적인 리팩터링을 진행했습니다. 이를 통해 결합도를 낮추고 역할별로 관리 가능한 구조로 정리했습니다.
그 결과 기존 단일 모듈(약 2500 LOC) 중심의 복잡한 구조를 역할 단위로 분리해 신규 기능 추가 시 수정 범위가 명확해졌고, 팀원의 코드 파악 비용이 줄었습니다.

JSP 수정 시마다 발생하던 서버 재가동 대기(20~30초)를 application.properties 옵션 조정으로 제거하고, 변경 내용을 팀 내 공유 및 Confluence에 문서화했습니다.

경력 (2년)