[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 3주차 과제1️⃣

m_ngyeong·2023년 6월 20일

IT개발캠프 JavaScript React 개발자부트캠프 리액트 리액트캠프 부트캠프 스나이퍼팩토리 웅진씽크빅 유데미 인사이드아웃 프로젝트캠프 프로젝트캠프후기

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

목록 보기

12/28

3주차 과제1️⃣

Requirement

Vanilla JS로 배경이미지 랜덤 변경
Vanilla JS로 인사 만들기
Vanilla JS로 시계 만들기

개념정리

Local Storage

Local Storage 는 브라우저에 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있게 해준다. 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 다시 말해, 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있다. 데이터 영속성(persistence)은 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당한다.

Coding

배경이미지 랜덤 변경 - 새로고침 시 이미지가 변환 되게 구현 함
Math.floor() 메서드는 항상 내림하고 인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환
Math.random() 메서드는 0과 1 사이의 난수를 반환

const images = [
  "Midnight in Paris-1.png",
  "Midnight in Paris-2.png",
  "Midnight in Paris-3.jpeg",
  "Midnight in Paris-4.jpeg",
  "Midnight in Paris-5.png",
];

//새로고침 시 이미지 자동 변환
const randomImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img"); //img element 생성
bgImage.src = `img/${randomImage}`; //img 경로 설정
//console.log(bgImage);
document.body.appendChild(bgImage); //img html body에 추가

인사 만들기
setItem("key", value) local storage에 정보를 저장
getItem("key") 저장한 값을 불러 옴
removeItem("key") 저장한 값을 지움

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CALSSNAME = "hidden"; //일반적으로 string만 포함된 변수는 대문자로 표기

//첫 번째 argument로 발생된 event에 대한 정보 제공
function onLoginSubmit(event) {
  event.preventDefault(); //preventDefault(): event의 기본 행동이 발생되지 않도록 막는 메서드
  loginForm.classList.add(HIDDEN_CALSSNAME);
  const username = loginInput.value;
  console.log(username);
  localStorage.setItem("username", username);

  greeting.innerText = `Hello ${username} !`; // = "Hello " + username
  greeting.classList.remove(HIDDEN_CALSSNAME);
}

//event가 발생했을 때 function 호출
loginForm.addEventListener("submit", onLoginSubmit);

시계 만들기
new Date() 오늘의 날짜를 가지고 옴
setInterval(function, delay) 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행
setTimeout(function, delay) 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정
(delay: ms단위)
str.padStart(targetLength, "padString") 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환
str.padEnd(targetLength, "padString") 메서드는 현재 문자열의 마지막을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환

const clock = document.querySelector("h1#clock");

//interval: '매번'일어나야 하는 무언가
function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

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

getClock(); //브라우저가 load되자마자 함수 즉시 호출
setInterval(getClock, 1000); //매초마다 함수 호출

Result

GitHub

7회차 - Vanilla JS 과제

🫠 느낀점

지난주 금요일에 실습했던 내용을 다시 한번 더 복습하면서 사용했던 메소드들의 개념을 탄탄하게 익혔다.
배경 이미지가 새로고침을 하였을 때 변경되는데 일정 시간이 지나면 자동으로 배경이 바뀌도록 코드를 구현해 보아야겠다. 그리고 local storage에 정보를 저장하는 것까지 구현했는데 이 역시 새로고침을 하면 다시 사용자의 이름을 입력해야 한다. local storage에 user의 name이 저장되어 있으면 input 태그를 불러오지 않고 바로 user의 name을 불러올 수 있게 해보아야겠다.