(1) 들어가며

1. 리액트와 스프링 부트를 이용해 프론트엔드와 백엔드를 분리한다면?

* 풀스택 프로젝트에 들어가고자 하는 목적은 '리액트와 스프링 부트를 어떻게 활용할 것인가'이다. 최근 전자정부 프레임워크 4.0 이상부터 스프링 부트와 리액트가 공식적으로 도입되려는 모습을 보이고 있다. 생산성의 향상과 더불어 웹 애플리케이션의 성능 향상에 도움이 되는 프레임워크를 도입하고자 하는 모습은 고무적이라 할 수 있다.

* 그 중에서 리액트는 많은 기능을 제공하지만, 그 자체로 프레임워크는 아니기 때문에 설계의 자유도가 높고 활용하는 라이브러리에 따라 구현 방식도 천차만별로 달라진다. 따라서, 기본 웹 개발에서는 예상하지 못했던 문제점들이 종종 나타나곤 한다(예를 들어 REST API 의 URI 에 따라서 원하는 화면을 보여주거나 새로고침에 대한 애플리케이션의 초기화 문제 등).

* 우리는 리액트를 활용하면서 겪는 문제들의 방법론을 다루어 볼 것인데, 과감하게 이론적인 설명은 줄이고 현실적으로 많이 사용하는 함수형 컴포넌트와 훅스를 이용한 처리, TailWindCSS를 사용하는 빠른 CSS 처리 등 최소한의 시간으로 확장 가능한 리액트 애플리케이션의 구조를 만드는 방식을 설명해 나갈 것이다.

* 스프링 부트는 화면 구성이 하나도 없는 상태에서 제작된다. REST API 방식으로 데이터를 제공하고, 세션이나 쿠키를 제공하지 않기 때문에 최근에 급부상중인 JWT 기술을 통해 인증 처리를 한다. 스프링 시큐리티와 JPA를 활용해서 데이터를 처리하는데 각 단계에서는 Postman을 이용해서 작성된 코드의 결과를 확인하는 방식으로 구현하고 이를 리액트 애플리케이션과 연동하도록 하는 절차를 구성해 볼 것이다.

[요구되는 기술 스택]

1. Java 개발에 어느 정도 익숙하고 JavaScript나 React를 경험해 본 개발자

2. Java의 경우 스프링이나 스프링 부트를 활용해서 개발 경험이 있는 개발자

3. 리액트의 컴포넌트 상태, 속성 등에 대한 실습 경험이 있는 개발자

[프로젝트에서 리액트의 활용]

- TailWind CSS를 이용하는 화면 구성과 레이아웃 설계

- React Router를 사용해서 URI에 따른 화면 분기, 코드 스플리팅

- 함수형 컴포넌트와 훅스(Hooks)를 활용한 상태, 통신, 커스텀 훅스 제작

- Redux Toolkit과 브라우저의 쿠키를 이용한 로그인 상태 처리

- JWT를 사용한 인증 처리와 Access Token/Refresh Token 처리

- 애플리케이션 내에서 카카오 로그인 연동 기능의 구현

[프로젝트에서 스프링 부트의 활용]

- REST 방식의 API 서비스 제작과 예외 처리

- 스프링 시큐리티의 적용과 JWT 인증 처리

- Spring Data JPA를 이용한 데이터베이스 연동

- 파일 업로드 및 썸네일 처리

- AWS 빈즈톡을 이용한 배포