코드 작성시 초보가 실수하기 쉬운 것(주의할 부분)

1. 문자 입력 이스케이프 처리

프로시저에서 json 문자열을 처리할 때 따옴표, 쌍따옴표, 백슬래시에 이스케이프 처리가 되어 있지 않으면 오류를 일으킨다.

문자 입력하는 곳마다 해놓는 게 속 편할 듯

//문자열에서 JSON 문자열 추출 및 이스케이프 처리(이스케이프 처리하는 함수를 따로 작성했을 경우 사용)
//따옴표 혹은 쌍따옴표로 감싸진 JSON 문자열을 찾아 match에 저장
const match = textData.match(/'(\{.*\})'/) || textData.match(/"(\{.*\})"/);
if (match) {
    const jsonStr = match[1];
    const escapedJsonStr = jsonStr
        .replace(/\\/g, '\\\\')  // 백슬래시 이스케이프
        .replace(/'/g, "\'")     // 작은따옴표 이스케이프
        .replace(/"/g, '\\"');   // 쌍따옴표 이스케이프
    textData = textData.replace(match[0], `'${escapedJsonStr}'`);
}

 

 

1) match()

(1) 함수 정의

- 정규 표현식과 일치하는 문자열을 찾는 함수

- 결과를 배열로 반환

(2) 반환값

- match[0]: 정규식과 완전히 일치한 전체 문자열(작은따옴표 또는 큰따옴표를 포함한 문자열)

- match[1]: 첫 번째 ()그룹에 해당하는 부분 문자열(작은따옴표 또는 큰따옴표를 제외한 JSON 데이터 자체)

 

예시

const proc = "CALL my_proc('{\"key\": \"value\"}')";

//match 실행
const match = proc.match(/'(\{.*\})'/);

//match에 들어가는 값
[
  "'{\"key\": \"value\"}'", // match[0] → 전체 문자열 (작은따옴표 포함)
  "{\"key\": \"value\"}"    // match[1] → JSON 부분만 (작은따옴표 제거됨)
]

 

 

2) replace()

textData에서 match[0]을 찾아 escapedJsonStr로 변환

 

2. api 통신 순차적 처리

async/then

 

 

3. 모달 닫고 열 때 form 데이터 초기화

document.getElementById('dataForm').reset();

 

+ 테이블 초기화

document.querySelector('#dataTable tbody').innerHTML = '';

 

4. form 데이터 저장을 위한 통신시 falsy값 처리

const data1 = savedData1 || '';

 

5. 값이 문자열 'null'로 전해지는 경우 처리

1) 프론트엔드에서 처리

const dataForJSON = {
    data1: row.dataset.data1 || '',
    data2: row.dataset.data2 || '',
    //...
}

Object.keys(dataForJSON).forEach(key => {
    if (dataForJSON[key] === '' ||
        dataForJSON[key] === 'null' ||
        dataForJSON[key] === null){
        delete dataForJSON[key];
    }
});

2) 데이터베이스에서 처리

*JSON으로 온 데이터를 프로시저에서 추출하는 과정

SET p_column_data = CASE 
    WHEN JSON_EXTRACT(p_json_data, '$.column_data') = 'null' THEN NULL
    ELSE JSON_EXTRACT(p_json_data, '$.column_data')
END;

 

6. 불필요한 엔터 입력 고려

엔터 입력시 폼 제출 막기

document.addEventListener('keydown', function(event){
    if(event.keyCode === 13){
        event.preventDefault();
    }
}, true);