20 02 회고 - ChoDragon9/posts GitHub Wiki
데코레이터 변경 대응
이슈
2019.08에 프로젝트 세팅할 때는 데코레이터의 모듈은 아래와 같았다.
import Component from 'vue-class-component'
import { Emit, Prop, Vue, Watch } from 'nuxt-property-decorator'
하지만 2020.02 지금 시점에는 데코레이터의 모듈은 변경이 필요하다. (nuxt/typescript 발표 시점부터 달라졌을 것으로 예상)
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를 보여주고 있다.
해결방안
스토어에 저장된 상태의 라이프사이클 관리는 사용하는 페이지에서 관리해야 한다. 때문에 상태를 사용하는 페이지에서 컴포넌트 제거 시점에서 상태를 제거해줘야 한다.