[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1

Vanilla JavaScript(순수한 자바스크립트)만을 사용해서 To Do List를 만들어보자.

왜 귀찮게 VanillaJS로 구현하는가?

만약에 하나의 기능을 구현하는 데 100줄, 200줄 정도의 코드를 요구한다고 하자.

이미 그 코드를 잘 정리해 둔 라이브러리에서 가져와서 잘 쓸 수 있는 상황임에도 불구하고
프로젝트를 할 때 마다 그 코드들을 직접 구현한다면...? 매우 비효율적이다.

~~사실, 남이 이미 잘 짜둔 코드를 가져다 쓰는 것도 능력이다.~~

이 글을 보시는 여러분이나 필자와 같은 초보(아마..? 그럴것이다.)들은, 공부할 때 만큼은 직접 구현해보자.
간단해 보이는 기능들도 직접 구현해보면 어렵거나, 생각해봐야 할 부분이 많다.

즉 우리는 이걸 직접 구현함으로서 배우는 것이 많을 것이다.

물론 React, Vue, Jquery 등등의 프레임워크 혹은 라이브러리를 잘 다루는 것은 중요하다.
하지만, 그보다도 더 중요한 건 기초가 되는 VanillaJS(순수 자바스크립트를 의미함)를 열심히 다뤄봐야 한다.

To Do List?

To Do List 가 무엇이나면,
글자 그대로 "해야 할 일의 목록" 이다.

이제 바로 우리의 본 목적인 To Do List를 만들어보자.

우선, 골격이 될 HTML 파일을 생성한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form class="toDoForm">
      <input type="text" placeholder="what are you going to do today?" />
    </form>
    <ul class="toDos"></ul>
    <script src="todo.js"></script>
  </body>
</html>

form, input, ul 태그만 주의 깊게 보라.

해야 할 일을 적기 위해 form, input 태그를 준비했고
그 적은 일을 보여주기 위해서 ul을 준비했다.

HTML의 두뇌가 되어 줄 JS 파일을 생성하자.

우선 앞서 form, input, ul 을 준비 한 것을 바탕으로
어떻게 프로그램을 짜야 할 지 먼저 정리해보자.

1. 사용자가 해야 할 일의 목록을 input 박스에 입력한다.
2. 입력한 글자를 받아서, ul 목록에 잘 넣어서 보여주면 된다.

코드 작성 절차를 상세하게 떠올려보면,

1. DOM을 이용해서 HTML 문서에서 form, input, ul을 가져온다.

2. form에 submit 이벤트를 감지하는 이벤트 리스너를 달아준다.

1) 그 이벤트 리스너는 submit 이벤트가 발생하면 콜백으로 createToDo 함수를 실행한다.

2) createToDo 함수는 event를 인자로 받는다.
우선 form이 submit될 때 페이지가 새로고침되는 기본 동작을 막는다.
그리고 input에 입력된 값을 변수 toDo로 선언해서, paintToDo 함수에 넣어준다.
paintToDo 함수가 실행되고 나면 input을 비워준다.

3) PaintToDo 함수는 input에 입력한 값인 toDo를 인자로 받는다.
li태그, span태그를 만들어서 toDo를 span태그에 넣어주고, span을 li에, li를 ul에 넣어준다.
- toDo
다음과 같이 표현될 것

순서대로 코드로 구현 해 보자.

const toDoForm = document.querySelector(".toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDos = document.querySelector(".toDos");

function init() {
  toDoForm.addEventListener("submit", createToDo);
}
init();

function createToDo(event) {
  event.preventDefault();
  const toDo = toDoInput.value;
  paintToDo(toDo);
  toDoInput.value = "";
}

function paintToDo(toDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerHTML = toDo;
  li.appendChild(span);
  toDos.appendChild(li);
}

완성 코드

const toDoForm = document.querySelector(".toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDos = document.querySelector(".toDos");

function paintToDo(toDo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerHTML = toDo;
  li.appendChild(span);
  toDos.appendChild(li);
}

function createToDo(event) {
  event.preventDefault();
  const toDo = toDoInput.value;
  paintToDo(toDo);
  toDoInput.value = "";
}

function init() {
  toDoForm.addEventListener("submit", createToDo);
}
init();

위에서 작성한 작성 절차를 읽어보면서 코드를 천천히 읽어보면,

어떤 동작을 거치는지 다 이해가 갈 것이다.

다음과 같이 정말 간단해 보이는 To Do List가 만들어졌다.

정말 못생겼지만, 그래도 사용할 수는 있어 보인다.

이 코드의 문제가 무엇일까?

새로고침을 하면 To Do List가 모두 사라진다.

텍스트를 저장한 것 처럼 보이지만, 우리가 방금 작성한 코드는 단순히 입력한 텍스트를 li 태그에 잘 넣어서,

HTML 문서에서 보여주는 역할만 하고 있다.

결국 DB나 어떤 저장소에도 저장을 하지는 않았기 때문에 새로고침을 하면 모두 없던 일이 된다.

그래서 우리는 데이터를 위한 별도의 저장공간을 찾아야 한다.

분명 태그로 만들어서, HTML에 저장을 했으니까 이거면 된거 아니냐? 라고 생각할 수 있다.

사실 우리가 브라우저에서 HTML 문서를 불러와도, 그 문서 내용에 직접적인 수정을 가할 수 없다.

간단한 예를 들어보면, 우리가 네이버 홈페이지에 접속해서 command+option+i 로 개발자 도구를 열어서 네이버 페이지를 마구 파괴해도, 실제 HTML에는 영향을 줄 수 없는 것을 생각해보면 된다.

아래를 보자.

다음과 같이 HTML 태그의 오른쪽 버튼을 눌러 삭제하면서 열심히 파괴를 해본다.

내 노력과는 달리, 페이지를 새로고침하면 원래 모습으로 다시 돌아온다.

데이터를 저장하는 공간 Local Storage

우리가 To Do List를 작성하고 그 목록을 유지하려면, 우리가 입력한 텍스트 데이터를 저장할 공간이 필요하다.

브라우저에는 localStorage라는 공간이 있는데, 이와 같은 작은 정보들을 내 컴퓨터 브라우저에 저장하는 좋은 방법 중 하나이다.

다음 포스팅에서는 Local Storage와 함께 현재 코드의 부족한 점을 보완해보자.

[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 2

2021.04.30 - [JavaScript/VanillaJS] - [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1 [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1 Vanilla JavaScript(순수한 자바스크립트)만을 사용해서 To Do..

gobae.tistory.com

저작자표시

'JavaScript > vanilla' 카테고리의 다른 글

[vanillaJS] 채팅창 컴포넌트의 스크롤을 다뤄보자. (0)	2022.08.30
[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 3 (0)	2021.04.30
[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 2 (0)	2021.04.30