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..

최근 영상 편집은 자주 하지 않지만, 간간하게 gif를 올리는 경우 애용하고 있는 사이트를 소개 겸 사용방법을 적어보려고 한다. 먼저, 필자가 사용하고 있는 사이트는 ezgif.com 라는 사이트로 자주 편집을 이용하고 있다. 정말 간단한 편집이나, GIF를 만들 때 매우 유용하다. 위 사이트가 메인 사이트며 상단 메뉴에서 원하는 편집을 선택할 수 있다. 먼저 필자가 주로 사용하는 방법은 다음과 같다. 먼저 파일 선택을 한 후 upload video를 하면 우측과 같은 이미지가 나온다. 좌측의 이미지를 보시면 내가 올린 영상을 확인할 수 있으며, 확인하면서 잘라 버릴 위치를 설정하여 자를 수 있다. 완료가 되면 convert to GIF로 한 후 다음 해야 할 추가적인 것을 하거나 저장을 한다. 필자의 ..

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..