https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API https://aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ 위의 두 개 사이트를 참고하며 드래그 앤 드롭을 정리했다. https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기 HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이..

페이지 라우팅이란? 특정 페이지에 접속하고 싶은 사용자가 브라우저를 통해 웹 서버에게 어떤 주소로 페이지를 요청했을 때, 웹서버가 요청받은 주소에 따라 알맞은 페이지를 브라우저에게 반환해 줌으로써 사용자가 원하는 페이지가 브라우저에 잘 렌더링 되는 것까지의 과정을 말함 어떤 원리로 이뤄지는 건가? 전통적인 페이지 라우팅 방식 웹서버가 사용자에게 제공되어야 하는 모든 종류의 html 파일을 가지고 있는 상태이다. 이때 사용자가 브라우저를 이용해서 경로를 가지고 특정 주소를 갖는 어떤 페이지를 요청한다면, 웹서버는 요청에 알맞은 페이지를 찾거나, 실시간으로 제작을 해서 웹 브라우저에게 반환해 주는 방식으로 동작한다. 이후 브라우저가 웹 서버로부터 받은 html 파일을 화면에 렌더링 시켜주면서 페이지 라우팅이..

‘공부하기’를 수정하려고 할 때, ‘공부하기’가 그대로 출력되면 더 편할 것 같다는 의견을 받았다! 지금은 수정을 누르면 기존의 값이 초기화되고 placeholder를 통해서만 보인다. 이걸 수정해서, 공부하기가 그대로 남아있게 바꿔볼 것이다. 우선 input에 값이 입력되는 흐름을 보자 첫 번째로 newTodo는 빈 값으로 초기화 되어있다. input의 기본 값인 value 값에 newTodo를 적용했고, newTodo는 공백이기에 이론상 input 태그에는 아무것도 입력될 수 없다. 하지만 입력이 잘 이뤄진다. 이유가 뭘까 onChangeEditTodo 핸들러를 통해 input에 입력되는 값을 추적하고, setNewTodo를 통해 newTodo에 업데이트시켜 주기 때문이다. 즉 a를 입력하면 newT..

문제점! 이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도 투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다. 새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째를 수정하면.. 네 번째도 같이 수정되는 오류가 발생한다. 원인 찾기 혹시 Storage에 잘못저장되기에 데이터가 꼬이나?라고 생각하기에는 너무 명확하게 의심되는 부분이 있었다. 내가 todo 아이템을 추가할 때, id 값을 단순히 useRef를 통해 제공했기 때문이다. 그렇기에 새로고침을 했을 때, useRef가 초기화되어서 다시 0이 되고, 기존의 투두리스트는 유지되지만 id가 중복되게 되는 것이다. 해결인 줄 알았으나....! localStorage의 value 값에 있는 객체의 개수를 받아오면 되지 않을까 라는 생각..

기존의 투두리스트는 새로고침을 하면 모든 값이 초기화되어 버렸다. 새로고침을 해도 입력했던 정보들이 유지되는 방법을 찾다가, 로컬스토리지를 활용하는 방법을 찾았다. Local Storage란? 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소이다. 로컬스토리지는 만료기간이 존재하지 않으며, 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미한다. 또한 Local Storage에 저장한 자료는 페이지 프로토콜별로 구분하며, 도메인이 다른 경우에는 로컬스토리지 공유가 불가능하다 사용법 localStorage.setItem(key,value) : 값 추가 localStorage.getItem(key) : value값 가져오기 localStorage.removeIte..

분명히 데이터를 map함수로 잘 쪼갰고, key 값도 잘 부여했으며, 자식 요소에서도 값을 잘 받아왔음에도 불구하고, 체크박스를 클릭해도 값이 변하지 않았다. 정확히는 두 번째 요소, 세 번째 요소를 클릭해도 오직 첫 번째 요소에만 적용이 됐다. 원인을 알기 위해 이것저것 뜯어보다가 내가 label태그를 사용하기 위해 input태그에 className이 아닌, id 선택자를 사용했다는 것을 깨달았다. map함수를 통해서 제공해 주는 id 요소는 변해도, input 태그의 id 선택자는 고유하기에 첫 번째 컴포넌트의 경우 정상적으로 작동하지만, 두 번째 컴포넌트 이후부터는 id 중복으로 인한 문제가 발생하는 것이다 input의 id속성과 label의 htmlFor 속성에 각 컴포넌트 해당하는 id를 적용시..