[Django & JS] 투두리스트 (2)

 

 

 

HTML파일에 장고템플릿을 입혀서 사용해야했고

덕분에 장고템플릿 사용법을 아주 약간 익혀야했다.

(자바스크립트와 유사했고 구글이 있기 때문에 수월했다.)

​

다음은 장고템플릿을 입힌

HTML 소스코드이다.

추후 나올 자바스크립트 소스코드를

보다 쉽게 이해하게하기 위해 첨부한다.

​

    <div class="wrapper">
        <div class="todo-box">
            <div class="header">
                <span>To do</span>
            </div>
            <div class="header-2">
                <p>오늘 할 일</p>
                <hr>
            </div>
            <div class="input-header">
                <form class="form-box" action="#" method="POST">
                    {% csrf_token %}
                    <input type="text" class="todoValue underline" placeholder="작업 추가" autofocus>
                    <input type="text" style="display:none;">
                </form>
                <hr>
                <p onclick="create_todo()" class="btn">Add</p>
            </div>

            <div class="Down-box">
            <ol class="Down-box1" style="list-style:none;">
                    {% for i in todolist %}
                    <li class="todo_list_li">
                       {% if i.is_completed == True %}
                <div class="check_span">
                    <input type="checkbox" onclick="done_onclick({{i.id}}, event)" id="btn_done" style="background-color:#bdb3b3" checked={{i.is_completed}}>
                    <label for="btn_done"></label>
                    <span class= "span_tag disabled" id="{{forloop.counter0}}" style="color:#bdb3b3">{{i.todo}}</span>
                </div>
                <input type="button" onclick="delete_onclick({{i.id}}, event)" style="color:#bdb3b3" class="btn_delete" value="X">
                <hr>
                        {% else %}
                <div class="check_span">
                    <input type="checkbox" onclick="done_onclick({{i.id}}, event)" id="btn_done">
                    <label for="btn_done"></label>
                    <span class="span_tag" id="{{forloop.counter0}}" onclick="change_input_onclick({{i.id}}, event)">{{i.todo}}</span>
                </div>
                <input type="button" onclick="delete_onclick({{i.id}}, event)" class="btn_delete" value="X">
                <hr>    
                        {% endif %}
                    </li>
                    {% endfor %}
                </ol>
            </div>
        </div>
    </div>

 

​

​

​

​

​

​

자세한 동작원리는 잘 모르지만

백과 연동하기 위해서는 HTML파일을 동적으로 만들어 줄 필요가 있다.

장고템플릿 for문을 통해서 데이터를 전달했고

리스트를 작성할 수 있게했다.

​

​

​

그리고 비동기 통신의 핵심!

 

데이터를 성공적으로 주고받고

새로고침을 하면

클라이언트가 보는 UI에도 전달이 된다.

​

하지만

비동기통신을 사용하는 이유가 새로고침을 통한 페이지로드 없이

이벤트가 발생했을 때 필요한 곳만 부분적으로 변하게 하기 위함이다.

​

따라서

자바스크립트를 사용해서 HTML파일이 작동하는

모양을 똑같이 따라해줘야 한다.

​

​

​

이번 페이지에서는 create부분을 설명하겠다.

'use strict';

const form_box = document.querySelector('.form-box');
const todo_input = document.querySelector('.todoValue');
const submit_btn = document.querySelector('.btn-outline-dark');
const inner_box = document.querySelector('.Down-box1');

function create_todo(id) {
    // 1. 적은 값의 정보를 받기
    // 2. 받은 정보를 비동기 통신으로 데이터 저장하게 하기.
    // 3. 비동기 통신이 성공하면 노드 추가하기
    // 4. 실패하면 추가 안함

    if (todo_input.value == '') {
        alert('뭐라도 입력해봐');
    } else {
        axios({
                url: `/todos/create/`,
                method: 'post',
                headers: {
                    "content-type": "application/json",
                    'X-CSRFToken': getCsrfToken(),
                },
                data: {
                    'todo': todo_input.value,
                },
            })
            .then(function(response) {
                let result = response.data['is_success']
                let id = response.data['id'];

                if (result == true) {
                    let li = document.createElement('li');
                    let span = document.createElement('span');
                    let X_button = document.createElement('input');
                    let radio = document.createElement('input');
                    let hr = document.createElement('hr');
                    let div = document.createElement('div');
                    let div1 = document.createElement('div');


                    div.classList.add('check_span');
                    radio.type = 'checkbox';
                    radio.setAttribute('onclick', `done_onclick(${id},event)`);
                    radio.classList.add('btn_done');

                    span.innerText = todo_input.value;
                    span.style.cursor = "pointer"
                    span.setAttribute("onclick", `change_input_onclick(${id}, event)`);
                    span.style.fontSize = "16px";

                    li.classList.add('todo_list_li');


                    X_button.innerText = 'X';
                    X_button.type = 'button';
                    X_button.value = 'X';
                    X_button.setAttribute("onclick", `delete_onclick(${id}, event)`);
                    X_button.classList.add('btn_delete');


                    
                    div.appendChild(radio);
                    div.appendChild(div1);
                    div.appendChild(span);
                    li.appendChild(div);
                    li.appendChild(X_button);
                    li.appendChild(hr);

                    inner_box.appendChild(li);

                    todo_input.value = null;


                } else {
                    alert('fail');
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }
}

}

​

​

element.createelement('요소')를 사용하여

리스트에 해당하는 요소들을 전부 넣어줬고

각각의 요소에 class명과 style속성 그리고 type등을

HTML파일과 일치시켜 주었다.

​

그 요소를 전부 li 태그에 넣고

그 li태그를 띄우고 싶은 박스에 appendChild로 넣어주었다.

​

그리고 create함수가 실행이 되고나면

마지막에 input창의 value값이 null로 비워지게 만들었다

​

​

create만 할때는 몰랐는데

후에 Update랑 Delete 코드를 작성하면서 변수명과 class명을

깔끔하게 지정하는게 얼마나 중요한지 깨달았다.

​

그리고 블로그에 막상 코드를 오픈하려고 하니

정말 지저분하단 것도 절실히 깨닫고 있다 ㅋㅋ

​

다음 프로젝트부터는 이부분을 신경써야 할 것 같다

​

다음 글은

현재 페이지보다 훨씬 간단한

delete에 대해 설명하겠다.