이번 프로젝트의 서비스 소개 페이지가 슬라이드 형식으로 구성되어 있기에, 연습 겸 슬라이드를 구현해 볼 겁니다. 시작에 앞서 인터넷에서 맘에 드는 사진 3개를 다운받아서 기본 세팅을 했습니다. 제가 진행하는 프로젝트는 웹 앱이라 아쿠아색으로 웹 앱을 표현했습니다. flex를 통해 사진을 가로정렬 시켰으며, 버튼을 누를 때마다 각 사진이 넘어갑니다. 최종적으로 overflow:hidden을 적용해서 화면에서 벗어나는 요소는 숨길 거임 핵심 1. 인덱스 값을 통해 사진을 조정 2. 버튼을 눌렀을 때 웹 앱의 가로 값(사진의 크기)만큼 사진을 왼쪽 또는 오른쪽으로 이동 useState를 통해 인덱스 값과 기본 style값을 설정합니다. 또한 설정한 style값을 인라인 스타일 요소로 지정합니다. 초기 인덱스는..

개발 기간 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에..