오늘은 자바스크립트 배웠던 거 까먹기 전에 리마인드 하기 위해 아침에 글을 쓴다.
이전에 했던것에 이어서 오늘은 시간 구현 기능을 어떻게 구현했는가에 대해서 시작을 할 건데 몇 시인지 알기 위해선 현재 내 위치에서의 몇 시인지에 관한 데이터를 받아올 필요가 있는데 그것은 아주 간단하게
위와 같이 선언하면 현재 시간을 알 수 있다. console.log(date)를 해보면 현재 시간이 나온다
여기서 내 개발자 툴을 자세히보면 1초마다 시간이 업데이트되는 것을 볼 수 있는데 이는 setInterval이라는 함수를 사용하면 알 수 있다.
setInterval(a, b)이란 a라는 함수를 실행하고 b(ms)마다 그것을 업데이트하는 것인데 보통 시간은 1초마다 리셋시켜야 되기 때문에 b함수에는 1000의 값을 줬다.
여기서 실제 값을 콘솔이 아닌 화면 값에 출력하기위해 h2라는 자리를 배정해줬고 그 안의 innertext값만 배정하여 setInterval에서 설정한 시간마다 리셋이 되게 하는 아주 간단한 과정이 남아있었는데 여기서 시, 분, 초를 각각 빼서 쓸 수 있는 getHours, getMinutes, getSeconds를 사용했고
한자리 숫자일떄 앞에 0을 붙이면 좀 더 유연하게 시간을 보여줄 것 같아 강의에서 나온 padStart를 사용했다.
string.padStart(a, b)란 이 padStart앞에 붙인 string의 개수가 a를 충족하지 못할 시 b라는 글자를 붙여주는 기능이고 나는 숫자 앞에 0을 붙이면 좋겠다고 생각하여 위처럼 코딩을 했다.
이렇게 비교적 간단하게 시간을 구현하였고 다음엔 배경화면과 명언을 배치하는것인데 그냥 하면 재미없으니 매번 앱을 켤 때마다 다른 화면, 명언이 나오도록 설정하는 기능을 넣어줬다.
우선 명언들은 내 친구들에게 하나씩 받고 , 모자란것은 내가 채워 넣었고 배열 안에 넣었다.
이와 같이 설정하고 내가 html에 미리 설정해놓은 2개의 span에 각각 배치해주고 랜덤으로 화면에 바뀌게 하는 기능을 구현하는데 여기서는 math함수를 썼다.
math에는 다양한 요소가 있는데 그중에서 math.random을 통해서 0과1사이에 ms단위로 랜덤으로 배정한 다음 그 값을 인용구 배열의 lenghth만큼 곱해준 후 math.floor로 값을 내림하여 소수점을 버리고 그 값에 해당하는 배열이 화면에 나오도록 설정을 해줬다.
배경화면도 위의 math함수를 통해 배정해주고 html의 body를 불러와서 body의 백그라운드 url을 랜덤함수를 통해 나온 결과를 배치함으로써 구현하였다.
마지막으로 현재 날씨, 온도, 위치를 알 수 있게 해주는 기능을 구현하는것을 끝으로 강의가 끝났는데 여기서 openweathermap에서 제공하는 api를 통해 값을 받아왔고 geolocation.getCurrentPosition이라는 함수는 성공했을 때와 실패했을 때 각각을 구현해야 했고 실패했을 때는 알람을 띄우게 코딩했고 성공했을 시 값을 받아와서 span.innertext안에 값을 넣음으로써 구현했다.
그 뒤에는 즐겨찾기 사이트나 작성자의 sns를 넣는 간단한것을 구현했고 이는 자바를 배우기전엔 어려웠지만 노마드 코더강의를 통해 너무 수월하게 마무리 지었다.
그뒤에 css부분은 그동안 클론 코딩했던 사이트들에 비하면 너무나 쉬운 배치였기 때문에 1시간 내에 끝났던 것 같다.
끝으로 노매드 코더 유튜브 강의에 대한 간 단평이 있는데 요약하자면 정말 유용했던 것 같다!
수업을 들어보면 알겠지만 (광고 아님) 정말 초심자를 위해 한번, 두 번 반복해서 말하고 끝에는 recap 하는 시간도 있어서 나 같은 초심자를 위한 강의가 아닌가 싶다.
니꼬쌤 사랑해요❤.