KBW's Developer

redux로 state를 관리하면서 원하는 값을 삭제하는 방법 중 개인적으로 가장 쉽게 느껴진 방법을 소개하겠습니다. 아래는 실제 작성된 코드입니다 html 파일에 body 부분 js 파일 paintToDos 함수 내에서 store에 들어있는 state를 새 변수에 (toDos)에 담은 후 저는 toDos에 map을 사용하였고, ( forEach 반복문을 사용해도 무관합니다 여기서 el 은 toDos array에 각각의 데이터입니다 ) html button을 생성하고 생성된 button에 클릭이벤트를 만들어주고 , anymouse function으로 dispatch 하는데 이때 { type : DELETE_TODO , id : el.id } 데이터를 함께 에 보냅니다 el.id 는 각각의 데이터가 생성될..

redux는 지켜야 할 규칙이 있는데. 그중에 이번엔 데이터를 추가하는 올바른 방법에 대하여 알아보겠다. mutate state => No! input 에 텍스트를 입력하게 되면 form에 submit을 통해 onSubmit 함수가 실행된다. input.value를 통해 값을 새 변수에 담은 후 store.dispatch로 action type ADD_TODO 를 보낼 때 payload ( 값을 전달) 를 하게 되는 코드이다. 여기서 reducer 에서 값을 modify(수정) 하기 위해 action.type === ADD_TODO 이곳에 명령을 실행시켜 return 하는데, 자주 듣는 말이 값을 수정할 때는 mutable 하면 안 된다!라는 말을 자주 듣게 된다 이 말의 뜻은 데이터의 원본을 직접적으로..

reducer의 state 값이 변화될 때마다 감지하는 subscribe 함수에 대해 알아보겠습니다. 우리는 어떠한 이벤트가 발생되었을때 data의 값이 변화가 되어야 할 때가 있는데, redux 에서 createStore로 생성한 data 가 담겨있는 곳에 변화가 있을 시 적절한 다음 명령을 실행하게 할수있게 하는 subscribe 함수가 있다. import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("number"); const reducer = (count ..

Redux 없는 Vanila JS로 간단한 코드를 살펴보겠습니다. const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("number"); let count = 0; number.innerText = count; const updateText = ()=>{ number.innerText = count; } const handleAdd = () => { count++; updateText(); }; const handleMinus = () => { count = count - 1; updateText(); }; add.addEv..

v-bind img태그에 src =" " , a태그에 href=" " 에 동적으로 데이터를 바인딩할때 주로 사용하는 방법 입니다. // v-bind: 없이 그냥 사용하면 변수로인식이안됩니다. 네이버이동 //v-bind: 중 v-bind 빼고 : 만 붙여서 사용하여도 동일한 기능을 합니다. class v-bind 와함께사용하여 class 를 동적으로 사용하는 방법입니다. 보통은 class 를 지정해줄때 이런식으로 사용하지만 동적으로 class를 변경해주고 싶을경우, 원숭이는 {{food}} 를 좋아합니다 // 조건식에 food 가 banana 가 맞다면 class 는 red 가되어 text 전체가 red 컬러로 변할것입니다. * 무료 강의나 인강을 통해 배운 내용을 개인적인 복습과 자료로남기기위해 작성한 ..