자바스크립트 기본 to do list
to do list
프론트엔드를 배우면서 처음에 많이
만드는게 to do list 입니다.
C나 자바 같은 전통 프로그래밍 언어는
항상 시작할 때 Hello World 를 출력하고
시작하는데 이게 쓸모없는게 아니라
런타임에서 작동하는 코드를 구현해봄으로써
언어의 대략적 구조나 원리를 이해할 수
있기 때문입니다. 시작점이라고 하지요.
그런데 자바스크립트 같은 동적타입언어는
소스코드에서는 많은 것을 숨기고
컴파일러가 자동으로 추론(infer)하는 처리가
많기 때문에 Hello World를 해봤자
별로 알수 있는게 없습니다.
이 언어는 문법이 간단한가?
- 정도로 생각할 뿐입니다.
to do list는 웹프레임워크의
Hello World 같은 프로그램입니다.
웹프레임워크는 마지막에는 브라우저안에서
html css javascript 로 변환되기 때문에
결국 실행되면 같은 웹응용프로그램이 되는데
문제는 웹프레임워크가 난무하는 시대라서
프로그래머는 많은 시간을 새로운 문법을
학습하는데 보내야 합니다.
많은 프레임워크를 안다고 무조건
좋은 것은 아니지만 새로운 프레임워크에
적응하기 위해 프로그램을 작성한다면
to do list 가 도움이 될 수 있습니다.
웹프레임워크의 성능비교를 위해
to do list 벤치마킹을 하기도 합니다.
(페이지 로딩 시간 같은 성능 측정)
이번 포스팅은 자바스크립트로 만드는
기초적인 to do list 입니다.
아래와 같은 간단한 to do list로
input 창에 입력(엔터키, 버튼)
클릭 시 줄긋고 더블 클릭시
삭제하는 기능이 있습니다.
to do list의 로직은 간단하지만
깊은 원리까지 이해하는 것은
종합적인 지식이 필요합니다.
또 to do list 를 구현하는 시간만큼
css 를 작성하는 시간도 들어갈 수 있는데
요새는 또 모바일이 중요하니까
반응형 CSS로 작성하면 좋을 겁니다.
반응형 레이아웃이나 디자인 코드를
예쁘게 구현하려면 CSS에 대한
테크닉도 좀 필요하긴 한데 CSS를
적당히 작성해도 자바스크립트는 돌아갑니다.
자신만의 to do list 를 만들고
CSS는 차츰 보완하고 살을 붙여나가는
것도 좋은 방법입니다. 디자인이 어려운
사람은 bootstrap을 사용하는 것도
좋은 방법입니다. bootstrap 템플릿을
쓰면 이런 쪽에 소질이 없는 사람도
상당히 그럴 듯한 와꾸가 나옵니다.
(그것이 bootstrap의 목적이니까)
해외의 자바스크립트 프로그래머들 중에는
처음에 to do list를 통해서 많은 것을
배웠다는 사람도 있습니다. 간단한 앱이지만
HTML과 CSS를 알아야 하고 DOM 객체
알아야 하고 자바스크립트 까지 종합할 수
있어야 하기 때문입니다. 또 Maria db 와
node js까지 사용해서 백엔드에 연결하고
운영하는 것까지 완전한 하나의 앱으로
완성할 수 있어서 초보자가 종합적인
학습을 하기에 상당히 장점이 많다 -
고 할 수 있습니다.
그럼 코드를 좀 보겠습니다.
html 코드는 보통 container에 집어 넣습니다.
필요한 것은 input button 그 다음에 to do list가
들어갈 tdContainer입니다. 여기서 볼 것은
input은 텍스트 입력을 받기 위해 있는 것이고
button 은 전송하기 위해 있습니다. enter키로
이벤트 리스닝 할거면 딱히 없어도 상관은 없습니다.
tdContainer는 이 div의 child(자식) 노드에
인제 p 태그가 추가됩니다. 이 안에 들어가는
자식태그에 따라 CSS를 미리 짜줘야 하니까
그런 부분이 디자인적으로 어려울 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<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>to do list basic</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1>basic to do list</h1>
<input id="textInput" type="text" autofocus />
<button id="addButton">+</button>
<div class="to-do-list" id="tdContainer"></div>
</div>
<script src="es6.js"></script>
</body></html>
다음은 CSS 코드인데 개인적으로 프론트엔드를
잘 몰라서 적당히 꾸민 코드입니다.
이것은 자바스크립트 코드와 전혀 상관이
없는 것은 아니지만 to do list 니까
각자가 마음에 드는 스타일로 적용합니다.
디자인은 도저히 못하겠다 혹은 디자인은
별 관심이 없다면 bootstrap을 추천합니다.
bootstrap 5 grid 시스템 - bootstrap 5 기초 1
html,
body {
width: 100%;
margin: 0;
font-family: Arial, Verdana, serif;
}
.container {
width: 80%;
margin: auto;
text-align: center;
height: 100vh;
border: 1px dotted #222F3E;
}
.container h1 {
background-color: #A6BEFF;
color: #4825D8;
margin-top: 1em;
margin-bottom: 1em;
line-height: 2;
}
#textInput {
width: 300px;
height: 30px;
font-size: 1.2em;
vertical-align: middle;
margin-left: 3%;
margin-right: 1%;
}
#addButton {
width: 50px;
height: 35px;
vertical-align: middle;
font-size: 1.7em;
}
.to-do-list {
margin: 0 auto;
width: 90%;
}
.paragraph-style {
line-height: 1.7;
width: 350px;
height: 30px;
margin: 0 auto;
cursor: pointer;
font-size: 1.1em;
border-bottom: 1px solid #8FA3B9;
vertical-align: middle;
text-align: left;
padding-left: 1em;
margin-top: 1%;
}
.removeButton {
width: 40px;
height: 30px;
font-size: 1.5em;
vertical-align: bottom;
}
가장 중요한 자바스크립트 입니다.
dom 과 event listner로 조작합니다.
버튼을 클릭했을 때 함수를 실행하므로
button을 get element 하고 텍스트를
입력받는 textInput, 마지막으로 to do list를
자식에게 출력할 tdContainer 입니다.
addEventListner 함수 하나에 몰아넣었는데요,
메소드를 보면 자기 스스로 설명합니다. (self explain)
텍스트를 입력할건데 p 태그에 입력합니다.
내용은 textInput의 value입니다(텍스트)
스타일 시트는 CSS에 별도로 정의합니다.
tdContainer에 appendChild(자식 추가하기)로
브라우저에 나타나게 됩니다.
삭제를 위해서 dblclick(더블클릭)시
removeChild(자식 제거)를 합니다.
한번만 클릭했을 때는 줄긋기 (line-through)입니다.
마지막으로 textInput에 엔터키를 누르면
addEventListner의 click 함수가 실행되도록 합니다.
let addButton = document.getElementById('addButton');
let tdContainer = document.getElementById('tdContainer');
let textInput = document.getElementById('textInput');
addButton.addEventListener('click', function(){
// p 태그 생성
let paragraph = document.createElement('p');
paragraph.innerText = textInput.value;
paragraph.classList.add('paragraph-style');
// child에 p 태그 추가
tdContainer.appendChild(paragraph);
// 다시 empty text로 변경
textInput.value = "";
textInput.focus();
paragraph.addEventListener('click', function(){
paragraph.style.textDecoration = "line-through";
});
paragraph.addEventListener('dblclick', function(){
tdContainer.removeChild(paragraph);
});
});
textInput.addEventListener("keyup", function(e){
if(e.keyCode == 13) {
e.preventDefault();
document.getElementById('addButton').click();
}
});
코드펜의 예제는 다음과 같습니다.
See the Pen javascript to do list by jayonk (@jayonk) on CodePen.
이것은 기본적인 to do list 이고
살을 붙이면 더 좋은 앱을 만들 수 있습니다.
예를 들어 시간을 입력한다면
스케줄러가 될 수 있겠지요.
