🌿0. 들어가기 전에
노마드코더 바닐라JS로 크롬 앱 만들기를 완강했다👏👏👏
수업을 듣고 따라한 것뿐이기 때문에 배운 내용을 내 것으로 만드려면 니꼬쌤의 도움 없이 처음부터 끝까지 직접 만드는 과정이 필요하겠지...!
최대한 수업 때 만든 코드를 참조하지 않고 그간 정리한 내용이나 구글링을 토대로 만들어 보려고 한다!
그리고 그 과정에서 추가하고 싶은 기능이 생기면 살을 붙여 볼 생각🔥🔥🔥
🌿1. 목표
지금은 개발 공부하느라 크롬을 주로 사용하지만, 나는 원래 네이버 파(?)였다. 포털 사이트 기능뿐만 아니라 네이버 메모 기능을 아주 유용하게 쓰고 있어서 기본 브라우저도 웨일이었다.
모멘텀을 크롬에 추가하고 나서 느낀 건데 웨일 홈이랑 모멘텀이 되게 비슷하게 생겼더라. 익숙해서 그런 건지는 모르겠지만 웨일의 디자인이 내 취향에 더 가까워서 둘 다 참고해서 만들어 볼 생각이다💪💪💪
- 로그인(사용자 이름 기억하기)
- 사용자 위치 기반 현재 시간
- 사용자 위치 기반 날씨
- 랜덤으로 제공되는 배경사진
- 랜덤으로 제공되는 명언 및 인용구
- 투두리스트
여기까지는 강의를 들으면서 어설프게나마 만들어 본 적 있는 기능들이고, 이와 더불어서 모멘텀처럼 배경화면이 찍힌 장소도 띄워보고 싶다! 단순히 모멘텀에서 이미 제공하고 있는 기능이라 따라하고 싶다기보다는 이와 같은 기능을 윈도우 로그인 화면에서 유용하게 쓰고 있기 때문에 구현해 보고 싶다. 내 취향의 풍경 사진을 보여줄 때마다 여긴 어디지?! 하면서 좋아요를 표시하는 나란 사람...
강의에서 다루지 않은 부분을 따로 공부하면서 이런저런 기능에 대해 공부하다 보면 추가하고 싶은 기능이 생기지 않을까? 이러다 최종적으로 어떤 페이지가 될지 나도 궁금하군😌
🌿2. 폴더 구조
CSS, JavaScript, image 폴더를 만들어 주었다.
JS는 구현하고자 하는 기능에 따라 각자 파일을 분리하는 방식이 페이지에
①어떤 기능이 들어있는지 한 눈에 알기가 쉽고 ②향후 유지보수도 쉬울 것 같아서 계속 파일을 추가할 예정🌞
image 폴더에는 배경으로 쓰일 사진이 들어갈 예정이다. Unsplash나 Pixabay처럼 저작권 프리 사이트에 고퀄리티 사진들이 너무 많다!
앞으로 계속 보완하고 코드 수정하고 살 붙이고 할 것 같아서 만들어 놓은 폴더 그대로 깃허브에도 클론했다.
git은 아직 commit, push, merge 정도밖에 몰라서 공부할 겸 프로젝트(라고 할 수 있나 싶지만) 관리도 할 겸💃💃💃
🌿3. index.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>Oneill's Momentum</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="clock">
<span></span>
<span></span>
</div>
<div id="login"></div>
<div id="quote"></div>
<div id="weather"></div>
<div id="location"></div>
<div id="todo"></div>
<script src="js/clock.js"></script>
</body>
</html>HTML5 기본 구조를 이용했다. title은 우선 Oneill's Momentum으로 해두었는데 아마 조만간 바꿀 듯!
목표 중에서도 강의를 들으면서 한 번 구현한 적 있는 기능부터 div를 만들어 두었다. 다 JS로 작업할 거기 때문에 id도 붙여 두었다. class를 사용할 수도 있지만 각자 고유의 기능을 하는 만큼 한 페이지 내에서 중복이 불가한 id를 주는 것이 더 적절한 듯 보인다.
오늘 구현한 clock은 시간과 오늘 날짜 두 부분으로 이루어지기 때문에 span을 두 개 만들어 두었다. 예쁘게 꾸미는 건 나중에 CSS로 다룰 예정!
HTML에 JS를 import할 때는 <script>를 사용한다는 점! CSS가 <link>를 사용해서 순간 헷갈렸는데, 잊지 말고 body 하단에 넣어야겠다.
🌿4. clock.js
const today = document.querySelector("#clock span:last-child");
function getToday() {
const time = new Date();
const monthOpt = { month: 'long' };
const dayOpt = { weekday: 'long' };
const month = Intl.DateTimeFormat('ko-KR', monthOpt).format(time);
const day = Intl.DateTimeFormat('ko-KR', dayOpt).format(time);
today.innerText = `${time.getFullYear()}년 ${month} ${time.getDate()}일 ${day}`;
};자바스크립트 코드를 첨부하려면 처음 백틱 3개 뒤에 javascript를 붙이면 된다!
시계 코드는 강의에서 배운 것과 크게 다르지 않아서 새로 추가한 날짜 코드만 가져왔다.
getElementId 대신 querySelector를 쓴 이유는 요소 별로 다른 코드를 사용하는 것보다 하나로 통일하는 게 편하기도 하고 평소 통일성에 강박이 있는 내 심신의 안정에도 도움이 되서...🌞 그리고 querySelector 쪽이 오타가 덜 난다
HTML의 clock div에 있는 두 번째 span을 JS로 불러와서 today라는 이름을 붙였다. 그리고 이를 이용해서 사용자의 위치를 기반으로 연도, 월, 일, 요일을 반환하는 함수를 만들었다.
Date 객체에서 Date()와 new Date()의 차이점이 궁금해서 찾아봤는데, new Date()는 현재 날짜와 시간을 나타내는 Date 객체를 반환하고, Date()는 이를 문자열로 반환한다고 한다. 굳이 문자열로 불러올 필요는 없어서 new Date()를 적용했다.
아직 초심자이기 때문에 코드 한 줄 적고 console에 찍어 보고 다음 줄 적고 console에 찍어보기를 반복했다. 여러 줄 적은 다음에 찍어 봐도 어디서 오류가 났는지 console창이 친절하게 알려주기는 하지만 바로바로 확인하는 편이 훨씬 좋으니까!
일정 시간이 지난 후(setTimeout) 혹은 일정 간격을 두고(setInterval) 원하는 함수를 호출하는 것을 호출 스케일링이라고 하는데, 웹 페이지에 머무는 동안 초 단위로 시간이 갱신되게 만들고 싶을 때는 setInterval이 적절하다! 여기에 없는 clock 함수를 구현한 뒤 setInterval을 이용해서 1초마다 갱신되게 만들었다.
시간과 달리 날짜는 페이지 로딩하고 따로 갱신해 줄 필요가 없기 때문에 따로 적용해 주지 않았다.
여기서 주의할 점은 setInterval의 두 번째 인수가 딜레이 시간이기 때문에 setInterval만 단독으로 사용하면 페이지 새로고침 시 해당 시간만큼 딜레이된 다음에 함수가 적용된다! 딜레이 없이 바로 함수를 적용하기 위해서는 setInterval 앞에 함수를 미리 불러오면 된다.
오늘의 하이라이트이자 새로 배운 내용으로는 DateTimeFormat() 생성자가 있다. 어떤 원리인지는 모르겠지만, Date 메서드로 불러온 연도와 일자는 1부터 시작하는 반면 월과 요일은 0부터 시작한다. 그렇기 때문에 이를 변환하는 과정이 필요했다.
MDN 홈페이지의 DateTimeFormat() 생성자 부분에 이런 경우에 적용할 수 있는 옵션들이 나와 있다. 어떠한 원리인지는 모르고 필요한 부분만 가져다 썼기 때문에 향후 보충 공부가 필요할 듯하다.
이때문에 연도와 일자, 월과 요일의 코드가 본의 아니게 일관성을 가지지 못하게 되었는데 이것 역시 향후 수정이 불가피할 듯. 그래도 오늘은 원하는 기능을 구현한 것만으로 만족만족🤸♀️🤸♀️🤸♀️
잘 하다가 어느 순간 갑자기 시간이 실시간 업데이트가 안 돼서 몇 분 헤맸다🤦♀️많은 걸 새로 추가한 것도 아니라 잠시 멘붕이 왔었는데 얼마 안 가서 해결!
- 함수 getClock이랑 getToday가 time 변수를 공통으로 사용해서 중복을 줄이려고 함수 바깥에서 딱 한 번만 선언한 것이 문제였다. setInterval된 함수 자체만 계속해서 실행되지 함수 바깥에 있는 변수까지 매번 참조하는 것이 아니라서 업데이트가 되지 않았다. 잠시 멈춰 있던 시계는 함수마다 time 변수를 할당하면서 해결!
🌿5. 가벼운 회고
완강한 지 얼마 안 되어서 그런지 코드가 드문드문 기억났지만, 최대한 구현하려는 기능에만 집중하고 그에 필요한 요소만 떠올리려고 노력했다.
여태 공부한 내용과 이런저런 유용한 팁을 노션에 따로 정리해 두었는데, 그것을 참고하니 그리 오랜 시간이 걸리지는 않았다.
끝까지 만들고 다시 또 처음부터 새로 만들어 볼 때는 노션도 되도록이면 참고하지 않고 만들어 봐야겠다는 생각이 들었다.
모든 내용을 암기할 생각은 절대 아니고, 자바스크립트 문법에 익숙해져서 코딩 속도를 늘리고자 하는 목적이다.
시작이 좋아서 다행인 하루다. 정말 간단하고 쉬운 기능이지만 강의에서 배우지 않은 내용을 추가하고 또 성공했으니 다음 단계를 밟을 내일이 기대된다🔥🔥🔥
