리액트 쿼리 사용하기

아 헷갈려... 일단 리액트 쿼리란? 데이터를 서버에서 가져와서 화면에 보여주는 것을 더 쉽게 해주는 도구다.특히 서버에서 데이터를 가져오고, 캐싱하고, 다시 가져오는 것들을 자동으로 해준다. 데이터를 쉽게 가져오고 관리할 수 있도록 도와주므로 웹사이트에서 사용자 정보, 게시글 목록을 가져올 때 사용할 수 있다. 먼저 React Query를 설치하고, yarn add @tanstack/react-query App.jsx 나 Main.jsx 등에 provider를 이용해서 적용한다.import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();ReactDOM.createR..

• format_list_bulleted 리액트
• · 2024. 6. 14.
• textsms

axios 사용하기

axios란? 웹사이트가 서버와 데이터를 주고받을 때 사용한다. 웹사이트가 서버에게 데이터를 요청하거나, 서버가 웹사이트에 데이터를 보내주는 일을 쉽게 해준다. 그리고 프로미스 기반이라 비동기적으로 처리할 수 있다. 1. axios 설치yarn add axios 이제 json server를 설정해줘야 하는데, json server는 아주 간단하게 데이터 베이스와 api 서버를 생성해주는 도구다.백엔드 개발이 끝나지 않아도 프론트엔디 개발을 할 수 있고, 가짜 데이터를 만들어 테스트 할 수 있다. 먼저 설치부터!yarn add json-serveryarn add json-server -D # 개발 환경인 경우, -D 옵션을 함께 입력합니다.   json server는 간단한 패키지지만 서버이므로 리액트와 ..

• format_list_bulleted TIL
• · 2024. 6. 13.
• textsms

동기, 비동기 정리

동기, 비동기가 계속 조금씩 헷갈려서 강의 듣는 김에 정리해봤다.  동기는 일을 순서대로 차례차례 하는 것이다.첫번째 일이 끝나야 두번째 일을 시작할 수 있으므로 일이 끝날 때까지 기다려야 한다. 비동기는 여러 일을 동시에 할 수 있는 것이다.한 일을 기다리지 않고 다른 일을 할 수 있으므로 일이 언제 끝날지 몰라도 괜찮다. 동기는 순서가 중요할 때 사용하고, 비동기는 순서가 중요하지 않을 때 사용한다.  프로미스는 자바스크립트에서 비동기 작업을 처리하기 위해 사용하는 객체다.또, 비동기 작업이 끝난 뒤 다음에 할 일을 미리 정해둘 수 있게 도와준다.이걸 콜백 함수라고 한다.더보기콜백함수!함수 파라미터에 들어가는 함수다.즉, 함수 자체를 전달하는 것이라고 할 수 있다.순차적으로 사용하고 싶을 때 사용한다..

• format_list_bulleted TIL
• · 2024. 6. 12.
• textsms

24. 06. 11 TIL 뉴스피드 프로젝트 정리

이번 팀 프로젝트는 뉴스피드 페이지를 제작하는 프로젝트였다. 우리 팀은 코딩 질문 답변, 정보 공유 사이트를 만들기로 계획했고, 나는 마이 페이지를 맡았다. 이번엔 처음으로 수파베이스를 사용해서 프로젝트를 진행했는데 처음이다 보니 어려움도 많고, 오류가 진짜 많이 생겼었다. 수파베이스는 다른 팀원분이 맡아서 기본 세팅을 해주신 덕분에 코드만 짜면 됐었다. const MyPage = () => { const [postList, setPostList] = useState([]); const [user, setUser] = useState(null); const [userName, setUserName] = useState(''); const [nameModal, setNameModal] = useSt..

• format_list_bulleted TIL
• · 2024. 6. 11.
• textsms

24. 06. 10 TIL

베이직 과제로 투두앱을 만들었다. 오랜만에 하려니까 왜이렇게 헷갈리는 것? 심지어 강의 때 졸아가지고 (튜터님 죄송합니데이...) 기억이 잘 안 났다. 일단 만든 거. 먼저 필요한 useState를 만든다. 입력창, 목록창이 필요하겠지예.const [input, setInput] = useState('');const [todoList, setTodoList] = useState([]);여러 개의 할 일을 저장하므로 todoList의 초기값은 빈 배열로 넣어준다. 이제 인풋창부터 만들어보자. 할 일 목록 추가 폼 태그를 써서 onSubmit을 사용했다. 그리고 value에 값을 넣고, onChange도 함수를 만들어서 넣어줌.  const chan..

• format_list_bulleted TIL
• · 2024. 6. 10.
• textsms

24. 06. 07 TIL redux-4

다시 한 번 디스패치 정리!! 1. set ~ (상태를 변경하는) 을 사용하고 싶으면 dispatch로 보내줘야 한다.const dispatch = useDispatch();그럼 이거 넣어주고, import { useDispatch } from 'react-redux';이것도 빼먹지 말고  dispatch(setSaveMonth(month));이렇게 사용하고, import { setSaveMonth } from './../store/slices/budgetSlice';이것도 빼먹지 말고 사용!상태 업데이트 할 때 필요하다. 이제 유즈셀렉터 정리! import { useDispatch, useSelector } from 'react-redux';이거 넣어줘.  const saveMonth = useSel..

• format_list_bulleted 리액트
• · 2024. 6. 7.
• textsms