sohyeon kim

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..

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

💡 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..