요즘 '일하기 시러시러병'에 걸렸다.
하지만 일은 계속 생성되고, 일로 인해 스트레스 받는 상황만 계속 늘어갔다.
일하기 위해 타임어택식으로 일을 처리하려고, J인척 업무 시간표를 짰다.
오전 업무 중 하나가 '심사화면에서 대환구분코드, 금융기관코드값 빠지는 경우 방어로직 코드 추가하기' 였음.
● 문제상황: 심사화면에서 onload시 쿼리 조회해서 dataset에 담아오는데, 이후 저장 누르면 그 값에서 대환구분코드, 금융기관코드값만 간헐적으로 값이 사라져서 in값 파라미터로 전송됨.
원인을 분석하려고 했지만, 생각보다 코드가 말짱해보여서 일단 방어로직부터 추가하기로 함.
업무 시작하기 전에 생각한 예상 시간은 30분이었지만 결론은 2시간 동안 삽질을 했다. 그 기록이다.
결론부터 말하자면 아묻따 log는 JSON.stringify로 다 찍자는 거다.
일단 업무 전 예상 시나리오 로직은 이랬다.
| if(json객체.totalgetrow() >= 0) { //값이 있는지 보고 if(대환구분코드 == null || 대환구분코드 === "" || 금융기관코드 == null || 금융기관코드 === ""){ //코드 중 하나라도 값 없으면 alert("저장 실패 !") //사용자 알려주고 retrun //저장로직 진행안해야지 } |
근데 시나리오 로직처럼 했더니 에러가 발생됨... (30분은 물건너갔음)
1. Json 객체가 undefined
2. 1번 해결 후 대환구분코드, 금융기관코드 값 undefined
3. 1~2 해결 후 대환구분코드 값이 분명 빈값인데 if로직이 안탐
● 디버깅 과정
| NO | 문제해결과정 |
| 1 | 우선 json객체를 JSON.stringify로 로그 찍었는데, 에러로그가 metadata는 json.stringigy 못한다고 뜸. 다시 코드를 살펴보니 객체변수를 선언해주는 코드가 없어서 솔루션(webSquare)에 설정된 metaData인가보다 하고 metaData에 값 set하는 객체 변수를 json.stringify로 찍어서 해결 |
| 2 | console.log(json.stringify(json객체.대환구분코드키값)); 했는데 undefined 호출됨. 그래서 자세히보니 json객체가 아니라 배열이었음. [{"keys" : "values" ... }] 이런 식 그래서 json배열[0].대환구분코드키값으로 해결 |
| 3 | 여기서 시간을 많이 잡아먹었음. 분명히 console.log(JSON.stringify(json배열[0].대환구분코드키) 하면 "" 으로 값이 나와서 if문에 성립이 되어야 하는데 if문에 계속 안들어감. (* JSON.stringify(json배열[0].대환구분코드키)를 변수 대환구분코드키에 넣음) 그래서 아래 로그 찍어봄 console.log(typeof 대환구분코드키); //타입확인 console.log(대환구분코드키.length); //길이확인 타입은 string이고 길이가 2가 나옴. 엥? 빈값인데 2라고 싸늘하다... 그래서1 공백이 들어가 있나 하고 trim()했는데도 if문 조건이 안들어감. 그래서2 정규식으로 공백 다 제거해서 if문에 넣어봄. if( 대환구분코드.replace(/\s/g,"") === ""){ ...} (*/은 정규식 시작과 끝에 넣으며, \s는 공백을 말함(엔터, 탭, 스페이스 등), g는 공백값은 전부 서치하라는 뜻임) 그래서3 json.stringify로 무슨 값이 들어가 있는지 열어봄 그랬더니 작은따옴표 두개가 들어가 있어서 길이가 2로 나왔던 것이었음!! 그래서 4 최종 정규식을 이렇게 바꿔서 if 조건 값에 무사히 들어갈 수 있었음 if(대환구분코드.replace(/["'\s]/g,"") ===""){...} |
● 배운 점 : 이상한 거 추측해서 로그 이것저것 찍어보지 말고 처음부터 모르겠으면 JSON.stringify해서 RAW data를 보자.
+ 검증 받은 후 추가 내용
3번 문제에서 값에 작은 따옴표가 들어갔던 것은 내가 변수 값 할당할 때 Json.stringify로 묶은 채로 할당해서 였다.
변수에 값 할당할 때는 좀 더 확인하고 넣어보도록 해야지.
이상 삽질한 기록 이었음.