티스토리 뷰
노마드 코더 JS 크롬 앱 강의를 듣고 투두리스트를 적는 웹 페이지를 만들었다. 강의에서 알려준 JS메소드들을 적어놓고 예제부터는 혼자 힘으로 해보려고 했다. 별 것 아니지만 혼자 힘으로 응용했다는 것에 만족하기로...
강의 주소: https://nomadcoders.co/javascript-for-beginners
바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders
Javascript for Beginners
nomadcoders.co
html 코드
<!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">
<link rel="stylesheet" href="./todo-list.css">
<title>to-do List</title>
</head>
<body>
<div id="first-container">
<h1 id="title">to-do List</h1>
<form id="to-do-form">
<input type="text" class="form-input" id="to-do-input" maxlength="100" placeholder="write your to-do list" required autofocus>
<input type="submit" class="form-input" id="to-do-submit" value="submit">
</form>
<ul id="lists">
</ul>
</div>
<script src="./todo-list.js"></script>
</body>
</html>
가장 처음엔 제목과 값을 입력받는 <input>밖에 없다. 이후 사용자가 값을 입력하고 submit 버튼을 통해 제출하면 JS에서 값을 받아와 <input>태그 아래 <ul> 리스트를 작성한다. <script> 태그를 이용해 JS와 html을 연결해준다.
입력 폼
<form id="to-do-form">
<input type="text" class="form-input" id="to-do-input" maxlength="100" placeholder="write your to-do list" required autofocus>
<input type="submit" class="form-input" id="to-do-submit" value="submit">
</form>
JS로 추가할 ul 리스트 (비어있음)
<ul id="lists">
</ul>
JS 코드
상당히 더럽다
const to_do_form = document.querySelector('#to-do-form');
const to_do_input = document.querySelector('#to-do-input');
const to_do_submit = document.querySelector('#to-do-submit');
const ul = document.querySelector('#lists');
const TODOLIST = "lists";
let to_do_lists = JSON.parse(localStorage.getItem(TODOLIST));
function remove_list(event) {
const list_value = event.target.previousSibling.data;
const remove_index = () => {
for (let index = 0; index < to_do_lists.length; index++ ){
if (to_do_lists[index] == list_value) {
return index;
}
}
}
event.preventDefault();
event.target.parentElement.remove();
to_do_lists.splice(remove_index(), 1);
localStorage.setItem(TODOLIST, JSON.stringify(to_do_lists));
}
function make_lists(todo_value) {
const li = document.createElement("li");
const button = document.createElement("button");
li.innerText = todo_value;
button.innerText = "❌";
ul.appendChild(li);
li.appendChild(button);
button.addEventListener("click", remove_list);
}
function save_lists() {
localStorage.setItem(TODOLIST, JSON.stringify(to_do_lists));
}
function form_submit_event(event) {
const list_value = to_do_input.value;
to_do_lists.push(list_value);
to_do_input.value = "";
event.preventDefault();
make_lists(list_value);
save_lists();
}
if (to_do_lists === null) {
to_do_lists = [];
}
else {
to_do_lists.forEach(element => {
make_lists(element);
});
}
to_do_form.addEventListener("submit", form_submit_event);
변수
const to_do_form = document.querySelector('#to-do-form');
const to_do_input = document.querySelector('#to-do-input');
const to_do_submit = document.querySelector('#to-do-submit');
const ul = document.querySelector('#lists');
const TODOLIST = "lists";
let to_do_lists = JSON.parse(localStorage.getItem(TODOLIST));
const to_do_form = document.querySelector('#to-do-form');
const to_do_input = document.querySelector('#to-do-input');
const to_do_submit = document.querySelector('#to-do-submit');
const ul = document.querySelector('#lists');JavaScript에서 input 태그의이벤트 처리를 하기 위해 querySelector를 통해 변수에 저장해줬다.
변수이름이 다 고만고만해선 안된다는 걸 알지만 그냥... 이렇게 했다... 어차피 나 혼자 볼 건데...
const TODOLIST = "lists";자주 사용하는 문자열 같은 경우엔 오타가 날 우려가 있으니 대문자 변수 안에 저장하는 게 좋다고 한다. C언어에서 배운 상수 개념인가?
let to_do_lists = JSON.parse(localStorage.getItem(TODOLIST));localStrage 안에 문자열 형태로 저장된 값들을 불러와 객체 형태로 to_do_lists라는 변수에 저장한다. 이미 localStroage에 저장된 값이 있다면 화면에 기존 값이 출력된다. (강의 목표 자체가 웹 페이지가 새로 로딩돼도 값이 날아가지 않는 투두리스트를 만드는 거였음...)
웹 페이지 로딩 시 먼저 실행되는 코드
if (to_do_lists === null) {
to_do_lists = [];
}
else {
to_do_lists.forEach(element => {
make_lists(element);
});
}
localStorage에 저장한 값이 없으면 to_do_lists는 비어있는 배열로 만든다.
이미 저장한 값이 있다면 forEach 문법으로 make_list라는 함수를 통해 to_do_lists안에 있는 값들을 화면상에 출력한다.
함수들
1. submit 버튼 클릭 시 발생하는 event
to_do_form.addEventListener("submit", form_submit_event);submit 이벤트가 발생하면 form_submit_event 함수가 실행된다.
function form_submit_event(event) {
const list_value = to_do_input.value;
to_do_lists.push(list_value); // 1. 배열 갱신
to_do_input.value = ""; // 값을 제출하면 자동으로 input 태그를 깨끗하게 비움
event.preventDefault(); // 기존 브라우저 이벤트를 제한
make_lists(list_value); // 2. 받은 값으로 리스트 그리는 애
save_lists(); // 3. 지금 배열 안에 있는 애들을 localStorage에 저장하는 애
}얘가 하는 일은...
1. 내가 할 일을 입력하면 할 일이 저장된 배열의 끝에 또 할 일을 추가해준다.
2. make_list() 함수에 값을 전달해 새로운 할 일을 화면 상에 보여준다.
3. save_list() 함수를 호출해서 localStorage에 내 할 일들을 저장해서 f5를 눌러도 초기화되지 않도록 저장한다.
2. make_lists() 함수
할 일 리스트를 웹에 출력하고 ul과 태그 연결
function make_lists(todo_value) {
const li = document.createElement("li"); // 1. 태그 생성
const button = document.createElement("button");
li.innerText = todo_value; // 2. 태그 안 값을 입력
button.innerText = "❌";
ul.appendChild(li); // 3. 자식 만들어주기
li.appendChild(button);
button.addEventListener("click", remove_list); // 4. X 버튼 클릭하면 리스트 지워주는 함수
}
1. createElment()로 태그를 만들어 변수에 저장한다.
2. 태그 안에 innerText 로 들어갈 값을 넣어준다. 할 일을 삭제하는 버튼을 만들어야 해서 X 이모티콘도 넣어줬다.
3. appendChild()로 ul 태그엔 li 들을 자식으로 두도록 하고 li 의 자식으론 button 을 두게했다.
4. 그리고 여기서 button 에 click 이벤트가 발생하면 리스트를 삭제하는 remove_list 함수를 실행시킨다.
3. save_lists() 함수
리스트의 값을 local Storage에 넣어준다.
function save_lists() {
localStorage.setItem(TODOLIST, JSON.stringify(to_do_lists));
}배열 안의 값들을 JSON 문자열의 형태로 localStorage에 저장한다.
4. remove_list() 함수
X 버튼이 눌리면 리스트를 지운다.
function remove_list(event) {
const list_value = event.target.previousSibling.data; // 1
const remove_index = () => { // 2
for (let index = 0; index < to_do_lists.length; index++ ){
if (to_do_lists[index] == list_value) {
return index;
}
}
}
event.preventDefault();
event.target.parentElement.remove(); // 3
to_do_lists.splice(remove_index(), 1); // 4
localStorage.setItem(TODOLIST, JSON.stringify(to_do_lists)); // 5
}
이벤트가 발생하는 버튼의 값을 찾아서 배열 속에서 그 값을 지우고 갱신해주는 그런 함수다... 이 함수에서 고생을 많이 했다... 강의 볼까말까 100번 고민했다
삽질 1. 삭제할 텍스트 저장하기
const list_value = event.target.previousSibling.data;button의 부모태그는 <li> 니까 부모태그의 값을 가져오면 되겠지? 했는데... 값이 이상하게 계속 0이 뜨는 거다.
<li>의 자식은 텍스트와 버튼 두개여서 그랬던 건가? 아무튼 그래서 그냥 button 이전의 형제값을 가져오는 것으로 할 일이 적힌 텍스트를 추출했다.
삽질 2. 삭제할 리스트의 인덱스 찾기
const remove_index = () => {
for (let index = 0; index < to_do_lists.length; index++ ){
if (to_do_lists[index] == list_value) {
return index;
}
}
}삭제할 리스트의 인덱스를 찾고 싶은데... 도대체 어떻게 해야할지 모르겠다.
property에서 미로찾기 하듯이 부모 태그 갔다가 자식 태그 갔다만을 반복했다...
구글링도 해봤는데 서치 실력의 부족인지 안 나왔다...
그래서 해당 값을 찾아 인덱스를 반환해주는 화살표 함수를 작성했다.
근데 이런 함수 작성은 처음해봐서 삽질 4를 하게 된다
그냥 3. 버튼이 눌린 <li>를 요소에서 삭제한다.
event.target.parentElement.remove();
삽질4. splice함수로 배열에서 값 삭제
to_do_lists.splice(remove_index(), 1);아무리 해도 remove_index가 안 먹었다
내가 화살표 함수 작성을 잘못해서 그런 건가? 화살표 함수에선 return이 안 먹나? 이런저런 발상을 했는데 그냥...
괄호를 작성 안해서 그런 거였다.
remove_index => remove_index()
... 어이없어서 안 잊어 먹을 것 같다.
그냥5. localStorage에도 값 삭제한 걸 알리기
localStorage.setItem(TODOLIST, JSON.stringify(to_do_lists));값을 삭제한 배열을 다시 localStorage에 넣어준다!
일어나서 샤워하기 삭제하면?
잘 동작한다 감사합니다...
나는 배열에서 인덱스 찾느라고 고생했는데 강의해주시는 분이 오브젝트를 쓰는 걸 보고 컴퓨터 껐다...
오늘 볼 생각이다... 아무튼 처음으로 코딩에 설명까지 해가며 블로그 글 작성했는데... 생각보다 시간이 너무 많이 든다. 내가 아직 노하우가 없는 건지... 깔끔 떨다가 이렇게 된 건지 모르겠다. 다음부턴 더 짧게 써봐야겠다
사실 블로그에 코드 넣는 거 다른 사람들은 예쁘게 하던데 내건 안 예뻐서 코드블록 테마 찾는다고 한 시간은 쓴 것 같다... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 네이버 신빙성 없는 이모티콘 쓴 블로그들 보면 열받았는데.. 이젠 대단하다고 생각한다. 역시 사람 일은 안 해보면 쉬워보이는 것 같다
'Web > JavaScript' 카테고리의 다른 글
| [JS] fetch 메소드 (get) (0) | 2022.04.09 |
|---|---|
| [JS] 배열, 객체 (0) | 2022.04.09 |