수파자 / 개발팀, 사원•담당 업무: 웹프론트엔드 개발
학생 수파자 페이지 리뉴얼
PHP에서 React로 마이그레이션
프로젝트 소개
기존의 PHP로 구성되어 있던 수파자의 학생 이용 페이지를 React 기반의 모던 웹 애플리케이션으로 마이그레이션하고 리뉴얼하는 작업을 진행했습니다.
사용자 경험(UX)을 개선하고 유지보수성을 높이기 위해 컴포넌트 기반 아키텍처를 도입하였으며, Redux를 활용한 상태 관리 최적화를 수행했습니다.
기술 스택
React.js
Styled-Components
Redux
주요 작업 내용
- 레거시 청산:
기존 PHP 기반 코드를 새로운 디자인 시스템을 적용하여 React로 마이그레이션했습니다. 화면 구조를 현대적인 클론 코딩 방식으로 재구성하여, UI/UX를 획기적으로 개선하면서도 기존 기능의 안정성을 확보했습니다.
- 스타일링 시스템 구축:
Styled-Components를 도입하여 컴포넌트 단위의 스타일 캡슐화를 실현하고, 재사용 가능한 UI 컴포넌트 라이브러리를 구축했습니다.
- 상태 관리:
복잡한 학생 데이터와 학습 현황을 효율적으로 관리하기 위해 Redux를 활용하여 전역 상태 관리를 체계화했습니다.