19 11 회고 - ChoDragon9/posts GitHub Wiki

생각

불가피한 반복작업에 도움되었던 IDE 기능

WebStorm 사용중

  • 대/소문자 변환: Command + Shift + U
  • 라이브 탬플릿: Preferences > Editor > Live Templates
    • 단순 반복적인 코드를 단어로 등록해서 자동완성할 수 있음.

요구사항은 자주 변경 되고, 그에 따른 일정 산정을 다시해야 함

  • 요구사항이 변경되면서 일정 산정을 다시하는 일이 발생한다.
  • WBS에서 계층 구조를 가지면 일정 관리 시스템 변경 비용이 많이 들기 때문에 되도록 계층 구조를 가지지 않도록 한다.

설계문제

비동기 흐름제어 설계부족

원인

  • Vuex의 Action의 반환값을 항상 Promise<void>로 함
  • HTTP Response를 직접 사용하지 못하도록 하기 위함

문제점

  • Component에서 비동기 흐름제어가 필요할 때, HTTP Response의 결과에 따라 분기가 필요함
  • Vuex의 State를 사용하면 가능하지만 Action 뒤에 State를 사용하면 암묵적인 값 할당으로 코드에 기술됨
  • Action에 따른 State를 추적해야 함으로 이해하기 힘들어짐

해결 방안

  • 필요한 정보만 Action의 반환값에 담아준다.
  • Promise<CommonResponse>라는 타입으로 반환값을 처리했다.
interface CommonResponse {
  success: boolean
  message?: string
}
  • 성공/실패 여부만 필요하기 때문에 success 프로퍼티를 조건으로 다음 흐름으로 보낼지 결정한다.

값을 다루는 방법에 대한 설계부족

값을 다루는 방법에 있어서 불규칙적인 성향을 띈다. 어떨 때는 Immutable과 List를 다루는 형태를 사용하며, 어떨 때는 절차형 프로그래밍 성향을 띈다.

비교연산, 자료구조 분해 및 할당 그리고 컴퓨터 프로그램을 이루는 순차, 분기, 반복, 참조에 대한 규칙을 부과할 필요가 있다.

비교 연산

  • 코드에서 동일한 타입의 값을 비교하는 패턴이 보임
    • ===을 사용함
  • isSame(src, target): boolean 형태로 대체

자료 구조 분해 및 할당

  • 분해는 pick, pluck 함수 활용
    • 객체 분해는 undefinednull일 때 예외 발생함
      • pick, pluck 함수에서 흡수 할 수 있음
  • 할당은 assign 함수 사용

순차

  • 비동기는 async 함수 사용
    • thenable을 사용하지 않도록 해야함

분기

  • if/else는 삼항 연산자로 대체
  • !not 함수 사용
  • !!toBool 함수 사용

반복

  • 코드에 Array.prototype.map, Array.prototype.filter를 활용하는 패턴이 보임
  • map, filter 함수 사용하여 함수 조합을 높게 해야함

참조

  • 참조는 추적하기 힘들게 함으로 되도록 사용하지 않는 다.

UI 상태관리 설계부족

컴포넌트간의 공유해야할 상태를 부모 컴포넌트를 통해서 하는 경우가 빈번하다. 여기서 설계 오류는 자식 컴포넌트가 외부에 의존성있는 비순수 컴포넌트 임에도 Prop로 사용한 것이다.

비순수 컴포넌트라면 특수화된 컴포넌트인데 순수 컴포넌트를 위한 Prop를 사용하여 복잡성을 유발했다. 즉, Vuex의 State를 통한 UI 상태 공유 정책이 필요하다.

문제점

  • Backend API의 State에 UI를 위한 State를 작성하면 관심사가 분리가 되지 않음
    • Backend API의 State는 HTTP Response
    • UI State는 Component의 State

해결 방안

  • Vuex에서 Backend API와 UI State를 모듈단위로 선분리함
  • Backend API 모듈에는 HTTP 통신을 위함
  • UI 모듈에는 View의 상태를 위함
⚠️ **GitHub.com Fallback** ⚠️