- 사용 기술 -
React(class형) / mobx
- 상황 -
자동차를 만들고 있다.
중간중간 점검을 실시한다.
점검은 총 5번 있다.
점검 일정이 잡히면 DB에 넣어둔다.
자동자A 의 점검 일정을 복사하여
자동차B 점검 일정에 입력하는 기능이 있다.
carB.checkDate1 = carA.checkDate1 || "";
carB.checkDate2 = carA.checkDate2 || "";
carB.checkDate3 = carA.checkDate3 || "";
carB.checkDate4 = carA.checkDate4 || "";
carB.checkDate5 = carA.checkDate5 || "";
- 문제 -
점검은 날짜가 정해진 일정도 있고
아직 정해지지 않은 일정도 있다.
이때 날짜가 정해지지 않은 일정은
아래처럼 빈 문자열이 넘어간다.
carB = {
checkDate1: "",
checkDate2: "2022-12-17",
checkDate3: "",
checkDate4: "",
checkDate5: "2022-12-24",
}
이걸 받아주는 백단에서 날짜 데이터 형식 에러가 났다.
Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]
checkDate1: ""
- 해결 -
carA 에서 날짜가 있는 값은
carB 에서도 그대로 넣어서 보내주면 된다.
문제는 날짜가 없는 경우다.
날짜가 없는 값은 아예 파라미터에 해당 key 조차 존재하면 안 된다.
그러려면 null 체크를 하는 단계가 필수로 들어가야 한다.
값마다 똑같은 로직을 반복해서 작성하면 비효율적이다.
따라서 아래와 같이 수정했다.
먼저 null 체크가 필요한 key 들을 모아서 배열을 만들어 둔다.
그 배열을 forEach 문으로 한 바퀴 돌면서 안에 들어 있던 key 들을 하나씩 꺼내온다.
carA 에서 해당 key 로 value 가 있다면 carB 에도 해당 key 로 value 를 넣어준다.
const keyList = ["checkDate1", "checkDate2", "checkDate3", "checkDate4", "checkDate5"];
keylist.forEach((ele, idx, arr) => {
if(carA[ele]) {
carB[ele] = carA[ele];
}
});
이전 코드는 key 가 무조건 생기고 null 체크 부분이 반복된다.
따라서 키가 새로 생기거나 로직이 변경되면 똑같은 수정을 여러 번 해주어야 하는 단점이 있었다.
새로 수정한 코드에서는 null check 를 수행해야 하는 key 값을 리스트에 추가만 하면 되고
null check 로직도 한 곳에서만 수정하면 되므로 훨씬 더 수정보완하기 편한 코드가 됐다.
-221216
'JavaScript' 카테고리의 다른 글
| [JavaScript] 숫자만 입력 가능한 정규식 조건 만들기 (0) | 2023.04.11 |
|---|---|
| [JavaScript] 문자열을 그대로 html 태그로 DOM에 추가하고 싶을 때 (0) | 2023.01.16 |
| [JavaScript] concat() 함수 사용법 / 변이 (mutation) 함수 (0) | 2022.12.26 |
| [JavaScript] 배열에서 중복되는 요소 제거하여 합치기 (0) | 2022.12.19 |
| [JavaScript]두 배열 요소 합쳐서 return 하기 / concat 함수 null 체크 (0) | 2022.11.21 |