행복을 담는 블로그

첫 번째 리뷰에서는 form 태그를 통해 입력한 값을 받아와 card로 생성을 하고, Delete 버튼을 통해 해당 카드를 삭제하는 것 까지 살펴 보았다. 이제는 Done 버튼을 누르면 아래 Done🎉 으로 카드가 내려가고, Cancle 버튼을 누르면 위 Working...🔥으로 카드가 다시 올라가는 것을 구현해보자. Todo Card 완료/취소하기 1. Todo 완료/취소하기 isDone의 false/ true 값을 활용하여 조건부 렌더링을 진행한다. cards의 배열을 map 메소드를 이용하여 재배열한다. → 만약에 todo의 객체의 id가 해당 클릭한 id와 동일하다면, 객체를 분해하여 (...todo) 해당 객체의 isDone의 상태를 반대로 바꾼다. → 이후, 바뀐 todo의 객체가 cards ..

React 입문 강의가 끝나고 React 첫 개인과제도 끝이 났다. 이번 react 개인과제로 진행한 To-do List 만들기 에 대해서 리뷰해 보고자 한다. 📝 To-Do List 만들기 1. CRA 설치하기 npx create-react-app to-do-list프로젝트를 생성한다. 2. 기본 틀 잡기 처음에는 App.jsx 파일에서 기본 html을 구성하였다. import React from "react"; function App() { /* card 기본 state */ const todoObj = { id: 1, title: "리액트 공부하기", text: "리액트 기초를 공부해봅시다.", isDone: false, }; //구조분해 할당으로 객체 내부 key 값에 접근하기 const { id..

📌 State React에서 State와 Hook에 대해서 간단히 정리해보고자 한다. State는 컴포넌트 내부에서 바꿀 수 있는 값으로, UI를 바꾸기 위하여 사용한다. State를 만드는 방법은 useState() 를 사용하는데, 기본 구조식은 다음과 같다. const [value, setVaule] = useState('초기값') 1) const로 선언하고, 빈 배열 []을 생성한다. 2) 빈 배열의 첫 번째 자리에는 state의 이름, 두 번째 자리에는 set + state 이름을 넣는다. 3) useState( ) 안에는 state의 초기값을 넣어준다. ▶️ State를 변경하고 싶을 때는, setValue(바꾸고 싶은 값)를 사용한다. 📌 useState 와 onClick Event를 활용 할..

React 강의를 들으며 처음 배우는 기본 개념들에 대해 간단하게 기록해보고자 한다. 1. Component(컴포넌트 = 벽돌) : 컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각을 개별적으로 살펴 볼 수 있다. React 에서 말하는 component = 함수를 만드는 것. ✔️ Component는 대문자로 시작한다. ✔️ 부모 - 자식 관계가 존재한다. // 부모 -> 자식(위 -> 아래) 순으로 흐른다. import React from "react"; // 자식 컴포넌트 function Child() { return 나는 아들입니다.; } // 부모 컴포넌트 function App() { return 저는 부모입니다.; } export default App;2. JSX..

오늘 공부한 내용 정리💁🏻‍♀️ 1. 복습한 내용 Javascript의 ES6 문법 1) 상수와 변수 상수 : const(constant : 변함없는 수) 변수 : let const a = 1; let b = 3; a = 3; // 상수는 한 번 선언한 값을 다시 할당할 수 없다. b = 2; // 변수는 값을 재할당 가능 console.log("a :", a); // Error console.log("b :", b); // b : 2 var는 그냥 쓰지마쓰지마...!! -> Block level scope를 따르지 않기 때문에 종종 다른 언어와 오해가 발생한다. if (1 === 1) { // 항상 이 안으로 들어온다 var c = 3; console.log("c", c); } console.log("..

하루를 마치며...🤔 영화 검색 페이지를 구현하는 기능을 조금 더 상세하게 작성해보고자 했는데, 완성을 하지 못해서 오늘은 그냥 오늘의 감정을 조금 써 내려가 보려고 한다. Javascript 문법을 활용하여 "영화 검색 사이트"를 만드는 첫 번째 팀 프로젝트가 마무리 되었다. 철저히 민주주의 방식에 따라 사다리 타기로 팀장과 발표자를 결정했는데, 어쩌다보니 둘 다 내가 걸려버렸다. 사실 팀장이라고 해서 내가 나서서 뭔가를 주도적으로 하거나 팀원들께 도움이 되는 팀장은 아니였지만, 그래도 실력이 부족한 나 대신 더 많이 코드 구현에 힘써주신 팀원분들을 대신하여 발표까지 하게 되었다고 생각해본다. 불과 일주일 전에 제출하였던 개인과제를 제출할 때까지만 해도, 내가 지금 강의를 막 들은 상황에서 혼자서 아무..

우리 조에서는 카드 이미지 위에 마우스를 올리면 포스터 이미지가 그림자로 변하고, 그 위에 줄거리와 상세페이지 이동 버튼을 올리기로 하였다. 실제 롯데시네마나 CGV에서도 이런식으로 마우스 오버를 이용하여 예매하기 또는 상세보기 페이지로 이동하도록 구현을 해 놓은 것을 알 수 있었다. 따라서 해당 기능을 구현하기 위해서 이것저것 찾아봤는데, 크게는 세 가지 기능을 이용하여 만들 수 있다. 1. : hover : :hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다. 보통은 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택 되도록 사용한다. 따라서, 포스터 img 위에 마우스 포인터가 올라 갔을 때, 해당 부분의 밝기를 조절하였다. * 처음 코드를 작성..

오늘의 공부📖 팀 과제 진행 JS 기본문법 실시간 세션 강의 TIL 작성 오늘 공부한 내용 정리💁🏻‍♀️ 1. parseInt( ) 함수 알고리즘 문제 풀다 parseInt 함수를 알게 되었다. 문자열을 정수로 변환하는 함수이다. 또한 진법 표현을 나타낼 수 있다. Javascript parseInt( ) 함수 2. 카드 검색 결과가 없을 때, alert창 띄우기 1) title의 제목을 검색했을 때, 영문의 대소문자를 없애기 위해 toLowerCase를 이용하여 모두 소문자로 만들었다. 2) card를 검색하는 키워드 또한 동일하게 toLowerCase를 이용해 소문자로 만들어준다. 3) 빈 배열을 만들어주는데, 만약 title.includes(searchedValue)를 console.log를 찍어주..