2021년 3월 31일 이머시브 코스에서 두번째 HA를 치루었습니다! 짝짝짝~!! 이번에는 저장된 정보 데이터를 불러와서 서버에 출력하고 해당 정보를 리액트로 만든 컴포넌트들과 합쳐서 일종의 영화를 소개하는 웹페이지를 만들었습니다.
저는 서버부분이 아무래도 익숙치가 않아서 정신이 멀쩡할 때 서버부분을 먼저 하기로 결정했습니다. 다행히 서버부분은 테스트를 잘 통과했고 정보도 서버를 열었을 때 해당 url에 맞게 출력이 잘 되었습니다. 하지만 자신있다고 생각했던 리액트 부분에서 시간을 많이 소비했습니다. 정상적으로 잘 작동하고 HA에서 원하는대로 잘 만들었다고 생각했는데 테스트는 틀렸다고 나와서 상당히 어려움을 겪었습니다.
에러를 보고 어디서 틀렸는지 파악하려 했습니다. 테스트에서에러 내용은 cannot read property 'innerhtml' of null
으로 테스트에서 innerhtml의 값이 잡히지 않았습니다. 해당 에러가 나오는 이유도 알 수 없었습니다. 왜냐하면 innerhtml의 값이 잡히지 않았다면 웹페이지가 작동을 할 수 없는데 웹페이지에서는 정상적으로 작동을 잘 했기 때문입니다.
그래서 에러를 해결하기 위해 공식문서와 에러에 대한 원인을 구글링했습니다. 2시간 정도 헤메다가 찾은 것은 props 변수의 이름을 확인해보라는 것이었습니다. 생각을 해보면 정상작동을 하는데도 에러가 뜬다는 것은 테스트에서 원하는 props의 이름에 매칭을 해주지 않았다면 테스트의 props에서는 작동이 안될 것 같다는 생각이 들었고 테스트를 유심히 살펴보니 제가 짠 props의 변수 이름에 오타가 있다는 것을 발견했습니다.
정말 사소한 문제이지만 이 사소한 것으로 시간을 정말 많이 낭비했고, 만약 제가 해당 컴포넌트를 짤 때 의뢰를 한 사람이 원하는 변수명에 맞추어서 코드를 작성하지 않는다면 서로 의견마찰이 생길 것이라고 생각을 했습니다. 저는 정상작동만 하면 될 것 이라고 생각을 했었는데 이제는 변수명을 정할 때 한번 더 확인하고 작성할 수 있도록 해야겠다는 생각이 들었습니다. 개발자분들이 변수명을 생각하는데 시간을 가장 많이 할애하는 이유도 괜히 알 것만 같은 기분이었습니다.
항상 HA가 끝나고 솔로데이가 있습니다. 이제까지 혼자 배웠던 것을 복기할 수 있는 좋은 시간입니다. 이번에는 예전에 마무리하지 못했던 restful api와 common js, 그리고 알고리즘에 대한 내용과 제 생각을 정리할 계획입니다. 제가 계획에 맞게 일정을 잘 소화했으면 좋겠습니다!