쇼핑 목록 앱 만들기!
오늘도 드림코딩 복습이다!
쇼핑 목록을 추가할 수 있고 없앨 수 있는 간단한 기능과 더불어 몇가지를 추가적으로 적용시켜 보았다.
- add버튼 클릭 말고 엔터키로도 추가되게 하기
- 리스트가 칸을 초과할 때 생기는 스크롤 없애기
- 아무것도 입력하지 않고 add하면 추가되지 않게하기
- react 없이 구현!
솔루션 강의를 보기에 앞서 내가 작성한 코드와 구현 화면은 다음과 같다.
형편없기 그지없다
.gif)
<!DOCTYPE html>
<html lang="en">
<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>Shopping List App</title>
<style>
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px black solid;
}
.button_add {
text-align: center;
width: 300px;
height: 30px;
border: 1px red solid;
}
.type_thing {
width: 300px;
height: 30px;
border: 1px black solid;
}
.list {
border: 1px black solid;
}
.list_board {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<div class="list_board"></div>
</div>
<input type="text" class="type_thing" />
<div class="button_add">
<button class="add_button">plus!</button>
</div>
</div>
<script>
let new_list = document.querySelector('.list_board');
let add_button = document.querySelector('.add_button');
add_button.addEventListener('click', () => {
let content = document.querySelector('.type_thing');
if (content.value !== '') {
let thing = document.createElement('div');
thing.className = 'list';
thing.textContent = content.value;
//지우는 버튼
let erase_btn = document.createElement('button');
erase_btn.innerHTML = 'erase';
erase_btn.className = 'erase';
erase_btn.addEventListener('click', (e) => {
e.target.parentNode.remove();
});
thing.append(erase_btn);
new_list.append(thing);
content.value = '';
}
});
document.addEventListener('keydown', (event) => {
if (event.keyCode == 13) {
document.querySelector('.add_button').click();
}
});
</script>
</body>
</html>
그리고 강의를 보고 다시 만들어보았다.
.gif)
느낀 점
내가 처음에 만든 기능도 사실 강의를 보고 만든 기능과 큰 차이는 없다. 하지만 디자인에 조금 더 신경쓴다면 같은 기능이라도 좀 더 돋보일 수 있음을 다시금 깨달았다.
드림코딩에서는 먼저 만들려는 화면을 나눠서 html 마크업을 짜고, css를 손보고 그리고 마지막으로 js를 작업했다. 세 부분을 나눠서 진행한 반면, 난 딱 만들려는 기능에 손이 먼저 갔다. 순서가 옳고 그른 건 없지만, 드림코딩 강의처럼 진행한다면 훨씬 효율적이고 업무가 체계적으로 진행된다는 느낌을 받았다. 실제로 내가 스스로 해볼 때, js를 하다보니 필요한 html 마크업이 생겨나서 주먹구구식으로 추가해서 쓴 경우가 많았는데, 만약 훨씬 더 큰 프로젝트였다면? 혹은 혼자하는 프로젝트가 아니였다면? ... 누군가 나의 작업을 처음부터 끝까지 봤다면 일을 잘 못하는 사람처럼 보였을 것이다. 체계적으로 업무를 수행하여 놓치거나 실수하는 부분이 없도록 하기 위해 노력해야겠다.
학습한 내용
-
Document.queryselector로 집은 요소를 .click() 혹은 .focus()를 적용할 수 있다. .click()은 그 요소를 클릭한 것과 같은 효과를 내고, .focus()는 해당 요소로 focus를 해준다. 유용하게 쓰일 수 있을 것 같다!
-
append, appendchild 차이
-
innerText, innerHTML, textContent 차이
