사소한 오류를 잡아라!

 

프로그램을 작성할 때 오류는 의외로 사소한 부분, 당연히 문제가 없을 것이라고 생각한 부분들에서 자주 출몰하는 것 같다.

 

오늘 여러 오류에 발목잡혀 퀘스트 과제 진도가 생각만큼 잘 나가지 않았는데, 그중 기억나는 오류가 두 가지가 있다.

 

먼저 동료분의 소스코드에서 나왔었던 오류이다. 시간 세팅 컴포넌트에서 입력하는 값을 폼 스토어에 실시간으로 반영하고, 반영된 값을 다시 폼 스토어로부터 컴포넌트로 가져와 입력창에 입력했던 값을 설정해주는 구조였다. 동료분이 아무리 입력창에 값을 입력해도 입력된 결과가 다시 반영되지 않는 이슈가 있었는데, 값이 반영되는 스토어 쪽에는 입력한 값이 정상적으로 들어가는 것이 console.log를 통해 확인되고 있었다. 반면 스토어로부터 다시 값을 받아오는 컴포넌트 로직 쪽에서는 저장된 값을 제대로 가져오지 못하고 있었다.

 

20여 분을 아무리 들여다봐도 스토어에 값을 전달하고 스토어에서 다시 값을 가져오는 로직에는 문제가 없는 것 같았는데, 작동은 되지를 않으니 문제가 없던 로직을 이렇게 저렇게 바꿔보는 시도라도 해야만 했다. 그러다가 혹시나 싶어 스토어를 구독할 때 전달했던 forceUpdate 로직에 뭔가 이슈가 있을까 싶어 확인했더니, forceUpdate를 제대로 하고 있지 않았던 부분을 발견할 수 있었다. 그 오류를 바로잡으니 문제가 바로 해결되었다.

 

 

내가 겪은 오류는 타이머 시간 조건을 검사하여 타이머가 작동 중 시간이 모두 흘렀을 경우 특정 버튼의 명칭을 바꾸는 로직이었다. 분을 나타내는 변수와 초를 나타내는 변수가 모두 숫자 0일 경우 로직을 실행하도록 하는 구조였는데, 프로그램을 최초로 실행했을 때 주어지는 초기값 분, 초 값일 때에는 00:00이 되면 버튼의 명칭이 잘 바뀌었는데, 이상하게도 시간 세팅 컴포넌트에서 시간을 새로 세팅해줄 경우에는, 타이머를 작동시킨 뒤 시간이 00:00이 되어도 버튼의 명칭이 바뀌지 않는 것이었다.

 

마찬가지로 시간 변수가 잘못된 것인가 싶어 분, 초를 console.log로 찍어 확인했다. 초기값 분, 초일 때에도, 시간 세팅 컴포넌트를 통해 새로 세팅한 분, 초일 때 모두 자신의 분과 초를 정상적으로 나타내었다. 그러면 초기값 분, 초일 때는 둘 다 0이니까 맞는 것이 당연한데, 이상하게도 새로 세팅한 분, 초일 때에는 둘 다 0이어도 버튼의 명칭을 변경하는 로직을 수행하지 않고 있었다.

 

10분 정도 계속 고민하다가, 숫자들을 비교하는 로직의 결과값도 console.log로 찍어봐야겠다는 생각이 들어 결과값을 찍어봤더니, 새로 세팅한 분, 초일 때에는 0과 0을 비교하는데도 false가 출력되었다. 음... 혹시나 싶어서 폼에서 스토어로 값을 등록하는 지점에서 값을 숫자로 명시적으로 변경해 저장하도록 시도해보았더니 다행히 조건 검사 로직에서 정상적으로 조건을 검사하는 것을 확인할 수 있었다.

 

 

오늘 사소한 오류를 맞닥뜨리고 해결하면서 다음에 오류를 또 해결할 때에는 다음의 내용들을 참고할 수 있을 것 같다.

 

 

- 오류가 발생하는데 핵심 로직을 충분히 살펴봤는데도 문제가 없다면, 핵심 로직에 영향을 주는 부수적인 로직들 중 잘 갖춰놨다고 생각했던 부분에 오류가 있을 가능성이 있으므로 핵심 로직에 연결되는 부분들도 하나씩 차분히 살펴봐야 한다.

 

- console.log로 값들을 찍어볼 때, 문제가 있을 것으로 의심되는 값들을 사용하는 연산 등의 결과가 로직에 존재하는 경우, 그 결과도 같이 찍어본다. 더 많은 힌트를 얻을 수 있다.