[TIL] Vue 프로젝트 연습 - 간단한 프로젝트 실습

TIL

Vue 프로젝트 연습

Vue 프로젝트 연습 - 강의

Vue Lifecycle

React와 비슷하지만, 사용할 수 있는 메서드가 꽤 있다.

create되었을 때, mount 되었을 때, update될 때, 사라질 때

그리고 각 라이프 사이클마다 메서드 beforeCreate, beforeMount 등을 사용할 수 있다.

간단한 데이터 처리

너무 간단해서 한꺼번에 첨부했다.

그러나 나처럼 초보는 이렇게 간단한 것부터 배우는 것이 맞다고 생각한다.

기본도 모르는데 더 어려운 것을 잘 할리가..

template

기본적으로 template 안에 html 태그들을 작성한다.

데이터를 동적으로 보여주고 싶을 때 React에서는 한 개이지만 Vue에서는 중괄호 두개를 사용한다. ( {{}} )

github blog에서는 중괄호 두 개가 컴파일에 문제가 되므로 백슬래시를 사용하였다.

event handler

React에서는 onClick 처럼 카멜로 사용하지만,
Vue에서는 @click으로 사용한다.

데이터 바인딩

Vue는 양방향 데이터이기 때문에 input 태그에 data에 선언한 변수를 바인딩 해두면(여기서의 변수명은 input)
input이 사용자가 입력한대로 바로 할당이 된다.

따라서 입력받은 값을 바로 사용할 수 있다.

data가 변할 때 마다 어떤 동작을 하고 싶을 수 있다.

watch

따라서 이 때 watch를 사용할 수 있다.

listen하고 싶은 (감지하고 싶은) data 이름을 watch 메서드 안에 넣고, 동작을 결정한다.

<template>
  <div>
    <h1>Welcome home - {\{ title }\}</h1>
    <h3>your location: {\{ location }\}</h3>
    <form @submit="handleSubmit">
      <input type="text" v-model="input" />
      <button type="submit">Get</button>
      <button type="button" @click="setData">set to 1</button>
    </form>

    <hr />

    <select v-model="region" @change="changeRegion">
      <option :key="index" :value="data.short" v-for="(data, index) in options">{\{ data.location }\} (short for {\{ data.short }\})</option>
    </select>

    <table v-if="tableShow">
      <tr :key="index" v-for="(data, index) in options">
        <td>location: {\{ data.location }\}</td>
        <td>location-short: {\{ data.short }\}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: "main-home",
  data() {
    return {
      title: "개발자의 품격",
      location: "Seoul",
      input: "",
      options: [
        { short: "S", location: "Seoul" },
        { short: "B", location: "Busan" },
        { short: "J", location: "Jeju" },
        { short: "A", location: "Ansan" },
      ],
      region: "J",
      tableShow: false,
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      console.log(this.input)
      window.alert(this.input)
      this.input = ""
    },
    setData() {
      this.input = 1
    },
    changeRegion() {
      alert(this.region)
      if (this.region === "J") {
        this.tableShow = true
      }
    },
  },
  watch: {
    // data에 있는 특정 변수 이름을 똑같이 써 주어 그 변수의 update를 감지한다.
    input() {
      console.log(`your watching 'input' value: ${this.input}`)
    },
    region() {
      console.log(`your watching 'region' value: ${this.region}`)
    },
  },
}
</script>

소감

다른 거 해야겠다.
복잡한 것 보다가 이거 보니 너무 쉽다.. ㅋㅋㅋ

사실 처음에 할 때는 왜 이렇게 어려운거지 라고 생각했는데…
지금보니 쉽긴 하다.

회고 (TIL)

2022.04.13 Daily 회고

✏오늘 한 일

• Vue 코드 분석
• 업무 연습
  • 지라 업무 사항보며 실제로 구현해봄
• Vue 강의

⁉느낀 점

Vue도 잘 쓰면 재밌겠다라고 생각했다.
생각보다 직관적인 것 같긴하다.
리액트를 하도 많이 사용하느라 Vue의 장점을 활용하지 못하고 있는 것 같지만.

그래서 Vue도 어차피 사용하니 겸사겸사 공부도 해야겠다!

지금은 매일매일 업무 일기를 쓰고 있지만,
앞으로 조금 더 익숙해지면 일주일, 한달 주기로 개인적인 업무 회고를 쓸 예정이다.

🎃현재 나의 상태

내일 실제로 자잘한 업무를 할당받아서 할 것 같다!
걱정된다. 2일 만에 할 양을 준다고 했는데, 할 수 있을지…
많이 물어보는 수 밖에 없겠다.

큰일났다. 벌써 허리아프기 시작했다. 아직 목도 다 안나았는데 ㅠㅠ

---