[HoC] 여섯 번째 워크샵 - HTML & CSS & JavaScript를 활용한 Momentum 만들기

Hacker on Campus

• 일시: 6주차 [2019.11.26.화]
• 장소: 성신여대
• 인원: 4명

0. Momentum을 시작하기 전에

4주차와 5주차에 걸쳐 html, css, JavaScript를 활용해 네이버 댓글 창을 만들고 댓글 창에 입력한 댓글을 출력하는 것까지 진행해보았다.
여섯 번째 워크샵에서는 노마드 코더의 Momentum을 만들어 보았다.

1. Momentum - clock

Momentum은 유튜브에 올라와 있는 노마드 코더의 영상을 보며 각자 클론코딩하는 식으로 진행하였다.
첫번째로 구현한 기능은 바로 시계이다.
클론코딩을 통해 익힌 시계 구현 방법을 순서대로 적어보겠다.
1. getTime 함수를 만들고 그 안에 date.getHours(), date.getMinutes(), date.getSeconds()를 통해 현재 시간을 가져온다.

function getTime() {
	const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
}

2. setInterval(getTime, 1000)을 통해 현재 시간을 가져오는 getTime 함수가 1초마다 반복 실행될 수 있도록 한다.

function init() {
    getTime();
    setInterval(getTime, 1000);
}
init();

3. 조건부 삼항 연산자를 통해 시, 분, 초가 10보다 작으면 앞에 0을 붙여 01, 02, 03...09와 같이 나타낼 수 있도록 한다.

function getTime() {
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:
    ${minutes < 10 ? `0${minutes}` : minutes}:
    ${seconds < 10 ? `0${seconds}` : seconds}`;
}

2. Momentum - Background Image

두 번째로 구현한 기능은 배경 이미지를 넣는 것이다.
1. 배경 이미지로 넣을 사진을 다운 받는다.

2. 배경 이미지가 랜덤으로 나오게 할 것이므로 Math.floor(Math.random()) 함수를 이용해 배경 이미지의 개수만큼 random number를 생성해준다.

const IMG_NUMBER = 5;
function getRandom() {
	const number = Math.floor(Math.random() * IMG_NUMBER);
	return number;
function init() {
	const randomNumber = genRandom(); 
}

3. new Image()를 이용해 이미지를 로딩하고 출력한다.
   태그를 사용하지 않고 자바스크립트 코드로 image 객체를 생성하여 이미지를 로딩할 수 있다.

function paintImage(imgNumber) {
	const image = new Image();
  	img.src = `images/${imgNumber + 1}.jpg`;
  	body.prependChild(image);
}

function init()에 코드를 추가해준다.

function init() {
	const randomNumber = genRandom();
  	paintImage(randomNumber);
}
init();

자바스크립트 코드를 완성한 후, css를 이용해 배경 이미지의 사이즈를 조정해주면 된다.

3. 마무리

드디어 html, css, JavaScript를 마무리하는 6주차가 끝이 났다.
이번 주차에는 노마드 코더의 Momentum을 만들어보았다. 제한된 시간 때문에 Momentum의 기능 중에서 clock과 배경 이미지만 우선적으로 구현하긴 했지만, 그래도 모든 팀원들이 각자 모멘텀을 만들며 즐거워하는 모습을 보니까 스터디장으로서 매우 뿌듯했다. 7주차와 8주차에는 그동안 배웠던 내용을 적용해 팀별로 원하는 기능을 만들어보는 해커톤을 진행할 것이다. 팀원들 모두에게 유익하고 재미있는 시간이 되었으면 좋겠다!