WIL(06)

리액트 입문주차 과제로 투두리스트를 만들기했다.

늦어도 주말까지는 내달라고 하셔서 주말 내내 봤던 강의 다시 한번 다 보고 만들기를 시작했는데 잠을 거의 못 잔거같다...ㅎ

시험이 있어도 잠은 꼭 잤는데ㅋㅋㅋ 정신차리고 보니까 아침 8시인가 그랬던거같다.

그렇다고 결과물이 잘 나왔냐 그것도 아니였고 오히려 혼란만 가중된 상태였다.

갈수록 기초적인 내용과 문법들을 바탕으로 쌓아 올리다 보니 그 사이에 내가 쉽게 넘어갔던 것들이 티가 나기 시작한 거 같은 느낌이였다.

따로 튜터님이 투두리뷰해주신 강의를 뒤늦게나마 봤는데 거기서 더욱 이런 생각들이 박혔다... 진짜 기본적인 것도 몰랐구나..하는 거

오히려 지금이라도 알아서 다행이다. 앞으로 공부 할 시간이 더 많고 내가 부족한 부분을 채워서 더욱 성장할 수 있도록 할 수 있으니까!

 

암튼 이번주 WIL은 투두를 만들면서 느꼈던 점을 감정적인 부분말고 객관적인 부분으로 적을까한다.

---

1. 👑제시한 ToDoList UI에 집중한 나머지 구조를 잘못 짰다.

 필요한 기능을 중점으로 만들었어야하는데 UI에 집중한다고 결국 component를 나누기 어렵게 구조를 짜버렸다.😅

 오히려 더 어려워질 프로젝트 전에 미리 경험 해볼 수 있어서 좋았다.

 사실 기능이 투두리스트 저장이랑 삭제까지는 만들었는데 그 기능을 만들고나니까 아 구조가 잘못됬구나...라는 아차싶은 마음이 왔다.

 왜 그런 생각이 들었냐면 이제 구조를 보면,

예시 UI

input창에 입력을 해서 추가를 누르면 저기 working이라는 곳으로 새로 올라간다 즉 새로 렌더링이 된다.

그리고 TITLE과 text는 기존의 input값에서 들고오고 삭제와,완료 버튼 이 두 버튼은 버튼component으로 묶어서 재사용이 쉽도록

만들어줬어야 했다.

근데 구조에 집착?하는 나머지 저 개개의 버튼을 다 만들고 working에서 삭제버튼을 누르면 삭제가 되지만 done에서 삭제를 누르면 삭제가 먹히지 않는 하드코딩을 하게 된 것이다.

그래서 저 삭제 버튼을 done에서도 똑같이 사용하자! 라고 생각을 했는데 애초부터 이 생각이 잘못됬었다.

Done이라는 구역에 굳이 저 카드들을 만들어주지 않고 working에서 일단 다 만들어놓고 완료버튼으로 그대로 옮겨지게만 하면 되는 문제였다.   따로 삭제버튼을 구현할 필요가 없이,, Done은 working이 끝나야 넘어오는 자리니까...

 이 생각이 딱 드는데 하...구조를 잘못짰구나라는 생각에 어디서 부터 어떻게 다시 시작을 해야할 지 너무 막막했다..

다시는 이런 실수하지말자라는 마음에 기록을 남긴다.

---

2.component에 대한 이해가 덜됬다.💥

리액트는 컴포넌트를 잘게 만드는것이 중요해! 💭그리고 재사용하는게 중요해!💬 이런 생각에 사로잡혀서 

너무 멋도모르고  구조를 나눠버렸던거같다. 전체적인 상위컴포넌트와 하위컴포넌트의 관계등을 생각하지 않고 ㅠㅠ

이 부분도 지금 경험하게 되서 다행이였다. 오히려 이번에 실수를 통해 깨닫게 된 득이 많다.

진짜 오래 고군분투를 했던지라 시간이 지나도 기억이 생생하네..ㅎ

 

먼저 버튼을 재사용할꺼야!!라는 마음에 채 나머지 기능이 다 구현되기도 전에 컴포넌트를 나눴다.

물론 추가버튼을 구현하고 나눈거지만 이게 재사용이 불가한 버튼이다. 위에서 말했던 것 처럼 하드코딩으로 만들어버린 코드이기때문

다 나누고 나서 VSC가 빨갛게 변하는것을 실시간으로 보면서 너무 당황했었다;;(카페였는데 옆 자리 사람들도 내가 당황한걸 알 듯)😦

어디서부터 props을 가져와야할지 ㅠ 가져와도 어디에다가 어떤 문법으로 넣어야하는지 힘들었다.

하나 겨우 만들어 놓으면 다른데서 문제이고 이게 지금 다시 생각해보니까 상위>하위 컴포넌트들의 관계를 내가 제대로 숙지를 못하고 있었던거같다. 아까 스스로 만들어보고 튜터님 리뷰를 보는데 Props를 통해서 렌더링하고 state를 사용해서 값을 바꾸는지를 이제야 확실히 쫌 더 알게 된거같다. 렌더링이되는 부분이 App.js에서 다 있어야 한다고 생각을 했는데 이게 하위컴포넌트의 return부분이 렌더링 된다는 것을 알고 아 왜 이 props가 상위에서 하위방향으로 정보가 내려가는지, 어떤것을 가져와야하는건지에 대해서 좀 더 이해한거같다.

(완벽 이해는 아직도 아님,, 똑같은거 반복해보면서 한 줄씩 이해하는공부를 해보려고 함)

 

---

튜터님말씀대로 눈코딩이 아닌 손코딩🫶을 해야겠다라고 뼈저리게 느꼈다.

✨✨✨한 줄씩 다 적어보면서 어디가 어떻게 왔고 왜 이렇게 적었고 이런 것들을 복습해봐야되겠다.

이제 이렇게 고생을 겪어봤으니 다시 만들어 볼 때는 다른 실수는 만나도 이 실수들은 피해가기 위해서 미리 생각을 할 수 있을 꺼 같다.

그리고 똑같은거 다시 만들어봐야겠다. 내가 익숙해질때까지 반복하면 그 기능들은 어디서 써먹어도 다시 써먹을 수 있을 꺼 같다.

그 날이 올때까지 반복 또 반복 ㅠㅠ❗️

이번 주 WIL은 많은 오류들과 문제들을 보고 느꼈던 점을 중점으로 기록했다. 여기서 끝😎