[20.09.18 Node_Todo] localStorage, 바닐라 js

 // 버튼에 btn-save라고 id 값을 지정해놨기 때문에 querySelector의 #btn-save로
 // 해당되는 항목을 선택할 수 있다.
 // 그리고 그 버튼에 이벤트를 설정하는 것이다.
 // 그 버튼을 클릭했을 때 아래 코드들이 실행되라!
 document.querySelector("#btn-save").addEventListener("click", function () {
    let todo_input = document.querySelector("input");

    // input box를 선택하는 좋은 방법
    // 확실하게 원하는 input box가 select 되도록 설정하는 방법
    todo_input = document.querySelector(
      "section.todo_main form input[name='todo']"
    );

    // 객체.value : input box일 경우에만 사용할 수 있는 속성
    //    input box에 사용자가 문자열(뭔가)를 입력함녀
    //    입력한 내용이 value 담겨있게 된다.
    // 객체.value 값을 tod_value라는 변수에 옮겨 담기
    let todo_value = todo_input.value;
    // if(todo_input.value === "")
    if (todo_value === "") {
      alert("할일을 입력해주세요 :)");
      // input tag를 모두 읽어서 배열로 처리하는 방법
      document.querySelectorAll("input")[0].focus;

      // 정확히 필요한 input을 select 하여 처리하는 방법
      // 아래 방법이 훨씬 더 좋은 코드
      document
        .querySelector("section.todo_main form input[name='todo']")
        .focus();
      return false;
    }

    // 정상적으로 어떤 문자열이라도 입력을 수행했으면
    if (confirm("저장할까요?")) {
      // 화면에 form이 1개 뿐이기 때문에 Selector를 사용할 수 있다.
      // 만약 화면에 여러개의 form이 있다면 가급적 form에도 id를 부여하여
      // select하는 것이 좋다.
      // 이제 데이터가 정상적으로 입력 되었으니 서버로 전송하라
      document.querySelector("form").submit();
    }
  });

todo_main.js 주석이 너무많아 두개로 나눔

실제로 실행되는건 todo_main.js에 있고 이해가 안되는 코드 todo_main_comments확인

 

---

//- 표준적인 코드는 form에 method와 action을 지정하여
//- 정확히 서버의 어떤 URL로 데이터를 전송할 것인지 명시를 한다
//- action이 없이 form을 사용하는 것을 계속 연습 중이다

//- action을 지정하면 HARD CODING화 되어,
//- 프로젝트 상의 어떤 변경이 있으면
//- action부분도 변경을 해주어야 하는 코드가 된다.
form(method="post")

훨씬 더 유연한 코드가 될것이다.

>> index_comments.pug

 

localstrage는 DB영역

 

1교시

 

 

2교시

 

 

3교시

 

 

4교시

 

 

5교시