💡 순수 js로 먼저 to-do를 만들고 나중에 react로 리팩토링 하는 연습하고자 한다.
우선 오늘은 함수, 객체, DOM을 자연스럽게 익히기 위해서 1단계를 구현하면서 바닐라 JS로 구조 익히자!
미션
할 일을 입력하고 추가 버튼을 눌렀을 때 리스트에 나타나도록 구현📌 필요한 개념
input.value
addEventLister()
Document.createElement()
.textContent
.appendChild()
📌 1단계 완료 기준단계 완료 기준
사용자가 할 일을 입력할 수 있다.
버튼을 누르면 입력값이 화면에 출력된다.
입력값이 비어 있으면 추가되지 않는다.
입력창은 입력 후 비워진다.
🔥 결론 먼저 어려웠던 점
gpt에 굉장히 의존적이었구나 코드를 보면 이해가 가능하나 스스로 먼저 머리속에 그려지질 않는구나 라고 원래도 알고있었지만 뼈저리게 느껴졌고,,,그래도 이렇게 차근차근 다시 해보니까 감이 익혀지려고 한다.
처음부터 오류가 발생했던건 script실행시점 문제로 전에도 겪었던거인데 기억이 안나서 헤맸다.
에러가 났던 이유는 script가 body위 있을 때 js가 먼저 실행되어서 DOM요소를 찾지 못했다. null error
정보 검색해보니까 DOMContentLoaded 이벤트로 감싸서 작성하면 오류가 해결된다는 글을 보고 다시 작성해보니까 해결되었다.
document.addEventListener('DOMContentLoaded', () => { ... });
이건 브라우저가 HTML을 다 읽은 뒤에 실행하라는 뜻이러한 점을 보면서 아주 기초적인 오류도 해결을 못하고 있구나라는 생각이 들면서 하나한 뜯어보면서 공부해보았다..처음엔 구조 흐름이랑 DOM 실행 시점이 익숙하지 않았지만 직접 구현하고 디버깅하면서 습득해서 확실히 개념들을 익히고 내껄로 만들 수 있었다!
1️⃣ 1단계 구현 : input 요소에 내용 입력 후 버튼 클릭시 addEventLister실행시켜서 li리스트 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>오늘의 할일</title>
</head>
<body>
<script src="./todo.js"></script>
<h1>아침형 ESTP 혜지트 오늘의 할일</h1>
<input type="text" id="todoInput" placeholder="오늘 할 일을 입력하세요" />
<button id="addBtn">추가</button>
<ul id="todoList"></ul>
</body>
</html>
(1) 할일 추가 html 작성
-
input type = "text" 문자열 타입 필드로 만들어줘서 자유롭게 입력이 가능하도록 함.
이밖에도 input type 유형에는 password, email, number등 다양한 옵션이 있다는 점 참고 -
id = "todoInput" / "addBtn" / todoList" 지정
해당 input요소의 고유 식별자(아이디)를 지정하는 것, 자바스크립트에서 해당 요소를 찾기 위해 사용하는 것 -
placeholder="할일을 입력하세요"
input 초기 메세지이고 입력 안내 역할을 해줌. 입력시 해당 내용은 초기화되어 안보이고 입력되는 문구가 보임.
(2) DOM 요소 가져오기
document.getElementById('아이디')는 HTML 문서에서 특정 요소를 JS에서 가져올 때 사용하는 메서드임
(3) 버튼 클릭 이벤트 등록
addBtn.addEventListener('click', addTodo);addEventListener('click', 함수)는 버튼을 클릭했을 때 특정 함수를 실행하겠다는 뜻
여기서 버튼 클릭시 js에서 만든 함수 내용이 실행이 되는 것.
이 구조는 실무에서도 이벤트 핸들로 연결에 항상 쓰인다고 하니까 자주 사용해보고 익히자.
(4) 화살표 함수 등록 및 실행
// todo.js
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const list = document.getElementById('todoList');
addBtn.addEventListener('click', () => {
const todoText = input.value.trim();
if (!todoText) return;
const li = document.createElement('li');
li.textContent = todoText;
list.appendChild(li);
input.value = '';
});
});
사용자가 입력한 값을 todoText라는 변수에 담고, .trim()을 이용하여 공백은 제거시켰다.
만약 사용자가 입력을 안해서 빈 문자열로 확인되면 return을 만나서 함수 실행을 멈추게 함.
즉, 입력값이 없다면 아무것도 실행이 되지 않도록.
li.textContent = todoText;
방금 만든 li안에 사용자가 입력한 텍스트를 넣어주고 ul리스트에 list.appendChile(li)를 사용하여 li를 추가하여 화면에 내용이 보이도록 함.
자바스크립트 내장기능(=DOM API)
- 사용한 메서드/속성 역할 설명
.createElement : 새로운 html 요소를 만드는 것. 작성한 코드에서 예시를 들면 li태그를 만든것임.
.textContent() : 요소 안에 텍스트를 넣는 것. innerText랑 비슷하지만 textConten는 안전하고 성능이 더 좋아서 자주 쓰인다고 함.
.appendChild() : 만든 요소를 DOM에 추가하는 것. 부모 요소의 마지막 자식으로 추가해주는 메서드임. 그래서 만든 코드에서 보면 리스트에 새로운 아이템을 덧붙이는 걸 확인 할 수 있음.(특정요소에 자식요소로 추가)
