19 12 회고

assign 함수로 자료 구조를 만들때 이슈

현상

assign 함수로 자료 구조를 조합하여, 새로운 자료 구조를 만들었다. 하지만 interface에 적합하지 않음에도 컴파일 타임에 정상동작한다. 어떻게 해결해야 할까

해결 방안

• 제네릭으로 전달받은 타입의 Partial로 사용

export function assign<T>(obj: Partial<T>, ...objs: Partial<T>[]): T {
  return Object.assign(obj, ...objs)
}

비교연산 강제성 제거

문제점

isSame 함수를 사용하는 것은 선언적이고 함수 조합시 유용하다. 하지만 비교연산 하나만 사용할 때는 오히려 부자연스럽다.

해결 방안

• isSame은 함수 조합 시 또는 캐싱할 때 사용한다.
• === 대신 isSame을 강제적으로 사용하는 것은 하지 않는다.

Vuex의 Action과 Mutation의 함수명 중복 해결

문제점

Action과 Mutation에서 정의한 함수명이 중복되어도 추적이 되지 않는 다. 매번 검색을 통해서 해결 가능하지만 검색을 하지 않고 변경을 가할 경우 이슈가 발생한다.

해결방안

Action과 Mutation의 함수명을 상수로 정의한다. 상수를 사용하여 정의 및 사용하도록 한다. 해당 방안을 사용하면 nuxt 라이프사이클 중 fetch에서도 중복을 해결할 수 있다.

코드

export default가 아닌 export const로 선언하면 IDE에서 Add import statement를 지원받을 수 있다.

/auth/action.ts

export const changeUnauthorizedUser = 'changeUnauthorizedUser'
export const fetchCheckLogin = 'fetchCheckLogin'

/auth/mutation.ts

export const mutateAuth = 'mutateAuth'
export const mutateAdmin = 'mutateAdmin'
export const mutateUnauthorizedUser = 'mutateUnauthorizedUser'

/auth/index.ts

export * from './action'
export * from './mutation'