본문 바로가기

전체 글

 (290)
[React] instance 와 interceptor Interceptor의 필요성 axios.get("http://localhost:3001/todos"); axios.post("http://localhost:3001/todos", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분이 리액트 앱에 300개 정도 있다고 가정하면, 호출 서버가 변경되었을 때 300개를 모두 변경해 주어야 한다. 이는 리소스적으로 엄청난 낭비이다. axios는 이름에서 알 수 있듯이 다음과 같은 상황에서 흐름을 가로채서 코드상의 관여를 할 수 있게 한다. (1) 요청(request) 이 처리되기 전 (= http request 가 서버에 전달되기 전) (2) 응답(response) 의 then (..
[React] Fetch 와 Axios 1. Fetch fetch 는 자바스크립트 내장 라이브러리로, 패키지 설치가 필요 없음. 그러나 다음과 같은 단점이 있음. - 미지원 브라우저 존재 - 개발자에게 불친절한 response - axios 에 비해 부족한 기능 2. Axios axios 란 node.js 와 브라우저를 위한 Promise 기반 http 클라이언트 [데이터 읽어오기] fetch const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then(console.log); - fetch().then 을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에, response.json()을 한번 더 ..
[React] 비동기 통신 axios(patch) PATCH 요청 (내용 수정하기) import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const [targetId, setTargetId] = useState(""); const [content, setContent] = useState(); // 서버로 부터 값 받아오는 함..
[React] 비동기 통신 axios(delete) DELETE 요청 import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos")..
[React] 비동기 통신 axios(post) POST 요청 import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos"); ..
[React] 비동기 통신 axios(get) GET 요청 db.json에 저장한 값을 port 4000 을 통해 가져옴 function App() { const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos"); // 서버로부터 값을 받을때 까지 기다림 console.log("data", data); }; useEffect(() => { // 마운트 되었을 때 실행할 로직, db로부터 값을 가져올 것이다. fetchTodos(); return () => { // 언마운트 되었을 때 리턴할 값 }; }, []); // 어떤 state 가 변경될 때, 실행하는지 결정 return Axios; } 또한 가져온..
[React] HTTP 웹 통신 서버와 클라이언트 간의 대화이며 약속(프로토콜) 이다. 프로토콜 사람들끼리 대화를 하기 위해 언어적, 문화적으로 정립된 약속이 있음. 웹 또한 서버와 클라이언트가 대화하기 위해 서로 약속된 방식이 필요하다. 그 방식대로 데이터를 전달해야 오류가 없어지게 된다. 이 약속을 프로토콜(protocol) 이라고 하며, 웹에서 서버 클라이언트간 주고 받은 상호간의 약속(프로토콜) 을 HTTP 라고 한다. 요청(Request) 과 응답(Response) 서버와 클라이언트가 서로 데이터를 주고받기 위해서는 항상 요청해야 하며 그에 따른 응답을 준다. 보통 클라이언트가 대화를 시도하며 서버는 요청을 받아 그에 따른 응답을 줌. URL 에 대하여 https:// : 프로토콜 www. : Subdomain hos..
[React] json-server json-server json-server 란, 아주 간단히 DB와 API서버를 생성해주는 패키지이다. 우리가 json-server 를 사용하는 이유는, 백엔드에서 실제 DB 와 API 서버가 구축될 때 까지 프론트엔드 개발에 임시적으로 사용할 mock data 를 생성하기 위함. json-server 를 통해서 프론트에는 백이 하고있는 작업을 기다리지 않고, 프론트의 로직과 화면을 구현할 수 있어 효율적으로 협업 가능함. json-server 설치 명령어 yarn add json-server 이후, 맨 상위에 db.json 파일을 생성한 후 아래 내용을 붙여 넣음. { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "co..

티스토리툴바