본문 바로가기

전체 글

 (282)
리액트 15강 Custom hook리액트에 정의되어있지 않은 나만의 Hook을 만들어 사용하는 것코드가 훨씬 직관적이고 간결해짐유지보수가 훨씬 편리import { useState } from "react";function App() {const [click1, setState1] = useState(false);const toggle1 = () => setState1((click1) => !click1);const [click2, setState2] = useState(false);const toggle2 = () => setState2((click2) => !click2);const [click3, setState3] = useState(false);const toggle3 = () => setState3((clic..
#8.0 Geolocation function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("너는 여기있다", lat, lng); } function onGeoError(){ alert("널 못찾았다..날씨 못줘"); } navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
#7.8 Deleting To Dos part Three function deleteToDo(event) { const li = event.target.parentElement; li.remove(); toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); //우리가 클릭한 li.id와 다른 toDo는 남겨두겠다, 데이터타입 같게 만들기 saveToDos(); }
#7.7 Deleting To Dos part Two forEach함수는 paintToDo를 parsedToDos배열의 요소마다 실행 forEach는 각각의 item을 줌, item은 object가 됨 지우고 싶은 item를 제외하고 새 array를 만듦
#7.6 Deleting To Dos part One Date.now() -> 밀리초를 주는 함수(1000분의 1초) ->랜덤숫자얻기에 유용 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos"; let toDos = [];//항상 빈 array로 시작하므로 업데이트 가능한 let으로 function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //배열을 문자열로 만들어줌 } fun..
#7.5 Loading To Dos part Two const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos"; let toDos = [];//항상 빈 array로 시작하므로 업데이트 가능한 let으로 function saveToDos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //배열을 문자열로 만들어줌 } function deleteToDo(event) { const li = event.target..
#7.4 Loading To Dos part One JSON.parse : 자바스크립트 객체를 만들어줌 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos"; const toDos = []; function saveToDos(){ localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //배열을 문자열로 만들어줌 } function deleteToDo(ev..
#7.3 Saving To Dos 브라우저에 저장하려면 localStorage 필요 localStorage는 오직 텍스트만 저장 가능 JSON.stringify : 오브젝트이든 배열이든 string으로 만들어줌 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); const toDos = []; function saveToDos(){ localStorage.setItem("todos",JSON.stringify(toDos));..

티스토리툴바