본문 바로가기

전체 글

 (185)
리액트 22강 백엔드 API를 리액트 앱과 연결import { useState, useEffect } from "react";import Item from "./Item"; //데이터를 react와 연결하기 위해 import export default function items() { // eslint-disable-next-line react-hooks/rules-of-hooks const [data, setData] = useState([]); // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(()=>{ fetch("http://localhost:3001/items").then((res)=>{ r..
#2.0 Introduction 리액트는 웹사이트에 상호작용을 하기 위해서 만들어짐 버튼을 클릭함에 따라 화면에 텍스트가 변하게 하려면 바닐라js : html->id->get id->event listener->function 리액트js : 버튼생성, 클릭감지를 하려면 무엇이 필요한지 앎, 빠른 아이디어들을 모아둔 것
리액트 21강 데이터 보는 방법모든 item 보기http://localhost:3001/items이 경로는 기본적으로 새로운 item을 추가하거나 삭제할 때 사용id에 따른 item 보기http://localhost:3001/items/3...4..5(id 값)상태에 따른 item 보기http://localhost:3001/items?status=done(todo)
리액트 20강 할일 목록 화면에 표시import {useState} from "react";export default function Item({item:i}){ const [item, setItem] = useState(i); return( {item.task} {item.due} );} item.jsimport Item from "./Item";export default function items() { var item={status:"todo", task:"커피마시기", due:"20220330"}; //todo=해야되는 일이라서 체크표시 r..
리액트 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 ( }/> }/> }/> }..
리액트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"} ..
#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 = () => setState3((clic..

티스토리툴바