19 11 회고 - ChoDragon9/posts GitHub Wiki
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
함수 활용- 객체 분해는
undefined
와null
일 때 예외 발생함-
pick
,pluck
함수에서 흡수 할 수 있음
-
- 객체 분해는
- 할당은
assign
함수 사용
- 비동기는
async
함수 사용- thenable을 사용하지 않도록 해야함
-
if/else
는 삼항 연산자로 대체 -
!
는not
함수 사용 -
!!
는toBool
함수 사용
- 코드에
Array.prototype.map
,Array.prototype.filter
를 활용하는 패턴이 보임 -
map
,filter
함수 사용하여 함수 조합을 높게 해야함
- 참조는 추적하기 힘들게 함으로 되도록 사용하지 않는 다.
컴포넌트간의 공유해야할 상태를 부모 컴포넌트를 통해서 하는 경우가 빈번하다. 여기서 설계 오류는 자식 컴포넌트가 외부에 의존성있는 비순수 컴포넌트 임에도 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의 상태를 위함