aotoyae

💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣을 수 있다. 만약 카운터 프로그램에서 버튼을 클릭했을 바로 1 을 더하지 않고, 3초를 기다렸다가 1이 더해지게 구현하려면 미들웨어를 빼놓을 수 없다. dispatch 가 되자마자 바로 action 이 리듀서로 달려가 새로운 state 를 반환하기 때문 즉, 여기서 "3초를 기다리는 작업" 을 미들웨어가 해주는 것이다. 보통 리덕스 미들웨어는 서버와의 통신을 위해 사용한다! 그 중 많이 사용되는 것이 Redux-thunk, saga 💡 Th..

2024.02.19 - [React] - [React] env : npm, vite 환경 변수 사용하기, 변수 숨기기 [React] env : npm, vite 환경 변수 사용하기, 변수 숨기기 💡 API_KEY 등 보안이 필요한 값에 환경 변수로 써보자 ❗️ 환경변수는 깃헙 같이 오픈된 곳에 올리면 안된다! 우선 루트 풀더에 .env 파일을 만든다. // npm REACT_APP_SERVER_URL = http://localhost:4000 //vite V aotoyae.tistory.com 💡 env 를 더 활용해 api instance 를 만들고, URL 을 간략하게 써보자 axios 폴더에 api.js 파일 생성 import axios from "axios"; const instance = axi..

💡 API_KEY 등 보안이 필요한 값에 환경 변수로 써보자 ❗️ 환경변수는 깃헙 같이 오픈된 곳에 올리면 안된다! 우선 루트 풀더에 .env 파일을 만든다. // npm REACT_APP_SERVER_URL = http://localhost:4000 //vite VITE_SERVER_URL = http://localhost:4000 App.jsx // npm const fetchTodos = async () => { const { data } = await axios.get( `${process.env.REACT_APP_SERVER_URL}/todos` ); setTodos(data); }; // vite `${import.meta.env.VITE_SERVER_URL}/todos` 이런 식으로 사용 ~..

💡 두 비동기 통신 라이브러리의 차이점을 알아보자 ✳️ fetch 미지원 브라우저 존재 개발자에게 불친절한 response axios 에 비해 부족한 기능 ✳️ axios 개발자에게 친절한 response(JSON 포맷으로 따로 변경할 필요가 없다!) 상세한 에러 처리 가능 1. 데이터를 읽어올 때의 차이점 fetch const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then(console.log); 응답을 JSON 포맷으로 바꾸기 위해 response.json() 을 한 번 더 해줘야 한다. 따라서 두 개의 .then() 이 필요하다. axios const url..

2024.02.19 - [React] - [React] axios.get : HTTP 통신으로 데이터 가져오기 [React] axios.get : HTTP 통신으로 데이터 가져오기 💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 먼저 npm install axios or yarn add axios ~ npm install json-server or yarn add json-server ~ 혹시나 EACCES 에러가 뜬다면 sudo npm install json-server 루트 aotoyae.tistory.com 💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 💡 POST : input 에 값을 받고 데이터를 생성해 보자! A..

💡 REST : HTTP 를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 💡 REST API : REST 를 기반으로 서비스 API 를 구현한 것 💡 HTTP 요청 메서드 : 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법 🧑🏻‍💻 REST 의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful " 하다고 표현한다! 가장 중요한 기본적인 두 원칙을 알아보자. 1. URI 는 리소스를 표현하는 데 집중 리소스를 식별할 수 있는 이름은 동사보단 명사를 사용한다. 따라서 이름에 get 같은 행위에 대한 표현이 들어가면 안된다. # good GET /todos/1 # bad GET /getTodos/1 GET /todos/show/1 2. 행위에 대한 ..

💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 먼저 npm install axios or yarn add axios ~ npm install json-server or yarn add json-server ~ 혹시나 EACCES 에러가 뜬다면 sudo npm install json-server 루트 경로에 db.json 파일을 만든다. { "todos": [ { "id": 1, "title": "react" } ] } 그 다음 json-server --watch db.json --port 4000 이제 App.jsx 에서 데이터를 가져와보자. import axios from "axios"; import { useEffect } from "react"; functi..