728x90 728x90 전체 글153 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. React 라우팅 개념과 사용 방법 라우팅이란? 라우팅이란 URL의 여러 경로로 서로 다른 페이지를 로드할 수 있는 기능이다. 웹사이트는 하나의 특정 기능에 대해서 다른 경로를 가지는 다른 페이지를 로드하므로 URL이 변경되면 페이지에 보이는 콘텐츠가 변경된다. 이처럼 호출하려면 다른 페이지가 있으며 각 페이지에는 자체 URL 또는 도메인 뒤에 고유한 경로가 있어야 하고 경로가 변경되면 페이지의 콘텐츠도 변경되어야한다. 리액트로 작업하지 않을 때는 HTML 파일을 다시 보내는 서버가 있고 서버에 다른 HTML 파일을 저장하거나 해당 파일을 서버에서 동적으로 생성하여 콘텐츠를 보여준다. 이 방식은 URL에 대한 요청이 오면 다른 HTML 페이지가 클라이언트로 다시 전송되고 이 페이지는 브라우저에서 렌더링 된다. 즉, URL을 변경할 때마다 .. 2023. 2. 17. Redux 사용 시 주의사항 Redux 사용 시 주의사항 state 업데이트 Redux가 기존의 state를 새로운 state로 대체하기 위해서 새로운 객체인 새 snapshot을 항상 반환해야 한다. 이전 state를 덮어쓰기 때문에 state를 업데이트할 때는 업데이트 하려는 state 외에 다른 state를 설정해야한다. 여기서 왜 state에 직접 접근하여 업데이트하지않고 새로운 상태로 반환해야하는지 의문이 생길 수 있다. 만약 아래와 같이 코드를 작성한다면 작동이 될 것이다. 하지만 이것이 작동되는 것처럼 보이지만 잘못된 것이며 절대 기존의 state를 변형해서는 안된다. 항상 새로운 state 객체를 반환하여 재정의한다. if (action.type === 'increment') { state.counter++; retu.. 2023. 2. 15. 이전 1 ··· 17 18 19 20 21 22 23 ··· 26 다음 728x90 728x90
