Week 13
기간: 2026.02.09 - 2026.02.13
커리큘럼: 프론트엔드(Vue)
1. Facts — 무엇을 했나?
< Vue 실습 >
- [Vue 프론트엔드] OrderSystem 실습: 자동 토큰 갱신과 상단 네비게이션 구현
Axios Interceptor로 AT 자동 갱신과 RT 만료 시 로그인 리다이렉트를 구현하고, JWT payload 기반 관리자/일반 사용자 네비게이션 분리 로직을 정리했다. - [Vue 프론트엔드] OrderSystem 실습: 상품 등록 폼과 FormData 활용
Vuetify v-form과 v-file-input으로 상품 등록 UI를 만들고, FormData를 통해 이미지 업로드와 텍스트 데이터를 함께 전송하는 방식을 정리했다. - [Vue 프론트엔드] OrderSystem 실습: 상품목록 무한스크롤 + 검색 페이징 구현
스크롤 핸들러로 무한스크롤 페이징을 구현하고, v-select 기반 동적 검색 조건을 적용해 서버 페이징 API와 연동하는 과정을 정리했다. - [Vue 프론트엔드] OrderSystem 실습: Pinia 전역상태 + 로컬스토리지 + SSE 실시간 알림
Pinia 스토어로 장바구니 상태를 관리하고 로컬스토리지로 새로고침 유지, SSE로 주문 실시간 알림을 구현한 내용을 정리했다.
2. Feelings — 어떻게 느꼈나?
- Axios Interceptor를 처음 써보니, 토큰 갱신이 백그라운드에서 투명하게 처리되는 게 사용자 입장에서 정말 자연스럽게 느껴졌다.
- Pinia + localStorage 조합으로 새로고침해도 장바구니가 유지되는 경험을 하면서, 전역 상태 관리가 Vue에서 Vuex만큼 편리하다는 걸 실감했다.
- 무한스크롤 구현 시 스크롤 이벤트 핸들러가 의외로 가볍고 직관적이라, Intersection Observer 없이도 충분히 쓸만하다는 생각이 들었다.
- SSE로 실시간 알림을 받는 순간, 관리자 입장에서 주문이 들어올 때마다 목록이 자동 업데이트되는 게 상용 서비스 느낌이 확 들었다.
3. Findings — 무엇을 배웠나?
-
Axios Interceptor 활용:
- Request Interceptor로 모든 요청에 토큰 자동 추가, Response Interceptor로 401 시 RT 갱신을 중앙에서 처리함.
window.location.reload()로 간단히 갱신 후 재시도하는 방식이 프로토타입 단계에서는 효과적임.
-
Pinia + localStorage 패턴:
JSON.stringify/parse로 객체를 로컬스토리지에 저장하고,parseInt()등으로 타입 복원함.computed로 totalCount/totalPrice를 실시간 계산해 반응형 UI를 구현함.
-
무한스크롤 + 서버 페이징:
window.scrollY + window.innerHeight로 스크롤 위치 감지하고,params객체로 동적 쿼리 구성함.- 검색 시
this.productList = []로 기존 데이터 초기화 후 재로딩함.
-
SSE 실시간 알림:
EventSource로 서버와 단방향 연결 유지,onmessage에서unshift()로 최신 데이터 맨 위로 추가함.- 관리자 페이지에서만 연결해 리소스 낭비 방지함.
4. Future — 다음에 어떻게 활용할까?
- 토큰 갱신 시
window.location.reload()대신 요청 큐 재시도 로직을 구현해 깜빡임 없이 UX 개선하기. - Pinia 스토어에 Vue Devtools 연동해 상태 디버깅 환경 구축하고, persist 플러그인으로 localStorage 관리 자동화하기.
- 무한스크롤에서 Intersection Observer API로 스크롤 이벤트보다 성능 좋은 방식 도입하기.
- SSE 연결 상태를 컴포넌트 라이프사이클에 맞춰 onopen/onclose 핸들링하고, 재연결 로직 추가하기.
- 장바구니에서 수량 변경/삭제 기능 추가하고, 실시간 가격 업데이트를 optimistic update로 구현하기.
🧩 마무리 한 줄
프론트엔드에서 백엔드와의 상호작용(토큰/SSE/페이징)이 핵심이었고, Pinia로 상태를 중앙 관리하면서 컴포넌트 간 협업이 훨씬 수월해졌다.
Eazy하게