4일 차 진도 배열 순서가 있는 요소들의 집합. 여러 개의 항목들이 모여 있는 리스트 배열 생성법 1. 생성자 let arr = new Array(); // [] let array1 = new Array1(1,2,3); // [1,2,3] let array2 = new Array2(3); // [undefined,undefined,undefined] 배열 생성자에 값을 할당 때는 특정 요소를 넣으려면 여러 개의 값을 넣으면 되고, 원하는 크기의 공간을 할당하려면 원하는 공간의 크기를 괄호 안에 작성해 주면 된다. 2. 배열 리터럴 let arr = []; // [] let array1 = [1,2,3] // [1,2,3] let array2 = [3] // [3] 배열 리터럴을 통해 배열을 생성하고, 배..

3일 차 진도 스코프란 범위, 변수 혹은 함수가 갖게 되는 유효범위 - 전역 스코프(Global Scope) let sum = 0; function add(num1, num2){ sum = num1 + num2; } add(10,15); console.log(sum); // 25 어디서든지 해당 변수에 접근 가능 - 지역 스코프(Local Scope) function add(num1, num2) { let sum = num1 + num2; return sum; } console.log(sum); 지역을 벗어난 곳에서는 접근 불가능 const num = 10; // 전역 스코프 function print() { const num = 100; // 지역 스코프 console.log(`지역 스코프 ${num}..

대망의 휴지통 마지막 시간입니다. 지우기, 초기화, 복구 순서로 진행할 것입니다. 지우기 아주 간단하게 끝낼 수 있습니다. 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 투두리스트 로컬스토리지에 저장하..

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

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