2024_08_27_화

오늘의 코딩순서

(폴더: vue3Basic)

(02 폴더)

• App_toRef.vue

(03 폴더)

• App_computed.vue
• App_style_binding1.vue
• App_style_binding2.vue
• App_vif.vue

(04 폴더)

• App_directive.vue
• App_event.vue

---

오늘의 코딩 포인트

(02 폴더)

• App_toRef.vue
  Tip)
  • toRef:

<template>
  <div>
    <p>book.author: {{ book.author }}</p>
    <p>book.title: {{ book.title }}</p>
    <p>book.description: {{ book.description }}</p>
    <p>author: {{ author }}</p>
    <p>title: {{ title }}</p>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  setup() {
    const book = reactive({
      author: 'Vue3',
      year: '2024',
      title: 'Vue3 기본',
      description: '당신은 이 책을 읽습니다',
      price: '22000'
    })

    const author = toRef(book, 'author')
    // toRef: author이 단일 객체가 됨
    const title = toRef(book, 'title')

    return {
      book,
      author,
      title
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

종류	Vue는 상태의 변경을 proxy로 감시하며, 참조가 없는 원시타입(string,number 등)은 Proxy로 만들 수가 없음
reactive	관리하고자 하는 상태가 object라면 참조를 가지고 있기 때문에 그냥 reactive로도 proxy를 만들어 변화를 추적할 수 있음
ref	원시타입을 상태로 추적하기위해 Vue는 ref를 제공하고 있음 .value안에 값을 넣어주고 object로 변경해줌
toRef	원시타입의 식별자 부재는 object의 프로퍼티를 복사할 때도 문제가 됨, 이를 해결하기 위해 사용함 하나의 property에 대해 부모 object와의 연결성을 유지한채로 reactive를 반환함
toRefs	reactive의 모든 프로퍼티 대해 toRef를 적용해 반환함

---

---

(03 폴더)

• App _computed.vue
  Tip)
  • computed
    • 템플릿 문법({{ }})이 복잡해지며 여러 곳에서 반복적으로 사용하면 비효율적이기 때문에, 이럴 때 사용하는 속성
    • 장점: 반응형 데이터가 변경된 경우에만 다시 계산, 컴포넌트 랜더링시 비용이 적게듬
    • 메서드와의 공통점: 동일한 결과를 획득함
    • 메서드와의 차이점: computed는 결과가 캐시이며, 메서드는 파라미터가 올 수 있음
  • get&set
    • computed 프로퍼티는 기본적으로 getter만 가지고 있지만, 필요하다면 setter를 지정하는 것도 가능함
      그러기 위해서는 computed 프로퍼티를 get과 set 두 가지 프로퍼티를 가진 object로 변경해주어야 함
      
    • get은 값을 확인/가져올 때 사용함
    • set 은 값을 설정/변경할 때 사용함
      set methods을 설정하면 newValue매개변수를 받는데, newValue 매개변수는 computed 프로퍼티에 특정 값을 등록하고자 할 때 입력할 새로운 값을 포함하고 있음
      
  • Vue의 log 함수
  • 구조분해할당: 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

<template>
  <div>
    <h2>{{ teacher.name }}</h2>
    <p>{{ hasLecture }}</p>
    <p>{{ hasLecture }}</p>
    <p>{{ existLecture() }}</p>
    <p>{{ existLecture() }}</p>
    <button v-on:click="counter++">Counter:{{ counter }}</button>
    <h2>이름</h2>
    <p>{{ fullName }}</p>
    <p>{{ firstName }}</p>
    <p>{{ lastName }}</p>
  </div>
</template>

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

export default {
  setup() {
    const teacher = reactive({
      name: 'ktg',
      lectures: ['HTML', 'JSP', 'Vue3']
    })

    const hasLecture = computed(() => {
      // computed는 자동완성하기!
      console.log('computed')
      return teacher.lectures.length > 0 ? '있음' : '없음'
      // 삼항연산자
    })

    const existLecture = () => {
      // log 함수
      console.log('method')
      return teacher.lectures.length > 0 ? '있음' : '없음'
    }

    const counter = ref(0)
    const firstName = ref('강')
    const lastName = ref('태광')

    const fullName = computed({
      //getter and setter
      get() {
        return firstName.value + ' ' + lastName.value
      },
      set(value) {
        ;[firstName.value, lastName.value] = value.split(' ')
      }
    })
    console.log('fullName.value 출력: ', fullName.value)

    // fullName.value = 'K TK'

    return {
      teacher,
      hasLecture,
      existLecture,
      counter,
      fullName,
      firstName,
      lastName
    }
  }
}
</script>

<style lang="scss" scoped></style>

---

• App_style_binding1.vue
  Tip) 클래스와 Style 바인딩 적용

<template>
  <div>
    <div :style="styleObject">
      한국 축구대표팀의 '임시 사령탑'으로 선임된 황선홍 23세 이하(U-23) 대표팀 감독이
      손흥민(토트넘)과 물리적 충돌을 빚은 이강인(파리 생제르맹)을 주전 선수로 선발할지 여부에 관심이
      쏠리고 있는 가운데, 황 감독이 손흥민과 이강인의 화해를 적극 중재한 것으로 알려져 눈길을 끈다.
    </div>
    <button v-on:click="fontSize--">-</button>
    <button v-on:click="fontSize++">+</button>
  </div>
</template>

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

export default {
  setup() {
    const fontSize = ref(13)
    const styleObject = computed(() => {
      return {
        color: 'red',
        fontSize: fontSize.value + 'px'
      }
    })

    return {
      fontSize,
      styleObject
    }
  }
}
</script>

<style lang="scss" scoped></style>

'-' 버튼과 '+'버튼을 누르면 폰트 사이즈가 바뀜

---

• App_style_binding2.vue
  Tip)
  • ==와 ===의 차이
    • ==: 서로 다른 유형의 변수의 값만 비교
    • ===(strict 비교 연산자): 서로 다른 유형의 변수의 값과 값의 종류(true, false)까지 비교
  • @click: v-on click에서 'v-on'을 생략 가능함

<template>
  <div :style="styleObject">
    독일에서 재기를 노린 에릭 다이어가 구단 상황으로 인해 스텝이 꼬이고 말았다. 자칫 잘못하면
    다이어는 손흥민과도 작별할 수 있는 상황에 처했다. 스카이스포츠 독일이 28일(한국시간) 뮌헨이
    계약을 맺은 2023-2024시즌을 끝으로 그를 더이상 활용하지 않을 것이라고 전망했다.
  </div>
  <button @click="fontIncrease('-')">-</button>
  <button v-on:click="fontIncrease('+')">+</button>
  <button v-on:click="colorChange">colorChange</button>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    const styleObject = reactive({
      color: 'red',
      fontSize: '13px'
    })

    const fontSizeInt = ref(13)
    const fontIncrease = (sign) => {
      console.log('fontIncrease click Start...' + sign)
      // ===: 값과 값의 종류(Data Type)가 모두 같은지를 비교
      if (sign === '+') {
        fontSizeInt.value++
        styleObject.fontSize = fontSizeInt.value + 'px'
      } else {
        fontSizeInt.value--
        styleObject.fontSize = fontSizeInt.value + 'px'
      }
    }

    const colorVal = ref('red')
    const colorChange = () => {
      console.log('colorVal.value click->' + colorVal.value)
      if (colorVal.value == 'red') {
        colorVal.value = 'blue'
        styleObject.color = colorVal.value
      } else {
        colorVal.value = 'red'
        styleObject.color = colorVal.value
      }
    }

    return {
      styleObject,
      fontSizeInt,
      fontIncrease,
      colorVal,
      colorChange
    }
  }
}
</script>

<style lang="scss" scoped></style>

fontSize 변경

colorVal 변경

---

• App_vif.vue
  Tip)
  • v-if: 조건부로 블록을 렌더링 할 때 사용
  • v-else: v-if가 거짓(false)일 때 렌더링 하는 블록
  • v-else-if:  v-if에 대한 ‘else if 블록' 여러 조건을 연결
  • <template v-if="">:  여러개의 HTML요소를 v-if 디렉티브로 연결
  • v-show
    • 조건에 따라 엘리먼트를 화면에 렌더링. style의 display를 변경
    • 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브

<template>
  <div>
    <h2 v-if="visible">Hello Vue3!</h2>
    <h2 v-else>false 입니다.</h2>
    <button v-on:click="visible = !visible">toggle</button>
    <hr />
    <button v-on:click="type = 'A'">A</button>
    <button v-on:click="type = 'B'">B</button>
    <button v-on:click="type = 'C'">C</button>
    <button v-on:click="type = 'D'">D</button>
    <h2 v-if="type === 'A'">A입니다</h2>
    <h2 v-else-if="type === 'B'">B입니다</h2>
    <h2 v-else-if="type === 'C'">C입니다</h2>
    <h2 v-else>A, B, C가 아닙니다</h2>
    <hr />
    <template v-if="visible">
      <h1>News</h1>
      <p>국가채무 400조원 이상 늘어</p>
      <p>주민등록인구 4년 연속 내리막</p>
    </template>
    <h1 v-show="ok">Title 입니다</h1>
    <button v-on:click="ok = !ok">show toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const visible = ref(false)
    //visible은 논리형이므로 true 아니면 false이며, true일때만 작동함
    const type = ref('A')
    const ok = ref(true)

    return {
      visible,
      type,
      ok
    }
  }
}
</script>

<style lang="scss" scoped></style>

true일때의 화면과 false일때의 화면

a,b,c,d 버튼 누를 때 각 화면

show toggle버튼 누를때 'Title입니다' 문구가 나타났다 사라졌다 하도록 하는 화면

---

---

(04 폴더)

• App_directive.vue
  Tip) v-pre를 사용하면 DOM이 컴파일에서 제외되어 그대로 출력
  • v-text:  자바스크립트의 innerText와 같은 역할을 하며, html 태그가 적용되지 않고 문자열이 그대로 보여짐
  • v-html
    
    • 자바스크립트의 innerHTML과 같은 역할을 하며 html 태그가 적용된 화면이 보여짐
    • 이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스트로 데이터를 해석
    • 실제 HTML을 출력하려면 v-html 디렉티브를 사용
  • v-pre: 이중 중괄호 안의 내용을 그대로 보여줌
  • v-once:  데이터 변경 시 업데이트되지 않는 일회성 보간법을 수행

<template>
  <div>
    <p>{{ msg }}</p>
    <p v-text="msg"></p>
    <p v-html="htmlStr"></p>
    <p v-text="htmlStr"></p>
    <p>v-pre를 사용하면 DOM이 컴파일에서 제외되어 그대로 출력됨</p>
    <p v-pre>{{ msg 안녕하세요 }}</p>
    <p v-once>{{ msg }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const msg = ref('안녕하세요')
    const htmlStr = ref('<h1>안녕!!!</h1>')

    return {
      msg,
      htmlStr
    }
  }
}
</script>

<style lang="scss" scoped></style>

---

• App_event.vue
  Tip)
  • @keyup:  key를 눌렀다가 떼면 keyHandle() 함수가 실행되도록, 변수 result에 입력값을 넣어 데이터 바인딩 한 코드
    
  • @: v-on과 같음

<template>
  <div>
    <button @click="printEventInfo('Hello Vue3', $event)">inline event handler</button>
    <hr />
    <input type="text" @keyup="onkeyupHandler" />
  </div>
</template>

<script>
export default {
  setup() {
    const printEventInfo = (message, event) => {
      console.log('message: ', message)
      console.log('event: ', event)
      console.log('event.target: ', event.target)
      console.log('event.target.tagName: ', event.target.tagName)
    }

    const onkeyupHandler = (event) => {
      console.log('event.key: ', event.key)
    }

    return {
      printEventInfo,
      onkeyupHandler
    }
  }
}
</script>

<style lang="scss" scoped></style>

눌러서 나오는 다양한 속성들을 활용하기

 

@keyup 코드 실행

---

질문목록

 

---

수업교재

 

 

---

오늘의 숙제