생각하다 생각하다

https://tanstack.com/query/latest/docs/react/devtools Devtools | TanStack Query Docs Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will like tanstack.com DevTools란? Query가 어떻게 작동하고 저장되는지 볼 수 있게 하는 툴이다..

axios 설치하기 $ npm i axios axios란? fetch를 하는 adapter라고 보면 된다. axios를 사용하면 await fetch, response, json 을 할 필요가 없어진다. import axios from "axios" const BASE_URL = "http://127.0.0.1:8000/api/v1" export async function getRooms() { const response = await axios.get(`${BASE_URL}/rooms/`); return response.data; } axios는 reactQuery로만 fetch했을 때 했던 await fetch, response, json 등의 동작을 내부적으로 하기 때문에 위 코드로 수정해줄 수 있..

TanStack Query(React Query) 사용하기 편의상 ReactQuery라고 부를텐데 이 reactQuery를 이용해서 서버 fetch를 더 간단하고 편리하게 할 수 있다. https://tanstack.com/query/latest TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com TanStack Query 설치하기 $ npm i @tanstack/react-query src/index..

데이터 fetch하기 django에서는 시스템을 보호하고 있기 때문에 아무데서나 fetch를 해올 수 없기 때문에 이를 설정하기 위해 cors-headers를 설치할 필요가 있다. 데이터를 fetch하기 위해서 먼저 django-cors-headers 설치하기 그런데 django-cors-headers란? cors-headers는 특정 도메인에서 '나의 서버에서 브라우저로 fetch할 수 있는 사람'을 지정할 수 있게 해준다. 1. 백엔드에 cors-headers를 설치해준다. python -m pip install django-cors-headers poetry 환경일 경우 poetry add django-cors-headers 나는 poetry 환경을 사용하고 있기 때문에 아래 코드를 입력했다. 2...

django에는 기본적으로 테스트케이스 라이브러리가 존재한다. from django.test import TestCase 하지만 drf에도 test case class가 있기 때문에 그것을 사용할 것이다. 단축기능이 많고 더 편리하다. AmenityDetail 클래스 test하기 📁 rooms/views.py class AmenityDetail(APIView): def get_object(self, pk): try: return Amenity.objects.get(pk=pk) except Amenity.DoesNotExist: raise NotFound def get(self, request, pk): amenity = self.get_object(pk) serializer = serializers.Am..

django 에서 사용자 인증하는 방법은 크게 네가지가 있다. "rest_framework.authentication.SessionAuthentication", # 현재 로그인 한 유저가 누구인지 알려주는 코드(쿠키랑 비밀번호를 이용하는 세선 인증) "config.authentication.TrustMeBroAuthentication", "rest_framework.authentication.TokenAuthentication", # 토큰을 이용해 user가 누군지 찾음 "config.authentication.JWTAuthentication", 1. BasicAuthentication - 권장하지 않음 header를 이용한 그냥 모달창임 2. Auth Token - TokenAuthentication ..

React Router v6 이전의 react 라우터 작성 방식 6.4의 새로워진 라우터 작성 방식 import { createBrowserRouter } from "react-router-dom"; const router = createBrowserRouter([]) createBrowserRouter라는 함수를 이용해서 이 안에 라우터 배열을 두고 사용한다. path = "url" element = 해당 링크에서 보여줄 컴포넌트 import { createBrowserRouter } from "react-router-dom"; import Root from "./components/Root"; const router = createBrowserRouter([ { path: "/", element: }..

api 만들기 [GET, PUT] /users/me : 사용자가 자신의 개인정보를 확인하고 수정할 수 있는 api 1. urls.py 파일에 url 연결하기 config path와 연결하기 from django.urls import path from . import views urlpatterns = [ path("me", views.Me.as_view()), ] 위처럼 users 폴더의 views 파일을 가져와서 path에 연결한다. views.py의 Me 라는 클래스를 연결해줌 2. views.py 파일 설정하기 from rest_framework.response import Response from rest_framework.views import APIView from rest_framework ..