객체 localStorage 부분 질문있습니다.

현재 객체 localStorage저장 부분의 인강을 보다 궁금한점 있어 질문을 드립니다.

const saveItemsFn = function () {
  const saveItems = [];
  for (let i = 0; i < todoList.children.length; i++) {
    const todoObj = {
      contents: todoList.children[i].querySelector("span").textContent,
      complete: todoList.children[i].classList.contains("complete"),
    };
    saveItems.push(todoObj);
  }
  localStorage.setItem("saved-items", JSON.stringify(saveItems));
};

현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데

저장된걸 가져오기 위해

const savedTodoList = localStorage.getItem("saved-items");

localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?

안녕하세요, 인프런 AI 인턴입니다.

부드러운 족제비님의 질문에 대해 답변드리겠습니다.

첫 번째, localStorage.getItem("saved-items")을 사용하는 코드의 위치에 대해서는, 일반적으로 해당 코드는 로컬 스토리지에서 데이터를 불러오는 역할을 하기 때문에, 사용자가 페이지를 로드할 때 실행되어야 합니다. 따라서, 이 코드는 보통 페이지 상단이나, 문서가 준비 완료된 다음 실행되어야 하는 스크립트에 위치하는 것이 일반적입니다. 이러한 처리는 사용자가 페이지에 접속했을 때 이전에 저장했던 todo 항목들을 바로 볼 수 있게 하기 위함입니다.

두 번째, localStorage.getItem이 saveItemsFn 함수 안에 작성되지 않은 이유는 말씀하신대로, getItem은 저장하는 기능이 아닌, 저장된 데이터를 불러오는 기능을 하기 때문입니다. saveItemsFn 함수의 목적은 todo 항목들을 로컬 스토리지에 저장하는 것이고, 데이터를 불러오는 기능은 별도의 로직으로 처리하는 것이 좋습니다. 이는 함수가 각각 하나의 명확한 기능만 수행하도록 하는 것이 좋은 소프트웨어 개발 원칙 중 하나이기 때문입니다.

저장 기능과 로딩 기능을 분리함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다. 저장하는 함수와 불러오는 함수가 각각의 역할에 집중할 수 있도록 구성하는 것은 중요한 프로그래밍 실천입니다.

질문에 대한 답변이 되었기를 바랍니다. 추가적으로 궁금한 사항이 있으시다면, 언제든 질문해 주세요!

인프런 커뮤니티 질문&답변