이전에 여러 포스팅을 이용해, 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을 사용해 값의 재할당까지 생각을 해서 구현을 해줘야 한다.
'Programming > JavaScript' 카테고리의 다른 글
| [JS] 호이스팅 (0) | 2024.06.14 |
|---|---|
| [JS] Scope(스코프) (1) | 2024.06.14 |
| [JS] Local Storage (2) | 2024.06.13 |
| [JS] D-DAY 카운트 구현 (0) | 2024.06.13 |
| [JavaScript] 날짜를 생성하는 New Date (0) | 2024.06.11 |
