JavaScript로 Todo List 만들기

이수빈·2021년 8월 6일

CSS html 자바스크립트 투두리스트

프로젝트

목록 보기

1/2

1. 프로젝트의 기능

1) 해야할 공부를 입력하고 enter누르면 리스트에 추가

input에 할 일 입력하기 -> enter키 누르면 -> ouput 리스트에 태그 추가

2) 완료한 공부를 리스트에서 삭제하기 위해서 복습 질문에 답하기

화살표를 클릭하면 -> 복습.html로 이동 -> localStorage에서 삭제

3) 야간모드

달 아이콘을 클릭하면 -> body의 클래스 day, night toggle -> if 클래스 === night => html 요소를 야간 모드로 전환

아래 내용은 코드 구현에 대한 것입니다!

2. strict mode

(function () {

'use strict';

...코드 생략(스크립트 전체)

}());

먼저 스크립트에 strict mode를 설정했습니다.
strict mode는 자바스크립트의 문법을 좀 더 엄격하게 검사하여 잠재적인 오류 발생을 줄이기 위한 목적으로 ES5부터 추가된 기능입니다.

strict mode는 스크립트 단위로 실행됩니다. 엄격 모드가 있는 것과 없는 것이 혼용되면 오류가 발생할 수 있습니다. 따라서 위 코드와 같이 즉시 실행 함수로 스크립트를 감싸고, 선두에 적용하는 것이 좋습니다.

3. localStorage

투두리스트를 만들고, 새로고침을 하면 계속해서 초기화되는 문제가 있었습니다. 웹 브라우저에는 이 문제를 해결할 수 있는 localStorage가 존재하는데요.

개발자 도구에 application에 들어가보면 위와 같은 저장소를 확인할 수 있습니다. 이 저장소를 활용해서 투두리스트가 초기화되는 것을 막을 거예요.

let inputLocal = localStorage.getItem('items')?JSON.parse(localStorage.getItem('items')):[];
localStorage.setItem('items', JSON.stringify(inputLocal));
let item = JSON.parse(localStorage.getItem('items'));

위 코드는 items라는 공간을 할당하는 것입니다.

setItem('A', B): A라는 공간에 B를 저장.

getItem('A'): A공간에 있는 것을 읽음.

첫번째 줄은 items에 아무것도 없으면 [], 있으면 그것을 inputLocal에 할당하겠다는 의미입니다.

4. Create

document.querySelector(".studyList").addEventListener("submit", Create);

위 코드는 input에 값을 입력하고, enter키를 누르면 추가되는 것을 구현한 것입니다. Create은 직접 구현한 함수이고, 아래의 코드를 참고해 주세요!
document에서 studyList라는 클래스를 가져옵니다. 이 클래스는 input을 감싸고 있는 form을 의미합니다.

if(input!="") {
    inputLocal.push(input);
    localStorage.setItem('items', JSON.stringify(inputLocal));
    item = JSON.parse(localStorage.getItem('items'));
    document.querySelector(".input").value = "";
  }

input에 입력된 것이 있으면 push를 통해 localStorage에 값을 추가합니다.

5. Read

var list = "";
  for(var i=0; i<inputLocal.length; i++) {
    list+="<li>"+inputLocal[i]+"<span class='ReviewBtn' id="+i+">"+"→"+"</span></li>";
  }
  document.querySelector(".output").innerHTML=list;

위 코드는 화면에 보여주는 것에 대한 코드입니다.
저장소에서 가져온 요소들을 innerHTML을 통해 추가해줍니다.

innerText가 아닌 innerHTML을 사용하는 이유
우리는 output이라는 영역에 li와 span 태그를 추가하고 싶은 것이죠. 만약, innerText를 사용하면 li와 span이 태그 형태가 아니라 문자열 형태로 추가가 됩니다.
span -> /span 이런 식으로요!
따라서 innerHTML을 사용해서 태그를 추가합니다.

innerHTML의 단점
크게 3가지 단점이 있습니다. 1) 공격에 취약하다는 점, 2) 요소 노드의 모든 자식 노드를 제거하고, 새롭게 변경된다는 점, 3) 새로운 요소를 삽입할 때, 위치를 지정할 수 없다는 점입니다.

이 프로젝트의 경우, localStorage를 활용하여 리스트 형태로 값을 저장하고, 리스트의 인덱스에 접근하여 화면에 보여주는 방식이기 때문에 2번과 3번으로 인한 문제는 없습니다. 따라서 innerHTML을 사용합니다.

6. Delete

삭제할 때는 localStorage와 매치시켜서 지워줍니다. 삭제가 되기 전에 복습 페이지로 넘어가야 하기 때문에 그 부분을 먼저 실행하고, 지우는 부분을 구현했습니다. 아래 코드 참고해주세요!

function Delete() {
  NextPage();
  var i = this.getAttribute("id");
  item.splice(i,1);
  inputLocal = item;
  localStorage.setItem('items', JSON.stringify(inputLocal));
  Read()
}

NextPage() 함수가 다음 페이지로 넘어가는 함수입니다. 이 부분은 복습 페이지를 다른 html 파일로 만들고, 연결했습니다.

function NextPage() {
  location.href = "page/question.html";
}

위 코드가 복습 페이지로 이동할 수 있는 코드입니다.

location.href: html 파일 이동

다시 Delete 함수를 봅시다. 변수 i는 id라는 속성의 값을 저장하는 공간입니다. 즉, 몇 번째 리스트의 화살표인지를 확인하는 것입니다. splice를 통해 i에 할당된 인덱스 값에서부터 1개를 삭제하겠다는 것입니다. 선택된 항목이 삭제됩니다. 저장소에도 삭제된 것을 적용하기 위해 setItem으로 다시 설정해줍니다.

7. 야간모드

야간모드도 새로고침이 되면 초기화되는 문제가 있었습니다. 또, 복습 페이지에도 같은 모드를 적용해야 하는데, 이러한 문제를 해결하기 위해서 한 번더 저장소를 이용했습니다.

function NightAndDay() {
  document.querySelector("body").classList.toggle("night");
  let classLocal = localStorage.getItem('modes')?JSON.parse(localStorage.getItem('modes')):"";
  classLocal=document.querySelector("body").classList.value;
  localStorage.setItem('modes', JSON.stringify(classLocal));
  LocalMode();
}

document.querySelector(".Night").addEventListener("click", NightAndDay);

마지막 줄은 달 아이콘을 클릭하면 NightAndDay 함수가 실행되는 코드입니다.
야간모드를 구현할 때는 toggle을 사용했습니다. toggle은 클래스를 번갈아 실행하는 것입니다. 함께 알아두면 좋은 것들을 아래에서 확인해 주세요!

document.querySelector("body").classList.add(클래스명)
: 클래스를 추가
ex) "day" → "day night" (night이라는 클래스를 추가한다고 가정)

document.querySelector("body").classList.remove(클래스명)
: 클래스를 제거
ex) "day night" → "day"

document.querySelector("body").classList.toggle(클래스명)
: 클래스를 번갈아
ex)"day night" → "day" → "day night" → ...

이렇게 클래스명을 변화시킨 후, 이 클래스명을 저장소에 저장해 둡니다.
복습 페이지에서는 이 mode를 참고해서 야간모드로 바꿉니다.
복습이 끝나고 다시 메인 페이지로 돌아왔을 때도 똑같이 mode가 적용되어야 겠죠? LocalMode() 가 그 내용을 담고 있습니다.

function LocalMode() {
  let BodyClassName = JSON.parse(localStorage.getItem('modes'));
  if(BodyClassName === "day night") {
    document.querySelector(".dayTitle").classList.add("nightTitle");
    document.querySelector(".day").classList.add("night");
    document.querySelector(".output").classList.add("output-night");
    document.querySelector(".Night").classList.add("Day");
    document.querySelector(".input").classList.add("inputNight");
  } else {
    document.querySelector(".dayTitle").classList.remove("nightTitle");
    document.querySelector(".day").classList.remove("night");
    document.querySelector(".output").classList.remove("output-night");
    document.querySelector(".Night").classList.remove("Day");
    document.querySelector(".input").classList.remove("inputNight");
  }
}

위 코드는 야간 모드로 스타일을 변화시키는 것입니다. add해서 스타일을 변경하고, 야간 모드가 풀리면 remove해서 원래 기본값인 day 모드로 변경합니다.

위 이미지는 메인화면 코드입니다.

위 이미지는 복습 페이지의 코드입니다.