JNarin Development Story

오늘은 삭제기능을 추가하는 방법을 공부하려 한다. 먼저 우리는 저번에 추가한 추가하는 것을 function으로 분리를 할 수 있다. // src > index.js // 중략 const addToDo = (text) => { store.dispatch({ type: ADD_TODO, text }); }; const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; addToDo(); }; // 중략 store.dispatch를 원래는 onSubmit에 넣었는데 이 문구가 더 많은 일을 할 경우에는 분리를 하는 것이 좋다. 그렇기 때문에 그런 편리성을 위해서 function addToDo를 만들어서 onSu..

Mutation(변형)은 무엇인가? 말 그대로 변형을 의미한다. 이 부분은 필자의 절대적인 생각이며, 확신이 아닌 참고용이다. 필자가 생각하는 Mutation은 push, pop, join 이런 것들이지 않을까 하는 조심스러운 발언을 해본다. (그저 필자가 javascript를 해보면서 대략적으로 이러지 않을까 하는 생각이다. mutation을 권장하지 않는 다면 과연 리덕스에서는 무엇을 써야 하는가? 바로 새로운 state(상태)를 return을 하는 것이다. 즉, object를 return 하는 의미라고도 한다. (사실 적으면서도 내가 이해한 부분이 맞는지 의심이 간다...) 상태를 수정하는 것이 아닌, 새로운 것을 return을 해야한다는 의미다. (왜 이게 중요한 것일까? 사실 어떤 의미로 한건 ..

오늘은 다시 리덕스 공부를 위해 글을 쓰게 되었다. 먼저 index.html을 수정하도록 한다. To Dos Add 위 코드는 현재 html코드이며, 현재 수정한 부분은 태그 안에 값을 수정하였다. 그런 다음 index.js를 다음과 같이 바꿔준다. // src -> index.js const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ui"); const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChil..

오늘은 저번 시간에 이어서 몇 가지를 더 공부하려고 한다. 이 글은 노마드 코더에 '초보자를 위한 리덕스 101'이라는 강의를 중심으로 정리가 된 것이다. 리덕스를 사용하게 되면 많이 쓰이는 문법이 있다. 바로 switch문이다. 기본적으로 switch문은 다음과 같다. switch () { case "String1": return result1; case "String2": return result2; case "String3": return result3; ... default: return default; }; 만약 switch를 쓰지 않고 if문을 할 경우에 다음과 같은 코드로 작성해야 한다. if (String1) { return result1; } else if (String2) { retur..

리액트 프론트 앤드 개발자를 하면서 리덕스는 꽤나 중요한 축에 속해진다. 하지만 러닝커브가 길기 때문에 처음부터 많이 적용할 수도 없고, 적용을 많이 못하였던 것이 필자의 현실이었다. 그리고 다시 공부를 하면서 조금 깊게 파기 위해 리덕스가 무엇인지, 왜 필요하여 많이 쓰이는지에 대해 진득하게 정리를 해보기 위해 이 글을 쓰게 되었다. 왜 리덕스인가? 가장 궁금한 것 중 하나는 왜 리덕스를 쓰는 지다. 사실 찾으면 찾을수록 당연히 필요하다고 느낄 수 있지만, 처음 접한 사람에게는 이것이 굳이 왜?라는 기분이 들 수 있다. 리덕스는 쉽게 말하면 상태 관리를 의미한다. 리덕스를 사용하기 위해서 리덕스를 사용하기 위해 최소한의 설치는 다음과 같다. node, npm OR yarn 필자가 느끼기엔 이것이 가장 ..

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다. 1. 라이브러리 설치 yarn add redux react-redux redux-promise redux-thunk 여러 개를 한 번에 설치하고 싶을 때는 스페이스로 구분을 하여 명령어를 한 번에 할 수 있다. 여기서 redux-promise, redux-thunk는 redux를 오류를 최소화하기 위해 추가적으로 설치하는 middleware다. 2. 리덕스와 어플리케이션을 감싸줄 provider 개선하기 // client > src > index.js // 생략 import {Provider} from 'react-redux'; import 'antd/dist/antd.css'; import { applyMiddleware, createSt..