첫 리액트 실습 [My Todo]

왼쪽은 라이트 모드, 오른쪽은 다크 모드. 디자인에 통일성이 없는 게 아쉽다 😅

시작은 당연히 투두 리스트지!
진부하지만 다들 투두 리스트를 만드는 데는 이유가 있는 것 같다.

드림코딩 강의 한 번 듣고 나서 최대한 내가 내 힘으로 다 해보려고..
하다가 안 되는 부분은 다시 코드 참고하고 구글링도 열심히 하면서 완성했다.

사용한 것들

• 리액트+자바스크립트
• vite 로 세팅
• chakra ui + css module

구현한 사항

1. 할 일 보여주기/추가/삭제/체크 -> 제일 기본적인 crud
2. all/active/completed -> 현재 status 필터링해서 보여주는 기능
3. 다크/라이트모드 토글
4. (강의에는 없었지만) 전체 체크하기, 전체 삭제하기 기능

ui 는 최대한 신경 쓰고 싶지 않아서 chakra-ui 를 이용했는데
처음이라 그런지 익숙해지는 데에 시간이 걸렸다.
checkbox 와 input text 는 chakra-ui component 를 이용해서 했고
아이콘들도 react-icons 대신 chakra-ui/icons 를 사용.

나머지 자잘한 디자인들은 그냥 css module 로 했다. 역시 그냥 css 가 제일 익숙하다 아직은..
다음에는 또 다른 ui library를 써보거나.. tailwind를 해볼까 싶은데
사실 디자인에 신경 안 쓰려고 시작한 건데 제일 시간을 많이 쏟고 있어서 어딘가 이상함 🤫
아무튼 hover 시 살짝의 애니메이션이나 그런 것들은 모두 생략하고 기본적인 화면만 구성.

구조

• <헤더> : 'My Todo' 텍스트 + 다크모드 토글버튼 + status 필터들
• <투두리스트> : input text
  • 전체 체크/전체 삭제 버튼
  • <투두아이템> map 해서 리스트 보여주기

원래 의도는 이게 아니었는데..
헤더에는 말그대로 헤더와 토글 버튼만 있고
냅바에다가 필터들이랑 전체 체크/ 삭제 버튼 을 넣고
나머지는 투두리스트에서 구현 하려고 했는데....
어쩌다보니 저렇게 됨. 이래서 코딩 전 설계 단계가 참 중요하다는 것을 깨닫는데....
아직 처음이라...설계한 대로 되는 게 기적이라고 봄 허허

디자인도 애초에 내가 맘대로 하는 거다 보니까 전체 체크/삭제 버튼이 위에 있는 게 더 이상할 거라고 생각이 들어서
인풋 텍스트를 밖으로 끄집어 내버리니까
냅바에는 전체 체크/삭제 버튼만 남아버림. 이런 건 냅바가 아니지 않나 싶긴 하네.. 조만간 귀여운 리팩토링을 해줘야겠군.

앱 자체는 흔하고 간단하지만 점점 리팩토링 해주면 예뻐지지 않을까??? 어??? 허허..

todo

• context Api 공부+정리해서 블로그 포스팅 -> 다크 모드 적용할 때 썼는데 아직도 헷갈림...복잡
• input css 스타일링 (accent color) 정리
• localStorage 정리
• 리팩토링 야금야금

고마웠다 나의 귀여운 첫 투두야 !
https://github.com/yerinra/react-todo-app