PROJECT
CHOP!
온라인 현금거래 중개 서비스
EAEarly Access2024-07-02 ~ 2025-05-17Frontend
HIGHLIGHTS
핵심 성과/기여
4 items
프론트-백엔드 통신을 규격화하기 위한 미들웨어(Kepler) 설계/구현
토큰 기반 인증/재시도(Refresh) 흐름을 공통 레이어에서 처리
Swagger 기반으로 명세를 확인하며 협업
장기(약 8개월) 팀 개발을 통해 폴더 구조/페이지 구조를 고민한 첫 프로젝트
TECH (as roles)
사용한 기술
5 items
FRONTEND
4
React
UI 상태/컴포넌트
상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
Styled-components
스타일 엔진
디자인 토큰을 바로 코드에서 사용할 수 있게 해 UI 룰(색·타입·간격)을 컴포넌트 단위로 일관되게 적용했다.
TypeScript
타입 안정성
API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
Axios
네트워크 레이어
백엔드 API 요청을 인터셉터 기반 파이프라인으로 통합해 에러 처리·헤더·쿠키 정책을 일관된 흐름에서 관리했다.
API
1
Swagger
API 명세서
엔드포인트·스키마·에러 규격을 문서로 고정해 FE/BE가 같은 규칙으로 개발하고, 요청/응답을 빠르게 검증할 수 있게 했다.