Spring boot, react 이용한 블로그 개발 (1) - 프로젝트 구조 설정

블로그 애플리케이션을 개발하기에 앞서 먼저 기본 프로젝트 구조 틀을 잡고 진행을 하겠다. 

일반적으로 스프링과 리액트를 이용하여 싱글 페이지 웹 애플리케이션을 개발할 때 크게 2가지 방법이 있다. 

첫 번째는 하나의 스프링 프로젝트로 구성하고 해당 프로젝트 안에 프론트엔드 영역을 설정하는 것이다.

이렇게 하나의 레파지토리, IDE를 이용해서 개발을 진행하고 maven 등의 플러그인을 통해 빌드를 하기 때문에 한명의 개발자가 풀스택으로 빠르게 개발할 때 편리하다. 

두 번째는 프론트와 백엔드의 프로젝트를 분리하고 각각 별도로 개발을 진행하는 방법이다.

이 경우에는 백엔드와 프론트를 프록시를 이용하여 연동하고 빌드는 개별적으로 한다.

프로젝트 규모가 커지고 개발자의 롤이 명확하다면 이와 같이 프로젝트를 분리하는 것이 좋다.

이번 프로젝트에서는 프론트엔드와 백엔드를 명확히 나눠서 하기 위해 후자의 방법을 선택하겠다.

아래와 같이 blog 프로젝트 밑에 프론트와 백엔드 개별 디렉토리를 생성하고 그 하위 디렉토리에 각각의 코드를 작성한다.

 

blog ( 프로젝트 루트)

- blog-backend (백엔드 프로젝트 루트)

- blog-frontend (프론트엔드 프로젝트 루트)

blog-backend ( base package 이하)

: 백엔드 스프링 부트 애플리케이션의 패키지 구조이다.

- api : 스프링 MVC REST 컨트롤러

- common : 예외처리, 유틸 등

- config : 스프링 프레임워크 관련 설정 패키지

- model : 도메인 오브젝트 관련 패키지

- repository : 스프링 데이터 JPA 관련 설정 패키지

- service : 서비스 레이어 패키지

- security : 스프링 시큐리티, jwt 관련 패키지

- blogApplication.java : 메인 엔트리 포인트

blog-frontend ( create-react-app 이용 src 이하)

: 프론트엔드 react 프로젝트의 디렉토리 구조이다.

- components : 프레젠테이션 컴포넌트

- config : 설정 관련

- containers : 컨테이너 컴포넌트

- lib : 백엔드 API 연동

- pages : 프론트엔드 페이지별 컴포넌트 설정

- store : 리덕스 기반의 상태 관리

- styles : scss 기반 스타일링 설정 코드

- index.js : 메인 엔트리 포인트

pom.xml 설정

- 자바는 11버전을 사용하고 spring boot 버전은 2.1.0을 이용한다. (현재는 2.1.0 GA버전이 나오기 전이라 2.1.0.M4버전을 사용한 것을 볼 수 있다.)

WAS는 tomcat이 아닌 경량의 서블릿 컨테이너인 undertow를 이용할 것이다. 이를 위해 spring-boot-starter-web 디펜던시에서 tomcat을 제거한 것을 볼 수 있다.

<name>blog</name>
<description>Blog project for Spring Boot</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.0.M4</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>11</java.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-aop</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <exclusions>
            <exclusion>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-undertow</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>

프로젝트 실행

- 다음은 위에서 설정한 프로젝트가 정상적으로 실행되는지 간단하게 RestController를 만들고 웹페이지에서 /hi 경로에 접속해보자. 

@RestController
@SpringBootApplication
public class BlogApplication {

    @GetMapping(value = "/hi")
    public String sayHello() {
        return "hello world";
    }

    public static void main(String[] args) {
        SpringApplication.run(BlogApplication.class, args);
    }
}

프로젝트 github

: https://github.com/keumtae-kim/spring-boot-react-blog