4주차 — Vue

목표: React에서 배운 개념을 Vue 문법으로 다시 구현하며 비교 학습하고, 실무에 쓸 화면을 직접 만들어본다.

---

10회차 (2시간): Vue 시작

학습목표

• Vue 앱의 구조와 템플릿 문법을 이해한다.
• ref/reactive로 반응형 데이터를 다룰 수 있다.

시간 배분

시간 내용

0:00~0:20	Vue 프로젝트 생성(Vite), 폴더 구조
0:20~0:50	템플릿 문법(v-bind, v-on), Options API vs Composition API 소개
0:50~1:20	반응형 데이터(ref, reactive) — useState와 비교 설명
1:20~2:00	실습: React 8회차에서 만든 Todo 앱을 Vue로 재구현

예제 코드

<script setup>
import { ref } from 'vue';

const todos = ref([]);
const input = ref('');

function addTodo() {
  if (!input.value) return;
  todos.value.push({ id: Date.now(), text: input.value, done: false });
  input.value = '';
}

function toggleTodo(id) {
  const todo = todos.value.find((t) => t.id === id);
  if (todo) todo.done = !todo.done;
}
</script>

<template>
  <div>
    <input v-model="input" />
    <button @click="addTodo">추가</button>
    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id"
        :style="{ textDecoration: todo.done ? 'line-through' : 'none' }"
        @click="toggleTodo(todo.id)"
      >
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

React vs Vue 비교 (이 회차에서 강조)

개념 React Vue

상태 선언	const [x, setX] = useState()	const x = ref()
상태 읽기	x	x.value (템플릿에서는 .value 생략)
상태 변경	setX(newValue)	x.value = newValue
양방향 바인딩	직접 구현 (onChange + value)	v-model 한 줄로 처리

과제

• input에 v-model 적용해서 실시간으로 글자 수 표시하기

---

11회차 (2시간): 디렉티브 & computed/watch

학습목표

• v-if/v-for 등 디렉티브를 사용할 수 있다.
• computed와 watch의 차이를 이해한다.
• props/emit으로 컴포넌트 간 통신을 할 수 있다.

시간 배분

시간 내용

0:00~0:25	v-if/v-show 차이, v-for 리스트 렌더링
0:25~0:55	computed (계산된 속성) — React의 파생 상태와 비교
0:55~1:15	watch — React의 useEffect와 비교
1:15~1:40	props로 부모→자식 데이터 전달, emit으로 자식→부모 이벤트 전달
1:40~2:00	실습: 부모-자식 컴포넌트 간 이벤트 주고받기

예제 코드

<!-- Child.vue -->
<script setup>
defineProps(['count']);
const emit = defineEmits(['increment']);
</script>

<template>
  <div>
    <p>현재 값: {{ count }}</p>
    <button @click="emit('increment')">+1</button>
  </div>
</template>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const count = ref(0);
function handleIncrement() {
  count.value++;
}
</script>

<template>
  <Child :count="count" @increment="handleIncrement" />
</template>

computed 예제

<script setup>
import { ref, computed } from 'vue';

const todos = ref([
  { text: '청소', done: true },
  { text: '빨래', done: false },
]);

const doneCount = computed(() => todos.value.filter((t) => t.done).length);
</script>

<template>
  <p>완료: {{ doneCount }}개</p>
</template>

과제

• 완료/미완료 개수를 computed로 표시하는 기능을 Todo 앱에 추가
• 부모-자식 컴포넌트 구조로 상품 목록/상품 상세를 나눠서 구현

---

12회차 (2시간): Vue 실전 + 전체 마무리

학습목표

• Vue에서 비동기 데이터 fetch를 구현할 수 있다.
• React와 Vue의 핵심 개념 차이를 종합적으로 설명할 수 있다.

시간 배분

시간 내용

0:00~0:30	onMounted + fetch로 API 데이터 가져오기 (React useEffect와 비교)
0:30~0:50	Vue Router 간단 소개 (페이지 이동)
0:50~1:20	React vs Vue 전체 비교 정리 (문법, 철학, 생태계)
1:20~2:00	실습: 실무에서 쓸 화면 하나를 미니 버전으로 함께 구현

예제 코드

import { ref, onMounted } from 'vue';

const posts = ref([]);
const loading = ref(true);

onMounted(async () => {
  const res = await fetch('<a href=https://jsonplaceholder.typicode.com/posts?_limit=5');>https://jsonplaceholder.typicode.com/posts?_limit=5');</a>
  posts.value = await res.json();
  loading.value = false;
});

로딩 중...

• {{ post.title }}

React vs Vue 종합 비교표

항목 React Vue

문법	JSX (JS 안에 HTML)	템플릿 (HTML 안에 JS)
상태 관리	useState, useReducer	ref, reactive
생명주기	useEffect	onMounted, watch
양방향 바인딩	직접 구현	v-model 기본 제공
스타일	자유로운 방식(CSS-in-JS 등 다양)	컴포넌트 내 <style scoped> 기본 제공
학습 곡선	JS 개념 이해가 더 필요함	템플릿 문법이 직관적

마무리 실습 가이드

1. 실제 투입 예정 프로젝트와 유사한 화면 1개 선정 (예: 목록 조회 + 상세 보기)
2. React 또는 Vue 중 실제 사용할 프레임워크로 구현
3. API는 JSONPlaceholder 등 공개 API 활용
4. 강사와 함께 코드리뷰

---

4주차 마무리 체크리스트

• [ ] ref와 reactive의 차이를 설명할 수 있다
• [ ] v-model, v-for, v-if를 자유롭게 사용할 수 있다
• [ ] props/emit으로 부모-자식 컴포넌트 통신을 구현할 수 있다
• [ ] onMounted로 API 데이터를 가져와 화면에 표시할 수 있다
• [ ] React와 Vue의 핵심 차이를 남에게 설명할 수 있다

4주차_Vue.md.pdf

0.30MB