오늘 개인프로젝트 해설 강의가 있었는데, 강의 초반에 과제요구사항을 튜터님이 함께 짚어주실 때 아차!!!! 하는 생각이 들었다 :] 한가지 내가 잘못 해버렸구나 하고 깨달았다.
과제 요구사항에는 Todo 항목의 isDone 상태가 true인지 false인지에 따라 다르게 렌더링 될 수 있도록 하라고 되어있는데, 이 부분을 내가 간과하고 맘대로 구현해버린 것이다... 😇🔫
나는 Todo 리스트, Done 리스트를 각각 다른 배열로 관리하면서, 완료 버튼을 누르면 해당 항목이 Done 리스트로 옮겨가고 / 취소 버튼을 누르면 해당 항목이 다시 Todo리스트로 옮겨가는 형식으로 기능을 구현했다.
앗차차... 과제 내용을 몇 번이나 꼼꼼히 읽었다고 생각했는데, 빨리 과제를 해야된다는 급한 마음 탓인지 그만 요 부분을 자의적으로 해석해버렸다.
5. todo 완료하기
완료하기 버튼을 누르면 해당 내용이 Done 영역으로 옮겨가는 기능이다. 또한 Done 영역에서는 '완료하기'버튼 대신 '취소하기' 버튼이 표시되어야 한다.
우선 완료하기 버튼을 클릭하면 일어나는 일이다. 기존의 done 배열 뒤에 새로운 항목을 추가하여 setDone 해준다.
6. 완료된 todo 취소하기
이번엔 반대로 Done 영역에 있는 내용을 다시 todo영역으로 옮기는 것이다. 처음에는 이게 왜 그렇게 어려웠는지 모르겠는데 계속 에러가 나서 어려웠다.
그런데 로직 자체는 명칭만 조금씩 다를 뿐 5번과 똑같다...!! 결론적으로는 이렇게 해선 안 됐지만, 어쨌든 요렇게까지 구현하여 과제를 제출할 수 있었다.
스스로 아쉬웠던 점
-
제목/내용 빈칸으로 두었을 때 데이터 유효성 검증 할까말까 하다가 저번에 다 했던 거고 핵심 기능도 아닌데 굳이 또 할 필요가 있을까? 하고 생각하고 그냥 안 했는데 안일한 생각이었닿ㅎㅎ 앞으로는 무슨 일이 있어도 데이터 유효성 검증 기능은 그냥 당연히 넣는걸로 하자!!
-
과제 요구사항을 꼼꼼히 읽자!
-
components 폴더 만들었어야 했는데 깜빡했다😇
해설 강의 듣고 새롭게 배운 점
-
다음 플젝부터는 CSS를 더 잘 활용해 볼 수 있을 것 같다. 나 역시 그동안 특정 요소를 꾸며주는 목적으로만 클래스를 일일이 지정하고 사용해왔는데, 그게 아니라 어떤 레이아웃적인 요소(?)로서 클래스를 지정해 두고 거기에 맞는 것들을 배정하는 방법으로 활용해야겠다.
뭔가 텍스트로 그럴듯하게 정리하기가 어렵다 그치만 튜터님이 어떤 말씀을 하신 건지 이해가 됐다또한 클래스 이름은 이름만 봐도 어떤 레이아웃을 지정한 건지 알 수 있도록 명시적으로 설정해야겠다. -
App.jsx는 앱의 전체적인 모습을 한 눈에 볼 수 있도록 구성하자!
-
컴포넌트간 props 넘겨줄 때, 어느 props가 어느 컴포넌트 레벨에 있어야 할지를 곰곰이 생각해보자!
-
Key값은 요소간 상이하면 어떤 것이든 가능하며, 과제에서 했던 것처럼 단순히 length+1로 하지 말고, UUID 난수 조합이나 시분초 같은 고윳값을 사용할 수 있도록 한다.
