끄적

Vue.js

Vue.js는 프레임워크이자 라이브러리다. 공식 사이트에서는 뷰를 점진적인 프레임워크라고 부르고 있음

• 프레임워크
  일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정해 놓은 도구. 생산성 증가

• 라이브러리
  기술 모음집. 자주 사용되는 기능들 재활용할 수 있도록

Vue.js특징

• MVVM(Model-View-ViewModel)패턴.
  화면을 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식. 구조화 되어있어 코드 직곽적 이해, 추후 유지보수 편함
  View: 사용자 화면. Dom(돔. html문서에 들어가는 요소의 정보를 담고 있는 데이터 트리)
  Model: 데이터를 담는 용기. 보통 서버에서 가져온 데이터를 자바스크립트 객체형태로 저장
  ViewModel: 뷰와 모델의 중간 역역. 돔 리스너(돔의 변경 내역 즉각 반응 후 로직 수행하는 장치)와 데이터 바인딩(뷰에 표시되는 내용과 모델의 데이터 동기화)제공

• 컴포넌트 기반 프레임워크
  왜 컴포넌트 기반? 코드의 재사용이 쉬워서
  컴포넌트: 레고블록과 같은. 잘 쌓으면 원하는 모형을 만들 수 있는 것과 같은.

• 단방향 데이터 바인딩, 양방향 데이터 바인딩
  단방향데이터바인딩: 항상 상위->하위로 데이터전달
  양방향데이터바인딩: 모든 데이터 값 동기화. 한쪽을 바꾸면 다른쪽도 바뀜

뷰 인스턴스

• new생성자 함수로 new Vue({})생성
  필요 기능(객체.속성들의 집합. 추상화:속성을 선택적으로 작성가능하기때문에 )을 생성자에 정의.

  new Vue({
    ...
  }) ->인스턴스

• 뷰 인스턴스 옵션 속성
  template: html,css 등 화면에 표시할 마크업 요소를 정의하는 속성
  methods: 화면의 전반적인 동작과 관련된 로직 추가
  created: 뷰 인스턴스 생성 직후

• 뷰 인스턴스 라이프 사이클
  라이프 사이클(생명주기): 인스턴스 상태에 따라 호출할 수 있는 속성들
  라이플 사이클 훅: 속성들이 커스텀 로직(개발자가 임의로 작성한 추가 로직)에 의해 실행되는것
  라이플사이클은 총 8개이며 4단계로 나눔
  인스턴스 생성 -> 인스턴스를 화면에 부착 -> 인스턴스 내용갱신 -> 인스턴스 소멸
  (인스턴스부착과 갱신구간은 데이터가 변경되는 경우에만 거치게 됨)
  created
  인스턴스 생성 직후기때문에 data와 methods 속성이 정의되서 this.data로 접근 가능. 단, 화면부착전이라 template 속성 접근 할 수 없음
  mounted
  el속성에서 지정한 화면 요소에 인스턴스 부착된직후기때문에 template속성에 접근 가능.
  watch
  뷰의 반응성
  변경 데이터 값과 관련된 로직을 미리 넣을 수 있음. 관찰만 가능
  computed
  데이터 값 변경 가능. 변경 데이터의 화면요소와 관련된 로직

뷰 컴포넌트

화면영역을 컴포넌트화 -> 코드직관적
크리구조(컴퓨터의 자료구조): 노드(부모-자식)

• 컴포넌트 등록하기
  전역컴포넌트: 여러인스턴스 사용가능
  지역컴포넌트: 특정인스턴스만 사용가능(지정한곳이 아닌 다른곳에서 쓰면 html 사용자 정의로 인식)
  둘의 차이점은 유효범위.

뷰 컴포넌트 통신

뷰는 컴포넌트 단위로 구성. 다른 컴포넌트 값을 직접 참조 불가능
왜? 서로 고유한 유효범위(scope)를 갖기 때문에. 이는 뷰 프레임워크 내부적으로 정의된 특징
간접적으로 전달을 해야함
상•하위 컴포넌트 관계
상위컴포넌트 -> 하위컴포넌트: props을 통해 데이터전달
하위컴포넌트 -> 상위컴포넌트: 이벤트 발생

• 상위컴포넌트에서 하위컴포넌트로 데이터 전달하기
  하위컴포넌트에 props: 'props 속성 이름' 정의
  상위컴포넌트에 v-bind: 'props 속성 이름' = "상위컴포넌트의data속성"

• 하위컴포넌트에서 상위컴포넌트로 이벤트 전달하기
  이벤트발생과 수신
  인벤트발생(emit event)시켜 상위컴포넌트의 메서드를 호출
  하위컴포넌트에 이벤트발생(신호보냄): this.$emit('이벤트명')
  상위컴포넌트에 v-on: 이벤트명 = "상위 컴포넌트의 메서드명"

하위에서 상위로 데이터전달방법은 없나? event bus를 이용해 전달가능. 단, 단방향 데이터 흐름에 어긋나는 구현 방법

• 관계없는 컴포넌트 간 통신- event bus
  별개의 새로운 인스턴스 생성 후
  보내는 컴포넌트쪽에서 .$emit('이벤트명,',데이터)
  받는 컴포넌트쪽에서 created구간 .$on('이벤트명', function(데이터받을인자))

단점: 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않기때문에 뷰엑Vuex 상태관리도구 필요

뷰 라우터(Vue Router)

• 라우팅
  라우터를 알기위해선 우선 라우팅을 이해
  라우팅: 웹페이지 간의 이동방법. SPA(Single Page Application. 미리 해당 페이지 받아놓고 화면을 갱신하는 패턴을 적용)에서 주로 사용
  일반적인 웹브라우저 웹페이지 요청은 서버에서 응답받아 다시 사용자에게 돌려주는 시간동안 화면 상에 깜빡거리는 현상이 있음
  이를 라우팅으로 처리하면 화면 매끄럽게전환 가능, 화면을 빠르게 조작할 수 있게되서 사용자 경험 향상

• 뷰 라우터
  라우팅을 구현할 수 있도록 지원하는 공식 라이브러리

• $mount() API
  el 속성과 동일하게 인스턴스를 화면에 붙이는 역할. 생성된 인스턴스를 $mount()를 이용해 붙임 ex)$mount('#app')

여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터 네스트드 라우터, 네임드 뷰

• 네스티드 라우터 (nested router)

  children: [
    { 
    path: ..., 
    component: ...
    },
    { 
    path: ..., 
    component: ...
    }
  ]

  네스티드 라우터에는 최상위 컴포넌트와 최상위 컴포넌트 하위 컴포넌트에도 router-vuew 가 있다는 점
  화면을 구성하는 컴포넌트의 수가 적을 때 유용하지만 많은 컴포넌트 표시하는데 한계가 있음

• 네임드 뷰 (named view)
  특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
  name속성을 추가

  componets: {
  default: ...,
  header: ...,
  footer: ...  
  }
  

22.05.26

컴포넌트 기초

2가지 개념

1. 캡슐화(모듈화)//얄약같은 감싸는용도. 같이작동할수도 있고 따로 동작할수도 있음
2. 재사용
   드롭다운메뉴같은것
   컴포넌트 만드는방법 2가지
3. 전역 등록 전역컴포넌트를 만드는건 적음
4. 지역 등록

부모 자식간의 데이터 통신
props 부모와 자식관계 데이터 전달
부모에서 자식으로 들어가기만 하는 !!단방향 데이터
그래서 수정권한은 부모한테 있다
props속성만들기(이름자유지만 유지보수쉽게)
그래서! emits을 사용해 줘야지 됨!!!
emits 자식에서 부모를 올려주는 것. 이벤트발생하는것 v-on , @

부모->자식 props 단방향데이터
자식->부모 emits

컴포넌트 속성 상속

App.vue

<template>
  <MyBtn>Banana</MyBtn>
  <!-- Props -->
  <!-- 부모의 데이터바인딩 색상적용 -->
  <MyBtn :color="color">
    <span style="color: red">Cherry</span>
  </MyBtn>
  <MyBtn
    color="royalblue"
    large>
    Grape
  </MyBtn>
  <MyBtn>Apple</MyBtn>
  <MyBtn
    class="jessi">

    <span style="color: yellow">JEESIE</span>
  </MyBtn>
  <MyBtn
    class="jessi"
    style="color: red"
    title="Hello world">
    JEESIE
  </MyBtn>
  <button>Banana</button>
</template>

<script>
import MyBtn from '~/components/MyBtn.vue'

export default {
  components: {
    MyBtn
  },
  data() {
    return  {
      color: '#000'
    }
  }
}
</script>

MyBtn.vue

<template>
  <div 
    :class="{large: large}"
    :style="{ backgroundColor: color }"
    class="btn">
    <slot></slot>
  </div>
  <h1 v-bind="$attrs"></h1>
</template>

<script>
  export default {
    // 어떠한 속성도 상속 안하고 싶을때
    inheritAttrs: false,
    props: {
      color: {
        type: String,
        default: 'lightpink'
      },
      large: {
        type: Boolean,
        dsfault: false
      },     
    },
    // 상속을 특정한 요소에 직접적으로 해주고 싶을때 $attrs
    created() {
      // $attrs객체연결
      console.log(this.$attrs)
    } 
  }
</script>

<style>
  .btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
  }
  .btn.large {
    font-size: 20px;
    padding: 10px 20px;
  }
</style>

컴포넌트 Emit

부모컴포넌트와 자식 컴포넌트연결

App.vue

<template>
  <!-- 카멜케이스는 안먹히니까 대시케이스로 꼭 수정 -->
  <MyBtn
    @onHello="log"
    @change-msg="logMsg">
    BlueBerry
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn.vue'

export default {
  components: {
    MyBtn
  },
  methods: {
    log(event) {
      console.log('DoubleClick')
      console.log(event)
    },
    logMsg(msg) {
      console.log(msg)
    }
  }
}
</script>

<template>
  <!-- App.vue는 MyBtn의 최상위 요소에 적용되 있음 -->
  <!-- 만약 형제요소가 생긴다면? log()가 다시 안먹힘! -->
  <div class="btn">
    <!-- BlueBerry가 들어가는 slot -->
    <slot></slot>
  </div>
  <!-- $emit은 두번째인수로는 데이터를 같이 넘겨줄 수 있음 $event라는 객체를 넘겨주면? MouseEvent-->
  <h1 @dblclick="$emit('onHello', $event)">
    ABC
  </h1>
  <!-- v-model 양방향 데이터 -->
  <input
    v-model="msg">
</template>

MyBtn.vue

<script>
  export default {
    // 속성 상속 거부 App.vue파일의 log()함수가 작동안됨
    // inheritAttrs: false
    // emits를 배열데이터로 작성 후 부모요소의App.vue에 있는 click이벤트를 사용하기위해 가져와서
    // 자식요소 $emit()이 붙어있는 곳에 명시된 'click'을 그대로 붙여넣으면 적용이 됨!
    // 즉 특정한 이벤트를 상속받아서 $emit메소드를 통해서 부모요소에 연결이 되있는 클릭이벤트를 실행하게됨
    // 컴포넌트가 사용되는 곳에서 우리가 1.연결하는 이벤트는 원하는 이름 아무거나,
    // 2.대신에 정확히 emits라는 옵션에 받아서 3.그것이 어디서 어떻게 사용될지 $emit()정의 후 실제 원하는이벤트 연결해서 쓸 수 있음
    emits: [
      'onHello',
      'changeMsg'
    ],
    data() {
      return {
        msg: 'Hello Vvue!'
      }
    },
    watch: {
      msg(e) {
        this.$emit('changeMsg', this.msg.trim(e))
      }
    }
  }
</script>

컴포넌트 Slot

v-slot의 약어 : #
이름을 갖는 슬롯(Named Slots)

App.vue

<template>
  <MyBtn>
    <!-- `v-slot`의 약어 : `#` -->
    <template #text>
      <span>Bolt</span>
    </template>

    <template #icon>
      <span>&#9889;</span>
    </template>
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn.vue'
export default {
  components: {
    MyBtn
  }
}
</script>

MyBtn.vue

<template>
  <div class="btn">
    <!-- Fallback contents MyBtn내용이 없을때 대체되서 나올 수 있는 내용 -->
    <!-- 이름을 갖는 슬롯(Named Slots) slot에 name을 부여해서 순서를 보장해줌 App.vue파일에 순서가 바껴도 순서바뀜없이 잘 나옴 -->
    <slot name="icon"></slot>
    <slot name="icon"></slot>
    <slot name="text"></slot>
    <slot name="icon"></slot>
    <slot name="icon"></slot>
  </div>
</template>

<style>
  .btn {
    background-color: lightcoral;
    display: inline-block;
  }
</style>

컴포넌트 Provide, Inject

App.vue파일에 자식인 Parent.vue가 있고 그 하위요소로 Child.vue가 있는 상태
Child.vue파일에 있는 내용을 App.vue 파일에 전달할려면,
Child->Parent->App으로 import해서 가야하는 비효율적인 단계를 거쳐야함
아래 예시를 보면 Parent.vue는 전달만 하는 비효율적인 사태가 벌어짐
props에 다시 props를 적용하고있음

효율성을 높이기 위해서
조상요소에서 특정한 하위요소로 보내줄 수 있음
단점은 조상요소에서 데이터가 변경되더라도 하위요소에는 적용이 안됨. props와 다르게 반응성을 가지지 않음
App.vue 파일에 Provide:{} 를 만들어주고,
Child.vue 파일에 Inject:[] 배열데이터를 만들어준다
!-- Provide, Inject 적용 전 --------------------------------------------------

!-- App.vue --------------------------------------------------

<template>
  <Parent :msg= "message" />
</template>

<script>
import Parent from '~/components/Parent'

export default {
  components: {
    Parent
  },
  data() {
    return {
      message: 'Hello world'
    }
  }
}
</script>

!-- Parent.vue --------------------------------------------------

<template>
  <Child :msg="msg" />
</template>

<script>
import Child from '~/components/Child'

export default  {
  components: {
    Child
  },
  props: {
    msg: {
      type: String,
      default:''
    }
  }
}
</script>

!-- Child.vue --------------------------------------------------

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

!--! Provide, Inject 적용 후 --------------------------------------------------
!--? App.vue --------------------------------------------------

<template>
  <button @click="message = 'Good?'">
    Click
  </button>
  <h1>App: {{ message }}</h1>
  <Parent />
</template>

<script>
import Parent from '~/components/Parent'
// 계산된
import { computed } from 'vue'

export default {
  components: {
    Parent
  },
  // provide()로 반응성을 유지하는 데이터를 만들려면 computed를 사용해 콜백사용
  provide() {
    return {
      msg: computed ( () => this.message )
    }
  },
  data() {
    return {
      message: 'Hello world'
    }
  }
}
</script>

!--? Parent.vue --------------------------------------------------

<template>
  <Child />
</template>

<script>
import Child from '~/components/Child'

export default  {
  components: {
    Child
  }
}
</script>

!--? Child.vue --------------------------------------------------

<template>
  <div>
    Child: {{ msg.value }}
  </div>
</template>

<script>
export default {
  //데이터처럼취급
  inject: ['msg']
}
</script>

컴포넌트 Refs

class id 선택자 대신 vue에서 제공하고 있는 ref(reference참조)
mounted 라이플사이클 사용할것. 왜? html이 연결된후라서

App.vue

<template>
  <Hello ref="hello" />
</template>

<script>
import Hello from '~/components/Hello.vue'

export default {
  components: {
    Hello
  },
  // ref접근은 $refs로 reference이름으로 hello를 사용함
  // this.$refs.hello = <h1 ref = "hello"></h1>
  // * created는 컴포넌트가 생성된 직후
  // * mounted는 html구조에 컴포넌트가 연결된 직후
  mounted() {
    console.log(this.$refs.hello.$el) //최상위가 한개가 아니면 제대로된 값을 불러오지 못함
    console.log(this.$refs.hello.$refs.good)
  },
}
</script>

Hello.vue

<template>
  <h1>
    Hello Vue!
  </h1>
  <h2 ref="good">
    Good Vue!
  </h2>
</template>

컴포지션 API

setup()은 반응성이 없기 때문에 vue에서 제공하고 있는 ref를 객체분해로 들고와서
반응성을 제공해 줘야함
초기값을 할당을 해주고 동작시키면 객체데이터를 할당
객체데이터를 데이터로 쓰기 위해서는 value속성을 사용해주기

<template>
  <div @click="increase">
    {{ count }}
  </div>
</template>

<script>
import { ref } from 'vue'
  export default {

    // data() {
    //   return {
    //     count: 0
    //   }
    // },
    // methods: {
    //   increase() {
    //     this.count += 1
    //   }
    // },
    // 반응성 x 그래서 ref기능을 객체구조분해로 vue패키지에서 가져와줘야함
    setup() {
      // 함수를 실행해서 그 함수의 인수로 초기값을 만들어줘야함! 초기화할 0을 넣어줌
      // 반응성을 가진 하나의 객체데이터가 count로 반환이됨
      // count는 객체데이터이다 보니까 바로 사용할 수 없음
      // 데이터로 사용해 주기 위해서 value속성 사용해줌
      let count = ref(0)
      function increase() {
        count.value += 1
      }
      return {
        count, 
        increase
      }
    }
  }
</script>

컴포지션 API 비교

App.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reverseMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello World'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(msgValue) {
      console.log(msgValue)
    }
  },
  // 라이프사이클
  // created()는 컴포넌트 생성된 직후
  created() {
    console.log(this.count)
  },
  // mounted() html, 컴포넌트가 연결될 직후
  mounted() {
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = 'Good!'
    }
  } 
}
</script>

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reverseMessage }}
  </h1>
</template>

<script>
// vue패키지에서 ref 객체구조분해를 통해 가져옴
// mount -> onMounted
// 객체구조분해후 computed는 변수선언후 computed콜백함수실행, watch도 감시할대상, 두번째에 변수선언.
// onMounted 함수 선언 후 콜백함수사용
// created, beforeCreated는 라이프사이클이필요하지 않음 왜??
// setup은 created, beforeCreated 라이프사이클 훅 사이에 실행되는 시점이라서
import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    // computed는 변수 선언 후 함수처럼 사용해주면 됨
    // 콜백함수로 반환된 값이 doubleCount에서 사용 가능해지게됨
    const doubleCount = computed(function () {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }

    const message = ref('Hello World')
    const reverseMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    watch(message, msgValue => {
      console.log(msgValue)
    })
    function changeMessage() {
      message.value = 'Good!'
    }
    //created()라이프사이클과 동일효과
    console.log(message.value)

    onMounted(()=> {
      console.log(count.value)
    })

    // setup()데이터 내부에서 반환을 해줘야함
    return {
      count,
      doubleCount,
      increase,
      message,
      changeMessage,
      reverseMessage
    }
  }


}
</script>