맨땅에 헤딩

1. 기본추가하기 2. input 리셋시키기 3. 빈칸만입력 & 앞뒤빈칸 제거 ✅ 기본 추가하기 // TodoList.js const [todos, setTodos] = useState([ { id: "1", text: "산책하기", status: "active", }, { id: "2", text: "공부하기", status: "active", }, ]); const handleAdd = (todo) => { setTodos([...todos, todo]); }; return ( ) 1️⃣ AddTodo 컴포넌트에 onAdd를 통해 props 값을 전달한다. 2️⃣ handleAdd 함수를 만들고, todo로 받아온 값을 새롭게 추가해준다. ...스프레트 연산자를 통해 기존의 값을 복사한 뒤, 받아온 ..

어제에 이어서 오늘도 리액트로 간단한 CRUD만들기를 해보았다. 계속 똑같은걸 만드는게 지겹기도 하지만 완전완전 이해가 너무너무 하고 싶었다 ㅠㅠ 그래도 이거 만들면서 많이 는거 같아서 조금 뿌듯하기도 하다 😊 각각의 key값에 고유한 id를 부여한 뒤, id비교를 통해서 삭제와 수정기능을 구현하였다. 고유한 key값을 위해서는 uuid라이브러리를 이용하였다. 자세한 기록을 위해서 따로 블로그에도 내용을 기록해두었다. 리액트로 간단한 CRUD완성 이름, 이메일을 입력하는 간단한 CRUD를 만들어보았다. 지난주에 만들어본것을 연습을 위해 다시 한번 만들었다. css는 크게 건드리지 않고 기능위주로 다시 만들기 위해 노력했다. 기능은 다음과 hihiha2.tistory.com 지금까지 연습한 CRUD를 바탕..

이름, 이메일을 입력하는 간단한 CRUD를 만들어보았다. 지난주에 만들어본것을 연습을 위해 다시 한번 만들었다. css는 크게 건드리지 않고 기능위주로 다시 만들기 위해 노력했다. 기능은 다음과 같다. 1️⃣ Create 등록하기 2️⃣ Read 화면에 띄우기 3️⃣ Update 수정하기 4️⃣ Delete 삭제하기 1️⃣ Create 등록하기 // CreateUser3.js import React from "react"; import { v4 as uuidv4 } from "uuid"; export default function CreateUser3({ username, email, onChange, onCreate }) { return ( onCreate(uuidv4())}> 등록하기 ); } //..

오늘은 나름 css도 넣어서 리액트로 간단한 crud를 완성했다!! 💡 만든기능 1️⃣ input 2개 추가하기 create 2️⃣ read 3️⃣ 삭제하기 delete 4️⃣ 클릭 → 이름색 바꾸기 수정하기 ✅ 여러개의 input의 상태를 한꺼번에 관리하기 위해 name을 이용 ✅ input의 상태관리를 useState hook이용 ✅ 고유한 key부여를 위해 uuid사용 id값에 uuid로 고유한 값 만듦 → 그 id를 key값으로 넣어줌 각각 다른id값을 이용, id비교를 통해 → 1. 삭제하기 2. 수정하기 ✅ toggle 이용 → 수정하기 const onToggle = (id) => { setUsers( users.map((item) => item.id === id ? { ...item, act..

오늘도 crud 만들기를 했다. 같은 코드만 몇번째 보는지 모르겠는데 그래도 전보다는 에러도 잡고 하면서 이해가 되고 있는거 같긴하다. 같은걸 계속 만들어보면서 점점 시간이 더 빨라지는걸 느낀다. active: false로 잘 넣어줬는데 왜 짱구도 초록색 글씨로 나오는걸까..? 이건 오늘은 시간이 늦어서 내일 다시 해결해보려고 한다..!! 에러가 나오면 당황스럽긴하지만 싫지만은 않은게 그걸 해결하면서 얻는 지식들이 많기 때문이다. 전에 공시 공부할때도 문제를 풀면서 틀리면 실제 시험장에서 안틀리기위해서 지금 틀리는거라고 생각해서 괜찮았는데 에러도 오히려 그렇게 생각하면 될것같다. 확실히 해결하면서 많이 성장한다. (그래도 너무 많이 마주치고 싶지는 않음 ㅋㅋㅋㅋ 지식이 늘어서 안만들도록 짤수있기를) 그래..

오늘은 프로그래머스를 풀면서 reduce()에 대해서 공부했다. 배열안에 들어있는 값들의 합을 구하는 문제였는데, reduce에는 인자로 acc 누산기가 들어있어서 편했다. 가장 많이 이용되는 reduce의 기본형태는 arr.reduce((acc, cur) = > acc + cur, 초기값)과 같이 많이 이용한다. 💡 acc=누산기 cur=현재값 누산기, 현재값, 초기값과 같이 여러가지 값을 이용할수 있어서 익숙해지면 편하겠지만 처음으로 사용해보아서 조금 어려웠다. 그래도 결국에 이해가고 내힘으로 식을 세워서 뿌듯했다. 그리고 아직도 투두와 전쟁을 하고 있다.. ㅋㅋ 그냥 일반 useState만 이용해서도 만들어보고, useReducer를 사용해서도 만들고 있다. useState만 사용하면 컴포넌트안의 ..

오늘은 투두리스트 만들기를 했다. crud crud하는데 왜 이게 중요하다는줄 알것같다. useState를 이용해서 상태를 관리하고, 추가와 수정 삭제까지 간단하지만 중요한 기능은 다 가지고 있는것 같다. 간단하게 보이지만 생각보다 만들기가 쉽지 않다 🥵 아직은 코드가 정확히 다 이해가 되지 않아서 계속 여러번 만들어야겠다고 생각했다 🥲 만들고 바로 또 투두를 하나 더 만들고 있다. 반복해서 여러번하다보면 익숙해지고 언젠가는 백프로 이해 되지 않을까😇 프로그래머스를 통해서는 map()함수안에 두번째인자로 index값을 받아오는 것을 연습했다. 이걸 알아두면 이런 문제풀기용이 아니더라도 데이터를 받아와서 map함수를 통해서 key값을 index로 받아올때 사용이 가능할 것이다. 코드에서도 그렇게 구현한 것..

지금까지는 일기를 매일 노션에 적기는 했지만, 블로그에 올리는 것은 일주일치를 모아서 한번에 올렸는데 글이 너무 길어지는것 같아서 매일 올려볼 생각이다. 이렇게 올려보고 어떤 방식이 더 좋을지 판단해 봐야겠다. 오늘은 가족들이랑 함께 있어서 공부를 많이 못했다 ㅠㅠ 내일부터 공부하던 곳에 다시 나갈 예정이다!! 그래도 프로그래머스 한문제라도 풀고, 그 문제에 대해서는 공부했다 ㅎㅎ 여러개의 조건을 return해야 하는 상황에서, 각각 if문 안에서 return하는 방법도 있지만 조금 더 깔끔한 코드를 작성하기 위해서 if문들을 모아서 위에서 쓰고 아래에서 한꺼번에 return을 해주는 것을 배웠다. 한눈에 봐도, 위보다 아래의 코드가 훨씬 깔끔하다. function solution(price) { if(..

2. 27. 오늘은 리액트에서 여러개의 input의 상태관리를 어떻게해야 하는지를 이해하기 위해 노력했다. input에서 변화하는 값이 여러개인 경우에는 따로따로 useState를 만들어서 관리하는 것보다, useState의 초기값을 객체를 통해 선언을 해준다. onChange함수도 여러개로 만들지 않고 변화가 발생하였을때 e.target.name을 통해서 하나의 함수만 만들어서 관리할 수 있다. [ e.target.name ]: e.target.value로 기존의 내용에 덮어서 쓰면, 이벤트타깃인 Input의 name으로 만들어준 값이 key값이 되고, 그 key를 가진 것을 새로운 내용으로 덮는다. 이러한 방식으로 name을 통해서 key에 접근하고 새로운 내용을 업데이트할 수 있다. 굳이 name으..

1. 클로저란? 클로저는 자신이 선언될 당시의 환경을 기억하는 함수 클로저는 함수 + 함수가 선언된 렉시컬 환경과의 조합 클로저를 이해하기 위해서는 실행컨텍스트와 렉시컬환경이라는 개념을 이해하는것이 우선된다. 이것에 대해서는 이전글에서 따로 정리를 해두었다. 자바스크립트 실행컨텍스트/ 렉시컬환경(환경레코드,외부환경참조) 1️⃣ 실행컨텍스트 코드를 실행하는데 필요한 환경을 제공하는 객체 (환경: 코드 실행에 영향을 주는 조건이나 상태) 식별자결정을 더욱 효율적으로 하기 위한 수단 모든 자바스크립트의 모든 hihiha2.tistory.com ✅ 특징: 해당함수의 생명주기가 종료되더라도 참조가능 ✅ 원리: 실행컨택스트의 렉시컬환경에 정보가 남음 일반적으로 함수가 실행되고 나면 실행콘텍스트의 콜스택에서 제거가 ..