시간표 페이지를 비롯해 일부 페이지는 DB의 사용자 데이터를 기반으로 동작한다. 즉, 사용자가 저장되어 있지 않으면 이 페이지를 사용하는데 문제가 생긴다. 이미 SchedulePage.js 내부에서 사용자 정보가 확인되지 않았을 경우에 대한 예외처리가 되어 있지만. 그럼에도 관리와 사용자 편의를 위해 로그인해야만 접근할 수 있도록 PrivateRoute를 구현했다. PrivateRoute로 감싸진 라우트에 접근 시, 로그인이 필요함을 alert하고 로그인 페이지로 이동시킨다.// src/main/frontend/src/components/PrivateRoute.jsimport React from 'react';import { Navigate } from 'react-router-dom';import { ..

로그인, 로그아웃, 세션 유지까지 구현이 끝났으니 이제 본격적으로 시간표 페이지를 구성한다. 일전에 테스트를 위한 subjectInfoPage까지 구성했는데, 이 페이지는 개설과목정보를 한눈에 보는 페이지로 남겨두었다.  css를 살짝 수정해. 중앙페이지 중앙에 배치하도록 하였고, 추후 필요에 따라 검색 기능 등을 추가할 수 있을 것 같다.  다음으로 시간표 페이지인데, 아래 이미지처럼 구상하였다. 검색창을 통해 과목명을 검색하면 검색결과가 아래 테이블에 나타난다. 담기 버튼을 클릭하면 그 아래 테이블이 추가되며, 이 테이블들은 과목마다 별도로 생성된다. 그리고 체크박스로 선택하면 오른쪽 공간의 시간표에 배치되는 구조이다. 이렇게 미리 관심있는 과목을 담아두고, 과목마다 즉각적으로 시간표에 반영하여 시간..

네비게이션 바의 login 부분을 로그인한 계정의 정보를 표기하는 기능과 로그아웃 기능을 추가하고자 한다. 기존 HomePage.js에서 로그인한 정보를 표기하고 있는데, 이를 네비게이션 바에서 표기하도록 하는 것이다.  로그인 이후에는 로그아웃 전에는 로그인페이지로 돌아갈 수 없게하는 기능도 구현해보려 한다.  기존의 HomePage.js에서는 다음과 같은 코드를 통해 로그인 정보를 불러왔다.// 사용자 정보를 가져오는 함수const fetchUserInfo = async () => { try { const response = await axios.get('http://localhost:8080/oauth/user-info'); setUserInfo(response.dat..

기존의 NavBar은 단순히 페이지 상단에 링크만 추가했는데, 이 NavBar을 좌측에 수직으로 배치하고, 아이콘 추가, 로그인 로그아웃 추가, 그리고 로그인 시 로그인 링크 대신 회원정보를 표기하도록 구현하려 한다. 그런데 쓰다보니 글이 좀 길어지는 느낌이라 이 포스트에서는 UI 구현까지만 하고, 다음 포스트에서 회원정보를 네비게이션 바에 표기및 로그아웃을 구현해보려 한다. 우선 아이콘과 함께 링크를 표기하기 위해 react-icons를 설치했다. packages.json"react-icons": "^5.2.1", 리액트에서 제공하는 아이콘들로, 아래 참고자료에 링크를 첨부하였다. 그리고 다음과 같이 아이콘들을 링크 텍스트 옆에 추가했다.  나중에 텍스트도 한글로 통일해야지. ..

로그인을 유지하는데에는 두가지 방법이 있다. 첫번째는 세션 기반의 인증, 두번째는 JWT 기반의 인증이다.  세션 기반 인증과 JWT 기반 인증에 대해 간략히 정리해보자. 세션 기반 인증작동 원리사용자가 로그인: 사용자가 로그인하면, 서버는 사용자에 대한 세션을 생성하고, 세션 ID를 클라이언트에게 전달.세션 ID 저장: 세션 ID는 클라이언트의 쿠키에 저장.요청 시 세션 ID 전송: 이후의 모든 요청에서 클라이언트는 이 세션 ID를 쿠키를 통해 서버로 전송.서버에서 세션 관리: 서버는 요청에 포함된 세션 ID를 기반으로 세션 데이터를 확인하고, 사용자 정보를 조회.특징상태 유지: 서버는 로그인 상태를 세션 데이터로 유지.서버에 상태 저장: 서버는 각 사용자의 세션 데이터를 저장하고 관리.세션 무효화 가..

로그인이 제대로 되었는지 테스트를 위해 작성했던 리디렉션페이지들로 이동하지 않고, 로그인 직후 HomePage로 이동해 로그인한 회원 정보를 표기해보겠다.  우선  LoginPage.js를 수정한다.// src/main/frontend/src/pages/HomePage.jsimport React, { useEffect, useState } from 'react';import { useLocation, useNavigate } from 'react-router-dom';import axios from 'axios';function HomePage() { const [hello, setHello] = useState(''); const location = useLocation(); const..