react4 [React] router v6에서 JWT 인증과 Private 컴포넌트를 통한 화면 접근 보안 구현하기 토이프로젝트 진행 중 서버에서 JWT 인증을 구축한 뒤, 로그인한 경우에만(클라이언트가 정상적인 access_token을 가진 경우에만) 특정 화면에 접근할 수 있도록 하려면 어떻게 해야 할지 고민하게 되었다. 😿 필자의 경우 별도의 Private 컴포넌트를 생성해서 접근하는 순간 자동으로 서버에 access 토큰 인증 요청을 하게 되고, 인증에 실패한 경우는 클라이언트가 해당 화면에 접근하지 못하도록 구현했다. 방식은 간단하다. Route 컴포넌트 element에 실제 접근하려는 컴포넌트 대신 Private 컴포넌트를 전달하고, Private에 컴포넌트에 실제 접근하려는 컴포넌트를 속성으로 넘기면 된다. [TO-BE] const App = () => { return ( ); }; 기존에는 따로 토큰을 .. 2023. 2. 25. React로 가성비 Pagination 만들기 (with. react-js-pagination) 토이 프로젝트 중 React + Spring 조합으로 개발하는 과정에서 Pagination이 필요해서 구현하다가 직접 만든 거 말고 기존에 있는 라이브러리를 사용해 보는 건 어떨까🤔 라는 생각이 들어서 찾아보게 되었다. 그렇게 react-js-pagination라는 라이브러리를 활용하여 Pagination을 구현하였고 관련 내용을 공유하고자 한다. 🐕 0. 준비 React 프로젝트 Terminal에 하기 명령을 입력하여 react-js-pagination 라이브러리를 받는다. npm i react-js-pagination 🐕 1. Spring 서버 페이징 처리 Controller @GetMapping("/api/study") public ResponseEntity getPublicStudyList(@Pa.. 2023. 2. 12. JavaScript Date 타입을 Java LocalDateTime으로 전달하기 Spring과 React를 활용해서 토이프로젝트 개발 진행 중 자바스크립트의 Date 타입을 자바의 LocalDateTime 형태로 어떻게 전달할 수 있을지 고민하였고, 찾아본 결과 date-format 라이브러리를 활용하면 쉽게 전달할 수 있다는 것을 알게되었다. date-format 라이브러리의 활용 방법을 토이프로젝트의 일부 코드를 통해 공유하고자 한다. [React] client.js import axios from "axios"; const client = axios.create(); export default client; api.js import client from './client'; export const createSchedule = ( memberId, name, startDate,.. 2023. 2. 1. Proxy 설정을 통해 로컬에서 개발중인 React와 서버 통신 설정하기 * 문제점 개발중인 프론트 클라이언트 서버(http://localhost:3000)과 백엔드 서버(http://localhost:8080)간 통신이 되지 않았다. * 원인 백엔드 서버는 8080 포트, 리액트 개발 서버는 3000포트로 열려 있기 때문에 별도의 설정이 없이 API를 호출하려고 하면 CORS(Cross Origin Request) 오류가 발생한다. 해당 오류는 네트워크 요청을할 때 주소가 다른 경우에 발생하며, 일반적인 해결을 위해서는 백엔드 쪽에서도 API를 호출할 수 있도록 서버 쪽 코드를 수정해야 한다. 하지만 프로젝트를 완성했을 때 만약 동일한 호스트에서 서비스를 제공할 생각이라면 이러한 설정은 사실 불필요한 설정이다. * 해결 방법 서버쪽 API 수정이 아닌 Proxy 설정을 통해.. 2023. 1. 8. 이전 1 다음
