728x90 반응형 공부/프론트9 [React] 페이지 접근 제한 프로젝트를 진행하다보면 페이지 접근을 제한해야 할 때가 있다. 로그인을 한 유저만 페이지에 접근할 수 있게 하거나 특정 역할을 가진 유저만 페이지에 접근할 수 있도록 하는 것이 필요하다. 이번 포스팅에서는 로그인을 한 유저만 메인 페이지에 접속할 수 있고 로그인을 하지 않은 사람이 메인 페이지에 접속하려고 하면 로그인 페이지로 리다이렉트하는 기능을 구현해보려고 한다. 첫 번째 시도 (useEffect)우선 메인 페이지에 접근하려는 사람이 로그인을 했는지 확인하기 위한 api를 생성했다. api/v1/users/myself로 쿠키와 함께 요청을 보냈을 때 상태 코드 200번과 함께 내 정보를 받으면 로그인을 한 사람이고 상태 코드 401번과 함께 권한이 없다는 응답을 받으면 로그인을 하지 않은 상태이다. .. 2024. 7. 14. [React] 리액트에서 public에 이미지 불러오기 리액트에서 public에 존재하는 이미지를 가져오는 과정에서 자잘한 오류들을 겪어서 주의할 점들을 기록해보려고 한다. 리액트에서는 proceses.env.PUBLIC_URL을 통해 public 디렉토리의 경로를 가져올 수 있다. public 디렉토릴에 접근할 때는 process.env.PUBLIC_URL을 사용하는 것이 좋다고 한다. 특히 배포할 때는 루트 경로가 달라질 수도 있는데 process.env.PUBLIC_URL을 사용하면 이러한 경로를 쉽게 관리할 수 있다. process.env.PUBLIC_URL은 .env 파일에다가 우리가 직접 넣어줄 필요가 없다. 그냥 바로 process.env.PUBLIC_URL을 사용하면 된다. 만약 CRA(create-react-app)을 통해 프로젝트를 만들었다.. 2024. 6. 21. [React] redux 사용법 이전 포스팅에서 useReducer와 Context를 활용해서 루트에서 관리하는 여러 상태 값을 자식 컴포넌트에서 사용하는 방법에 대해서 알아보았다.https://growth-coder.tistory.com/272 [React] useReducer와 Context로 상태값 관리리액트에서 상태 값을 관리할 때 useState를 사용해서 쉽게 관리할 수 있다. 그런데 만약 관리해야 할 상태 값이 많아진다면 하나씩 useState를 사용하는 방식은 번거로울 수 있다. useState부터 useReducegrowth-coder.tistory.com이번 포스팅에서는 상태 값을 관리할 때 redux를 사용해보려고 한다. 리덕스는 다음과 같이 단방향 구조로 되어있다. 이제 redux에서 상태 값을 변경하는 과정에 대.. 2024. 4. 26. [React] useReducer와 Context로 상태값 관리 리액트에서 상태 값을 관리할 때 useState를 사용해서 쉽게 관리할 수 있다. 그런데 만약 관리해야 할 상태 값이 많아진다면 하나씩 useState를 사용하는 방식은 번거로울 수 있다. useState부터 useReducer와 Context API를 사용하는 과정을 과목을 선택하고 정원을 조절하는 프로그램을 만들어보면서 이해해보자. useState + 객체 사용 먼저 상태 값을 객체로 정의해서 useState를 사용하는 방식이 있다. import React, {useState} from 'react' function App() { return ( ) } function Subject(){ const [subject, setSubject] = useState({name : "math", students.. 2024. 4. 22. 이전 1 2 3 다음 728x90 반응형
