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

2일 차 진도 연산자란 프로그래밍 언어에서 특정 연산을 할 수 있도록 도와주는 문자 산술 연산자 덧셈, 뺄셈, 곱셈, 나눗셈 등이 가장 기본적인 산술연산자 나머지 연산도 산술연산자에 포함, 기호를 기준으로 왼쪽의 값을 오른쪽으로 나눈 나머지를 반환 증감연산자도 산술연산자에 포함 대입연산자 변수에 특정값을 대입 복합대입연산자 논리연산자 true, false로 이루어진 boolean타입을 위한 연산자 not 연산자 : true를 false로, false를 true로 변경해 줌 or 연산자 : || 기호를 기준으로 양 옆의 값 중 하나라도 true면 true를 반환 and 연산자 : && 기호를 기준으로 양 옆의 값이 모두 true여야만 true를 반환 비교연산자 == 는 값이 일치하는지만 비교한다. === ..

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

1일 차 진도 - 자바스크립트는 웹페이지를 동적으로 만들어주기 위해 개발된 언어이고, 모던 자바스크립트는 자바스크립트 ES6와 그 이후의 버전들을 모두 포함한 자바스크립트를 말한다. - 자바스크립트로는 웹 개발, 서버개발, 애플리케이션 개발등을 할 수 있다. - 자바스크립트는 자바스크립트 코드를 실행하는 프로그램인 자바스크립트 엔진이 들어있는 모든 곳에서 동작한다. 변수란? 프로그램이 실행되는 도중 변경되는 값을 저장하기 위한, 이름을 가진 저장소 [let 이름 = 값;]을 통해서 선언한다. 변수 명명 규칙 1. $와 _를 제외한 기호는 사용 불가 2. 변수명의 맨 앞은 숫자 사용 불가 3. 예약어 사용 불가 4. 카멜표기법(첫 번째 단어를 제외한 각 단어의 첫 글자를 대문자로) - 자바스크립트는 변수의..

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

React Router 라이브러리 설치 https://reactrouter.com/en/main Home v6.20.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 공식 사이트이다 npm install react-router-dom 위의 명령어를 통해 리액트 라우터를 설치한다 package.json을 확인해 보면 설치가 잘 됐음을 확인..