TIL, 06.28-29

발전된 TodoList 

배운 리덕스를 이용하여 저번에 만든 TodoList를 발전시켜 보기로 했다

내용이 긴 경우 생략하고 ...으로 표시를 했는데 그 전체 본문을 보여주는 상세페이지를 만들려고 했는데 상세페이지모다는 모달을 이용하여 만들어 보았다. 처음에는 scss로 되어있는 스타일을 이번에 복습한 스타일 컴포넌트로 바꿔보았는데 같은 스타일이기 때문에 간단하게 태그로 만들고 복사 복붙하면 똑같이 나올 줄 알았는데 그건 나만의 생각이었다

바로 어그러진 UI에 눈물이 나올뻔했다. 흐름을 하나하나씩 쫒아가며 바꾸니 원래와 똑같은 모습을 되찾았다

그 후 리덕스로 상태관리를 해보았는데 지금 TodoList는 props drilling이 되고 있어서 그 부분(todos)을 전역으로 빼어 관리해 보았다. 배운 흐름을 따라 차근차근 따라서 만들어보니 다행히도 잘 동작하였다. 문제는 그다음이었다. 새로이 전역으로 빼서 관리할 것이 있어서 나름대로 다시 만들고 실행을 해보았는데 type undefined 나오는 것이었다 처음에는 어디서 왜 이 오류가 일어나는지 몰라서 로그를 찍어 흐름을 찾아보았는데 액션객체를 반환하는 함수가 동작이 안됐다 아예 함수가 실행이 안되고 바로 리듀서로 넘어가 type이 undefined라 생기는 문제였다. 이유를 몰라서 구글에서도 찾아보고 chatGPT에게도 물어보고 주변사람들에게도 물어서 이유를 찾아보았지만 원인을 찾을수가 없었다. 나중에 차근차근 하나하나씩 흐름을 다시 따라가면서 나 스스로 되새김질을 하면서 원인을 찾고 깨닫고 말았다 export인데 중괄호로 함수를 감싸지 않아서 아예 실행이 안됬던 것이었다. 찾고 정말 기쁜 것보다는 허망했다. 이런 가벼운 실수였다니... 다음에는 코드를 쓰면서 type undefined를 보면 import 부분을 유심히 봐야겠다

 

후기

type undefined 오류를 해결하는데 새벽에 거의 2시간을 보냈다. 도저히 안되겠다 자고 하자 하고 몇 시간 자고 아침에 일어나서 조금 괜찮은 상태일 때 다시 코드를 따라가서 찾은 것이다. 안될 때는 잠깐 휴식을 갖고 편안한 마음으로 오류를 찾아야겠다. 이번에 TodoList 만들 때 기존 TodoList에 리덕스를 추가하고 모달기능과 수정기능을 추가하면서 새롭게 개선했는데 오류가 나서 오류 찾으면서 고치는 것이 정말 문제였다. 하지만 모든 것을 타파하고 내가 원하는 대로 기능할 때 후후후후후후후후후후훟 이것이 개발이지