728x90 반응형 SMALL 리액트34 로그인(JWT, 전체 개념) 토큰토큰이 왜 필요할까요?HTTP의 stateless 특성 때문에 사용자가 로그인 상태를 지속적으로 유지할 수 없음.즉, 사용자가 로그인을 한 후에도 마이페이지와 같이 로그인이 필요한 페이지에 접근할 때마다 재로그인이 필요한데 이를 해결하기 위해 토큰이 사용데이터 전달: 특정 정보를 안전하게 전달하기 위해 사용 식별: 사용자나 기기를 식별하는 데 필수 JWT란Jason Web Token의 약자이다. 모바일 앱이나 웹에서 사용자 인증(Authentication)을 수행할 때 사용하는 암호화된 토큰이다. 사용자의 정보 등을 암호화하여 사용자 정보가 필요한 API를 호출할 때, 해당 토큰을 보내주면 백엔드에서 그 토큰을 검증(verity)하는 과정을 거친다. 그 후 response해주는 것이다로그인 과정: 회.. 2025. 4. 11. GET,POST,PUT,DELETE Axios는 JavaScript에서 HTTP 요청을 처리하기 위한 인기 있는 라이브러리로, Fetch API보다 더 많은 기능과 편리한 문법을 제공 1. GET 요청: 데이터를 가져오는 요청import axios from 'axios';const fetchData = async () => { try { const response = await axios.get('', { params: { api_key: 'YOUR_API_KEY', language: 'ko-KR', }, }); console.log(response.data); // 가져온 데이터 출력 } catch (error) { console.error('Error fetching .. 2025. 4. 3. useLocation useLocation 훅은 React Router에서 제공하는 훅으로, 현재의 위치(location) 객체를 가져오는 데 사용이 객체는 URL, 쿼리 파라미터 및 상태와 같은 정보가 포함되어 있음주로 라우팅과 관련된 정보에 접근하고, 특정 URL에 따라 컴포넌트를 조건부로 렌더링하거나 동작을 수행하는 데 유용1. useLocation의 기본 사용법1.1. 임포트먼저, useLocation 훅을 사용할 컴포넌트에서 임포트import { useLocation } from 'react-router-dom';1.2. 사용 예시import React from 'react';import { useLocation } from 'react-router-dom';const LocationDisplay = () => { .. 2025. 3. 31. replace : true 1. replace: false (기본값)navigate('/some-path'); // replace: false가 기본값새로운 경로를 히스토리 스택에 추가뒤로 가기 버튼을 누르면 이전 페이지로 돌아갈 수 있음히스토리가 계속 쌓임→ 히스토리가 쌓인다는 것은 브라우저의 뒤로가기/앞으로가기를 했을 때 방문했던 모든 페이지를 순서대로 이동할 수 있다는 의미 2. replace: truenavigate('/some-path', { replace: true });현재 경로를 새로운 경로로 대체현재 페이지의 히스토리를 새 페이지로 교체뒤로 가기 버튼을 누르면 현재 페이지 이전의 페이지로 이동 사용 예시// 인터뷰 완료 후 결과 페이지로 이동navigate(`/Person/${projectId}`, { rep.. 2025. 3. 31. props로 함수 전달하기/자식에서 사용하기 props로 함수 전달하기(매개변수x)부모 컴포넌트import React from "react";import Child from "./Child";const Parent = () => { // props로 전달할 함수 const testFunc = () => { console.log("addArticle 함수 호출"); }; return ;};export default Parent;자식 컴포넌트import React from "react";const Child = ({ propsFunc }) => { return ( // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출 Add Article );};export default Child; props로 함수 전.. 2025. 3. 28. state통해 데이터 전달 React Router를 사용하여 컴포넌트 간에 state를 통해 데이터를 전달하는 방법이 방법은 주로 페이지 간의 데이터 전송에 유용. 1. 데이터 전달데이터를 전달할 컴포넌트: navigate 함수를 사용하여 다른 페이지로 이동할 때 state를 함께 전달.navigate 함수는 두 개의 인자를 받을 수 있다 :첫 번째 인자는 이동할 경로.두 번째 인자는 선택적인 객체로, state를 포함할 수 있다.// 예: OrganismProjectItem.jsxconst handleClick = async () => { if (onClick) { onClick(); } else if (isNoData) { navigate("/ProjectCreate"); } else { // 프로젝트 데.. 2025. 3. 24. 이전 1 2 3 4 ··· 6 다음 728x90 반응형 LIST