회사 프로젝트 후기 - (1) undefined 에러 처리

2월 초에 이직한 후, 계약서 관리 시스템 솔루션 작업에 투입되어 성과를 내야 했습니다. 빡빡했던 2개월의 작업을 마무리하고 사용자 메뉴얼을 작성하고 운영자 메뉴얼과 함께 영업팀을 통해 고객사에 납품되었습니다.

 

이 작업을 진행하면서, 체결된 계약서의 업무를 수행하는 계약서 담당자의 관점에서 제품을 만들기 위해 5명의 웹 서비스 팀과 함께했습니다. 우리 팀은 기술적인 이슈를 직면하면서 성장했으며, 이를 해결하기 위해 논의와 협업을 통해 경험을 쌓았습니다.

 

이 작업에서 사용한 기술과 도구에 대해 계속해서 공유하고 싶었지만, 이제서야 하나씩 정리할 수 있게 되었습니다. 이번 작업이 저에게 의미있는 이유는 분석과 설계의 과정에 참여하여 나온 제품이며, 적당한 규모의 React 프로젝트였다는 점입니다.

 

다소의 주절거림일 수 있지만 정리와 공유를 통한 나와 타인의 성장을 믿기에 기록을 남깁니다.

 

---

 

(1) undefined 에러 처리

개발을 하다보면 작은 것 같지만 신경써야 할 부분 중 하나는 undefined나 null로 들어오는 상태값입니다. 코드를 수정하고 나서 npm start를 실행하면, 작업한 메뉴에 들어가는 순간 흰 페이지가 나타날 수 있습니다. 이는 코드에서 사용된 변수의 형이 예상과 다르게 들어왔기 때문인 경우가 많습니다.

 

TypeScript의 경우, 타입 선언에서 undefined나 null 값이 발생할 가능성이 있는 변수에는 초기값을 지정해주는 방식으로 오류를 방지할 수 있습니다. 그러나 React + JavaScript로 진행되는 SPA 프로젝트의 경우, 타입 체크 없이 undefined나 null 값이 들어올 가능성이 높기 때문에 처리를 해줘야 합니다. (React에서 propTypes를 가지고 타입 검사를 할 수 있으나 우리 팀 내에서는 propTypes를 코딩 컨벤션으로 사용하지 않았습니다.)

React 크롬 개발자 도구에서 state 중 하나인 fileList가 undefined으로 되어 있습니다.

 

React 크롬 개발자 도구에서 fileList가 초기에 설정한 값과 달리 undefined로 인식된다면, 초기값을 빈 배열([ ])로 지정한 것을 확인하고, fileList를 호출하는 코드를 다시 살펴봐야 합니다.

fileList는 초기값이 빈배열입니다.

 

코드를 다시 살펴보니 fileList의 데이터를 호출해서 그 응답값을 반영하는 변수 res가 눈에 들어옵니다.

저의 눈에 들어온 fileList 호출 코드입니다.

 

만약 호출 응답값인 res가 undefined이면, 예외 처리를 통해 빈 배열로 설정한 fileList의 초기값을 유지시켜줘야 합니다. 예외 처리를 통해, fileList나 다른 변수가 최초에 설정한 초기값을 잘 유지될 수 있도록 합니다.

 

예외 처리를 통해 초기값으로 빈 배열([ ])로 설정한 fileList를 유지시켜주기로 결정했습니다. res가 undefined일 수도 있고, res가 존재할 수도 있지만 res안에 속성 rs_value가 undefined일 수도 있기 때문에 에러 처리를 해주었습니다.

res와 res.rs_value가 undefined 인 경우를 제외하도록 처리했습니다.

 

if문으로 에러 처리를 하고 나니 fileList가 최초에 설정한 초기값 빈 배열로 잘 들어옵니다.

 

fileList가 초기값 빈배열로 잘 설정되었습니다.

 

작업을 하면서 유사한 이슈를 많이 만나게 됩니다. 예를 들어, props로 전달해준 groupList를 map으로 순회하면서 <select> 태그의 <option> 태그를 생성해주는 컴포넌트에서 groupList의 length가 0 이 아니거나 undefined가 아닐 때에만 순회를 실행하도록 합니다. API 호출의 응답값을 받아서 dispatch 처리해주는 모든 함수에도 응답값이 undefined이나 null 일 경우를 생각하고 예외 처리를 추가할 수 있습니다.

 

결론적으로 undefined 처리를 위한 if문을 작성하는 것은 중요한 부분입니다. 이를 통해 최초에 설정한 초기값을 유지하고, 애플리케이션의 안정성을 높일 수 있습니다.

 

이번 작업을 통해, 예외 처리를 통해 초기값을 잘 유지하면서 안정적인 코드를 작성하는 중요성을 더욱 깨달았습니다. 유사한 이슈를 많이 경험하게 되는데, 이를 예방하고 해결하는 방법에 대해 더욱 신경써야 겠습니다. 앞으로도 안정적이고 유지보수가 용이한 코드를 작성하기 위해 노력할 것을 다짐합니다.

 

동료 서버 엔지니어분께 이 부분을 언급하니 자기가 그렇게 처리한 if 문이 많으니, " If 문으로 undefined 처리 좀 해줘~" 이러십니다.

 

(2) 클린 에러 처리 - optional chaining ? 과 nullish 병합 연산자 ??

undefined와 null에 대한 에러 처리를 if문으로 하다 보면 코드가 지저분해지는 것을 알 수 있습니다. 그러나 ES2020에서 도입된 옵셔널 체이닝과 null 병합 연산자를 사용하면 더욱 클린하고 간결한 코드를 작성할 수 있습니다. optional chaining은 ?(single question mark)로 nullish 병합 연산자(nullish coalescing operator) 는 ?? (double question mark)로 표시가 됩니다.

 

옵셔널 체이닝을 사용하면 객체의 속성이나 메서드를 안전하게 접근할 수 있습니다.

 

아래의 코드 이미지에서 옵셔널 체이닝을 사용하여 변수 res가 null 또는 undefined가 아닌 경우에만 객체 res의 속성 rs_value에 접근하고, rs_value가 존재할 경우에만 dispatch 함수에 호출 응답결과값을 반영하는 코드를 작성했습니다. 만약 rs_value가 존재하지 않는다면, 빈 배열을 반환해야 하기 때문에 else로 분기를 마무리했습니다.

 

 • optional chaining 사용 전

 • optional chaining 사용 후

 

 

만일 else 부분에 대해서는 dispatch로 처리해 줄 필요가 없다면 nullish 병합 연산자를 사용할 수 있습니다. 이렇게 함으로써, 코드를 더욱 간결하고 가독성이 좋게 만들 수 있습니다.

 

 • optional chaining과 nullish 병합 연산자 사용 후

 

따라서, 옵셔널 체이닝과 nullish 병합 연산자를 적절히 활용하면, 코드를 더욱 깔끔하고 안정적으로 작성할 수 있습니다.

 

 

이상 '회사 프로젝트 후기 - (1) undefined 에러 처리' 였습니다. 읽어 주셔서 감사합니다.

 

"도움이 되셨다면 공감과 댓글로 지지해주세요!!"