Vue to CodingApple

코딩애플 강의를 통해 배운 Vue를 정리한 글입니다.

📅 작성일

2025년 2월 14일

---

📌 목차

1. 소개
2. part1-1 : 카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림
3. part1-2 : 개발환경 셋팅과 Vue 3 설치 (자주겪는 에러 포함)
4. part1-3 : HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법
5. part1-4 : 리액트보다 100배 쉬운 Vue 반복문 v-for
6. part1-5 : Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼 만들기)
7. part1-6 : v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법)
8. part1-7 : 실제 데이터를 박아넣어 상품목록을 만들자 (import / export)
9. part1-8 : 모달창 내에 상세페이지 만들기
10. part1-9 : HTML 복잡해보이면 컴포넌트 Component 만들어 쓰셈
11. part1-10 : 부모가 가진 데이터를 자식이쓰고 싶으면 props로 전해주셈
12. part1-11 : props 나머지 내용 조금 & 저번시간 숙제
13. part1-12 : 자식이 부모데이터 바꾸고 싶으면 custom event 로 메세지만 주십쇼
14. part1-13 : 사용자의 input을 받는 법 (v-model)
15. part1-14 : watcher로 데이터 감시하는 법
16. part1-15 : Vue에서 매끈한 UI 애니메이션 주는 법 2개
17. part1-16 : 상품정렬기능과 데이터 원본 보존
18. part1-17 : Vue의 라이프사이클을 어디다 쓰냐면
19. 참고 자료

---

📝 소개

Part 1 : 부동산 쇼핑몰

---

part1-1

🔹 vue

• Single page Application, Web-app 만들 때 사용
• 다른 언어들과 문법이 다르지만 쉬움
• 코드짤 때 방법이 정해져 있음
• html 렌더링이 빠름 (react보다) - 사실 밀리세컨드 단위임
• 업데이트 잘됨

---

part1-2

🔹 세팅 및 실행

vue Extensions

• vetur, HTML CSS Support, vue3 Snippets

프로젝트 생성

npm create vue@latest
npm run dev

---

part1-3

🔹 데이터 바인딩

• js데이터를 HTML에 꽂아넣는 문법
• 가변적인 데이터는 수정을 쉽게 하기 위해 사용
• 실시간 자동 렌더링이 가능

<div>{{ data }}</div>
<div :class="data"></div>

🔹 data

• 데이터를 저장하는 함수

data() { return{ key : value } }

---

part1-4

🔹 v-for

• 작명은 array랑 명칭 같게
• key는 인덱스

v-for = "작명 in array" :key="작명"

---

part1-5

🔹 클릭이벤트

v-on:click
@click

🔹 method

• 각 기능을 하는 함수를 사용

methods : {
    함수() {
        this.key //data함수의 key의 value값수정
    }
},

---

part1-6

🔹 모달창 동적 UI 스텝

• UI의 현재 상태를 데이터로 저장함
• 데이터에 따라 UI가 어떻게 보일지 작성

v-if

• 화면을 show hide할 수 있다

<div v-if="a == b"></div>

---

part1-7

🔹 import

//data.js
const data = 10
export defalut data

//App.vue
import data from './data.js'

or

//data.js
const data = 10
export {data}

//App.vue
import {data} from './data.js'

---

part1-8

🔹 모달창 상세 스텝

• 1. 상세로 이동 시 데이터값 만들어놓음
• 2. 데이터에 따라 HTML어떻게 보일지 만듬

🔹 v-if

• if문

v-if
v-else-if
v-else

---

part1-9

🔹 컴포넌트

• 긴 html을 한 단어로 줄일 수 있는 문법
• 재사용할 때 좋음
• 코드가 복잡해질 수 있음

//Discount.vue
<template>
~~내용~~
</template>

<script>
export default {
  name: "Discount",
};
</script>

//App.vue
<template>
    <Discount></Discount>
</template>

<script>
import Discount from "./Discount.vue";
export default {
  name: "App",
  components: {
    Discount: Discount,
  },
};
</script>

---

part1-10

🔹 props

• 부모에서 자식에게 데이터를 넘겨줄 때 사용
• props는 read only

//App.vue
<Discount :작명="데이터"></Discount>


//Discount.vue
<template>
~~내용~~
</template>

<script>
export default {
  name: "Discount",
  props: {
    원룸들: array,
  },
};
</script>

---

part1-11

🔹 숙제임

---

part1-12

🔹 props로 받은 데이터 수정

custom event를 통해 자식이 부모에게 메시지를 보내 데이터를 수정해 달라고 요청

$emit('메시지를 보내요', 데이터);

부모는 자식에게 받은 메시지를 통해 props값을 수정

<컴포넌트 @메시지를 보내요="변수 = $event">

emit를 함수로 사용할 때는

• this.$emit("메시지", 데이터)를 함수로 만들어 사용해도좋다

---

part1-13

🔹 v-model

• 인풋의 value값 가져옴

@input="month = $event.target.value"
v-model="month"

//숫자로 가져오기
v-model.number

---

part1-14

🔹 watcher

• 실시간 데이터 감지

watch : {
    감시할데이터(변경후데이터, 변경전데이터){
}

🔹 form validation 라이브러리

• 비밀번호 및 이메일 검사등을 해주는 라이브러리 vue전용으로 해도 좋을듯

---

part1-15

🔹 transition

• 애니메이션

<transition class = "작명"></transition>

.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }

---

part1-16

🔹 원본 보존

• 원본데이터와 그것의 카피본을 만든다
• ...은 배열을 벗긴다는 뜻

[...배열]

---

part1-17

🔹 라이프사이클

• create : 데이터만 존재하는 단계
• mount : <template> 사이에 있던걸 실제 HTML로 바꿔줌
• 컴포넌트 생성 : index.html에 장착
• update : data가 변하면 컴포넌트가 재렌더링됨
• unmount : 컴포넌트가 삭제됨

🔹 함수

=//바깥에 있는 데이터를 this를 통해 사용가능
(() => {})

//사용 불가능
function() {}

---

📚 참고 자료

• 코딩애플 강의
• 내 깃허브