2024_08_26_월

오늘의 코딩순서

크롬에 vue.js.devtools 확장 프로그램 깔기

모든 코딩은 App.vue에 한 다음 폴더에 복붙해서 rename했음

 

http://localhost:5173/

(폴더: vue3Basic)

(01 폴더)

• AppVue3_01.vue

(02 폴더)

• App_compositionApi.vue
• App_reactive.vue
• App_readOnly.vue
• App_setup2.vue
• App_tempSyntax.vue

 

---

오늘의 코딩 포인트

(01 폴더)

• AppVue3_01.vue => Vue3 방법
  Tip)
  • vbase 치고 누르면 틀이 자동완성됨
  • template
    • 여러 개의 태그들을 묶어서 처리해야 할 경우에 template를 사용함
    • v-if, v-for, component등과 함께 많이 사용
  • v-on: DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행
  • ref
    • 개념
      • Vue3 이전에는 뷰 템플릿의 DOM 또는 컴포넌트를 가리키는 속성 이었지만, Vue3에서는 reactive reference를 의미함
      • const 의 경우 배열이나 객체의 값은 변경 가능
    • 사용방법
      1. <script>에 import { ref } from "vue" 을 임포트
      2. 변수를 선언하고 값을 ref()로 감싸줌
      3. 변수 값을 변경할 때 변수.value에 변경할 값을 적용
    • 장점
      1. 타입 제한 없이 사용 가능함
      2. 템플릿에서 단일 변수로 사용할 수 있음

<template>
  <div>
    <button v-on:click="increment">Counter : {{ counter }}</button>
  </div>
</template>

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

export default {
  setup() {
    const counter = ref(0)
    // ref를 하면 위의 import가 자동으로 생성됨
    // ref를 선언하는 순간, counter은 객체가 됨
    const increment = () => counter.value++
    console.log('counter->', counter)

    onMounted(() => {
      console.log('컴포넌트가 마운트 되었음!')
    })

    return {
      counter,
      increment
    }
  }
}
</script>

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

↳ 콘솔창에 npm run dev 작성하고 엔터 >> 나오는 주소 ctrl 누른채로 클릭하면 아래 창이 나옴

---

(02 폴더)

• App_compositionApi.vue
  Tip)
  • 반응형 메시지
  • 일반 메시지

<template>
  <div>
    <h2>반응형 메시지</h2>
    <p>{{ reactiveMessage }}</p>
    <button v-on:click="addReactiveMessage">addReactiveMessage</button>
    <h2>일반 메시지</h2>
    <p>{{ simpleMessage }}</p>
    <button v-on:click="addsimpleMessage">addsimpleMessag</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    console.log('setup()')
    const reactiveMessage = ref('안녕 reactiveMessage')
    const addReactiveMessage = () => {
      reactiveMessage.value = reactiveMessage.value + '!'
    }

    let simpleMessage = '안녕 simple Message'
    const addsimpleMessage = () => {
      simpleMessage = simpleMessage + '!'
    }

    return {
      reactiveMessage,
      simpleMessage,
      addReactiveMessage,
      addsimpleMessage
    }
  }
}
</script>

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

---

• App_reactive.vue
  Tip)
  • reactive
    • 사용방법
      1. <script>에 import { reactive } from "vue";을 임포트함
      2. 변수를 선언하고 값을 reactive()로 감싸줌
      3. property 값을 변경할 때 변수.property에 변경할 값을 넣어줌
    • 주의할 점: object, array 이외에는 사용할 수 없음
    • ref와의 차이점
      1. 타입제한: ref에서는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있지만,
         reactive에서는 Object, array, Map, Set과 같은 타입에서만 사용할 수 있음
      2. 접근방식: ref에서는 .value property를 붙여 접근할 수 있으며, <templete>에서 변수를 명시할 때에는 붙일 필요가 없음
         반면 reactive에서는 .value를 붙일 필요가 없이 <templete>에서 사용하는 자바스크립트 문법처럼 사용할 수 있음
    • 장점
      1. 자바스크립트와 템플릿 사이에 일관성이 있음
      2. 반응형 변수를 많이 선언할 때 간단하게 사용 가능
      3. Vue2의 data()와 비슷함

<template>
  <div>
    <button v-on:click="increment">Click {{ state.count }}</button>
    <button v-on:click="incrementDeep">Deep Click {{ state.deep.count }}</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      deep: {
        count: 0
      }
    })

    const increment = () => {
      state.count++
      state.deep.count++
    }

    const incrementDeep = () => {
      state.deep.count++
    }

    return {
      state,
      increment,
      incrementDeep
    }
  }
}
</script>

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

↳ click만 누르면 두 숫자가 같이 증가하고, Deep Click만 누르면 Deep Click 숫자만 같이 증가함

---

• App_readOnly.vue
  Tip)
  • readonly
    • 읽기 가능, 수정 불가능 (단방향 데이터바인딩)
    • input 요소를 읽기 전용(readonly)으로 설정
      1. 데이터 바인딩을 사용하여 읽기 전용 설정
      2. 컴포넌트의 computed 속성을 사용하여 읽기 전용 설정

<template>
  <div></div>
</template>

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

export default {
  setup() {
    const original = reactive({
      count: 0
    })
    const copy = readonly(original)
    original.count++
    original.count++
    original.count++
    // copy.count++ : 증가시킬 수 없음, readonly이기 때문에
    // 증가시키려면 위처럼 로직을 추가하기

    console.log('original->' + original.count)
    console.log('copy->' + copy.count)

    return {}
  }
}
</script>

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

---

• App_setup2.vue
  Tip)
  • setup
    • props를 사용
    • 반응형을 주입하는 ref, reactive를 사용한 변수를 가지고 return을 해 template에서 사용하는 방식

<template>
  <div>
    <p>
      {{ counter }}
    </p>
    <p>
      {{ message }}
    </p>
    <button @click="increment">click!</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const counter = ref(0)
    const increment = () => {
      counter.value++
    }

    const message = ref('Hello Vue3')

    return {
      counter,
      message,
      increment
    }
  }
}
</script>

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

 

 

개발자 도구에서 수정가능

---

• App_tempSyntax.vue
  Tip)
  • ref
    • reactive() 함수는 객체타입에만 동작. 그래서 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 ref 메소드를 사용
    • ref 메서드는 변이가능한(mutable) 객체를 반환. 이 객체 안에는 value라는 하나의 속성만 포함.
      value값은 ref() 메서드에서 매개변수로 받은 값을 가지고 있고, 객체는 내부의 value 값에 대한 반응형 참조(reference) 역할
  • 텍스트 보간법
    • 데이터 바인딩의 가장 기본형태는 {{ data }} (이중 중괄호, 콧수염 괄호)를 사용
    • Template Syntax 개념: 템플릿 문법을 사용하여 렌더링된 DOM을 컴포넌트의 인스턴스 데이터에 선언적으로 바인딩 - v- 로 시작되는 요소들을 디렉티브 라 함
    • v-once: 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행함
    • v-on:click: DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행
    • v-html
      • 자바스크립트의 innerHTML과 같은 역할을 하며 html 태그가 적용된 화면이 보여짐
      • 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석
      • 실제 HTML을 출력하려면 v-html 디렉티브를 사용
      • HTML 보간법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용금지(XSS취약점)
    • v-bind
      • 이중 중괄호는 HTML 속성에 사용할 수 없기 때문에 v-bind 디렉티브를 사용
      • 엘리먼트의 속성과 바인딩 처리를 위해서 사용, 약어로 ":"로 사용이 가능  
      • 속성을 바인딩함

<template>
  <div>
    <h2>보간법</h2>
    <p>{{ message }}</p>
    <p v-once>{{ message }}</p>
    <!-- 한번만 변화됨 -->
    <button v-on:click="message = message + '!'">Click!</button>
    <!-- 이벤트가 발생할 때마다 변화됨 -->
    <hr />
    <h2>HTML</h2>
    <p>{{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
    <!-- HTML 속성을 가짐 -->
    <hr />
    <h2>속성 바인딩</h2>
    <div :title="dynamicTitle">마우스를 올려보세요</div>
    <!-- title: 도움말 -->
    <input type="text" value="홍길동" :disabled="isInputDisabled" />
    <!-- 마우스를 올리면 나오는 메시지와, 메시지가 나오는 여부를 true, false로 정함 -->
    <input v-bind="attrs" />
    <!-- input 태그에 들어갈 속성을 여러 개 넣을 수 있음 -->

    <hr />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('안녕하세요!메세지 발사!')
    const rawHtml = ref('<h1>나는 HTML이당</h1>')
    const dynamicTitle = ref('안녕하세요!@@@@@!!!')
    const isInputDisabled = ref(true)
    const attrs = ref({
      type: 'text',
      value: 'abc',
      disabled: true
    })

    return {
      message,
      rawHtml,
      dynamicTitle,
      isInputDisabled,
      attrs
    }
  }
}
</script>

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

 

 

 

---

질문목록

 

---

수업교재

 

 

---

오늘의 숙제