25일차 프론트엔드 공부 - 함수

- 프론트엔드 공부 25일차 -

전달인자, 매개변수

함수의 외부에서 데이터를 전달 받아 내부에서 활용하기 위한 수단

 

매개변수

함수를 선언할 때, 소괄호 안에 선언되는 변수

 

ex)

const sum = function(a, b) {

console.log(a)

console.log(b)

}                   

 

전달인자

함수를 호출할 때, 함수 내부로 전달되는 데이터

 

ex)

sum(10, 15)

 

Web Storage

브라우저 내에 존재하는 데이터 저장소 

 

Session Storage

key-value 형태 저장

로컬 환경에 데이터 저장

세션 단위로 구분되며 활용

(세션: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점까지를 의미하는 단위 / 사용자의 웹 페이지 접속 상태에 따른 단위)

브라우저, 탭을 종료하면 영구 삭제

 

Local storage

key-value 형태 저장

로컬 환경에 데이터 저장

도메인 단위로 구분되며 활용

브라우저 자체를 종료해도 존재

 

조건문 

 

falsy

undefined

null

0

“”

NaN

 

truthy

falsy 데이터를 제외한 나머지

 

if (a) {

// a 값이 truthy 면 실행

} else {

}

 

 

24일차에서 작성한 타이머에서 새로고침을 해도 타이머가 유지되도록 수정한 코드

const messageContainer = document.querySelector("#ddayMessage");
const container = document.querySelector("#ddayContainer");
const saveDate = localStorage.getItem("saveDate");
const intervalIdArr = [];

messageContainer.innerHTML = "<h3>D-Day를 입력해주세요.</h3>";
container.style.display = "none";

const dateFormMaker = function () {
  const inputYear = document.querySelector("#yearInput").value;
  const inputMonth = document.querySelector("#monthInput").value;
  const inputDay = document.querySelector("#dayInput").value;

  // const dateFormat = inputYear + '-' + inputMonth + '-' + inputDay;
  const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`;
  return dateFormat;
};

const counterMaker = function (data) {
  if (data !== saveDate) {
    localStorage.setItem("saveDate", data);
  }
  const nowDate = new Date();
  const targetDate = new Date(data).setHours(0, 0, 0, 0);
  const remaining = (targetDate - nowDate) / 1000;
  if (remaining <= 0) {
    // remaining === 0 (남은 시간이 0)
    messageContainer.innerHTML = "<h3>타이머가 종료되었습니다.</h3>";
    messageContainer.style.display = "flex";
    container.style.display = "none";
    setClearInterval();
    return;
  } else if (isNaN(remaining)) {
    // 만약 잘못된 날짜가 들어왔다면, 유효한 시간이 아닙니다 출력
    messageContainer.innerHTML = "<h3>유효한 시간이 아닙니다.</h3>";
    messageContainer.style.display = "flex";
    container.style.display = "none";
    setClearInterval();
    return;
  }

  const remainingObj = {
    remainingDate: Math.floor(remaining / 3600 / 24),
    remainingHour: Math.floor(remaining / 3600) % 24,
    remainingMin: Math.floor(remaining / 60) % 60,
    remainingSec: Math.floor(remaining) % 60,
  };

  const documentObj = {
    days: document.getElementById("days"),
    hours: document.getElementById("hours"),
    min: document.getElementById("min"),
    sec: document.getElementById("sec"),
  };

  const timeKeys = Object.keys(remainingObj);
  const docKeys = Object.keys(documentObj);

  const format = function (time) {
    if (time < 10) {
      return "0" + time;
    } else {
      return time;
    }
  };

  for (let i = 0; i < timeKeys.length; i++) {
    const remainingTime = format(remainingObj[timeKeys[i]]);
    documentObj[docKeys[i]].textContent = remainingTime;
  }

  //   documentObj["days"].textContent = remainingObj["remainingDate"];
  //   documentObj["hours"].textContent = remainingObj["remainingHour"];
  //   documentObj["min"].textContent = remainingObj["remainingMin"];
  //   documentObj["sec"].textContent = remainingObj["remainingSec"];

  for (let key in documentObj) {
    documentObj.lo;
  }
};

const starter = function (targetDateInput) {
  if (!targetDateInput) {
    targetDateInput = dateFormMaker();
  }
  container.style.display = "flex";
  messageContainer.style.display = "none";
  setClearInterval();
  counterMaker(targetDateInput);
  const intervalId = setInterval(() => {
    counterMaker(targetDateInput);
  }, 1000);
  intervalIdArr.push(intervalId);
};

const setClearInterval = function () {
  localStorage.removeItem("saveDate");
  for (let i = 0; i < intervalIdArr.length; i++) {
    clearInterval(intervalIdArr[i]);
  }
};

const restTimer = function () {
  container.style.display = "none";
  messageContainer.innerHTML = "<h3>D-Day를 입력해주세요.</h3>";
  messageContainer.style.display = "flex";
  setClearInterval();
};

if (saveDate) {
  starter(saveDate);
} else {
  container.style.display = "none";
  messageContainer.innerHTML = "<h3>D-Day를 입력해주세요.</h3>";
}

 

 

 

    localStorage.setItem("saveDate", data);

data 값을 로컬데이터를 이용하여 saveDate라는 변수에 저장한다.

const saveDate = localStorage.getItem("saveDate");

로컬 데이터엣 저장된 saveDate를 불러오기 위한 함수

  localStorage.removeItem("saveDate")

로컬데이터에 저장된 값을 제거하기 위한 함수