본문 바로가기

분류 전체보기

 (101)
리액트 19강 메인페이지 만들기 import React from "react"; import Items from "./components/Items"; import Header from "./components/Header"; import CreateItem from "./components/Createitem"; import { BrowserRouter, Routes, Route } from "react-router-dom"; function App() { return ( ); } export default App; App.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from ..
리액트16강 api(Application Programming Interface) 우리가 만든 로직에 대한 프로그램이 있으면 그 프로그램을 다른 프로그램에서 사용할 수 있도록 프로그램적인 인터페이스를 제공하는 것 웹서비스에서 사용하는 api는 백엔드에서 구현된 api를 말함 json파일에서 api서버를 바로 만들 수 있고, 이 서버를 프로젝트에서 사용 { "items" : [ {"id":1, "tesk":"숙제하기", "due":20221131, "status":"todo"}, {"id":2, "tesk":"숙제하기", "due":20221131, "status":"todo"}, {"id":3, "tesk":"숙제하기", "due":20221131, "status":"todo"} ] } data.json파일
#8.1 Weather API fetch는 promise -> 반응이 일어나는 데 시간이 걸림 Log In 00:00:00 const API_KEY = "a6f2559162df44deffc73c104257b1ad"; function onGeoOk(position) { const lat = position.coords.latitude; const lon = position.coords.longitude; const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`; fetch(url).then(response => response.json()) .then(data => { const weathe..
리액트 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 = () => setS..
#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..

티스토리툴바