개발일지

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - ajax 성공 / 실패 시 각각 다른 화면 보여주기 ajax 요청하다가 보면 위와같은 기능들 필요하다 react-query 사용하면 더욱 편리하다 실시간 데이터 보여주어야 하는 사이트들에서 유용 react-query 설치 세팅 터미널에 npm install react-query 작성 index.js 파일에서 import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getEl..

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 따라서 귀찮은 props 전송이 필요가 없어진다. Redux 설치하기 npm install @reduxjs/toolkit react-redux 터미널에 입력해주면 설치된다. redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 ) 설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자 Redux 세팅 import { configureStore } from '@reduxjs/toolkit' exp..

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까? props 를 하위로 2번 전송해주어야한다. 하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. Context API 문법으로 props 없이 state 공유하기 재고라는 state 를 App 컴포넌트에 만들고 이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때 Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. (App.js) export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10, 11, 12])..

서버란? 유저가 데이터 요청하면 유저에게 데이터 보내주는 프로그램이다. 서버에 데이터 요청할 때는 정확한 규칙에 맞춰 요청해야하는데 1. 어떤 데이터인지 (URL 형식) 2. 어떤 방법으로 요청 (GET or POST) 두 가지 잘 지켜서 데이터 보내야한다. 데이터를 가져올 때는 GET 요청하고, 데이터를 서버로 보낼 땐 POST 요청을 한다. 어떤 데이터를 가져오고 싶은지 URL 잘 작성해주면 된다. GET / POST 요청하는 법 GET 요청하는 가장 쉬운 방법은 브라우저 주소창 이용하는 것이다. 주소창에 URL 적으면 그 URL로 GET 요청을 보내준다. POST 요청할 땐 태그 이용하면 된다. 그러면 폼이 전송되었을 때 POST 요청 보내준다. 그런데 GET, POST 요청하면 단점이 브라우저가 ..