프로젝트를 진행하다보면 페이지 접근을 제한해야 할 때가 있다. 로그인을 한 유저만 페이지에 접근할 수 있게 하거나 특정 역할을 가진 유저만 페이지에 접근할 수 있도록 하는 것이 필요하다. 이번 포스팅에서는 로그인을 한 유저만 메인 페이지에 접속할 수 있고 로그인을 하지 않은 사람이 메인 페이지에 접속하려고 하면 로그인 페이지로 리다이렉트하는 기능을 구현해보려고 한다. 첫 번째 시도 (useEffect)우선 메인 페이지에 접근하려는 사람이 로그인을 했는지 확인하기 위한 api를 생성했다. api/v1/users/myself로 쿠키와 함께 요청을 보냈을 때 상태 코드 200번과 함께 내 정보를 받으면 로그인을 한 사람이고 상태 코드 401번과 함께 권한이 없다는 응답을 받으면 로그인을 하지 않은 상태이다. ..

리액트에서 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)을 통해 프로젝트를 만들었다..

이전 포스팅에서 useReducer와 Context를 활용해서 루트에서 관리하는 여러 상태 값을 자식 컴포넌트에서 사용하는 방법에 대해서 알아보았다.https://growth-coder.tistory.com/272 [React] useReducer와 Context로 상태값 관리리액트에서 상태 값을 관리할 때 useState를 사용해서 쉽게 관리할 수 있다. 그런데 만약 관리해야 할 상태 값이 많아진다면 하나씩 useState를 사용하는 방식은 번거로울 수 있다. useState부터 useReducegrowth-coder.tistory.com이번 포스팅에서는 상태 값을 관리할 때 redux를 사용해보려고 한다. 리덕스는 다음과 같이 단방향 구조로 되어있다. 이제 redux에서 상태 값을 변경하는 과정에 대..

리액트에서 상태 값을 관리할 때 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..

이번에 유저들의 메시지를 테이블 안에 구현하는 와중에 답글 기능이 필요해서 구현 방법을 정리해보려고 한다. 답글 기능을 구현할 때 메시지들을 단순히 ul 안의 li로 구성한다거나 div로 구현한다면 간단하게 구현할 수 있겠지만 테이블 형식으로 메시지에 대한 정보를 보여줘야 했기 때문에 table을 사용하여 구현하였다. 다음은 내가 구현한 코드이다. table{ border: 1px solid black; border-spacing: 0px; border-radius: 12px; } .hidden{ display: none; } 닉네임 작성 내용 답글 개구리 포스팅 재미있게 봤습니다. 답글 강아지 많은 도움이 되었습니다. 답글 실제로는 데이터를 받아와서 테이블을 동적으로 만들어주지만 이번 포스팅의 목적이 ..

이번 포스팅에서는 테이블에 대해 알아보고 테이블을 꾸며보려고 한다. 우선 간단한 테이블을 만들어보자. 학번 이름 나이 111 김철수 22 222 김영희 23 평범한 테이블이 만들어졌다. 테이블을 사용할 때 주의할 점은 테이블은 기본적으로 셀 마다 거리가 존재한다. table, th, td 태그에 border: 1px solid black;를 입혀보자. table{ border: 1px solid black; } td{ border: 1px solid black; } th{ border: 1px solid black; } 만약 이 셀 간 간격을 없애고 싶다면 border-collapse를 collapse로 주면 된다. table{ border: 1px solid black; border-collapse: ..