일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 코딩테스트
- 리액트 팀 프로젝트
- js
- 파이썬 list
- useState
- 타입스크립트 props
- 내배캠 프로젝트
- JavaScript
- 내일배움캠프 최종 프로젝트
- typeScript
- 타입스크립트 리액트
- 자바스크립트
- 리액트
- 파이썬 for
- React Hooks
- 리액트 페이지 이동
- 프로그래머스
- 파이썬 enumerate
- REACT
- 파이썬 반복문
- 내일배움캠프
- 리액트 프로젝트
- 타입스크립트
- 파이썬 slice
- Next 팀 프로젝트
- 파이썬 for in
- 내일배움캠프 프로젝트
- 리액트 훅
- 그리드 정렬
- 한글 공부 사이트
- Today
- Total
목록React (55)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bBzMFj/btsE7rC8cf9/2sbxPnJHHIDDkN4QCchXFK/img.gif)
💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣을 수 있다. 만약 카운터 프로그램에서 버튼을 클릭했을 바로 1 을 더하지 않고, 3초를 기다렸다가 1이 더해지게 구현하려면 미들웨어를 빼놓을 수 없다. dispatch 가 되자마자 바로 action 이 리듀서로 달려가 새로운 state 를 반환하기 때문 즉, 여기서 "3초를 기다리는 작업" 을 미들웨어가 해주는 것이다. 보통 리덕스 미들웨어는 서버와의 통신을 위해 사용한다! 그 중 많이 사용되는 것이 Redux-thunk, saga 💡 Th..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bnqDm0/btsE0I64nUo/BDUKB8tpWPkvCVYdO5mS3k/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/csqCN8/btsE0Ieps7O/T8oajZczX6gJcGL96SEbc0/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nXUjN/btsE3nucVBb/ViWlkkjoBKoYjt5tsIUlE1/img.png)
💡 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQBRWw/btsEYK4Orf2/6Y1n6F3CsTRpK3MKgmXAT1/img.png)
💡 json-server 를 이용해 간단한 서버를 만들어보자 먼저 npm install json-server or yarn add json-server ~ 설치가 끝나면 루트 경로에db.json 파일을 하나 만들고 데이터를 넣어준다. { "posts": [ { "id": "1", "title": "a title", "views": 100 }, { "id": "2", "title": "another title", "views": 200 } ], "comments": [ { "id": "1", "text": "a comment about post 1", "postId": "1" }, { "id": "2", "text": "another comment about post 1", "postId": "1" } ]..
💡 toolkit 을 이용해서 store 를 다른 방식으로 만들어보자! 먼저 npm install @reduxjs/toolkit ~ ✳️ 카운터 기능 configStore.js // import { combineReducers, createStore } from "redux"; import counter from "../modules/counter"; import { configureStore } from "@reduxjs/toolkit"; // const rootReducer = combineReducers({ counter }); // const store = createStore(rootReducer); const store = configureStore({ reducer: { counter } }..