TodoList CRUD 기능 구현하기

히진로그·2022년 9월 16일
0

mini-project

목록 보기
17/28
post-thumbnail

전에 만들다가 중간에 그만뒀던 TodoList를 다시 처음부터 만들고 있다.
지금까지 구현한 것은 전체 컴포넌트와 페이지 마크업과 스타일링 그리고 회원가입과 로그인 로직이다.

일단 최종 완성본처럼 스타일링을 끝내고 하드 코딩으로 데이터를 넣어두었다.
그리고 TodoList 등록, 수정, 삭제 기능을 구현한 후 세세한 디테일을 수정해나갈 계획이다.
각 부분에서 디테일을 잡으면서 코딩하다가는 완성 못할 것 같고 실제로 전에 이렇게 만들다가 지쳤다.

일단은 전역에서 관리가 필요한 데이터를 useReducerContext API를 사용해서 관리하고 나중에 리덕스를 이용해 리팩토링해 볼 예정이다.
최근에 강의를 들으면서 useReducerContext API를 2번 정도 써봤는데, 점점 그 로직이 이해가 돼서 TodoList 만들면서 나 혼자 적용해보면 진짜 내 지식으로 만들 수 있을 것 같다.

전에 TodoList를 만들다가 그만둔 이유가 베이스 코드를 작성하기도 전에 머릿속으로 컴포넌트 분리와 추상화를 고민하다가 시작하기도 전에 두려움을 잔뜩 먹었기 때문이다.

아직 바탕 코드도 없는데 추상화하겠다고 머릿속으로만 생각하고 있으니까 당연히 진도가 안 나갔다. 컴포넌트 분리도 큰 컴포넌트를 만들어 놓지도 않고, 어떤 컴포넌트가 재사용할 수 있을지도 모르는 데 재사용만 생각하며 작게 작게 만들다 보니 의미 없이 컴포넌트만 잘게 쪼개버렸다.

추상화도 마찬가지 얘기다. 특히 axios요청을 할 때 baseurl을 따로 빼고 이것도 저기로 빼고 이것도 따로 만들고...😵‍💫
이렇게 하다 보니 스스로 생각정리가 안돼서 결국 그 TodoList는 여전히 중간에 멈춰있다.

이번에는 일단 크게 크게 다 만든 다음 다시 코드를 보며 분리 가능한 것들은 분리하고 추상화 개념도 적용해보고 리팩토링을 하며 코드를 발전시킬 생각이다.

<지금까지 구현한 화면들>



0개의 댓글