TIL 221012 옛날에 만든 투두리스트 프로젝트 뜯어보기

올해 초쯤에 처음으로 리액트 강의를 듣고 공부해서 만들었던 투두리스트 프로젝트를 다시 열어봤다.

코드를 이렇게 짰다니 지금 실력이 많이 늘었다는 것을 느낄 수 있었다..😀👍

 

 

맨 처음 들어가면 보이는 화면. 왜 정렬을 저렇게 했는지 모를 노릇이다.. css도 잘 못 다뤘나보다..

기본 투두 리스트 목록과 UI

 

 

수정도 가능하고,

수정 버튼을 눌렀을 때 목록이 인풋 창으로 변함

 

 

추가도 가능하다.

추가 버튼을 누르면 나오는 인풋창

새로운 목록이 추가된 투두 리스트

 

 

용케도 투두리스트 기본 기능은 다 구현했다. 그리고 이때 달력도 달고 싶었는데 할 줄 몰라서 못 달았던 기억이 있다.

달력도 빈 파일이지만 파일은 생성되어 있었다.

파일은 생성해둔 달력과 먼슬리챌린지

 

 

 

 

 

그리고 코드를 뜯어봤더니 모자랐던 실력의 내가 너무 귀엽고 웃겼다🤣

 

 

 

!연산자를 모르는지 반대의 값을 주기 위해서 삼항연산자를 사용했다.

! 연산자를 모르는 듯

 

 

불리언을 조건으로 쓸 생각도 못해서 어차피 불리언인 값을 ===을 이용해서 비교하고 있다.

불리언 값을 조건문으로 쓸 줄도 모르는 듯

 

 

프로젝트 중간이라서 그렇기는 하지만 사방에 console이 찍혀있었다. 실행하면 콘솔이 좌르륵-

삭제되지 않은 console.log

 

 

Enter를 눌렀을 때 페이지가 새로고침 되던데 그걸 막고 Enter를 누르면 수정이 완료되게 하고 싶었던 것 같다.

enter 새로고침을 없애고 싶었던 것 같다..

 

 

if문에 따라서 다르게 렌더링을 해줬는데 return뒤에 조건문을 준게 아니라서 가독성이 떨어져서 무슨 코드인지 모르겠다.. 하나씩 주석처리를 해보니까 뭔가 동작이 이상했다... 그리고 이유를 발견했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이건 대체 무슨 코드일까

 

 

투두리스트 목록 1개를 보여주는 컴포넌트의 구조인데 여기에 필요한 체크박스, 인풋, 수정버튼, 삭제버튼을 모두 다 또 한 번 컴포넌트로 쪼갰다. 리액트도 잘 모르면서 왜 이렇게 쪼갰는지 모르겠다 ㅠㅠ 왜 그랬어!!!! 그러니까 코드가 이상하지!!!!!

투두 목록 한개의 컴포넌트 구성. 컴포넌트 요소들을 각각 컴포넌트로 쪼갰다.

 

 

목록 하나를 이렇게 한번씩 또 쪼갰다ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그럼 props관리를 어떻게 하려고!!!! 너는 재사용성이 뭔지 모르니!!! 저걸 어디에 재사용할건데!!!!!!!

컴포넌트 구조를 화면에서 보면 이렇게 쪼개져있다.

 

 

 

 

리팩토링을 해보려고 했는데 구조부터 이상해서 그냥 다시 만드는게 낫겠다는 결론을 내렸다.

그렇게 이 프로젝트는 삭제될 것이다.. 잘가라...👎