미리보기

1. Sellermate (오픈마켓 종합 플랫폼)

개요: 셀러의 상품 등록부터 주문·배송·문의 대응까지 통합 지원하는 이커머스 운영관리 플랫폼
사용기술: React, TypeScript, Spring Boot, MySQL, JPA, RTK-query

1-1. 상품 처리 최적화

• 공급사 상품 저장 시, 기존에는 계정별 상품까지 일괄 생성해 성능 저하(10초 이상) 발생

• → 마스터 상품만 우선 생성, 계정별 상품은 더미 형태로 프론트에 노출하고, 송신/수정 시점에 실체 생성 방식으로 변경

• → 초기 반응 속도 개선, 리소스 낭비 최소화, UX 향상

1-2. 송신 플러그인 모듈화 & 핫로드

• 로컬 설치형 송신 서버 구조에서, 마켓 로직 수정 시마다 전체 재설치 필요

• → 송신 로직만 PF4J 기반 플러그인 구조로 분리, 버전체크 후 JAR 다운로드 및 핫로드 적용

• → 사용자는 재설치 없이 최신 로직 적용, 유지보수 효율 및 UX 모두 향상

1-3. 성능 최적화

• 쿼리 플랜 분석을 통해 조인 구조 개선 및 인덱스 최적화 → 40만 건 대상 쿼리 속도 12초 → 2초로 단축

• 프론트엔드: 2000건 리스트에 Virtual Rendering 적용 → 렌더링 시간 2초 → 0.2초

1-4. FSD 아키텍처 도입

• 레거시 React 코드를 Feature-Sliced Design(FSD) 아키텍처로 점진적으로 전환

• 신규 기능부터 도메인 분리, 문서화, 로직 정리를 통해 구조적 유지보수성 강화

2. 태양광 모니터링 시스템

개요: 태양광 발전소의 실시간 상태 모니터링 및 원격 제어를 지원하는 통합 시스템
사용기술: React, Spring Boot, MariaDB, JPA

2-1. 중요 로직 레거시 코드 리팩토링

• 7,000줄 단일 페이지로 구성된 핵심 대시보드 코드를 태양광/전력기기/배터리 등 도메인별로 분리

• 모델·서비스 계층 구조 적용 및 컴포넌트화

• 최소 50줄, 최대 300줄 단위로 재구성해 가독성 및 재사용성 향상, 유지보수성 대폭 개선

2-2. 불완전한 백엔드 응답 대응

• 미확립된 백엔드 응답 구조에 대응하기 위해 프론트 전용 맵퍼 레이어 도입

• 응답 데이터를 프론트 전용 엔티티로 변환해, API 변경에 따른 영향 최소화 및 예외 처리 일관성 확보

1. 공장 자동화 프로젝트 (MES)

개요: 재고, 가공, 출하 전과정 모니터링 및 재고관리 시스템

사용기술: Sveltekit, Spring boot, GraphQL, TypeScript

1-1. SheetJS 래퍼 유틸 제작 (DX 개선)

• 기존 셀 단위 스타일 지정의 비효율 해소

• startCell, endCell, styleType, color props를 받아 범위 단위 스타일 일괄 적용 가능하게 개선

• 사용성 향상 및 코드 반복 제거 → 팀 생산성 개선

1-2. RFID 프린터 웹 연동 (시스템 통합)

• 제조사 제공 jQuery + 바닐라자바스크립트 기반 라이브러리를 Svelte 환경에 연동

• C언어 기반 명령어 프로토콜 분석 → JS 유틸 구현으로 프린터 제어

• 초기 0.5초 간격 연속 출력 성공률 90% → 96.7%까지 안정화

1-3. 범용 셀렉트 컴포넌트 설계 (GraphQL 대응)

• displayKeyPath, uniqueKeyPath를 받아 중첩 응답에서도 유연하게 데이터 추출

• GraphQL 구조 대응을 위한 재사용 가능한 셀렉트 컴포넌트 구현

• 실제 다수 화면에서 공통적으로 사용 → 컴포넌트 표준화 기여

사서 업무 지원 도서 관리 서비스

개요: 도서 대출·반납 현황을 실시간으로 모니터링하고 관리할 수 있는 웹 기반 서비스

팀구성: 프론트엔드3, 백엔드3

담당업무: sub PM

사용기술: React, spring boot, mysql
배경: 동료 인재(사서)의 반복적인 수기 기록과 도서 관리의 어려움이라는 현장 페인포인트를 발견
해결방안: 대출·반납 QR코드 기반 이력 자동 기록, 실시간 대여 현황 조회, 관리 편의 기능 등 사서 업무 부담을 줄이기 위한 기능 구현
성과: 실제 현장 사용자의 피드백을 반영해 업무 효율성 향상에 기여

개요: ‘탐나는 인재’ 교육생들의 학습 기록, 경험, 인사이트를 체계적으로 아카이빙할 수 있는 플랫폼

팀구성: PM1, 디자이너1, 프론트엔드1, 백엔드2

담당업무: 프론트엔드

사용기술: React, spring boot, mysql, Figma
문제의식: 교육기간 동안 쌓인 다양한 경험과 성장이 정리되지 못한 채 사라지는 문제를 발견
해결방안: 교육생 개개인의 학습, 프로젝트, 회고 등을 구조화하여 기록할 수 있는 웹 서비스 기획·개발
성과: 제주 더큰내일센터 업프로젝트 우수프로젝트 선정

개요: TODO, 일정, 노트를 분리 없이 연계하여 기록하고 관리할 수 있는 개인화된 올인원 생산성 툴

사용기술: React, zustand, tanstack query, react-form-hook, dnd-kit, tiptap

아키텍처: FSD (Feature-Sliced Design)

url: https://warizi.github.io/jarvis/