Nuxt typescript 마이그레이션중 코맛타코토 No.2 (nuxt-property-decorator)

글이 너무 길어져서 나눔

 

---

middleware 넣기

middleware 라는 예약파일을 만들고 구성파일의 내용까지도 같다. (store를 끌어오는것도 가능)

하나 다른게 있다면 역시 컴포넌트내에서 선언하는 부분인데

 

typescript 입히기 전

export default {
  components: {
    FollowList,
  },
  middleware: 'authenticated',
}

입힌 후

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import FollowList from '~/components/FollowList.vue';

@Component({
	components: {
		FollowList,
	},
	middleware: ['authenticated'],
})
export default class ...

---

문법적인 요소인데, mock데이터를 만들때, fill map을 이용하여 만들었는데

문득, 이하의 코드에서

const fakePost = Array(10).fill().map(v => ({
  id: Math.random().toString(),
  content: '내용' + Math.random().toString(),
}));

왜 화살표 함수에서 객체를 반환할때 () 씌여지는건지 의문이 생겼는데,

 

뭐 이렇게 공식문서에 써져있는 대로 객체 리터럴 표현을 반환하기 위해서는 함수 분문을 괄호 속에 넣는다고 한다.

근데 생각해보면 당연하다 () => a 의 의미가 () => { return a; } 와 같은데,

그럼 리턴값을 객체로 하고싶을때는 () => { id: '', name: '' } 인데 그럼 일반 () => {return ;}  와 구분이 안되므로

() => ({ id: '', name: ''}) 으로 괄호를 감싸주는거 같다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN