스프링 부트는 백엔드 서버 애플리케이션을 구축하는 데 사용되는 매우 강력한 도구입니다. 그러나 대부분의 경우 프론트엔드와 백엔드가 함께 작동해야 하므로 프론트엔드와 함께 작업하기 위한 빌드 도구를 연동하는 것이 중요합니다. 이 블로그 포스트에서는 스프링 부트 프로젝트에서 주로 사용되는 프론트엔드 빌드 도구와의 연동 방법에 대해 알아보겠습니다.

1. npm 또는 Yarn 설치

스프링 부트 프로젝트에 프론트엔드 빌드 도구를 연동하려면 먼저 프로젝트 디렉토리에 npm 또는 Yarn을 설치해야 합니다. 이 두 도구는 프론트엔드 의존성 관리와 빌드를 위해 널리 사용됩니다.

npm install

또는

yarn install

위 명령어를 사용하여 프로젝트 디렉토리에 npm 또는 Yarn을 설치할 수 있습니다.

2. 프론트엔드 빌드 스크립트 추가

package.json 파일에 빌드 스크립트를 추가해야 합니다. 스프링 부트에서는 기본적으로 build 스크립트를 실행하므로 해당 스크립트에 프론트엔드 빌드 명령어를 추가해야 합니다.

예를 들어, package.json 파일의 스크립트 섹션에 다음과 같이 "build": "yarn build"와 같은 스크립트를 추가할 수 있습니다.

"scripts": {
  "start": "react-scripts start",
  "build": "yarn build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

위와 같이 build 명령어에 원하는 프론트엔드 빌드 명령어를 추가합니다.

3. 스프링 부트와 프론트엔드 빌드 통합

마지막으로, 스프링 부트 애플리케이션에서 프론트엔드 빌드를 실행할 수 있도록 스크립트를 추가해야 합니다. 이를 위해 pom.xml 파일에 Maven 플러그인을 추가할 수 있습니다.

<plugins>
  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.10.0</version>
    <configuration>
      <workingDirectory>src/main/frontend</workingDirectory>
    </configuration>
    <executions>
      <execution>
        <id>install node and yarn</id>
        <goals>
          <goal>install-node-and-yarn</goal>
        </goals>
      </execution>
      <execution>
        <id>yarn build</id>
        <goals>
          <goal>yarn</goal>
          <arguments>build</arguments>
        </goals>
      </execution>
    </executions>
  </plugin>
</plugins>

위와 같이 frontend-maven-plugin을 추가하고 프론트엔드 빌드에 필요한 설정을 구성합니다.

이제, 스프링 부트가 실행될 때마다 프론트엔드 빌드가 자동으로 수행될 것입니다.

프론트엔드를 스프링 부트와 통합하는 방법에 대한 간략한 개요를 살펴보았습니다. 향후 프로젝트에서 스프링 부트와 프론트엔드를 함께 사용하게 될 때 유용하리라 생각합니다.

더 많은 정보는 공식 스프링 부트 문서를 참조하시기 바랍니다.