지난 작업을 통해 배경화면 기능까지 구현을 마무리했다. 물론 해결해야 하는 이슈들이 남아있지만, 차차 진행할 예정이다.
구현해야 할 기능은 위치 정보와 날씨 API를 활용하는 것이 남아있다. 이전에 코드 리팩토링을 진행하고 넘어가고자 한다.
프로젝트를 진행하기 이전 'vanilla js니까 html 코드는 건들지 말고, 모든 화면 구성 요소들까지 javascript 코드에서 만들어야지.' 라는 이상한 생각을 갖고 시작해서 현재 코드가 아래 그림과 같이 javascript 파일에 모든 요소가 있어 코드가 굉장히 지저분하다.
위 그림처럼 HTMLElement들까지 javascript 코드 내에서 구현하다 보니 이미 20 ~ 30줄 가량을 차지하고 시작하게 되고, 이는 코드의 가시성을 너무 많이 해쳐버렸다. 작성한 본인마저 기능 추가나 수정을 하려면 이 곳 저 곳 뒤져봐야 할 정도니 말이다.
날씨 API 작업 외에도 추가로 구현하고 싶은 기능들(추후 추가 예정)이 있기 때문에, 지금까지의 작업을 되짚으며 코드를 정리하는 시간을 갖으려고 한다.
1. Element를 HTML 코드에 옮기기
javascript 코드 개선을 위해 element 관련 코드를 html에 옮기기
* index.html : element 및 각각의 class name 지정
<!DOCTYPE html>
<head>
<title>Mutnemom</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class='clock-div fade-in'>
<h1 class='title'>Welcome! Please tell me who you are!</h1>
<h2 class='clock'></h2>
</div>
<div class='name-div'>
<form class='name-form'>
<input class='name-input' type='text' placeholder='What is your name?'>
</form>
</div>
<div class='todo-div'>
<form class='todo-form'>
<input class='todo-date' type="date">
<input class='todo-task' type="text" placeholder='Enter task'>
</form>
</div>
<div class='main-content'>
<div class='today'>
<h3>Today</h3>
<div class='today-todo-div'>
<ul class='today-todo-ul'></ul>
</div>
<div class='weather-div'>weather</div>
</div>
<div class='plan'>
<div class='upcoming-div'>
<h3>Upcoming</h3>
</div>
<div class='time-machine-div'>
<h3>Time machine</h3>
</div>
</div>
</div>
<script src='./scripts/index.js'></script>
<script src='./scripts/clock.js'></script>
<script src='./scripts/enter_name.js'></script>
<script src='./scripts/todo.js'></script>
</body>
- 이전에 구현하려고 하는 각 기능들을 담고 있을 div 태그만이 존재했던 html 코드를 위와 같이 수정하였다.
- `<div class='clock-div fade-in'>` : 시간 정보를 알려줄 요소가 포함될 부분이다.
- `<div class='name-div'>` : 사용자 이름을 입력할 요소가 포함될 부분이다. 이 부분은 사용자가 이름을 입력 시 사라지게 된다.
- `<div class='todo-div'>` : todo 입력할 요소가 포함될 부분이다. 사용자로부터 작업의 이름과 날짜를 입력받는다.
- 날짜를 입력받는 이유는 날짜를 통해 오늘 할 일과 미래의 할 일을 따로 정리하기 위해서이다.
- 기능 확장을 위해 우선 구현해두었다.
- `<div class='main-content'>` : 사용자가 등록한 todo 및 날씨를 확인할 요소가 포함될 부분이다. 사용자가 이름을 입력하기 전에는 보이지 않다가, 입력을 한 이후에 나타나게 된다.
- 내부에는 오늘 날씨와 오늘 할당된 todo를 확인할 수 있다.
- 미래에 예정된 todo와 완료된 todo를 확인할 수 있다.
2. 진행된 리팩토링 현황
- 하나씩 구현하며 블로그에 차근차근히 올릴 예정이었는데 작업을 진행하다보니 몰두해버려서 꽤나 많이 작업하게 되었다.
- 그렇게 작업된 현황은 아래와 같다.
- 이름을 입력하면 이름에 대해서 인사하는 것으로 수정되고, 이름 입력 창이 사라지며 todo를 입력할 수 있는 것이 나타난다. 이 때, 애니메이션 효과를 주어 보기 좋게 만들어보려고 하였다.
- todo부터 작업 내용을 블로그에 기록해보려고 한다.
앞으로 작업은
1. todo 코드 refactoring
2. 날짜와 비교하여 현재 todo(Today)와 앞으로의 todo(Upcoming)을 나누어 보여준다.
3. 완료된 todo를 Time machine 항목으로 보낸다.
4. 날씨 API를 적용한다.
이렇게 4가지가 되겠다.
'개발 > Front-end' 카테고리의 다른 글
| [Javascript] Momentum 만들기 - 리팩토링 todo 만들기 (0) | 2021.06.22 |
|---|---|
| [Javascript] Momentum 만들기 - todo list 구현 (0) | 2021.06.17 |
| [Javascript] Momentum 만들기 - 배경화면 완성 (0) | 2021.06.11 |
| [Javascript] Momentum 만들기 - 배경화면 기능 구현 (1) | 2021.06.03 |
| [Javascript] Momentum 만들기 - 현황 (0) | 2021.06.01 |
