[JS] To do List 구현
이전에 여러 포스팅을 이용해, D-day 카운팅하는 프로그램을 간단하게 만들고, 로컬스토리지에 저장하여 유지하는 거 까지 공부를 진행하였다. D-Day 카운팅과 관련된 것은 아래 주소를 이용해 다시 확인해볼 수 있다.
그리고 오늘은 To do List를 구현해보려고 한다.
[JavaScript] 날짜를 생성하는 New Date
Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX
hong-study.tistory.com
[JS] D-DAY 카운트 구현
[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난
hong-study.tistory.com
[JS] Local Storage
[JS] D-DAY 카운트 구현[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시
hong-study.tistory.com
오늘은 To-Do-LIST를 만들고 그 안에서 어떤 동작과정이 있는지 알아보려고 한다.
이전에 DOM ( Document Object Model)에 대해서 공부를 한 적이 있다.
DOM 이란?
우리는 JavaScript로 HTML 문서를 조작 할 수 있다. 항상 document라고 하는 객체를 참조해서 내부의 HTML 요소들을 참조하는 방식으로 그 문서의 내용을 조작했다. 그런데 사실 우리는 HTML 요소들을 직접적으로 조작했던 것이 아니라 조금 더 정확하게 이야기 하면, 우리는 DOM Element 를 조작했던거라고 이해하면 된다.
즉, DOM이란 브라우저가 HTML 문서를 파싱하는 과정에서 DOM이라는 트리구조 형태의 객체를 생성하게 된.
※ 트리 구조란, 자료구조의 일종으로 여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태이다.
DOM 트리 구조는 간단하게 표현하자면 위와 같다. 각 요소들은 노드(Node) 라는 이름으로 불리게 되고 해당 구조를 토대로 DOM 트리를 아래와 같이 간단하게 확인할 수 있다.
DOM 트리
- Document
문서(document) 노드, DOM에 진입할 수 있는 진입점 역할을 해준다.- HTML
Document를 제외하고 최상위에 위치, 이러한 노드를 루트(root) 노드라고 한다. 루트 노드는 항상 하나만 존재합니다.- head, body, title, div…
요소(element) 노드라 부른다. 속성 노드를 가질 수 있는 유일한 node입니다.- src=”…”, id=”…”
속성(attribute) 노드라 부른다. 이들은 요소 노드에 관한 별도의 정보를 담고 있지만, 해당 요소 노드의 child node에는 속하지 않는다.- “ToDo”, “인사하기”…
텍스트(text) 노드라고 부른다. 텍스트 노드는 child node, 자식 노드를 가질 수 없기 때문에 항상 leaf node가 된다.Parent Node : 각 node의 바로 위에 위치한 Node를 Parent Node, 부모 노드라 한다.
Chile Node : 각 node의 바로 아래에 위치한 Node를 Child Node, 자식 노드라 한다.
Leaf Node : 트리구조 내에서 가장 끝단에 위치한, Child Node가 없는 Node를 가리킨다.
우리는 document를 활용해서 JavaScript 내부로 각각의 Node들을 참조 해 올 수 있었다.
DOM Method
- document.getElementById() ⇒ Element Node의 id 속성을 체크해서 해당하는 Element를 참조해온다.
- document.getElementByClass() ⇒ Element Node의 class 속성을 체크해서 해당하는 Element를 참조해온다.
- document.querySelector() ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. id(”#”)를 입력하는 경우 id를 기반으로, class(”.”)를 입력하는 경우 class를 기반으로 참조
- document.querySelectorAll() ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. querySelector와 다르게 배열 형태로 모든 요소를 참조해온다.
- document.createElement() ⇒ 새로운 Node를 생성합니다. Node의 형태는 생성되지만 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않습니다.
- document.appendChild() ⇒ Element Node를 현재 DOM에 추가합니다. 이때의 document는 다른 Element가 될 수도 있습니다.
간단한 To - Do - List 만들어보기
To do list는 구현하기 쉬운만큼 가장 기본적인 요소 중 하나인 거 같다.
중소기업이나, 중견기업에서 Front-End 직무로 이전에 코딩테스트를 보러 다닌 기억이 있는데,
대개 10개 중 4곳 정도는 디자인 부터, 기능 구현을 To-Do-List로 구현해보라는 문제가 있었다.
그렇기 때문에 가장 기본적인 기능 중 하나임으로, 프론트엔드 직무를 지원하는 사람들이라면 확실하게
DOM 구조에 대해 이해하고, 기능을 구현할 수 있는 능력을 끌어올릴 필요가 있어보인다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/ToDo-list/index.css">
<script src="/ToDo-list/index.js" defer></script>
<title>Document</title>
</head>
<body>
<h1>To Do List</h1>
<div class="todo-container">
<input type="text" id="todo-input" onkeydown="keyCodeCheck()">
<ul id="toDo-list">
</ul>
</div>
</body>
</html>
JS
const inputValue = document.querySelector("#todo-input");
const keyCodeCheck = function(){
if(window.event.keyCode === 13 && inputValue.value !== ''){
const todoList = document.querySelector("#toDo-list");
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
// 1. span 태그 내에 입력한 값 추가
newSpan.textContent = inputValue.value;
// 2. LI태그 하위 속성으로 span 추가
newLi.appendChild(newSpan);
// 3. 리스트에 추가
todoList.appendChild(newLi);
inputValue.value = "";
}
};
JS 파일을 확인을 하면 이해가 쉽다.
설명에 편하게 변수명은 빨간색으로, 함수명은 파랑색, 내장 객체는 초록색을 이용해 설명을 하려고 한다.
1. inputValue : 해당 변수는 HTML 문서에서 Input 태그에 대한 정보를 불러오기 위해 선언
2. KeyCodeCheck() : 버튼을 사용하지 않고, 엔터만 눌러서 값을 추가하고, 입력한 값이 li 태그에 추가 되도록 하였다.
3. todoList : 전체 ul 태그에 li를 appendChild 시켜줘야 하기 때문에 불러온 태그이다.
4. newLi : createElement라는 내장 객체를 사용하여 li를 생성한다.
5. newSpan : newLi와 동일하게 내장 객체를 사용해 span을 생성한다.
이렇게 간단하게 구현을 한 다음에, inputValue의 값을 초기화해주면 된다.
그리고 나같은 경우는 inputValue, input 태그정보를 불러왔지만, Value 값을 직접 불러오는 사람도 있을 것이다.
이떄는 const 대신, let을 사용해 값의 재할당까지 생각을 해서 구현을 해줘야 한다.