Age of Discovery

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..

위 사진에서 List.js와 Todo.js 컴포넌트를 파헤쳐보자 위와 같이 완료버튼을 누를시 완료!버튼을 취소!버튼으로 변경한 후 밑 줄로 내리는 작업이다. List.js 파일안에서 const setBtn = (todo) => { let new_arr = [...arr] let new_obj = new_arr.map(user => { if ( user.key === todo.key ) { if (user.isDone === '완료!') { return ( {...user, isDone : '취소!'} ) } else { return ( {...user, isDone : '완료!'} ) } } else { return {...user} } }) setArr(new_obj); } todo파라미터를 받아온 후..

7월 22일에 리액트 기초 주간이 시작되었다..!! 다른 것들은 잠시 뒤로하고 주특기인 리액트를 다듬을 수 있게 되어 개인적으로 가장 기대하던 시간이었다. 이번 주는 개인과제와 팀과제가 있는데 개인과제는 투두리스트를 만든 후 깃헙에 커밋하는 것이고 팀과제는 리액트에 대한 지식을 쌓으며 묻고답하는 시간을 가지는 것이다. 개인과제를 빨리 끝낸 후 팀과제 및 발표준비를 하려 했으나 생각한 것보다 일찍 끝내지 못했고 이제서야 마친 후 글을 작성하는 중이다 ㅋㅎㅋㅎ 개인과제의 조건은 투두리스트 CRUD 기본기능을 갖추는 것, 그리고 폴더구조를 동일하게 하는 것과 컴포넌트구성을 예제와 일치시키는 것이었다. 다만 hook은 state만 사용하는 것이 중요했다. Create랑 Delete만 먼저 다뤄보자! 내가 짰던 ..

​ 할일 완료시 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 사용법 서버통신에 대한 약간의 이..