블록체인 TIL-2Week-13Day주말(토요일)

2023.03.25(토요일)

오늘도 오전부터 바쁜하루를 보냈다. 아침에 일어나 수영을 갔다와서 고장났던 청소기를 고치기 위해 서비스센터를 방문했다. 이후 집으로 돌아와서 점심을 먹고, 오랜만에 예능프로를 좀 보고 오후에 공부를 하기 위해서 자리에 앉았다. 하지만 집에 커피가 다 떨어졌고, 커피를 마시지 않으니 집중력이 자꾸 흐트러지는 느낌을 받았다. 어쩔수없이 노트북을 들고 카페로 왔다. 오늘은 어제 마무리하지 못했던 javascript 부분에 대해서 어떤 코드가 쓰였고, 그 코드가 가지고 있는 속성이 어떤것인지 정리해보고 공부해보려고 한다.

✅ 개인프로젝트 준비 Javascript(시계편).

const QUOTES = "quotes";

function getTime() {
  const time = document.querySelector(".time"); 
  const newDate = new Date();

 const hours = String(newDate.getHours()).padStart(2, "0");
  const minutes = String(newDate.getMinutes()).padStart(2, "0");
  const seconds = String(newDate.getSeconds()).padStart(2, "0");

• const QUOTES = "quotes"; : const로 변수를 상수로 변경해주고, QUOTES를 상수로 선언해주었다. 그리고 "quotes"로 문자열값을 할당해주었다.

• function getTime() : getTime이라는 함수를 정의하여 현재시간을 가져오는 역할을 부여했다.

  • const time = document.querySelector(".time"); : ".time" 클래스를 가진 HTML 요소를 가져와서 "time" 변수에 할당했다. 이 HTML 요소는 시간을 나타내는 데 사용될 것이다. querySelector는 time이라는 클래스를 가져오기 위해 작성되었다.

  • const newDate = new Date(); : "new Date()"를 사용하여 새로운 Date 객체를 만들었다. 이 객체에는 현재 날짜와 시간 정보가 저장된다.

• const hours = String(newDate.getHours()).padStart(2, "0");
  const minutes = String(newDate.getMinutes()).padStart(2, "0");
  const seconds = String(newDate.getSeconds()).padStart(2, "0");
  : 각각 hours, minutes, seconds를 만들어 string객체를 생성하여 newDate라는 객체를 만들어 시간,분,초를 변수에 할당한다. 그리고 각각의 시간,분,초 앞에 0을 붙이기 위해서 padStart(2, "0")을 사용하여 목표길이 2보다 작을때 채울값 "0"을 입력하여 두자리수가 되도록 만들었다.

 function formatAMPM(date) {
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let ampm = hours >= 12 ? "pm" : "am";
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    let strTime = hours + ":" + minutes + " " + ampm;
    return strTime;
  }

• function formatAMPM(date)

  • formatAMPM이라는 함수에 date라는 매개변수를 적용.

  • 이 함수는 date 매개변수를 적용해 시간(시,분)을 추출하고 해당 시간이 오전인지 오후인지에 따라 AM 또는 PM을 추가할 수 있도록 함.

  • 또한 12시간 형식으로 변환 후 시간과 분을 문자열로 합쳐서 반환.

  • 이 함수를 사용하면 "new Date()"라는 객체를 적용하면 현재 시간을 AM/PM 형식으로 변환하여 반환가능.

• let hours = date.getHours();

  • hours라는 변수에 date객체에서 추출한 시간 정보를 받아온다. getHours()는 현재 시간(시)를 할당한다.

• let minutes = date.getMinutes();

  • minutes라는 변수에 date객체에서 추출한 분 정보를 받아온다. getMinutes()는 현재 시간(분)을 할당한다.

• let ampm = hours >= 12 ? "pm" : "am";

  • 이 코드는 삼항 연산자를 사용하여 "hours" 변수에 저장된 시간 값이 12 이상인지를 확인하고, 그 결과에 따라 "ampm" 변수에 "pm" 또는 "am"을 할당하는 코드다.

  • 위의 코드에서는 "hours >= 12"라는 조건식을 사용하여, "hours" 변수의 값이 12 이상인지 확인한다. 만약 "hours" 값이 12 이상이면, 조건식은 true가 되며 "ampm" 변수에 "pm"을 할당하고, 그렇지 않으면 false가 되며 "ampm" 변수에 "am"을 할당한다.

  • "조건"이 true이면, "?" 다음에 오는 "참일 때 값"이 결과값이 되며, "조건"이 false이면 ":" 다음에 오는 "거짓일 때 값"이 결과값이 된다.

• hours = hours % 12;

  • "hours" 변수 값을 24시간 형식에서 12시간 형식으로 변환하는 데 사용된다. "%" 연산자는 "hours" 변수를 12로 나눈 나머지를 계산하는 데 사용되는데 예를 들어 "hours"가 14인 경우 "hours % 12"는 2(14를 12로 나눈 값)가 된다. 이 코드줄은 "hours" 변수의 값이 24시간 형식의 원래 값에 관계없이 항상 1에서 12 사이가 되도록 한다.

  • ex) 17 % 12 = 5 , 20 % 12 = 8

• hours = hours ? hours : 12; : 변수 hours는 시간(0~23)을 나타내는 정수값으로 가정한다. 이 코드는 hours의 값이 존재하면 hours를 그대로 유지하고, hours의 값이 존재하지 않으면 hours 변수에 12를 할당한다.(삼항 연산자 사용)

  • 이 코드는 변수 hours가 초기화되지 않은 경우 기본값으로 12를 설정하는 일반적인 패턴 중 하나다. 이 패턴은 변수 초기화를 보장하고 예기치 않은 버그를 방지하는 데 도움이 된다.

• minutes = minutes < 10 ? "0" + minutes : minutes;

  • 현재 'minutes' 값이 10보다 작으면, 문자열 "0"과 'minutes' 값을 결합하여 새로운 문자열을 만든다.
    (ex. 10보다 작으면 0 + 0~9)

  • 그렇지 않으면, 'minutes' 값 그대로 사용한다.
    (ex. 10보다 크면 11~59면 그대로 노출)

  • 마지막으로, 삼항 연산자가 반환한 값을 'minutes' 변수에 할당한다.

• let strTime = hours + ":" + minutes + " " + ampm;

  • 변수 strTime은 시간 정보를 저장하는 문자열 변수로, 이 변수를 생성할 때 사용하는 값들은 hours, minutes, ampm 변수다.

  • hours 변수는 현재 시간의 시간 단위를 나타내며, minutes 변수는 현재 시간의 분 단위를 나타낸다. ampm 변수는 현재 오전/오후 여부를 나타내며, 이 변수는 "AM" 또는 "PM" 문자열 값을 가질 수 있다.

  • 이 코드에서 + 기호는 문자열 연결 연산자다. 따라서 strTime 변수에 저장되는 값은 hours, minutes, ampm 변수의 값을 문자열로 변환한 후, ":"와 "" 문자열을 연결하여 만들어진 문자열이다.

  • 예를 들어, 현재 시간이 오후 2시 30분이라면, hours 변수는 2, minutes 변수는 30, ampm 변수는 "PM"이 될 것입니다. 따라서 strTime 변수에 저장되는 값은 "2:30 PM"이 된다.

• return strTime;

  • return strTime는 strTime 실행을 종료하고, 주어진 값을 strTime 호출 지점으로 반환한다.(호출하는 지점에서 즉시 실행을 멈춘다.)

 time.innerText = `${hours}:${minutes}:${seconds}`;

• time.innerText = ${hours}:${minutes}:${seconds};

  • time.innerText는 HTML 문서 내에서 태그의 내용을 나타내는 속성이다.

  • ${hours}:${minutes}:${seconds}`는 문자열 내부에 ${} 구문을 사용하여 변수를 포함한 문자열을 생성한다.

  • hours, minutes, seconds 이런 변수들은 다른 코드에서 먼저 정의되어 있어야 한다.

  • 해당 코드는 시간, 분, 초 정보를 가져와서 문자열 형태로 시간을 표시한다. 이를 이용하여 HTML 문서에서 시간 정보를 업데이트 할 수 있다.

  • 이 코드가 들어가야 시간이 정상적으로 표시된다.

getTime(); 

setInterval(getTime, 1000);

• getTime();

  • getTime이 호출되도록 하는 마무리 코드.

• setInterval(getTime, 1000);

  • setInterval 함수는 일정한 시간 간격으로 지정된 함수를 실행하는 타이머 기능을 제공한다. 여기서는 getTime 함수를 1초(1000ms) 간격으로 실행하도록 설정한다.
  • getTime 함수는 현재 시간을 구하고, 이를 HTML 문서 상의 특정 요소에 출력하는 역할을 한다. 이 함수는 setInterval 함수로부터 호출되며, 매 초마다 호출되어 현재 시간을 화면에 표시한다.
    따라서 이 코드는 매초마다 현재 시간을 갱신하여 출력하는 기능을 구현한다.

🌜하루를 마치며..

오늘도 이렇게 하루를 마무리한다. 코드 하나하나 알아보면서 머릿속에 이해하려고 하니 정말 쉽지가 않다. 그래도 하나씩 내 속도에 맞춰서 머릿속에 넣으니 이해는 되는 부분이지만 이걸 내가 활용할 수 있을지는 미지수다. 사실 당장 다시 써보라고 하면 못쓸것같다. 물론 어떻게 구성을 짜야하는지 알기에 구글링을 하면 할 수 있겠지만 기본적으로 손코딩을 해야 실력이 는다고 하셨기에 더 부던히 노력해야겠다는 생각이 든다. 오늘도 12시가 넘게까지 공부했으니 이만 빨리 일어나야겠다.