[Act Ⅳ] 모멘텀 클론코딩 (바닐라 JS)

노마드코더 강의를 들으며 모멘텀 클론코딩을 진행하였다.

결과물은 아래 주소에서 🚀

https://reload1bronze.github.io/

 

⚔️ 주요 포인트

1. JS에서 HTML 요소 불러오기

const loginInput = document.querySelector("#login-form input");
const toDoForm = document.getElementById("todo-form");

2. localStrorage를 이용한 데이터 저장 및 불러오기

const savedUsername = localStorage.getItem(USERNAME_KEY);

function foo(e) {
  ...
  localStorage.setItem(USERNAME_KEY, username);
  ...
}

3. classList를 활용한 콘텐츠 숨기기/보이기

.hidden {
  display: none;
}

const HIDDEN_CLASSNAME = "hidden";

val.classList.add(HIDDEN_CLASSNAME);
val.classList.remove(HIDDEN_CLASSNAME);

// 간단한 on/off 기능은 toggle 메소드를 통해 구현가능
val.classList.toggle(HIDDEN_CLASSNAME);

4. Date 객체 및 setInterval 함수 활용

function getClock() {
  // Date 객체를 통해 현재 시간을 불러옴
  const date = new Date();
  // String 객체의 padStart 메소드를 활용해 01, 02, 03 ... 를 표현
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
}

// setInterval 적용시 지정된 시간이후 지정된 간격으로 
// 함수를 호출하므로 최초 호출은 별도로 해주어야 함
getClock();
setInterval(getClock, 1000);

5. Math 객체의 메소드 활용 (random, floor, round, ceil)

- Math.random() => 0 이상 1 미만의 랜덤한 값을 반환

- Math.floor() => 괄호 안의 값에서 버림 처리

- Math.round() => 괄호 안의 값에서 반올림 처리

- Math.ceil() => 괄호 안의 값에서 올림 처리

6. JS에서 HTML 요소 생성 및 적용

function foo(newTodo) {
  const li = document.createElement("li");
  const btn = document.createElement("button");
  const span = document.createElement("span");
  
  li.appendChild(btn);
  li.appendChild(span);
  toDoList.appendChild(li);
}

7. addEventListener 메소드 작성시 event 파라미터의 target 프로퍼티 활용

function foo(event) {
  // 클릭 이벤트가 일어난 버튼 요소의 부모 요소 반환
  const li = event.target.parentElement;
}

btn.addEventListener("click", foo);

8. filter 함수 활용 (기존 배열의 요소 중 조건을 만족하는 요소로 새로운 배열을 만듦)

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

9. JSON.stringify() / JSON.parse()

JSON.stringify() - JavaScript 값이나 객체를 JSON 문자열로 변환

JSON.parse() - JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

※ 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON

10. getCurrentPosition() 메소드 활용하여 현재 위치 찾기

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

🏹 챌린지 과제 수행시 구글링한 내용

1. body backgroundImage, backgroundSize 변경 방법

document.body.style.backgroundImage = `url(img/${chosenImage})`;
document.body.style.backgroundSize = "cover";

2. input 배경 및 테두리 제거

input {
  background: transparent;
  border: none;
}

input:focus {
  outline: none;
}