이번에 진행한 refactoring 코드 일부 공유

이번에 함께 일하시는 분의 코드를 리펙토링하며 의견을 나누었다.

이번에 함께 일하는 분의 코드 리펙토링을 진행 하였다.

유지보수 가능한 코딩의 기술 자바편의 내용을 기준으로 리펙토링을 하였다.

하나의 메소드를 15라인을 넘지 않도록 하고 결과를 확인하니, 너무 세분화 하여 쪼갠 느낌이다.

하나의 메소드는 하나의 역활만 하도록 하고, 중복된 코드가 없도로 했다.

const __DEFAULT_SELECTBOX_STR = "선택해주세요";
const __ORDER_SELECT_BOX = ['cls-l', 'cls-m', 'cls-s', 'cls-d'];

const removeAllOptions = (isRemove, target) => {
    if(isRemove){
        target.find('option').remove();
        target.append(new Option(__DEFAULT_SELECTBOX_STR, ""));
    }
}

const resetSubSelectBoxOption = (target_id) => {
    let target_obj;
    let isResetSelectBox = false;
    __ORDER_SELECT_BOX.forEach(v => {
        target_obj = $("#"+v);
        if(v === target_id){
            isResetSelectBox = true;
        }
        removeAllOptions(isResetSelectBox, target_obj);
    });
}

const setClassification = (target, val, level) => {
    callClassification({'upper_prd_cls_cd' : val, 'cls_lvl_no' : level}, (res)=>{
        res.forEach(element => {
            target.append(new Option(element.PRD_CLS_NM, element.PRD_CLS_CD));
        });
    }); 
}

const setSubSelectBoxOption = ($target, val, level) => {
    resetSubSelectBoxOption($target.attr("id"));
    if (val === "") return;
    setClassification($target, val, level);
}

const setInitValue4SelectBox = (target, i) => {
    removeAllOptions(true, target);
    if (i === 0){
        setClassification(target, "", 1);
    }
}

const bindEventOnSelectBox = (target, i) => {
    if (i !== (__ORDER_SELECT_BOX.length-1)) {
        target.change(function() {
            setSubSelectBoxOption($("#"+__ORDER_SELECT_BOX[i+1]), $(this).val(), (i+2));
        });
    }
}

const initSelectBox = () => {
    __ORDER_SELECT_BOX.forEach((o, i) => {
        let target = $("#"+o);
        setInitValue4SelectBox(target, i);
        bindEventOnSelectBox(target, i);
    });  
    
}

$(document).ready(function() {
    initSelectBox();  
});

전체 diff로 원본 소스와 리펙토링된 소스 비교

이후 처리로 ESLINT와 TDD를 샘플링 해볼 예정이다.

한걸음 한걸음씩