[우아한 테크코스 3기] LEVEL 1 회고 (52일차)

안녕하세요? 제이온입니다.

 

오늘은 루터회관에서 오프라인으로 우테코를 진행했고, 하루종일 JS만 붙잡고 있었던 듯합니다.

 

 

데일리 미팅

오늘은 마크가 포수타를 패러디한 크수타를 진행해 주셨습니다. 모든 크루들이 다른 크루들에게 궁금한 점을 남기고, 데일리 미팅날 당사자들이 답변해 주는 것이었습니다. 한 절반의 크루가 질문에 답변을 해 주셨고, 시간 관계상 나머지는 내일하기로 하였습니다. 딱 저 앞에서 끊겼는데, 설마 질문을 더 추가하진 않겠죠?

 

아무튼 이번 시간을 통해서 작게나마 크루들의 속마음을 알 수 있었고, 연애 관련 내용도 들을 수 있었습니다. 특히 우기가 연애를 장기간하고 있다는 사실을 처음 알게 되었습니다. 800일 가량 사귀었다고하는데, 저보다는 짧네요 ㅎㅎ

 

 

To-Do List 1단계 미션

우아한 테크코스 교육 홈페이지에서 DOM, BOM, EVENT의 개념을 익히고 관련 예제를 풀어보았습니다. 그리고 오후부터는 배운 개념을 토대로 투두 리스트 1단계 미션에 도전하였습니다. 다행히, 그전 EVENT 실습 퀴즈의 코드가 아이템을 추가하는 코드여서 첫 시작은 손쉽게 할 수 있었습니다.

 

 

const $todoInput = document.querySelector("#new-todo-title");
const $toggleInput = document.querySelector(".toggle");

$todoInput.addEventListener("keyup", onAddTodoItem);
$toggleInput.addEventListener("click", onToggleTodoItem);

function onAddTodoItem(event) {
  const todoTitle = event.target.value;
  const todoList = document.getElementById("todo-list");
  if (event.key === "Enter" && todoTitle !== "") {
    todoList.insertAdjacentHTML("beforeend", renderTodoItemTemplate(todoTitle));
    event.target.value = "";
  }
}

function onToggleTodoItem(event) {
  event.target.closest("li").classList.toggle("completed");
}

function renderTodoItemTemplate(title) {
  return ` <li>
                  <div class="view">
                      <input class="toggle" type="checkbox">
                      <label class="label">${title}</label>
                      <button class="destroy"></button>
                  </div>
                  <input class="edit" value="새로운 타이틀">
              </li>`;
}

 

 

위에서 체크 표시를 눌렀을 때, 글씨가 취소선이 되는 부분은 문제가 있지만, 아이템을 추가하는 이벤트 리스너 코드는 잘 구현되어있었고, 레이블을 추가하는 부분도 주어져 있었습니다. 따라서, 고맙게도 이들을 추가하는 것만으로도 요구 사항 2개나 해결할 수 있었죠. 진작에 크루들 말 듣고 퀴즈를 풀었어야 했습니다.

 

 

이후에는 미션을 진행하면서 모르는 부분은 개발자 모드를 통한 디버깅을 수행했습니다. 잘 모르는 API는 하나씩 콘솔에 찍어보면서 원리를 이해하려고 노력했고, DOM API를 조금씩 적응하기 시작했습니다. 이해가 잘 안 가는 부분은 아론과 제리에게 물어보았고, 두 크루가 없었다면 미션을 완수하지 못 했을 것 같습니다.

 

어찌되었든 저녁 이후에 pr을 보냈고, 1단계 미션은 끝이 났습니다. 다만, 프로젝트 과정에서 궁금한 점이 여러 개 있었습니다.

 

 

1. node와 element의 차이

 

2. childNode, children의 차이

 

3. 이벤트 리스너를 html에 붙이는 것과 따로 js에서 연결해주는 것의 차이

 

4. '=='과 '==='의 차이

 

 

위 내용들은 시간 관계상 오늘 알아 보지는 못하겠고, 내일부터 하나씩 검색해 나갈 예정입니다.

 

 

정리

포기하고 싶었던 제 인생 첫 프론트엔드 프로젝트가 성공적으로 끝났습니다. 하지만, 구조 또는 보안적으로 바람직한 코드라고는 생각이 들지 않습니다. 따라서 이 부분은 프론트엔드 멘토 크루와 다른 잘하는 크루의 도움을 받아서 점진적으로 고쳐나가려고 합니다.

 

내일은 오늘 배운 JS 지식을 이용하여 체스 미션을 진행할 생각입니다. 어제 HTML 코드 64줄을 하드코딩했는데, 이 부분을 리팩토링하는 것이 최우선이겠죠?

 

완성된 To-Do List 코드는 여기서 확인하실 수 있습니다.