자바스크립트로 ToDoList를 만들어보자 - main 로직 구현

 

 안녕하세요. 진득 코딩입니다.

 

 프로그래밍을 좀 배웠다 하시는 분들이 시도하기에 접근성이 좋은 프로젝트 중 하나는 바로 To-Do-List 만들기입니다.

 

 이번 시간에는 서브 프로젝트로 To-Do-List를 만드는 과정 중 메인 로직을 구현하는 과정을 살펴보도록 하겠습니다.

 

프로젝트 구조

 

 

 우선 프로젝트 구조부터 살펴보도록 하겠습니다.

 

 assets에는 리소스 파일들을 모아두는 폴더로 일단 favicon과 image 폴더로 구분해 두었습니다.

 

 image 폴더에는 배경사진을 넣어둔 상태입니다.

 

 웹 정적 리소스로는 html, css, js 파일을 넣어두었습니다.

 

html

 

 

 우선 html head 부분을 살펴보도록 하겠습니다.

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">는 강제로 IE 최신 랜더링 엔진을 사용하도록 설정하기 위해 넣었습니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">는 반응형 웹 디자인을 위해 모바일 화면에서 올바르게 표시되도록 설정하기 위해 사용하였습니다.

 

 그 밑으로는 bootstrap css와 연결하는 <link> 태그와 css파일과 연결하는 <link> 태그를 사용하였습니다.

 

 두 <link>태그 사이에는 favicon을 설정하는 <link> 태그를 사용하였는데 아직 favicon 이미지를 넣지 않아서 작동하지는 않습니다.

 

 

 다음으로 body 부분을 살펴보도록 하겠습니다.

 

 body에서 구역을 <section> 태그로 나눠주었습니다.

 

 id가 under-line인 <div> 태그는 아직 작동은 하지 않지만 메뉴의 under-line을 줄 때 사용하기 위해 위치만 할당한 상태입니다.

 

 구역은 크게 input-area와 task-area로 나누어 놓았고 input-area는 유저가 할 일을 입력하는 구역이고, task-area는 아이템들이 위치하는 구역입니다.

 

 tab은 크게 모두 볼 수 있는 탭, 진행 중인 일을 볼 수 있는 탭, 완료한 일을 볼 수 있는 탭으로 나누어 놓았습니다.

 

 task-area 아래에 보이는 task-board에는 유저가 추가한 할 일 목록들이 출력되는 부분입니다.

 

 <script> 태그로 각각 bootstrap과 main.js를 연결해 두었습니다.

 

 이때 본인의 js 파일이 bootstrap 파일보다 아래에 위치하도록 하는 것이 중요합니다.

 

css

 

 

 다음은 css를 살펴보도록 하겠습니다.

 

 우선 body에는 기본적으로 margin이 8px이 설정되어 있기 때문에 이 margin 값을 없애기 위해 margin을 0px로 지정해 주었습니다.

 

 background-image를 불러오는 코드도 css 파일에서 불러와 배경화면을 설정해 주었습니다.

 

 size를 cover로 하여 해당 배경사진이 배경화면에 꽉 차도록 하였고 반복되는 사진이 아닌 하나의 사진을 사용하기 위해 no-repeat로 설정해 주었습니다.

 

 해당 body가 위아래로 100% 꽉 차게 하기 위해 height를 100%로 설정해 주었습니다.

 

 container은 흰색으로 설정해 주고 min-height를 100vh로 설정하여 반응형 웹 사이트에 맞게 꽉 차도록 설정해 주었습니다.

 

 해당 container에 그림자 효과를 주었는데 해당 효과는 직접 설정한 것이 아닌 구글링으로 만들어져 있는 코드를 사용하였습니다.

 

 

 다음으로는 task 설정 부분을 살펴보도록 하겠습니다.

 

 task-area와 task-tabs에 border을 설정해 준 이유는 단순히 개발할 때 구역을 눈으로 확인하기 위한 설정이고 개발이 완료되면 없앨 수도 있습니다.

 

 display를 flex로 설정하여 요소들이 가로로 배치될 수 있도록 하였습니다.

 

 #under-line은 javaScript가 들어갈 부분이기 때문에 id로 설정하여 스타일을 주었습니다.

 

 해당 설정들은 일단 비슷하게 설정한 후에 화면에 출력되는 underline의 크기를 보면서 조절해 주었습니다.

 

 task에 있는 요소들도 가로로 배치하기 위해 display를 flex로 설정해 주었고 space-between을 이용해서 check 버튼과 delete 버튼을 오른쪽 끝으로 보내주었습니다.

 

js

 

 

 드디어 대망의 js 파일을 살펴보도록 하겠습니다.

 

 js 파일을 작성하기에 앞서 어떤 기능을 구현할지 먼저 기획을 한 후에 코드를 치기 시작하였습니다.

 

 이번 포스팅에서 구현한 내용은 두 번째 줄까지입니다.

 

 유저가 값을 입력하고 + 버튼을 클릭하면 할 일이 추가되는 기능을 구현하였습니다.

 

 우선 할 일을 적는 input 박스, task를 추가하는 +버튼, 유저가 입력한 할 일을 담는 array를 선언해 주었습니다.

 

 또한 +버튼을 눌렀을 때의 event도 적어 어떤 함수가 실행되는지 listener를 적어주었습니다.

 

 

 그렇다면 구현한 기능을 살펴보도록 하겠습니다.

 

 우선 유저가 input 박스에 할 일을 적고 +버튼을 누르게 되면 해당 할 일을 일단 array에 넣어 저장해줘야 합니다.

 

 위와 같이 console로 제대로 출력이 되고 있는지 확인하면서 진행하시는 것이 좋습니다.

 

 

 addTast() 함수에서 호출하는 render 함수를 살펴보도록 하겠습니다.

 

 render() 함수는 task를 화면에 출력해 주는 함수입니다.

 

 우선 resultHTML이라는 변수를 초기화해 준 뒤 for문을 돌려줍니다.

 

 각각의 for문에서 resultHTML에 할 일 아이템을 나타내는 HTML 코드 자체를 넣어줍니다.

 

 그 이후 innerHTML을 이용하여 task-board 안에 넣어줍니다.

 

 ** innerHTML vs textContent

 - innerHTML : Element의 HTML, XML을 읽어오거나 설정할 수 있습니다. 태그 안에 있는 HTML 전체 내용을 들고 옵니다.

 - textContent : 해당 노드가 가지고 있는 텍스트 값을 그대로 가져옵니다.

 

 

 

 위와 같이 코드를 작성하고 실행한 모습을 영상으로 담아봤습니다.

 

 현재 상태에서는 로직이 단순하고 웹페이지를 꾸미지도 않아서 조잡하지만 일단 main 기능이 되는 것에 대해 집중하면 의도한 로직은 잘 작동되는 것을 확인할 수 있습니다.

 

---

 

 이번 시간에는 프로그래머가 되기 위한 서브 프로젝트인 to-do-list 프로젝트의 메인 로직만 구현하는 과정에 대해 살펴보았습니다.

 

 일단은 해당 프로젝트의 기능을 다 구현한 후에 홈페이지를 꾸미는 것이 좋기 때문에 로직에 집중해서 오류 없는 홈페이지로 만들기 위해 힘써야 한다고 생각합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하고 싶으신 사항이 있다면 댓글을 남겨주세요.

 

 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊