[java] Java JHipster와 리소스 번들 관리

30 Nov 2023

java

JHipster는 Java 개발자들이 현대적이고 강력한 웹 응용 프로그램을 빠르게 구축할 수 있도록 도와주는 오픈 소스 개발 도구입니다. JHipster를 사용하면 Spring Boot와 AngularJS, React, Vue.js 등의 프론트 엔드 프레임워크를 사용하여 웹 애플리케이션을 개발할 수 있습니다.

JHipster 프로젝트에서는 다양한 종류의 리소스(스타일 시트, 자바스크립트 파일, 이미지 등)를 관리해야 할 수 있습니다. 이러한 리소스를 효율적으로 관리하고 번들로 묶어서 배포하는 것은 웹 애플리케이션의 성능과 유지 보수성에 중요한 역할을 합니다.

리소스 번들링 기초

리소스 번들링은 여러 파일을 하나의 번들로 묶는 작업입니다. 번들링을 통해 파일 간의 의존성을 해결하고, 불필요한 네트워크 요청을 줄이며, 파일 크기를 감소시켜 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.

Java JHipster에서는 Webpack을 사용하여 리소스 번들링을 제공합니다. Webpack은 모듈 번들러로, JavaScript 파일뿐만 아니라 CSS, 이미지 등의 리소스도 번들로 묶을 수 있습니다.

리소스 관리를 위한 설정

Java JHipster 프로젝트에서 리소스 번들링을 설정하려면 다음 단계를 따라야 합니다.

Webpack 설정 파일(webpack.common.js)에서 번들링에 포함할 리소스를 지정합니다. 이 파일은 src/main/webapp 디렉토리에 있습니다. ```java const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

module.exports = { // … plugins: [ new CopyWebpackPlugin([ { from: ‘./src/main/webapp/content/*/’, to: ‘content’ } ]) ] // … };

위 설정은 `content` 디렉토리 내의 모든 파일을 번들에 포함시킵니다.

2. 번들링된 리소스를 웹 애플리케이션에 적용하기 위해 HTML 파일에 다음과 같이 태그를 추가합니다.
```html
<!-- build:js({.tmp,src/main/webapp}) app/vendor.js -->
<!-- endbuild -->
<!-- build:js({.tmp,src/main/webapp}) app/app.js -->
<!-- endbuild -->

위 태그들은 Webpack에 의해 생성된 번들 파일을 자동으로 로드합니다.

번들링된 리소스 배포

Java JHipster에서는 Maven을 사용하여 번들링된 리소스를 배포할 수 있습니다. Maven의 frontend-maven-plugin 플러그인을 사용하면 프로젝트 빌드 시 Webpack을 실행하여 리소스 번들링을 자동으로 수행할 수 있습니다.

pom.xml 파일에 다음과 같은 설정을 추가합니다.

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.8.0</version>
  <configuration>
    <workingDirectory>src/main/webapp</workingDirectory>
    <installDirectory>target/www</installDirectory>
  </configuration>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v10.16.3</nodeVersion>
        <npmVersion>6.9.0</npmVersion>
      </configuration>
    </execution>
    <execution>
      <id>yarn install</id>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
    <execution>
      <id>webpack build</id>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>run webpack:prod</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

위 설정은 Maven 빌드 시 src/main/webapp 디렉토리에서 Webpack을 실행하여 번들링된 리소스를 생성합니다. 생성된 리소스는 target/www 디렉토리에 저장됩니다.

이제 Maven을 실행하여 리소스를 번들링하고 배포할 수 있습니다.

결론

Java JHipster를 사용하여 웹 애플리케이션을 개발할 때 리소스 번들링은 중요한 과정입니다. Webpack을 사용하여 리소스를 효율적으로 관리하고 Maven을 통해 배포하는 방법을 익혀두면 애플리케이션의 성능과 유지 보수성을 향상시킬 수 있습니다.

리소스 번들링 기초

리소스 관리를 위한 설정

번들링된 리소스 배포

결론

참고 자료