개발 공부를 시작한지 한 달째가 되어가지만 제대로 할 줄 아는게 없다..
웹 개발자가 되고싶은 나지만 생활코딩님의 웹 애플리케이션 만들기를 보면서 따라해본 웹이 꼴랑 나의 결과물이다.
그것도 다 베껴서 만든..
(회사를 다니면서 공부를 한다는 것이 쉬운 일은 아닌 거 같다 ㅠㅠ)
일단 나는 개발자가 되기 위해서는 이론적인 것을 알아야지 뭘 할 수 있겠다라는 생각이 들어서 백엔드 개발자가 되고싶은 나이기에 일단 JAVA라는 프래그래밍 언어의 이론적인 것을 공부하고 있는데 도통 무슨 말인지도 모르겠는 어려운 용어들이 너무 많았다.
그러다가 유튜브에서 우연히 '테크보이 워니'라는 유튜버 분의 영상을 보게 되었는데 "백날 첫날 이론을 공부해봤자 실력이 늘지 않는다." 라며 일단 직접 프로젝트를 해보면서 모르는 것들의 내용만 찾아서 쏙쏙 공부하는 것이 더 빠르고 확실하게 실력이 늘어날 수 있는 방법이라고 말해주었는데, 직접 이론 공부를 해보니 뼈저리게 느끼게 되었다.
그래서 일단 작은 프로젝트라도 혼자 천천히 해보려고 하는데 찾아보니 Todo list 프로젝트가 그나마 쉽고 간단한 프로젝트라 시작하게 되었다.
이번 프로젝트는 janeljs님의 블로그를 보면서 만들기로 했는데 그냥 베끼는 수준이다 ㅠ
https://velog.io/@janeljs/making-a-todolist
JavaScript로 To-Do List 만들기
2일에 걸쳐 JavaScript를 배운 뒤 어떤 프로그램을 만들지 고민하다가 간단한 투두리스트를 구현해보기로 했다. 복습할 겸 HTML과 CSS부분도 처음부터 다 만들었기에 디자인이 예쁘지는 않지만 다 만
velog.io
우선 처음에는 html의 기본적이 구조와 함께 틀 잡아주기
<!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>To Do List</title>
</head>
<body>
<div id = "todolist"> <!--전체적인 클래스-->
<div class = "main_title"> <!--대제목-->
<h1>To DO List</h1>
</div>
<div class = "input__section"> <!--할 일 적은 것을 받을 인풋 클래스-->
<form>
<div>
<input type="text" class="item" autofocus="true"> <!--autofocus는 웹 접속 시 해당 부분으로 포커싱한다-->
</div>
<div>
<button type="button" class="input__button"><i class="fas fa-plus-circle"></i></button>
</div>
</form>
</div>
<div class="item__list"></div> <!--인풋 받은 할 일들을 리스트로 표시해줄 클래스-->
</div>
<script src="main.js" defer></script>
</body>
</html>
★ 주석으로 모르는 사람이 각 섹션이 어떤 부분인지 알기 쉽게 설명도 하고, 모르는 부분은 그때 그때 찾아가면서 무엇을 뜻하는지 적어두었다.
autofocus란 웹 접속 시 해당 부분에 바로 포커싱이 되도록 해주는 기능이다.
'use strict'; // strict 모드 사용
let itemList = []; // itemList라는 배열 선언
let inputbutton = document.querySelector(".input__button"); // input__button 클래스 불러오기
inputbutton.addEventListener("click", addItem); // Click 이벤트 발생 시, addItem 함수 실행
/* strict = JavaScript의 함정을 발견하여 오류로 통지해주는 구조
let = 변수 선언
const = 상수 선언
document.querySelector = id나 class, 여러가지 선택자를 불러오는 기능
addEventLIstener(이벤트이름, 콜백함수) = 어떠한 이벤트가 발생하였을 때, 함수를 불러오는 기능*/
이제 자바스크립트는 자바스크립트의 함정을 발견하여 오류로 통지해주는 구조인 strict mode를 janeljs님처럼 똑같이 해줬다.
function addItem() { // addItem이라는 콜백함수 선언
let item = document.querySelector(".item").value; // item 클래스에 입력된 값을 불러오기
if (item != null) { // item이 null이 아닐 때
itemList.push(item); // itemList에 push
document.querySelector(".item").value = " "; // push 후 item 클래스의 값을 제거
document.querySelector(".item").focus(); // 제거 후 item 클래스에 포커싱
}
showList();
}let은 자바스크립트에서 변수를 선언해주는 함수
상수를 선언해주는 함수는 const
document.querySelctor는 클래스나 id 여러 선택자를 불러올 때 사용하는 함수.
querySelector를 이용하여 HTML에서 input__button 클래스를 가져와 inputbutton 변수에 할당해주었다.
addEventListener은 어떠한 이벤트가 있을 때 어떻게 할 것인지 설정해주는 함수로 저는 클릭을 했을 때, input__button에 입력된 아이템을 추가하는 것으로 설정을 해주었습니다.
if문으로 item 클래스가 null이 아니라면 itemList에 item 클래스의 입력 값을 push 후, item 클래스의 값을 지워지고, 다시 item 클래스에 포커싱이 되도록 해주었다.
function showList() { // showList() 함수 선언
let list = "<ul>"
for (let i = 0; i <itemList.length; i++) {
list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">" + "\u00D7" + "</span></li>";
} // close 클래스에 <li> 형태의 요소 생성과 x표 생성
list += "</ul>"; // for문을 통해 배열에 들어오는 요소 <ul>형태로 list 변수에 담기
document.querySelector(".item__list").innerHTML = list; // innerHTML 속성으로 item__list 클래스에 list 변수 담기
let deleteButtons = document.querySelectorAll(".close"); // querySelectorAll로 클래스가 close인 모든 element를 가져오기
for (let i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].addEventListener("click", deleteItem); // click시 deleteItem 함수 실행
}
}
/* \u00D7 = X를 뜻하는 유니코드
innerHTML = element에 포함된 HTML 또는 XML 마크업을 가져오거나 설정
*/
우선 <ul> 형태의 list라는 변수를 생성하여 itemList배열에 요소가 추가될 때마다 close 클래스에 <li> 형태의 요소와 x표를 생성하고, for문을 통해 배열에 들어오는 요소를 <ul>형태로 list 변수에 담았습니다.
그리고 innerHTML 이라는 element에 포함된 HTML 또는 XML 마크업을 가져오는 걸로 item__list 클래스에 list 변수를 담아주었습니다.
그리고 deletabuttons이란 변수를 생성하여 querySelctorAll로 클래스가 close인 모든 요소를 저장해두고, deletaButtons가 click 될 때마다 deleteItem이 실행되도록 해주었습니다.
function deleteItem() { // deleteItem() 함수 선언
let id = this.getAttribute("id"); // id 속성 부여 및 가져오기
itemList.splice(id, 1); // itemList에서 부여된 id부터 1까지 제거
showList(); // showList() 실행
}
/* Attribute = 속성
getAttribute = 속성을 가져오는, 접근하는 함수
splice = 배열에서 특정항목을 제거
*/
deleteItem 이라는 함수를 선언해주고, deleteItem 함수가 실행 될 때, 바로 id(인덱스) 속성을 부여 및 가져와서 splice를 이용하여 itemList 클래스에 인덱스(id)부터 1까지 제거 후, 다시 showList() 함수가 실행되도록 해주었습니다.
let checkList = document.querySelector('.item__list'); // item__list 클래스 불러오기
checkList.addEventListener('click', event => {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('checked');
} // click 시 checked가 존재한다면 제거, 존재하지 않다면 추가
});
우선 querySelector로 item__list 클래스를 불러오고, addEventListener를 통해 출력된 list의 element들을 클릭 시 체크가 되고, 체크가 되어있는 element를 다시 클릭시 체크가 지워지도록 구현하였습니다.
CSS
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
body {
background: linear-gradient(90deg, #02aab0, #00cdac);
font-family: 'Hi Melody', cursive;
margin-left: 0px;
margin-right: 0px;
}
#todolist {
text-align: center;
}
.main_title {
color: white;
margin: 30px;
}
.input__section form {
display: inline-flex;
align-items: center;
}
.item {
width: 300px;
height: 30px;
border-radius: 15px;
border: 1px solid #fbe7c6;
padding: 0 30px;
}
*:focus {
outline: none;
}
.input__button {
background-color: transparent;
font-size: 30px;
line-height: 60px;
margin-left: 10px;
color: white;
border: 0;
padding-top: 5px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 8px;
background: #eee;
font-size: 18px;
transition: 0.3s;
}
ul li:hover {
background: #ddd;
}
.close {
position: absolute;
right: 20px;
top: 0px;
align-items: center;
text-align: center;
margin: 8px 60px;
padding: 4px 10px;
border: none;
}
.close:hover {
background: linear-gradient(90deg, #02aab0, #00cdac);
border-radius: 100%;
color: white;
}
ul li.checked {
background: #ddd;
color: #272341;
text-decoration: line-through;
}
ul li.checked::before {
content: "";
position: absolute;
border-color: #272341;
border-style: solid;
border-width: 0 2px 2px 0;
top: 13px;
left: 90px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
janeljs님과 거의 비슷하게 꾸몄지만 약간의 저의 스타일을 더 넣어줬습니다. 베끼는 두 번째 프로젝트였는데 많은 것을 배우고 느낄 수 있는 유익한 시간이였습니다.
'Programming > Project' 카테고리의 다른 글
| 파이썬 tkiter로 간단한 GUI 계산기 만들기 (0) | 2022.03.09 |
|---|---|
| Todo list 프로젝트 만들기 #2 (0) | 2022.02.23 |
댓글