[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <todo.js>

 

완성 코드 :

export function initializeToDo() {
  const toDoForm = document.getElementById("todo-form");
  const toDoList = document.getElementById("todo-list");
  // HTML 요소와 JS 객체를 선언하여 연결
  if (!toDoForm || !toDoList) return;
  // toDoForm(할 일 입력 폼)과 toDoList(할 일 목록 컨테이너)가 DOM에 제대로 렌더링되었는지 확인하는 안전 장치
  // 할 일 목록은 로그인 시에만 입력하고 띄울 수 있으므로 해당 코드 사용

  // localStorage에서 데이터 가져오기
  let toDos = [];
  // 할 일 목록을 담을 배열 toDos 선언
  try {
    const savedToDos = localStorage.getItem("todos");
    // 로컬 스토리지에 저장된 문자열 데이터 가져오기
    toDos = savedToDos ? JSON.parse(savedToDos) : []; // JSON.parse 오류 방지
    // 값이 존재하지 않으면 null 반환, 값이 존재한다면 JSON.parse()를 통해 savedToDos를 자바객체로 변환
    // 로컬 스토리지나 서버 API를 통해 저장하거나 받아오는 데이커는 일반적으로 JSON 형식의 문자열로 저장된다 이를 그대로 쓰면 JavaScript 등에서 객체처럼 접근할 수 없어 JSON.parse()를 사용
  } catch (error) {
    console.error("Failed to parse todos from localStorage:", error);
    toDos = [];
    // 에러시 콘솔에 에러 띄우기
  }

  function saveToDos() {
    localStorage.setItem("todos", JSON.stringify(toDos));
    // JSON.stringify()은 객체나 배열을 JSON 형식의 문자열로 변환하는 함수
    // saveToDos는 저장하는 함수이므로 이를 사용
  }

// 새로운 To-do 항목을 받아와 화면에 추가하는 함수
// paint : 그리다, 항목을 화면에 그리는 함수
  function paintToDo(newTodo) {
    const li = document.createElement("li");
    // HTML 요소와 JS 객체를 연결
    li.id = newTodo.id;
    // li 요소에 고유 id 추가
    // id 값은 추가된 텍스트와 함께 newTodo.id에 의해 결정된다
    // id 값에 대한 내용은 코드 아래에 나올 예정
    li.innerText = newTodo.text;
    // li 요소의 텍스트로 newTodo.text를 설정
    toDoList.appendChild(li);
    // 새로운 리스트를 toDoList 내에 li로 추가
  }
 
  // 제출시 실행되는 함수
  function handleToDoSubmit(event) {
    event.preventDefault();
    // 폼 제출시 새로고침 되는 기본 동작 방지 (동적 데이터 처리)
    const input = toDoForm.querySelector("input");
    // toDoForm 내부의 input요소를 선택
    const newTodo = input.value.trim();
    // input.value -> 입력 필드에 입력된 텍스트를 가져옴
    // trim() : 문자열 앞뒤 공백 제거 (불필요한 공백 입력 방지)
    if (!newTodo) return; // 빈 입력 방지

    const newTodoObj = { text: newTodo, id: Date.now() };
    // 위에서 언급한대로 텍스트는 newTodo, id는 Date.now() 함수로 설정함
    // Date.now 함수는 현재 시간(밀리초)을 기반으로 고유한 숫자를 생성
    toDos.push(newTodoObj);
    // toDos 배열에 newTodoObj를 추가
    paintToDo(newTodoObj);
    // painToDo 함수 호출, 생성된 To-Do 항목을 화면에 추가
    saveToDos();
    // toDos 배열을 JSON 문자열로 변환하여 로컬 스토리지에 저장
    input.value = ""; // 빈 배열을 넣어 입력칸 초기화
  }

  toDoForm.removeEventListener("submit", handleToDoSubmit);
  // toDoForm에 추가된 submit 이벤트 리스너를 제거 (동일 리스너 여러 번 등록되는 경우 방지)
  toDoForm.addEventListener("submit", handleToDoSubmit);
  // toDoForm에 새로운 submit 이벤트 리스너 등록 (폼 제출시 handleToDoSubmit 함수가 실행되도록 함)
  
  // addEventListener만 호출할 경우, 코드가 여러 번 실행되면 동일한 이벤트 리스너가 중복으로 등록되어 To-Do 항목이 여러 번 추가되거나 잘못된 동작을 일으킬 수 있다


  // 기존 할 일 목록 초기화 및 다시 그리기
  toDoList.innerHTML = "";
  toDos.forEach(paintToDo);
  // toDos 배열 기반으로 paintToDo로 다시 렌더링
}