react4 [Django/React] 20. AUTHENTICATION: LogOut Log Out 메뉴 만들기로그인 상태에서 나의 아바타(아이콘)을 클릭하면 'Log out' 메뉴가 뜬다 ChakraUI의 Toast: 유저에게 메시지를 표시(팝업처럼)하는데 사용되는 알림 시스템. 일정 시간이 지나면 자동으로 사라짐 "CSRF(Cross-Site Request Forgery) Failed" 주로 웹 애플리케이션이 CSRF 방지 메커니즘을 적용했을 때, 클라이언트 요청이 필요한 CSRF 토큰을 제공하지 않거나 잘못된 토큰을 제공했을 때 발생Django는 보안강화를 위해 어떠한 사이트에서든 post 요청을 신뢰하지 않음(디폴트로 CSRF 검증 매커니즘을 활성화) (get request는 문제없이 보낼 수 있음) CSRF Token : CSRF 공격을 방지하기 위해 사용되는 보안 .. 2024. 11. 22. [Django/React] 20. AUTHENTICATION: useUser / Credentials hook를 만들어서 로그인 했는지 여부를 표시 - 로그인 하면: :Log in / Sign up 버튼 대신 유저의 아바타를 표시 1) src > api.ts 에서 fetcher 함수 만들기: 로그인한 유저 정보를 가져옴 2) src > lib 폴더 생성 & lib 폴더 내 useUser.ts 파일 생성 3) src > lib > useUser.ts 파일 내에서 위에서 만든 getMe fetcher를 호출 4) src > components > Header.tsx 에서 추가 Credentials(인증 정보) Django의 Cookie서버가 어떤 쿠키를 어떤 백엔드에 전달할 것인가 - 웹 브라우저(클라이언트)에 저장되는 작은 데이터 조각 (웹 브라우저에 저장되는 key-value 쌍 데이터) .. 2024. 11. 18. [React] 19. React Query: Fetch / TanStack Query / Axios / DevTools Django DB에서 데이터를 프론트엔드로 가져오기 fetchJavaScript에서 제공하는 내장함수 네트워크 요청을 통해 서버로부터 데이터를 가져오거나 서버에 데이터를 전송하는데 사용 주로 API로부터 JSON 데이터나 HTML 리소스를 가져올 때 많이 사용 django-cors-headers: fetch할 수 있는 사람을 지정 1) 터미널에서 설치: poetry add django-cors-headers2) config > settings.py 의 THIRD_PARTY_APPS 에 'corsheaders' 추가 3) config > settings.py 의 MIDDLEWARE 에 'corsheaders.middleware.CorsMiddleware' 추가 4) config > settings.py.. 2024. 11. 13. [React] 17. FRONT-END SETUP: Router, Not Found Page React Router DOM- React 애플리케이션 내에서 클라이언트 측 라우팅을 구현할 수 있도록 도와주는 라이브러리- 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 URL을 기반으로 서로 다른 컴포넌트와 뷰를 렌더링할 수 있음- React Router는 사용자가 애플리케이션 내에서 네비게이션할 때 페이지를 새로고침하지 않고도 URL 경로에 따라 화면을 전환할 수 있도록 해 줌 Root component 만들기: 앱의 모든 화면의 parent 1) src > components > Root.tsx 파일 생성 2) src > router.tsx 파일 생성 Chakra를 이용하여 간편하게 생성 2024. 11. 2. 이전 1 다음 반응형
