노마드코더에서 강의하는 Momentum 클론 코딩 프로젝트는 4가지를 구현하는 것을 목표로 한다.
- 현재 시간을 보여줄 수 있는 clock.js
- 입력받은 이름에 인사말을 건네는 greetings.js
- todo 작성할 수 있는 todo.js
- 배경이미지를 랜덤으로 설정해주는 background.js
여기에 추가로 날씨 api를 받아서 현재 지역의 날씨를 표현하는 기능 또한 추가로 있다.
구현해야 하는 기능들에 대해서 현재까지 내가 구현된 기능들을 보면 아래 그림과 같다.
- 현재 시간을 사용자에게 표시해주는 clock.js
- 사용자에게 이름을 입력받아 인사를 건네주는 greetings.js
- todo를 작성할 수 있는 todo.js
이렇게 3가지의 코드가 기능상으로는 작성되어 있다.
하지만 그림에서 확인할 수 있듯이 현재 각 기능들의 위치만 css로 잡아두었을 뿐 그 어떠한 디자인도 들어가있지 않다.
이 코드를 좀 변태같이 작성한게 진짜 바닐라 자바스크립트로만 작성되어 있다. html 코드에 있는 것은 단순히 디자인을 위한 div 태그로만 구현되어 있다.
<!DOCTYPE html>
<head>
<title>Mutnemom</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="top-bezl"></div>
<!-- time -->
<div class="js-clock"></div>
<!-- Greetings -->
<div class="js-greetings"></div>
<div class="bottom-bezl">
<!-- Todo -->
<div class="js-todos"></div>
</div>
<script src="./scripts/clock.js"></script>
<script src="./scripts/greetings.js"></script>
<script src="./scripts/todo.js"></script>
</body>
각 div 태그를 컴포넌트라 생각하고 큰 틀의 컴포넌트만 작성하고 나머지는 모두 자바스크립트에서 필요한 요소들을 생성하고 동작하도록 코드를 작성하였다.
앞으로의 계획은 이러하다.
- 배경이미지를 선택해서 띄워주는 background.js와 날씨 api 기능의 구현을 완료한다.
- 작성한 각 요소를 css를 통해서 디자인을 입힌다.
- 전체적인 코드 리팩토링을 진행한다.
1번은 다른 코드와 마찬가지로 위치만 div 태그로 잡아두고 나머지는 모두 자바 스크립트로 작성해볼 생각이다. 1번까지 마쳐서 기본적으로 프론트 엔드에서 사용하기 위한 자바 스크립트의 문법들에 대해서 정리하려고 한다.
2번을 통해 css 또한 혼자서 활용해보고 싶다. 그 동안은 bootstrap을 사용하거나, 디자인을 아예 포기했었는데 이번 기회에 css도 제대로 한 번 활용해보고 싶다. flex 원툴은 이제 이 기회를 통해 벗어날 기회이다.
매일 하루를 마치는 의미로 자기 전에 조금씩 코딩을 해서 언제 완성을 하나 싶었는데, 이렇게 쭉 정리하고 나니 실제로 자바스크립트로 구현할 기능 자체는 얼마 남지 않을 것 같다. 정리를 하고 나니 피곤해하면서도 꾸준히 했구나 싶은 마음이 든다.
앞으로 하나씩 천천히 구현해서 완료해봐야겠다는 다짐을 다시금 하게 된다. 코드가 조금 정리가 되면 어떤 식으로 변태같이 작성했는지 공유할 수 있으면 좋겠다.
'개발 > Front-end' 카테고리의 다른 글
| [Javascript] Momentum 만들기 - todo list 구현 (0) | 2021.06.17 |
|---|---|
| [Javascript] Momentum 만들기 - 코드 리팩토링 (0) | 2021.06.14 |
| [Javascript] Momentum 만들기 - 배경화면 완성 (0) | 2021.06.11 |
| [Javascript] Momentum 만들기 - 배경화면 기능 구현 (1) | 2021.06.03 |
| [Javascript] Momentum 만들기 - 소개 (0) | 2021.06.01 |
