용로그

개발 기간 23.11.17 ~ 23.12.09 완성품(?) 느낀 점 1. 설계를 잘해야겠다. flex를 뜯어고친 경험을 해보니, 애초에 설계를 잘하는 게 중요하다는 생각이 들었다. 기능을 추가하더라도, 큰 틀에서는 변화가 없게끔, 즉 즉흥적인 변경도 대응할 수 있는 틀을 잡고 시작하는 게 좋을 것 같다. (할 수 있다면...) 2. 멘토가 있으면 좋겠다. 최종적으로는 적용하지 못한 최적화 부분을 고민하면서 느낀 점이다. 질문을 할 수 있는 멘토가 있었으면 좋겠다. GPT도 많은 도움이 되지만, 프로젝트 전체를 복사해서 물어보는 것은 쉽지 않기 때문이다. 기회가 된다면 멘토를 찾고 싶다. 꼭 멘토가 아니더라도 물어보면서 성장할 수 있는 환경을 찾아봐야겠다. 3. 웹은 웹으로, 모바일은 모바일로 웹을 모바일..

대망의 휴지통 마지막 시간입니다. 지우기, 초기화, 복구 순서로 진행할 것입니다. 지우기 아주 간단하게 끝낼 수 있습니다. TodoList의 지우기 로직과 완전히 동일합니다. Trash 컴포넌트에서 삭제 핸들러를 내려줍니다. TrashMainItem에서 id 값을 인수로 전달하며 핸들러를 실행시킵니다. id값에 해당하지 않는 요소만 반환하여 trash State를 업데이트시켜 줍니다. 마지막으로 trash값이 바뀔 때마다 localStorage에 업데이트 시켜주는 코드를 작성하면 끝입니다. 휴지통에서 '지우기'를 누르면 완전히 지워지는 것을 확인할 수 있습니다. 초기화 초기화 버튼을 누르면 모달창을 통해 경고를 띄울 것입니다. https://studysmart.tistory.com/99 리액트 간단한 모..

쓰레기통을 처음 생각할 당시만 해도 위의 사진과 같이 투두리스트 컴포넌트(Home.jsx)의 자식 컴포넌트로 휴지통 컴포넌트(Trash.jsx)를 만드려고 했었습니다. 하지만 페이지 라우팅을 배운 김에 활용해 보기 위해 컴포넌트를 분리시켰습니다. 이렇게 분리를 시키니 데이터 이동에 대한 고민이 생길 수밖에 없었습니다. 물론 최상위 컴포넌트인 App 컴포넌트를 사용하면 간단하게 옮길 수 있습니다! 그러나 페이지의 최종 컴포넌트를 각각 Home.jsx와 Trash.jsx로 나눠놓은 상태에서, 다시 최종 컴포넌트의 최종 컴포넌트를 만드는 꼴이 된다는 생각이 들었어요 그래서 App 컴포넌트를 활용하고 싶지는 않았습니다. https://studysmart.tistory.com/93 투두리스트 로컬스토리지에 저장하..

원래는 휴지통을 모달로 띄우려고 했으나, 페이지 라우팅 개념을 배운 김에 라우팅을 활용하기로 했습니다. 우선 휴지통을 만들기 전에 기초작업을 할 것입니다. 순서 1. 버튼 디자인 2. 페이지 라우팅 3. 쓰레기통 컴포넌트 디자인 4. useNavigate 활용 버튼 디자인 시작에 앞서 각 버튼에 사용할 UI를 먼저 디자인 했습니다. 쓰레기통을 그리는 김에, 완료 버튼을 대신할 물고기도 그려줬습니다. 버튼에 적용해봅시다 하하 만족스럽네요 페이지 라우팅 우선 간단하게 쓰레기통 컴포넌트를 만들어줍니다. 그리고 페이지 라우팅 세팅을 해줍니다. /trash 경로로 들어가면 쓰레기통 컴포넌트가 렌더링 되도록 세팅해 줍니다. /trash 경로로 이동시 쓰레기통 컴포넌트가 잘 렌더링 되는 것을 확인할 수 있습니다요 쓰..

TodoList를 처음에 생각했을 때는 페이지 하단부에 따로 넣을 것이 없을 것이라고 생각했습니다. 그래서 Footer 부분에 고려를 하지 않은 채 시작했는데요 하지만 완료 모달 버튼이 페이지의 하단부에 들어가게 되면서, 임시방편으로 사진처럼 최상위 태그에 그냥 바로 썼습니다. 더 많은 기능을 구현할 가능성도 있기에, 나중을 위해서 간단하지만 구조를 개편해 볼 거예요 요렇게 footer 컴포넌트를 추가할 거예요 기존의 코드를 그대로 옮겨서 Footer 컴포넌트를 새로 생성했습니다. 최상위 컴포넌트인 Home.jsx에서 Footer 컴포넌트를 불러옵니다. 이때 Footer 또한 Context를 통해 함수를 제공할 것이기에 TodoContext.provider 컴포넌트 내부에 넣었습니다. 또한 Footer에..

git 연습도 할 겸 새로운 branch를 생성해서 작업할 거예요 Context를 사용하기 위해 TodoContext 컴포넌트를 생성합니다. TodoList 관련 모든 컴포넌트를 관리하는 최상위 컴포넌트인 Home.jsx에서 TodoContext를 import 하고 TodoContext.Provider로 Context를 사용할 컴포넌트들을 감싸줍니다. 우선 Modal 컴포넌트 하나만 예시로 들겠습니다. Modal 컴포넌트에 전달되던 'modalHandler'를 Provider의 value 값으로 넣어줍니다. Modal 컴포넌트로 넘어가서, Context로부터 데이터를 불러오는 useContext를 사용합니다. 그리고 TodoContext로부터 값을 불러올 것이기에 TodoContext를 인수로 넣어줍니다..