🌿1. 수정 사항 - clock.js
이전 포스팅을 올렸던 날 밤, 감긴 눈 앞을 문득 스쳐가는 생각이 있었다.
아까 clock 코드... 좀 지저분하지 않았나?
그래서 우선은 메모 어플을 켜서 어떻게 바꾸면 좋을지 적어두고 잠을 청했다. 취미로 글을 쓰던 당시 순간순간 떠오르는 글감들을 놓치지 않기 위해 들인 습관이 빛을 발하는 순간이었다😏😏😏
🔥수정 전 코드
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}`; };
🔥수정 후 코드
function getToday() { const time = new Date(); const opt = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }; const day = Intl.DateTimeFormat('ko-KR', opt).format(time); today.innerText = `${day}`; };
getFullYear 등을 이용해서 가져왔다가 0부터 시작하는 월과 요일만 DateTimeFormat으로 변환했었는데, 그랬더니 option이 두 개나 필요했고 today.innerText 코드도 중구난방으로 지저분했었다.
그러다 DateTimeFormat 예문에 option을 한 번에 여러 개 넣었던 것이 생각나서 한 줄로 정리했더니 따란! 코드 길이도 줄어들고 조금 더 깔끔해졌다🌞
🌿2. index.html, style.css
<div id="quote">
<span></span>
<span></span>
</div>clock에 이어 랜덤으로 제공되는 명언 및 인용구를 표현하기 위해 quote라는 id를 가진 div 안에 span을 두 개 생성했다.
첫 번째 span에는 명언이, 두 번째 span에는 명언을 남긴 이를 넣을 예정!
body {
font-family: 'Noto Sans KR', sans-serif;
}
span {
display: block;
}CSS는 JS를 마무리 지은 다음에 꾸며줄 생각이었으나, 기본 폰트가 너무 안 예뻐서 먼저 바꿔 주었다. font-family만 넣지 말고 HTML 파일에 link도 잊지 말고 넣어 주기🔥🔥🔥
그리고 아무런 설정을 안 해놓았더니 시간과 날짜, 명언과 사람 이름이 각각 한 줄로 나와서 보기 편하게 inline에서 block으로 바꾸어 주었다.
각자 다른 div 안에 있어도 같은 span이기 때문에 태그 단위로 적용하니 한 줄짜리 코드로 충분~!
🌿3. quotes.js
const quotes = [];
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");
const randomNum = Math.floor(Math.random() * quotes.length);
quote.innerText = quotes[randomNum].quote;
author.innerText = quotes[randomNum].author;quotes은 원래 10개의 명언과 사람 이름으로 구성된 array인데 그대로 가져오자니 코드가 너무 길어져서 생략했다. const quotes = [ quote: value, author: value ];의 구조를 가지고 있다.
영어로 된 명언 중에 인상 깊은 게 그다지 없어서 10개만 넣어두었지만 나중에 영화 명대사 같은 걸 조금 더 추가해 볼 생각이다. Do or do not. There is no try 같은 거?
앞서 언급했던 quote div 안의 span 두 개를 각각 불러오고, innerText를 삽입해주었다. 둘 다 quotes 배열에서 같은 순서에 저장된 객체를 가져오므로 index에 해당하는 변수도 설정했다.
페이지를 리프레시할 때마다 랜덤으로 띄워주어야 하기 때문에 Math 함수를 이용했다.
Math.random()은 0부터 1 사이에 있는 수를 무작위로 생성한다. array의 index는 정수(Integer)이기 때문에 Math.random으로 받아온 수를 정수로 변환해주어야 하는데, 내가 원하는 수의 범위는 array의 객체 수만큼이므로 Math.random 수에 객체 개수(N)를 곱한 뒤(그러면 0×N < Math.random×N < 1×N 이므로 0부터 객체 개수 사이의 범위를 갖게 됨) Math.floor()로 소수점 아래 자리에서 내림 처리하면 된다.
array의 index는 0부터 시작하기 때문에 객체를 10개 가지면 index의 범위는 0에서 시작해서 9로 끝난다. 이때 올림 처리를 하게 되면 1~10의 범위를 갖게 되고, 반올림 역시 10이 나올 수 있기 때문에 index의 범위를 충족하지 못하므로 내림을 사용!
여담이지만, 맨 처음 작성했던 코드는 위에 적은 코드와 달랐다. clock.js의 코드를 수정하고 난 다음이라 그랬는지 function을 써서 작성했고, 마지막 줄에 함수 실행 코드를 적은 후에야 엥 왜 함수를 썼지? 하면서 수정했다🙂🙃🙂🙃
function todayQuote() {
const randomNum = Math.floor(Math.random() * quotes.length);
quote.innerText = quotes[randomNum].quote;
author.innerText = quotes[randomNum].author;
}
todayQuote();함수야, 안녕...?
🌿4. 결과물 같지 않은 결과물
실시간으로 업데이트 되는 24시간 기준 시계와
오늘 날짜,
명언과
명언을 남긴 사람의 이름
지금은 평범하기 짝이 없는 이녀석을 나중에 꾸며줄 생각을 하니 설렌다 후후...
🌿5. 가벼운 회고
오늘은 먼젓번보다 코드 짜기가 훨씬 편하고 쉬웠다.
크게 어려운 기능 없이 clock.js의 연장선 느낌이었달까.
Math 함수도 한 번 이해하면 응용하는 건 매우 쉽고, array도 key:value의 집합이라는 것만 알면 어려울 게 없는 개념이다 보니 별다른 오류 없이 호로록 짤 수 있었다.
사실 강의를 들을 때는 왜 저기에 array.length를 곱하지? 했었는데 블로그에 포스팅하면서 아...! 하고 깨달았다 ㅋㅋㅋㅋㅋㅋ 이것이 바로 포스팅의 순기능?
그리고 이제 겨우 두 가지 기능을 구현했을 뿐이지만, 확실히 만들면서 배우는 게 효율도 좋고 이해도 잘 되고 재미도 있는 듯하다.
예제가 잘 준비되어 있더라도 강의만 듣는 건 중간에 질리기도 하고 나 스스로 생각하는 시간이 부족하니까.
그래서 사실 Udemy에서 60시간 짜리 부트캠프 강의를 듣다 잠시 멈춘 상태다. HTML과 CSS까지 듣고 JS를 할 즈음 되니 아무리 중간중간 퀴즈도 많고 예제도 많은 강의라고는 해도 하루에 몇 개 이상 듣는 게 힘들었다. 그때는 단순히 JS가 어려워서 그런 거라고 생각했었는데, 지금 보니 그냥 빨리 무언가를 만들어 보고 싶어서 그랬던 것 같다.
하나를 배우면 처음으로 돌아가서 나 혼자 다시 만들어 보고, 그 과정에서 어려운 게 생기면 배우고, 다시금 만들어 보는 루트를 앞으로도 꾸준히 이어나가야겠다. 조급해 하지 말고 천천히, 포기하지 말자🔥🔥🔥
