Javascript_30_02

Derek·2020년 12월 14일

javascript_30

목록 보기

3/31

안녕하세요!

Derek 입니다! 😀

오늘은 두 번째 미니 플젝 게시물을 업로드 하려고 해요!

이전 게시물을 못본 분들을 위해.. 다시 한번 만 설명드릴게요!
Javascript 30 은 하루에 1개씩, 미니 프로젝트를 30일동안 30개를 만드는 challenge입니다. 🎈

https://javascript30.com/ <-- 여기 접속하시면 확인 하실 수 있어요.

30개의 프로젝트를 순수 JS, 즉 Vanilla Javascript로만 구현하는 챌린지입니다.

그럼 오늘 2번째 Day02 project를 설명드릴게요!

02. JS and CSS clock

목표

실제 시간을 나타내는 원형 시계를 구현한다.

간단합니다! 웹사이트에서 주는 HTML, CSS 파일을 기반으로 실제 시간을 나타내도록 구현해주는 비교적 난도가 낮은 프로젝트였어요. ⏲

Javascript 30 에 대해서 아시는 분들은 아시듯, HTML, CSS 파일은 모두 제공을 받아서 구현하는 것이라 조금은 쉬운 느낌이 있더라구요!

이번 Day02 project는 제 코드와 wes Bos 의 코드가 굉장히 흡사해서 제 코드만 리뷰하도록 하겠습니다!

Derek 구현 코드

function setSecond(){
    const date = new Date();
    const seconds = date.getSeconds();
    const secondsDegree = (seconds / 60) * 360 + 90;
    const secondHand = document.querySelector(".second-hand").style;
    secondHand.transform = `rotate(${secondsDegree}deg)`;
}

function setMinute(){
    const date = new Date();
    const minutes = date.getMinutes();
    const miuntesDegree = (minutes / 60) * 360 + 90;
    const minHand = document.querySelector(".min-hand").style;
    minHand.transform = `rotate(${miuntesDegree}deg)`;
}

function setHours(){
    const date = new Date();
    const hours = date.getHours();
    const hoursDegree = (hours / 12) * 360 + 90;
    const hourHand = document.querySelector(".hour-hand").style;
    hourHand.transform = `rotate(${hoursDegree}deg)`;
}

setInterval(setSecond, 1000);
setInterval(setMinute, 1000);
setInterval(setHours, 1000);

총 3개의 함수를 만들었고, 각각을 setInterval 에 등록시켜 1초마다 실행되도록 설정했어요.

3개중 setSecond() 함수를 대표로 설명드리면서, 새롭게 알게 된 사실 정리해볼게요.

1. Date 생성자

먼저 Date 생성자에 대한 정의를 살펴볼까요?

Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용합니다.

음.. 이렇게 딱딱하게 하는 것 보다 예를 들어볼게요! 😗

let now = new Date();

이렇게 아무런 인자 없이 Date 생성자 를 호출하면, 현지 시간으로 생성 순간의 날짜와 시간을 나타내는 Date 객체를 생성합니다.

그렇게 생성된 now 객체에 getHours, getMinutes, getSeconds 함수를 부르게 되면 현재 시간을 기반으로 시간, 분, 초 값을 부를 수 있습니다.

const secondsDegree = (seconds / 60) * 360 + 90;

이런식으로 60 으로 나누어서 360 을 곱하는 것은 원형 시계이므로 각도로 치환하기 위해서 입니다.
또한, 90 을 더하는 것도 CSS 에서 확인 가능하듯이 원래 시침, 분침, 초침의 모양은 기다란 가로모양의 직사각형인데, 이를 90도 돌려서 시작하기 떄문에 더한 것입니다!

2. setInterval 함수

다음은 일정시간마다 실행시켜주는 setInterval 함수입니다. 정의를 살펴볼까요?!

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

최애 사이트인 MDN 사이트에는 setInterval 함수의 정의가 있지가 않네요.. 어쩔 수 없이 w3에서 가져왔습니다. 😑

위에 적혀있듯이! 일정 시간마다 특정 함수를 실행 시켜주는 함수에요!

간단한 예를 들어볼게요.

// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);

위 예제는 2초마다 "째각" 이라고 alert 창이 뜨게 될거에요! 두 번째 인자인 2000은 단위가 millisecond 라 2 가 아닌 2000 로 쓴 점 유의해주시구요.

이렇게 2가지로 정리해봤는데요, 사실 코드를 더 수정하고 싶으면 더 할 수 있을 것 같아요.🤔
가령, seconds, minutes, hours 를 따로따로 하지말고 한 꺼번에 하나의 함수로 통합하면 더 간결하고 가독성이 좋지 않을까, 생각이 들었습니다.

지금 하면 되는데.. 블로그 포스팅이 벌써부터 밀려서.. 쉽지않네요 😥