토이 프로젝트 일지 6 : React/SpringBoot 기술 스택으로 코딩 테스트 서비스 만들기
그림 1. 프로그램 동작 화면 1. 시작 계기 대학교 4학년쯤에 취업 시기가 다가오면서 우연히 플랫폼 비즈니스 제1기 교육생 모집 관련 공고를 보게 되었는데 React, SpringBoot부터 시작해서 이벤트 스토밍, Kafka, Kubernetes 등 정말 많은 걸 다루는 것을 보고 흥미가 생겨서 지원하게 되었다. 들어보니 새로운 내용들이 많아서 즐겁게 들을 수 있었고 그쪽에서 LV1 개인 역량 평가라는 것을 했는데 주제가 LV1 교육에서 들었던 내용을 기반으로 프로그램을 작성해 보는 것이다. 이왕이면 LV1 평가뿐만 아니라 차후에 취업 포트폴리오에도 쓸 수 있게 제대로 만들어 보자는 마음으로 프로그램을 작성하였고, 다음과 같이 관련 일지를 작성하게 되었다. 2. 프로젝트 개요 가. 프로젝트 소개 1. 프로젝트 유형: 개인 토이 프로젝트 2. 구현 서비스: 백준, 코드포스와 유사한 코딩 테스트 서비스 3. 개발 환경: VS Code 4. 활용 기술 프론트엔드: React, MUI 백엔드: Spring-Boot, JPA, MySQL, Docker, JWT 5. 개발 기간: 2023.9.27 ~ 2023.11.12 나. 프로젝트 목표 React, Spring-Boot, Docker에 이르는 기술 스택들을 조화롭게 활용해서 실전에 가까운 서비스를 완성한다. 3. 프로젝트 구현 가. RSA 기반 JWT를 이용한 인증 로직 구현하기 그림 2. 로그인 페이지 그림 3. JWT 로그인 시퀸스 그래프 JWT를 이용한 로그인 및 인증 과정을 구현하는 것은 쉬운 일은 아니었다. Nest.js를 이용했을 때는 단순하게 JWT 로직 자체만 집중하면 되었는데 Spring인 경우에는 Spring Security와 연계해서 하려다 보니까 Spring Security에 있는 기존 로직을 상당히 수정하고 커스터마이징해야 했기 때문이다. 각 객체의 역할은 다음과 같다. * FrontEnd LocalStorage: React 컨텍스트에 저장을 ...