[ chrome momentum clone ]
chrome의 momentum이란 확장프로그램이 있다. 고것을 클로닝해보았다. 그러면서 자연스레 자바스크립트의 기본개념을 체화시켜볼까 한다.
1 시계 만들기...... (feat set interval)
우선 브라우저는 html을 인식한다. 고로 html에 momentum의 기본 뼈대를 만들었다. 로그인 창을 만들고 그 밑에 시계와 todo입력 창을 만들었다. 시계h2밑에 있는 h1은 예전에 연습하던 것의 흔적이다. 본격적인 클로닝을 하기 전에 자바스크립트 기초 개념 학습과 함께 addeventlistener preventdefault등을 연습했다. 자세한 내용은 따로 정리해놓을 생각이다. 일단 이 시계에 대해 이야기를 계속 해나가자면 todo밑엔 명언과 명언을 말한 사람을 랜덤으로 띄우게 했다. 그리고 이 모든 것들을 js파일로 만들고 html에 import했다.
clock.js가 시계를 다루는 js파일이다.
우선 html에서 시계가 들어갈 자리인 그래서 미리 만들어 둔 자리인 <h2 id=clock></h2>이 부분을 작업하기 위해 이 부분을 변수로 치환해준다.
const clock= document.queryselector(#clock)으로.....
그리고 무엇을 해야 할까?
시계라면 매 분 매초마다 숫자가 바뀌면서 그것이 화면상 브라우저상으로 나타나면 그게 시계다.... 브라우저상에 나타나게 하기 위해선 clock이라 치환한 html의 그 부분에 매 분 매 초마다 다르게 나타나는 숫자를 집어넣어주면 된다. 그건
clock.innertext로 할 수있다. 그럼.......
매 분 매초마다 다른 숫자가 계속 나오게 어떻게 한단 말이지?
그게 문제다.
set interval이란 것을 배웠다. set interval이란 정해준 시간마다 정해준 함수가 발생하도록 하는 것이다.
그럼 이렇게 해보면 된다. 1초마다 시 분 초를 알려주는 함수를 정해주면 된다.
그건 set interval(getclock,'1000')으로 해결했다. 근데 또 문제가 있다....
그 시 분 초를 알려주는 함수는 뭔데?
일단 set interval에 연동되는 함수인 getclock을 만들었다.
여기에 clock.innertext를 하고 여기에다가 그 시 분 초를 넣어주면 브라우저상엔 알아서 뜰거다.....
근데 그 시분초가 뭐냐고? 어떻게 구현하냐고?
자 자 일단 오늘을 정해줘야 한다. 오늘의 시간 오늘의 분 오늘의 초 이렇게.....
그 오늘을 javascript에서 new date();라고 하고 이걸 난 date로 치환해줘서 정해줬다.
이제 이 치환된 date의 시 분 초를 구하면 된다.
그건 new date의 date에 딸려있는 메소드들을 이용하면 된다. 이 date엔 상당히 많은 매소드들이 있고
그것들은 mdn에 date라고만 쳐도 쭈루룩 나온다.......
여기서 시 분 초는 get hours get minute get second으로 구해올 수 있다.
근디 같은 방식으로 년 월 요일도 사실 가져오는 것이 가능하다는 것은 안 비밀이다....
치환은 언제나 중요하다.. date.gethours뭐 이런 식으로 하면 여기다가 작업을 해야 하는데 자바스크립트에선
작업할 때 항상 이런것들을 나의 언어로 치환시키고 거기다가 작업한다...
clock도 그렇게 했지 않았는가?
그래서 각각 치환하였다. 그리고 그렇게 구해온 현재의 오늘의 시 분 초를 clock의 텍스트로
넣어주면 되는디 여기서 또 문제가
변수가 3개인데 이걸 어떻게 입력하지?
hours,minute,second 이렇게?
아님 hours+minute+second 이렇게?
+를 실제로 사용할 수도 있지만 내가 배우는 강좌에선 다른 방식을 추천했다.
바로 벡틱
`${}:${}:${}:`:
약간 난해해 보이지만 외워두면 쓸모많다고 이게 더 유용하다고 했다....
``에 $과{}을 달고 들어가고 각각의 ${}들을 :으로 연결시키고 마무리는 자바스크립트답게
세미콜론.....;
이렇게 하면 브라우저상에서 시계를 구현해낼 수 있다.
근데 시계를 보면 예를 들어 17시 8분이라 한다면
17:08:37
이렇게 된 시계를 보통 상상하지만
지금 이렇게만 해놓으면 브라우저 상에선
17:8:37
이렇게 뜬다...... 이럼 좀 그렇다.....
이 문제는 padstart로 해결이 가능하다.
이렇게 하려면 숫자가 무조건 두자리여야 한다는 설정을 해줘야 하고
padstart는 예를 들어 두자리인데 8이다. 그럼 앞에 0을 붙이거나 x를 붙이는 등의 노력으로
빈 자리를 채워서 두자리를 만드는 것을 가능하게 한다.
참고로 padend도 있다. 이건 끝에다가 채워주어서 두자리를 만들어내는 기술이다.
date.gethours를 하면 숫자가 적힌 string을 보내줄것이다. 그 string엔 padstart와 padend가
적용가능하고 date.gethors.padstart(2,"0")하면
두자리수 앞의 빈자리엔 0을 넣어줘 하는 것이다.
요렇게 하면 '
17:08:37이 된다.....
아직 내 작업물엔 거기까진 못 해놓았다.... ㅎㅎㅎㅎ
적용시켜놔야지....