24/04/18 TIL

오늘 해본 것

1. 웹개발 종합반 수강
   • 처음에 듣기를 잘 했다. 강의에서 만드는 사이트가 필요할 줄은 몰랐는데!
   • 강의를 따라가면서, JQuery 같은 라이브러리가 정말 편리하긴 하다는 것을 느꼈다. 특별한 기능을 사용하는 게 아닌데, html 요소를 다루는 것도 조금 더 간결하고 좋았다.

// vanila JS
const div = document.querySelector("div");

// JQuery
$("div")

위와 같은 부분에서 조금 편리한 것을 느꼈다!

1. Momentum Clone
   • To do list 에서 할 일을 추가하는 기능까지만 구현했다.
   • 원래는 list 에서 삭제하는 기능도 추가했으면 좋았을 텐데 데일리 미션에서 시간을 조금 많이 할애했다.

function printToDo() {

    let storedtodos = window.localStorage.getItem("todos");// 여기서 문자열이 됨.

    let splittodos = storedtodos.split(",");
    // <ul> 내부에 <li> 을 추가해서 보여주는 형식.
    Array.from(splittodos).forEach(element => { 
        let item = document.createElement("li");
        let btn = document.createElement("button");
        
        btn.setAttribute("class", "to-do__remove");

        let itemContent = document.createTextNode(element);
        let btnContent = document.createTextNode("✖️");
    
        btn.appendChild(btnContent);
        item.appendChild(itemContent);
        item.appendChild(btn);

        toDoList.appendChild(item);
    });
}

function deleteToDo(event) {
    // 버튼 click이 일어나면 remove
    console.log(event.target.parentElement);
    
}

if (window.localStorage.getItem("todos") !== null){
    printToDo();

    const toDoBtn = document.querySelectorAll(".to-do__remove"); // Node"List" 반환.

    toDoBtn.forEach(element => {
        element.addEventListener("click", deleteToDo);
    });

} else {
    ;
}

내일 비어있는 코드들을 채워서 기능 완성해보자!

1. 데일리 미션
   • 찾아서 적다보니, 내용이 길어져서 역시 별도의 포스팅으로 분리했다.
   • 용어를 찾아보면서 개념을 간단히라도 익혀놓으니 도움이 되는 것 같다!
   • 그리고, 뭐든지 자기 하기 나름이다.

내일 할 것

1. 웹 개발 종합반 4주차 수강
2. 데일리 미션
3. Momentum to do list 완성

느낀 점

그래도 코드 짜면서 조금씩 만들다보면 재미가 있다! 빨리 프로젝트하면서 굴러봐야 실력이 늘 것 같다!