개발 신생아

1. useState를 사용하기 위해 먼저 해당 Hook을 임포트 해야 합니다. import { useState } from 'react'; 2. useState를 사용하여 상태를 선언합니다. 상태를 선언할 때, 초기값을 인자로 전달합니다. 'useState' 는 배열을 반환하며, 첫번째 요소는 상태값(state value), 두번째 요소는 상태를 갱신 할 수 있는 함수(state updater function)입니다. const [state, setState] = useState(initialState); 3. useState 코드 예시 import { useState } from 'react'; function App() { const [amount, setAmount] = useState(0); c..

1. navigator 함수를 이용해 사용자의 위치를 알아내는 코드 작성. navigator.geolocation.getCurrentPosition ( ) 라는 코드를 작성해준다. navigator.geolocation을 부르면 브라우저에서 자동으로 위치 좌표를 준다. 이때 getCurrentPosition 은 2개의 argument가 필요하다. 앞쪽에는 모든 게 잘 됐을 때 실행될 함수인 onGeoOk 함수를, 뒤에는 실패했을 때 실행될 함수인 onGeoError 함수를 입력한다. 2.onGeoError함수가 실행될 때 에러가 났다는 것을 사용자에게 알려주기 위해서 alert("Can't find you. No weather for you."); 를 해준다. 3. onGeoOk 함수가 실행될 때 fun..

문제 : 로컬스토리지에 데이터를 배열의 형태로 쌓고 싶음 하지만 단순히 string으로 쌓임. const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector("#todo-list"); const toDos = []; function saveToDos() { // localStorage.setItem("todos", JSON.stringify(toDos)); localStorage.setItem("todos", toDos); } function deleteToDo(event) { const li = event...

우선 랜덤으로 명언 불러오는 것을 알아보겠습니다. 더미데이터를 만들어준다. html의 dom 요소를 불러와 변수를 선언한다. 더미데이터의 길이만큼 랜덤으로 숫자를 뽑는다. dom 요소에 author와 quote를 각각 넣어준다. const quotes = [ { quote: "I never dreamed about success, I worked for it", author: "Estee Lauder", }, { quote: "Do not try to be original, just try to be good.", author: "Paul Rand", }, { quote: "Do not be afraid to give up the good to go for the great", author: "John ..

지금부터 new Date()를 사용하여 시간을 불러올 것이다. const clock = document.querySelector("#clock"); 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(); setInterval(getClock, 1000..

아래와 같은 메서드를 통해 localStorage에 item을 생성, 삭제, 조회 할 수 있다. 1. 생성 localStorage.setItem("username", "Mike"); 순서대로 key, value 값으로 아이템을 생성해준다. 2. 삭제 localStorage.removeItem("username"); key값을 통해 아이템 삭제 가능 3. 조회 localStorage.getItem("username"); key 값을 통해 아이템 조회 가능

// html 코드 // JS 코드 const loginForm = document.querySelector(".login-form"); const loginInput = loginForm.querySelector("input"); function onLoginSubmit(e) { // e -> 첫번째 argument(매개변수) e.preventDefault(); console.log(e); const username = loginInput.value; console.log(username); } loginForm.addEventListener("submit", onLoginSubmit); loginForm.addEventListener("submit", onLoginSubmit); -> submit 이..

우선, classList란?? 말그대로 html태그의 classList이다. 클래스 목록이라고 생각하면된다. 즉, html의 클래스로는 여러개의 클래스 명들이 들어올 수 있다. 우리는 다음과 같이 코드를 작성하여 글씨를 클릭할때 마다 색깔을 변하게 해주는 코드를 짰다 // JS 코드 const h1 = document.querySelector(".hello h1"); function handleTitleClick() { const clickedClass = "active"; if (h1.classList.contains(clickedClass)) { h1.classList.remove(clickedClass); } else { h1.classList.add(clickedClass); } } h1.addE..