📚 이번 주엔 뭘 배웠지?
Vue 기반 프론트엔드 개발 전반 학습하여
환경 설정(Node, Vue CLI)부터 시작해 SPA 구조와 컴포넌트 기반 개발 방식과
프론트엔드 애플리케이션이 어떻게 구성되고 동작하는지를 이해하는 데 집중한 주였다.
1. Vue 환경 설정 및 프로젝트 구조 이해
Node.js와 Vue CLI를 설치하고 프로젝트를 생성 및 프론트엔드 개발 환경 구성,
Vue 프로젝트의 핵심 구조 이해
-
main.js : 애플리케이션의 시작 지점으로, Vue 앱을 생성하고 Router, Pinia, Vuetify 같은 전역 설정을 등록하는 역할
-
App.vue : 루트 컴포넌트로 전체 화면의 기본 틀을 구성
-
components / views :
- components → 재사용 가능한 UI 단위
- views → 페이지 단위 화면
-
router : URL과 화면을 연결하는 라우팅 설정
→ Vue는 컴포넌트 기반 구조로 동작한다는 것
2. Vue 컴포넌트와 데이터 흐름
.vue 파일의 기본 구조(template / script / style), 화면과 데이터를 연결하는 방법 학습
-
data() : 화면에서 사용할 상태(변수) 정의
-
methods : 사용자 이벤트 처리 로직 작성
-
이벤트 처리 : @click, @keyup 등을 통해 사용자 동작에 반응
-
반응형 시스템
- 데이터 변경 → 화면 자동 업데이트
-
v-model
- 입력값과 데이터를 연결하는 양방향 바인딩
→ Vue는 데이터 중심으로 화면이 자동 갱신되는 구조
3. 조건 및 반복 렌더링
화면을 동적으로 구성하기 위한 문법 학습
- v-if / v-else : 조건에 따른 화면 분기
- v-for : 리스트 데이터를 반복하여 렌더링
이를 활용해 목록 화면과 상태에 따른 UI 처리
4. Vue Router (SPA 동작 이해)
Vue Router를 이용해 페이지 이동을 구현
$router.push()또는<router-link>사용- 새로고침 없이 컴포넌트만 변경되는 SPA 방식 이해
- params 방식으로 URL에 동적 값 전달
- name 기반 라우팅으로 유지보수성을 높이는 방법 학습
→ 프론트엔드에서 페이지 이동이 서버 요청이 아니라
클라이언트에서 화면만 교체하는 구조
5. Props와 컴포넌트 간 데이터 전달
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 props 개념을 학습
- 페이지 제목, 권한 여부 등 외부 설정값 전달
- 컴포넌트를 재사용 가능하게 만드는 구조 이해
6. 전역 상태 관리 (Pinia)
여러 컴포넌트에서 공통으로 사용하는 데이터를 관리하기 위해 Pinia를 적용
- 장바구니 수량, 상품 목록 등을 전역 상태로 관리
- state / getters / actions 구조 이해
- 새로고침 시 상태가 초기화되기 때문에 localStorage와 함께 사용하는 방법 학습
→ 프론트엔드에서도 상태 관리 설계가 중요하다
7. Axios를 통한 백엔드 연동
Axios를 사용해 백엔드 API와 통신하는 기능 구현
- 회원가입 / 로그인 / 목록 조회 / 주문 기능 연동
- 요청 시 JSON 데이터 전송
- 응답 결과를 화면에 반영
또한 로그인 시:
- JWT를 localStorage에 저장
- 토큰을 기반으로 사용자 상태 및 권한 처리
8. Vuetify를 활용한 UI 구성
Vuetify를 사용해 레이아웃과 UI를 구성
- v-container, v-row, v-col : 반응형 레이아웃
- v-card, v-table : 화면 구성
- v-form, v-text-field : 입력 폼
- v-dialog, v-data-table 등 컴포넌트 활용
→ 디자인을 직접 만들지 않고도 빠르게 UI를 구성하는 방법
9. 실시간 기능 및 생명주기 이해
컴포넌트 생명주기(created 등)를 활용해 초기 데이터를 로드하고,
EventSource(SSE)를 통해 실시간 주문 수신 기능을 구현
또한 컴포넌트 종료 시 연결을 해제하는 등
생명주기 기반 로직 처리의 필요성을 이해
프론트엔드 애플리케이션이 어떻게 동작하는지 전체 흐름을 이해한 주였다.
👊 어떤 문제점이 있었지?
- 프론트엔드의 구조와 흐름이 처음이라 전체 구조 이해에 시간이 오래 걸렸다
- 라우터, props, 상태관리 등 데이터 흐름 파악이 어려웠다
- 로그인 후 헤더 상태가 바로 반영되지 않는 등
→ SPA 특성(리로드 없음) 때문에 발생하는 문제를 겪었다
🙏 무엇을 깨달았고, 어떤 생각이 들었지?
-
프론트엔드는 단순 화면이 아니라
→ 상태 관리가 핵심인 애플리케이션이라는 걸 느꼈다 -
백엔드와 달리
→ “데이터 흐름을 어떻게 관리할 것인가”가 가장 중요했다 -
SPA에서는
- 새로고침이 없기 때문에
- 상태 관리 / 초기화 전략이 매우 중요하다
-
특히 느낀 점:
백엔드만 잘해서 서비스가 완성되지 않는게 맞겠지?
프론트까지 이해해야 서비스 개발자가 되지 않을까??...
😄 결과적으로, 현재 나의 상태는?
- Vue의 기본 구조와 동작 흐름은 이해한 상태
- 간단한 CRUD 화면과 로그인 흐름 구현 가능
다만,
- 아직 구조 설계는 익숙하지 않고 코드를 보면서 구현하는 단계
👨🚀 앞으로 어떻게 하는 게 좋을까?
-
기능 중심으로 반복 경험
- 로그인 / 권한처리
- 목록 → 상세 → 수정 → 삭제
- 상태관리(Pinia)
-
프론트 구조 감각 키우기
- components vs views 구분
- 공통 컴포넌트 분리
-
백엔드 프로젝트에 직접 적용
- 현재 티켓팅 프로젝트에 Vue 붙이기
한 줄 정리
이번 주는 Vue 문법을 배운 것이 아니라
**“프론트엔드가 어떻게 동작하는지 감을 잡은 주”였다.
