728x90 728x90 Frontend/React30 React 인증 방식과 개념 React 인증 방식과 개념 인증이 작동하는 원리를 이해하려면 인증의 필요성부터 이해해야 한다. 웹사이트에 인증이 필요한 이유는 보호해야 할 정보가 있기 때문이며 모든 사이트 이용자나 방문자가 모든 정보에 접근 권한을 가져선 안 되니 인증이 필요하다. 페이지 자체에도 접근 제한을 걸어야겠지만 인증된 사용자가 보낸 요청이 아니라면 API 엔드포인트로 전송된 요청이 성공할 수 없게 API 엔드포인트에도 접근 제한을 걸어야 한다. API 엔드포인트에 접근 제한을 걸지 않으면 엔드포인트의 URL을 아는 사용자나 요청을 보내 다른 사람의 데이터를 바꿀 수 있기 때문이다. 일반적으로 인증은 2단계 절차를 거치는데 1단계는 사용자가 접근 허가를 받는 것이고 2단계는 접근 허가를 통해서 보호된 리소스에 요청을 보내는 .. 2023. 2. 22. react router v6 변경 사항 react router v6 변경 사항 Switch → Routes element 시작 경로 일치 최적의 경로를 찾음(순서 상관 없음) NavLink activeClassName Abount navData.active ? classes.active : '' } to="/abount"> Abount Redirect → Navigate 중첩 라우팅 사용 시 Routes로 감싸고 상대경로 사용 자식 요소로 중첩 라우팅 사용 Outlet으로 라우팅 위치 설정 const About = ()=> { return( About page ) } useNavigate() const history = useHistory(); history.replace("/"); const navigate = useNavigate(); n.. 2023. 2. 21. React 동적 라우팅과 중첩 라우팅 React 동적 라우팅과 중첩 라우팅 링크를 통해서 상세페이지로 이동한다면 각 페이지마다 다른 데이터를 보여줘야 할 것이다. Route를 통해서 경로를 새로 지정 해주어도 되지만 모든 상세 페이지마다 만들 수는 없다. 여기서 또 다른 라우트를 사용하는데 동적 라우트이다. 경로를 이렇게 /product-detail을 정의하는 대신 :를 사용하고 원하는 식별자를 입력한다. /product detail/:productId 처럼 정의할 수 있다. 이 동적 경로 기능을 활용하려면 URL에 입력된 구체적인 값에 액세스해야 한다. 그러기 위해서 react-router-dom에서 useParams를 import 한다. UseParams를 호출하면 params 객체를 반환하고 key-value 쌍으로 param을 얻을 .. 2023. 2. 19. react-router Link와 NavLink 사용 방법 react-router Link와 NavLink 사용 방법 link 라우팅을 사용하면서 URL을 수동으로 변경하는 방법으로만 해당 페이지를 탐색하지는 않는다. 우리가 클릭할 수 있는 링크를 페이지에 넣고 이동하는 것이 일반적이다. 일반적으로 링크를 사용할 때 아래와 같이 a태그를 이용한다. const MainHeader = () => { return ( About Products ); }; export default MainHeader; 실제로 두 페이지 사이를 탐색하지만 이는 새 페이지를 로드한다. 링크 중 하나를 클릭할 때마다 여기에 이 HTML 파일이 새로 로드되며 이 애플리케이션에서 가질 수 있는 애플리케이션 상태를 잃게 되는 것이다. 이는 SPA를 구축한다는 개념에 반대되는 내용이고 최적의 사용.. 2023. 2. 18. 이전 1 2 3 4 5 ··· 8 다음 728x90 728x90
