[TIL] 20211122 vue2와 vue3의 차이/ img require/ computed getter setter/ props type 정의

1. vue2와 vue3 는 무엇이 달라졌을까?

vue3로 프로젝트를 했었는데 vue2에서 composition api로 바꿔야하는 업무를 맡아서 

이번 기회에 차이점을 살펴보고자 했다.

https://velog.io/@bluestragglr/Vue3-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%B0%94%EB%80%8C%EB%82%98%EC%9A%94

Vue 3 변경점 정리: 무엇이 바뀌나요?

 

 

 

2. img require

생소한 코드를 봤는데 이미지 소스에 require이라는 코드가 있었다.

helloImg: require('../../assets/imgs/ddd.svg')

data부분에 이렇게 되어있고 template단에서는 :src로 바인딩되어있었다.

require을 쓰는 이유는 ''안의 값이 그냥 들어가면 단순히 string값이 들어가기 때문에 경로를 찾아서 들어가지 못한다고 한다.

그나저나 setup으로 바꾸면서 저런 부분은 바뀌는게 없는 값이니까 바인딩을 하지않고 그냥 

 <img src="~@/assets/imgs/ddd.png">

이렇게 넣었다.

변수로 따로 빼는 것이 좋은가?

 

https://m.blog.naver.com/lizziechung/221793761299

[Vue.js] img 태그의 src 바인딩 하는 방법

 

 

 

3. vue2에서 computed를 사용할 때 getter 와  setter만들기

vue3로 프로젝트를 할 때는 readonly속성만 computed로 받아와서 setter을 써본적이 없었다. 

vue2 option api에서 computed에 getter와 setter가 함께 있는 코드를 발견!

이것을 composition api 로 바꾸려면

const nameAndCountry: WritableComputedRef<string> = computed({
  get(): string {
    return 'somestring'
  },
  set(newValue: string): void {
    // set something
  },
});

 

참고 https://stackoverflow.com/questions/60856216/how-to-type-a-computed-property-in-the-new-composition-api

 

 

 

 

4. vue +  ts , props의 타입 정하기

props에는 타입을 지정해주어야하는데 array나  object는 그냥 쓸 수 없다.

어떤 항목이 들어있는지 타입을 지정해주어야한다.

<template>
   ..
</template>

<script lang="ts">
type Item = { name: string, width: number }

export default defineComponent({
    name: 'ㅇㅇ',
    components: { ㅇㅇ },
    props: {
        apple: {
            required: true,
            type: Array as PropType<Item[]>,
        }
    },
    setup(props, { emit }) {
      //...
    },
});
</script>

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

여기서 눈여겨 봐야할 것은 defineComponent와 PropType이다.

 

 

 

TypeScript에서 Vue component내의 타입을 올바르게 추론하려면, 전역 메서드 defineComponent를 통해 component를 정의 해야합니다:

 

출처 : vue.js

 

 

 

---

 

저번주에는 우울하고 마음이 힘들었다.

회사에 가기 싫은 것도 아니고 회사가 참 좋은데

회사에 있으면 입꼬리가 바닥으로 뚝뚝 떨어지고 도무지 올라갈 생각을 안하는 것이다.

겨우겨우 입꼬리를 올리려고 하면 한쪽만 가까스로 올라가서 마스크를 쓰고 다니는게 참 다행이구나 느낄 때가 많았다.

나는 기분이 '좋은' 상태를 유지하는 것에 집착을 하는 편인데

아무리 기분 좋아지는 신나는 노래를 들어도 기분이 나쁜것이다!!!! oh no!!!

(그냥 안좋은게 아니라 원인이 있음)

그래서 내가 참 좋아하는 시니어분들한테 나의 근심을 이야기하고 응원의 말도 얻었다.

좋으신 분들이 나의 감정에 공감해주시고 그럴 수도 있다고 하며 다독여주셨다.

하지만 그것이 내 실제 생활을 바꿔주지는 못했다.

그래서 나는 진지하게 나와의 대화를 나누었다.

내가 분석한 결과 내가 "바로 이것때문이군! 이러이러한 점이 악순환이 되었군!" 할만한 답이 나왔다.

그것을 해결하기 위해서는 내가 내 마음을 바꾸어야했고 매일마다 작은 챌린지를 해보기로 했다.

 

그래서 결론은 오늘은 나름 괜찮은 하루였다.

매일 나아질거라고 믿는다 !