개발/React + Spring Boot 게시판 만들기 5

Spring Security + JWT를 이용한 로그인 구현

게시판 웹페이지를 구현하려면 아무래도 로그인을 구현해야겠다는 생각이 들어 웹의 로그인 방법에 대해 알아봤다. 대표적으로 세가지 정도가 쓰인다. Session JWT OAuth Session 서버에 클라이언트의 정보를 기록해두는 방법이다. 클라이언트가 로그인 인증을 통과하면 클라이언트의 세션 정보를 기록해두고, 이후 클라이언트의 요청이 발생하면 클라이언트가 가지고 있는 세션정보(일반적으로 브라우저 쿠키에)를 대조하여 처리하게 된다. JWT 클라이언트 사용자 정보를 JSON에 담은 token을 발급하는 방법이다. 클라이언트에서 서버로 요청을 보낼 때 발급받아놓은 token을 전달하고 서버는 전달받은 token의 유효성을 확인하여 통과하면 요청을 처리해준다. OAuth (OpenID Authentication..

Back-end 개발 시작 DB 접속

이 프로젝트는 Back-end와 Front-end project 파일들을 개별로 관리하며 개발할 것이다. Back-end에서는 Front-end에서 REST API를 통해 자료를 요청하고 등록/수정/삭제를 할 수 있도록 할 예정이다. application.properties #database connection 관련 property #connection pool의 max size spring.datasource.hikari.maximum-pool-size=4 #jdbc 연결 주소 spring.datasource.url=jdbc:postgresql://hostname:port/databasename #DB user name spring.datasource.username=username #DB user p..

DB 구성하기

PostgreSQL의 설치는 공식 홈페이지(https://www.postgresql.org/)의 인스톨러를 받아 설치해서 개발 PC에서 사용할 수 있으나, 실제 외부 액세스가 가능하도록 하는게 목적인 관계롤 DBMS를 보유중인 NAS에 설치하기로 했다. 보유중인 NAS는 시놀로지의 DS920+로 DSM 7 버전을 사용한다. 해당 NAS에 Docker를 통해 PostgreSQL DBMS를 올리도록 한다. Docker 설치 DSM > 패키지 센터 > Docker 검색 > 설치 PostgreSQL 이미지 설치 설치된 Docker를 실행하여 레지스트리 tab에서 postgres를 검색하고 공식 이미지를 다운로드한다. 컨테이너 생성하기 다운로드한 이미지로 컨테이너를 생성한다. 고급 설정을 열어 환경 탭에 추가 버..

Back-end 구성하기

Spring Boot 프로젝트는 간편하게 작업할 수 있도록 도와주는 Spring Initializer를 통해 구성한다. (https://start.spring.io/) Dependancies는 Spring Web, Lombok, Spring Data JPA, PostgreSQL Driver 정도로 간단히 추가했다. Project는 Gradle을 사용할 예정이고, Java는 Temurin의 OpenJDK 17.0.7을 사용했다. IDE 불러오기 Project를 구성하고 IntelliJ IDEA에서 불러오면 JDK 버전 관련 오류가 발생하는데, 프로젝트의 설정을 변경해준다. 이후 정상적으로 Build 된다.

게시판 Project 시작

웹을 공부하면서 구상했던 짤방 저장소 웹페이지를 만들어보려고 한다. 구성은 다음과 같다 Back-end : Spring Boot 3.0.6 Front-end : React RDBMS : PostgreSQL File Server : 보유중인 NAS Front-end에서 사용할 Library들은 코딩애플의 React 강의와 구글링으로 검색한 여러 방법을 섞어서 사용할 예정이다. React-Router React-Bootstrap Styled components Immutable Open Color Axios Reduxjs/Toolkit