20 02 회고

데코레이터 변경 대응

이슈

2019.08에 프로젝트 세팅할 때는 데코레이터의 모듈은 아래와 같았다.

import Component from 'vue-class-component'
import { Emit, Prop, Vue, Watch } from 'nuxt-property-decorator'

하지만 2020.02 지금 시점에는 데코레이터의 모듈은 변경이 필요하다. (nuxt/typescript 발표 시점부터 달라졌을 것으로 예상)

https://typescript.nuxtjs.org/cookbook/components/

import { Vue, Component, Prop } from 'vue-property-decorator'

원인

프레임워크, 라이브러리 레벨의 모듈일 때 보통 바로 사용한다. 하지만 결국 이 모듈은 외부 모듈이라 변경점에 대한 컨트롤을 할 수 없다. 버전업 후 코드 수정이 필요할 경우 많은 부분의 수정이 필요하다.

해결방안

외부 모듈의 진입점을 통일하는 것이다. 해당 모듈을 사용하는 파일을 만들고 모두 해당 파일을 바라보게 한다.

AS IS

import Component from 'vue-class-component'
import { Vue } from 'nuxt-property-decorator'

@Component({})
class IconNext extends Vue {}

TO BE

import Component from 'vue-class-component'
import { Emit, Prop, Vue, Watch } from 'nuxt-property-decorator'

export { Component, Emit, Prop, Vue, Watch }

import { Component, Vue } from '~/plugins/nuxt-decorator'

@Component({})
class IconNext extends Vue {}

Vuex 상태 라이프사이클 이슈

현상

A 페이지에서 생성되었던 C 상태가 B 페이지에서도 C 상태가 사용된다. A 페이지에서 만들었던 C 상태가 B 페이지에 사용되어 의도하지 않는 UI를 보여주고 있다.

해결방안

스토어에 저장된 상태의 라이프사이클 관리는 사용하는 페이지에서 관리해야 한다. 때문에 상태를 사용하는 페이지에서 컴포넌트 제거 시점에서 상태를 제거해줘야 한다.