인터페이스 개발

뷰의 체크박스를 몇가지 기능을 추가해서 컴포넌트로 만드는 업무가 주어졌다. 개발을 하며 기능을 발견하는 대로 하나씩 구현을 하던중에 실패했다. 실패한 원인에 대해서 고민한 결과, 내가 만들고자 하는게 무엇인지 본인이 정확히 알지 못한것이 이유였다.

 

1. 자바스크립트의 기본적인 checkbox

2. 뷰에서 제공하는 추가적인 checkbox 기능

3. 내가 만들고 싶은 checkbox 기능

 

이 세가지가 뒤섞이고 꼬여서, 개발을 하면 할수록 하나를 수정할 때마다 다른게 안되고, 끝이 없는 진탕에 빠진 기분이 들었다. 결국 꼬인 부분을 모두 지운 다음에, 인터페이스 부터 정의하기로 했다. 개발을 하는 본인이 알 수 있도록 기능들을 글로써 정리했다.

export interface IMyCheckBox {
    /**
     * v-model의 타입에 따라 각각 다르게 동작합니다.
     *   1. boolean인 경우 : true 또는 false를 받습니다.
     *   2. 배열인 경우 : 배열에 value 프로퍼티를 추가합니다.
     *   3. 기타 타입인 경우 : true-value 또는 false-value를 받습니다.
     */
    modelValue?: unknown;
    /**
     * checked 일 때, modelValue가 trueValue가 됩니다.
     * (1. modelValue가 boolean이면 trueValue는 무시됩니다.)
     * (2. modelValue가 배열이면 trueValue는 무시됩니다.)
     */
    trueValue?: unknown;
    /**
     * uncheked 일 때, modelValue가 falseValue가 됩니다.
     * (1. modelValue가 boolean이면 falseValue는 무시됩니다.)
     * (2. modelValue가 배열이면 falseValue는 무시됩니다.)
     */
    falseValue?: unknown;
    /** 
     * true일때, 값이 선택되어있습니다. 
     * (단, modelValue가 boolean의 false일 때, checked는 무시됩니다.
     */
    checked?: boolean;
    /** 
     * modelValue가 배열일때, 배열에 value를 추가합니다.
     */
    value?: unknown;
}

다른 모든 프로퍼티들이 modelValue의 영향을 받기 때문에, modelValue의 타입에 따라 3가지 갈래로 분기해서 개발을 하면 될 것 같다.

 

이번 일로, 무작정 개발에 들어가면 점점 더 꼬이는 상황을 겪었으니, 다음부터는 타입스크립트로 인터페이스를 정의한 다음, 생각이 정리된 다음에 개발에 들어가자고 다짐했다.