첫 코드 리팩토링

1. 기능이 비슷한 함수 작명 규칙 통일 ✅

- 데이터 로드: load*

- 데이터 저장: save*

- 테이블 업데이트: update*Table

- 모달 열기: open*Modal(mode)

2. 기능이 비슷한 함수 실행 흐름 통일 ✅

- 추가/수정 버튼 클릭 => open*Modal(mode)

- DOMContentLoaded -> 추가/수정 버튼들에 open*Modal 이벤트 리스너 추가

3. 기능이 비슷한 함수 객체로 관리

- load

- save

✔️ 지금 테이블별로 함수를 모아놔서 굳이 load, save, update*Table끼리 모을 필요가 없을 것 같다.

4. api 통신 함수로 관리 ✅

  - 달라지는 부분(proc) 파라미터로 관리

5. 행 클릭, 폼 제출 이벤트 핸들러 취합

 

 

4번 -> 3번 순서로 실행

(load/save 함수에 api가 포함됨)

 

5. 이벤트 핸들러

const eventHandlers = {
    handleTableRowClick(tableId, callback) {
        const table = document.getElementById(tableId);
        if (!table) return;

        table.addEventListener('click', (e) => {
            const target = e.target;
            if (target.tagName === 'TD') {
                const row = target.closest('tr');
                const radio = row.querySelector('input[type="radio"]');
                if (radio) {
                    radio.checked = true;
                    if (callback) callback(row);
                }
            }
        });
    },

    handleFormSubmit(formId, saveProc, successCallback) {
        const form = document.getElementById(formId);
        if (!form) return;

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            formHandler.saveFormData(formId, saveProc)
                .then(() => {
                    if (successCallback) successCallback();
                })
                .catch(error => {
                    console.error('Form submit error:', error);
                });
        });
    }
};

 

 

 

처음에는 얼레벌레 일단 되는 것부터 조금씩 만들었다. 그렇게 했더니 코드가 체계 없이 중구난방이라서 이제 와서 정리하자니 품이 제법 든다. 하지만 코드 구조를 짜놓고 시작하기에는 내 능력이 부족했다. 기능을 구현하는 데에 급급해서 중간에 코드 구조가 반복되는 걸 보고도 모듈로 만들어야겠다는 생각을 못 했다.

여하튼 앞으로는 코드를 만들 때 전체적인 구조를 염두에 두면서 만들기를 유념해야겠다.