개발자를 향해...

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #3.0 Setup src 하위에 components라는 폴더를 생성한다. 그리고 index.js를 전체 폴더하위에 생성한다. index.html의 body부분을 다음과 같이 바꾼다. 그리고 App.js에 다음 코드를 넣는다. import React from "react"; function App(){ return"App" } export default App; 마지막으로 index.js에 다음코드를 작성한다. import React from "react" import ReactDOM from "react-dom" import App from "./components/App" ReactDOM.render(, documen..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #2.2 Delete To Do 배열에서 삭제하는 기능을 만들어보자. 우선 입력한 리스트를 ul에 넣고 삭제 버튼을 같이 나열한다. 삭제할 때에는 id를 통해 삭제한다. import {createStore} from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const addToDo = text => ..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #2.0 Vanilla ToDo To do list를 만들어보자 우선 html의 body부분을 다음과 같이 바꾸어준다. To Dos Add 이제 js 부분을 바꾸어주자. form, input, ul 을 연결하고 reder에 배열과 action을 넣어주자. 그리고 reducer로 createStore을 해준다. 그리고 버튼을 누르면 이벤트를 발생시켜 입력창의 값을 toDo에 추가하는 onSubmit 함수를 만들어보자. import {createStore} from "redux"; const form = document.querySelector("form"); const input = document.querySelector..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #1.2 Actions count modifier에게 액션을 주기 위해서 countStore을 이용하는 방법이 있다. import {createStore} from "redux"; const add=document.getElementById("add"); const minus =document.getElementById("minus"); const number =document.querySelector("span"); const countModifier=(count=0,action)=>{ console.log(action); return 1; }; const countStore =createStore(countModifi..