Age of Discovery

todolist를 대부분 로컬스토리지에 저장해서 배열비교로 클라이언트가 볼 수 있게 구현하는거같은데 ​ 로컬스토리지 하위호환인 쿠키를 사용해보면 어떨까 싶어서 도전해봤다. ​ 구글링을 아무리해봐도 투두리스트를 쿠키로 구현하는 사람은 없는것 같고 왠지 도전하는 사람이 내가 최초인거 같아 흥분된다. ​ 아직 만드는중이지만 로컬에 저장하는법보다 쿠키로 저장하는 방법 자체가 조금 까다로워서 생각보다 시간이 걸린다. ​ 조급해 하지말자 급한불부터 끄자

​ 할일 완료시 Done 함수를 이용한다. ​ function done_onclick(id, event) { axios({ url: `/todos/done/`, method: 'post', headers: { "content-type": "application/json", 'X-CSRFToken': getCsrfToken(), }, data: { 'id': id, }, }) .then(function(response) { let result = response.data['is_success'] if (result === true) { let event_target = event.target; let parent = event.target.parentElement; let parent1 = parent.p..

Update 함수는 위 사진과 같이 작동한다. ​ ​ ​ function change_input_onclick(id, event) { // 1. 해당 노드의 정보 받기. // 2. 그 노드를 인풋 텍스트로 바꾸기 // 3. 버튼도 이제 수정완료로 바꾸기. !! 온클릭 이벤트 제대로 연결줘야함 let Edit_button = document.createElement('button'); let new_input = document.createElement('input'); let current_input = document.querySelector('.new_input'); let event_parent = event.target.parentElement; let thirdNode = event_parent..

Delete_onclick 함수는 다음과 같이 작동한다. ​ ​ function delete_onclick(id, event) { // 1. 해당 노드의 정보 받기 // 2. 비동기 통신 보내기 // 3. 성공하면 해당 노드 지우기. //4. 실패하면 안되게 하기 axios({ url: `/todos/delete/`, method: 'post', headers: { "content-type": "application/json", 'X-CSRFToken': getCsrfToken(), }, data: { 'id': id, }, }) .then(function(response) { let result = response.data['is_success'] if (result === true) { let eve..

HTML파일에 장고템플릿을 입혀서 사용해야했고 덕분에 장고템플릿 사용법을 아주 약간 익혀야했다. (자바스크립트와 유사했고 구글이 있기 때문에 수월했다.) ​ 다음은 장고템플릿을 입힌 HTML 소스코드이다. 추후 나올 자바스크립트 소스코드를 보다 쉽게 이해하게하기 위해 첨부한다. ​ To do 오늘 할 일 {% csrf_token %} Add {% for i in todolist %} {% if i.is_completed == True %} {{i.todo}} {% else %} {{i.todo}} {% endif %} {% endfor %} ​ ​ ​ ​ ​ ​ 자세한 동작원리는 잘 모르지만 백과 연동하기 위해서는 HTML파일을 동적으로 만들어 줄 필요가 있다. 장고템플릿 for문을 통해서 데이터를 전달..

대부분의 개발자 지망생들이 으레 그렇듯 나 역시 첫 프로젝트를 To-Do-List로 완성했다 ​ 어느정도 자바스크립트를 배웠다고 생각하고 호기롭게 시작했으나 프로젝트를 진행하면서 배운 것들이 훨씬 많았다고 단언할 수 있겠다. ​ ​ 백엔드 개발자로 일하시는 분을 대학교 지인을 통해 알게 돼서 투두리스트를 만드려면 도와줄테니 백이랑 연동해서 해보는게 어떻겠냐는 질문에 둘도없는 기회라 생각했고 바로 시작하게 됐다. ​ ​ 비동기통신으로 연결한 자바스크립트 To-Do-List ​ ​ 완성된 모습을 먼저 보이자면 위와 같다. CRUD 기본기를 다지는데에 이만한 프로그램이 있을까 싶을 정도로 간소하지만 알차게 구성된 프로젝트다. ​ 투두리스트를 만들면서 JS뿐만 아니라 ​ CLI 사용법 서버통신에 대한 약간의 이..