Yellosis | Frontend Developer | 2024-04 - 2025-10
Yellosis Backoffice Web
#웹개발#백오피스#React#마이그레이션
사내 앱 데이터 추적을 위한 백오피스 구축
기술 스택
ReactTypeScriptChart.jsRecoilJestViteEmotion
주요 기능
- JSP → React 18.2 마이그레이션 (사람앱 + 동물앱)
- 서버 데이터 기반 CSV 다운로드 기능
- 오프라인 화면 구현
- Skeleton UI를 활용한 이미지 로딩 개선
- 다크 모드 구현 (device media)
상세 내용
사내 앱 데이터 추적을 위한 백오피스 구축 프로젝트입니다.
구현 내용
- 프로젝트 세팅 후 모든 페이지 퍼블리싱: JSP → React 18.2로 마이그레이션 (사람앱과 동물앱 모두)
- CSV 다운로드: 서버에서 받는 데이터로 CSV 생성
- 오프라인 화면 구현
성과
- 이미지 로딩 개선: img 태그의 lazy loading과 Skeleton UI를 결합하여 사용자 만족도 향상
- 다크 모드 구현: 기기의 device media 정보로 다크모드 감지 및 스타일 적용
- CSV 인코딩 문제 해결: UTF-8 인코딩을 통해 한국어 깨짐 방지
배운 점
- JSP 레거시를 React로 성공적으로 마이그레이션
- CSV 인코딩 방식(UTF-8)을 이해하고 적용
- 다크 모드를 device media 정보로 자동 감지