- React
- TypeScript
- Vite
- Zustand
- Tanstack Query
- Styled-Components
CoKo
JS를 재미있게 학습하기 위한 퀴즈 기반 교육 웹 사이트
📅 2024.09 - 2025.03 (6개월)👥 6명🛠 프론트엔드 팀장, 어드민 페이지 개발
협업 문화 및 프로세스 구축
DX 개선
Productivity- Github Actions를 이용한 CI/CD 자동화 구축
- 어드민 페이지를 통한 콘텐츠 관리
협업 프로세스
Process- PR, Issue 템플릿 작성 및 코드 리뷰 체크리스트 도입
- Swagger를 활용한 API 명세
- Notion 기반의 스프린트 관리
- Figma를 활용한 디자이너와의 협업
트러블 슈팅
ref 콜백 함수 전달로 인한 무한 리렌더링 이슈 해결
문제 상황
팝업 컴포넌트 마운트 시 무한 리렌더링 발생
원인 파악
React의 ref 콜백은 렌더링마다 새로운 함수 참조가 전달되면 다시 실행됩니다.
상태 변경 → 리렌더링 → ref 재실행의 무한 루프가 원인이었습니다.
해결 과정
ref 콜백을 useCallback으로 감싸 참조를 고정
최종 성과 및 회고
팝업 브라우저 프리징 현상 완전 제거 및 팀내 이슈 공유
진행 상태 관리 리팩토링 (useFunnel)
문제 상황
기존 코드가 컴포넌트 스스로 렌더링 여부를 결정하여 재사용이 까다로움.
해결 과정
- 토스 Slash의 useFunnel 아이디어 차용
-
step과setStep만 관리하는 경량화 훅 구현
const [Funnel, Step] = useFunnel(['가입', '완료']); return <Funnel><Step name="가입">...</Step></Funnel>
성능 개선
라우트 기반 코드 스플리팅 적용
문제 상황
초기 진입 시 전체 페이지의 리소스를 한 번에 다운로드하여 FCP 시간이 지연될 우려가 있었습니다.
해결 방안
- React의
lazy와 동적import()를 활용하여 페이지 단위로 컴포넌트를 분리했습니다. - 사용자가 해당 경로에 접근할 때만 필요한 리소스를 로드하도록 라우터를 재설계했습니다.
결과 요약
초기 진입 속도를 개선하고 네트워크 리소스 비용을 절감.
이미지 프리로딩 훅 구현을 통한 UX 개선
문제 상황
특정 페이지 진입이나 화면이 전환될 때 이미지가 뒤늦게 로딩되어 깜빡이거나 Layout Shift가 발생하여 사용자 몰입을 방해했습니다.
해결 방안
usePreloadImages커스텀 훅을 제작하여Promise.allSettled로 주요 이미지 리소스를 병렬로 미리 캐싱했습니다. -Image객체를 생성하여 브라우저 캐시에 이미지를 미리 적재한 뒤 화면을 렌더링하도록 흐름을 제어했습니다.
결과 요약
화면 전환 시 이미지가 즉시 표시되도록 하여 시각적 끊김 없는 부드러운 사용자 경험을 제공했습니다.