kkh.dev
Yellosis | Frontend Developer | 2024-04 - 2025-10

Yellosis Backoffice Web

#웹개발#백오피스#React#마이그레이션

사내 앱 데이터 추적을 위한 백오피스 구축

Yellosis Backoffice Web

기술 스택

ReactTypeScriptChart.jsRecoilJestViteEmotion

주요 기능

  • JSP → React 18.2 마이그레이션 (사람앱 + 동물앱)
  • 서버 데이터 기반 CSV 다운로드 기능
  • 오프라인 화면 구현
  • Skeleton UI를 활용한 이미지 로딩 개선
  • 다크 모드 구현 (device media)

상세 내용

사내 앱 데이터 추적을 위한 백오피스 구축 프로젝트입니다.

구현 내용

  • 프로젝트 세팅 후 모든 페이지 퍼블리싱: JSP → React 18.2로 마이그레이션 (사람앱과 동물앱 모두)
  • CSV 다운로드: 서버에서 받는 데이터로 CSV 생성
  • 오프라인 화면 구현

성과

  1. 이미지 로딩 개선: img 태그의 lazy loading과 Skeleton UI를 결합하여 사용자 만족도 향상
  2. 다크 모드 구현: 기기의 device media 정보로 다크모드 감지 및 스타일 적용
  3. CSV 인코딩 문제 해결: UTF-8 인코딩을 통해 한국어 깨짐 방지

배운 점

  • JSP 레거시를 React로 성공적으로 마이그레이션
  • CSV 인코딩 방식(UTF-8)을 이해하고 적용
  • 다크 모드를 device media 정보로 자동 감지
이전 프로젝트 Chitacare 다음 프로젝트 Ai Reviewer

관련 프로젝트