리액트를 공부하고 본격적으로 개인 프로젝트를 진행하기 앞서 순수 자바스크립트만 사용해서 아주 간단한 프로젝트를 만드려고 한다. (사실, 프로젝트라고 하기에는 아주 민망한 수준이다ㅎㅎ) 내가 to do list를 만드는 이유는 다음과 같다.
- 내가 지닌 자바스크립트에 대한 지식수준 확인 및 복습
- 기능 구현에 따라 아주 멋진 포트폴리오가 됨
- 짧은 구현 시간
사실, 기본적인 지식에 대한 부족함으로 나중에 '취업하고 나서 민폐를 끼치는 동료가 되면 안 된다'라는 생각을 한 게 가장 크다. 하하하...😂
목표
- 시맨틱 태그 습관처럼 활용하기
- 30분 내 구현하기
시맨틱 태그 활용이 목표인 이유는 별거 없다. 물론 지금처럼 아주 작은 규모의 프로젝트에서는 필요 없지만 언젠가 입사 후 큰 프로젝트를 진행할 때 시맨틱 태그가 아주 중요하다고 생각하기 때문에 간과하기 쉬운 시맨틱 태그 사용에 습관을 들이려고 한다.
HTML 구조
우선, 모든 내용을 감싸는 <div>, 제목을 나타내는 <header>, 실질적인 내용이 담기는 <section> 태그를 사용해서 뼈대를 잡았다.
이것을 HTML 코드로 나타내면 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>To Do List With Javascript</title>
</head>
<body>
<!-- body 전체를 감싸는 div -->
<div>
<!-- 제목 -->
<header>
<h1>TO DO LIST</h1>
</header>
<!-- 리스트 입력 -->
<section>
<input type="text" id="inputBox"></input>
<button id="addButton">입력</button>
<!-- 리스트 조회 -->
<div id="List">
</div>
</section>
<!-- 리스트 추가를 위한 스크립트 파일 -->
<script src = "sources/addList.js"></script>
</div>
</body>
</html>
리스트 기능 스크립트 구현
아주 간단하게 만들 것이기 때문에 3가지 기능만 구현할 것이다.
- 입력 칸에 입력 후 리스트에 추가 및 조회
- 일정 완료 후 체크
- 리스트에서 삭제
이것을 Javascript 코드로 나타내면 다음과 같다.
const inputBox = document.getElementById("inputBox");
const addBtn = document.getElementById("addButton");
const toDoList = document.getElementById("List");
addBtn.addEventListener("click", function() {
const list = document.createElement("li");
// 리스트 생성
list.innerText = inputBox.value;
toDoList.appendChild(list);
// input 태그 공백으로
inputBox.value = "";
// 리스트 완료
list.addEventListener("click", function() {
list.style.textDecoration = "line-through";
})
// 리스트 삭제
list.addEventListener("dblclick", function() {
toDoList.removeChild(list);
})
})
'입력' 버튼 클릭 시, 리스트가 조회되는 <div> 안에 <li>가 추가되고 입력한 값이 들어간다. 그 후, inputBox.value = ""; 를 통해 입력 칸은 빈칸으로 초기화된다. 작성된 리스트를 클릭하면 가운데 줄을 그어서 완료되었다고 표시했고, 더블 클릭한다면 해당 리스트가 사라지게 된다.
실제 구현 화면
완성하긴 했지만 기본 기능에 구현하는 것을 목적으로 두었기 때문에 CSS와 여타 다른 기능은 전혀 구현하지 않아서 아쉬웠다. 그리고, 역시나 자바스크립트에 대해 소홀했던 탓에 구현하면서 버벅거렸고 열심히 구글링을 했다🙃 하지만 이를 계기로 나의 부족함을 깨닫고 더 열심히 해서 조만간 구현할 리액트 투두 리스트를 완벽하게 구현할 것이라고 다짐하게 됐다! 파이팅!!🔥🔥🔥
'Javascript' 카테고리의 다른 글
| 자바스크립트 ES6 비구조화 할당 문법 (0) | 2021.05.02 |
|---|---|
| 배열에 데이터를 추가하는 방법 - Array push()와 concat() (0) | 2021.04.25 |
| 이벤트가 발생한 대상의 데이터 값 가져오기 - event.target (0) | 2021.04.19 |
| 데이터 속성 값(data-)의 개념과 활용을 알아보자 (0) | 2021.04.19 |