Colin's Blog
[java] Java JHipster와 Angular의 통합

Java JHipster는 Java 기반의 웹 애플리케이션을 빠르게 구축하기 위한 오픈 소스 프레임워크입니다. Angular는 구글이 개발한 프론트엔드 JavaScript 프레임워크로, 웹 애플리케이션의 사용자 인터페이스를 개발하는 데 사용됩니다. 이 두 기술을 함께 사용하여 강력하고 효율적인 애플리케이션을 개발할 수 있습니다.

JHipster와 Angular 프로젝트 생성하기

먼저, JHipster와 Angular 프로젝트를 각각 생성해야 합니다.

JHipster 프로젝트 생성하기

JHipster를 사용하여 Java 기반의 백엔드 프로젝트를 생성합니다. 명령줄에서 아래의 명령어를 실행합니다:

jhipster

프로젝트 생성 도중에 여러 가지 옵션을 설정할 수 있습니다. 프로젝트 생성이 완료되면 백엔드 서버가 실행됩니다.

Angular 프로젝트 생성하기

Angular 프로젝트를 생성하기 위해서는 Angular CLI(Command Line Interface)를 사용합니다. 명령줄에서 아래의 명령어를 실행합니다:

ng new my-app

위의 명령어를 실행하면 “my-app”이라는 이름의 새로운 Angular 프로젝트가 생성됩니다.

JHipster와 Angular 통합하기

이제 생성한 JHipster 백엔드 프로젝트와 Angular 프론트엔드 프로젝트를 통합해보겠습니다.

JHipster와 Angular 프로젝트 연결하기

  1. JHipster에서 생성한 백엔드 프로젝트의 src/main/webapp 폴더를 삭제합니다.
  2. Angular 프로젝트의 최상위 디렉토리에서 ng build --watch 명령어를 실행합니다. 이 명령어는 Angular 프로젝트를 빌드하고 변경 사항을 감지하여 자동으로 다시 빌드합니다.
  3. dist 폴더가 생성될 것입니다. 이 폴더를 다음 경로로 이동합니다: src/main/webapp.
  4. JHipster 백엔드 프로젝트의 src/main/resources/config 폴더에 있는 WebConfigurer.java 파일을 엽니다.
  5. 다음 코드를 configure 메서드에 추가하여 Angular 프로젝트의 정적 리소스를 제공합니다:
registry.addResourceHandler("/app/**")
    .addResourceLocations("classpath:/static/app/")
    .setCachePeriod(0);
  1. 백엔드 프로젝트를 빌드하고 실행합니다.

이제 백엔드와 프론트엔드가 함께 통합되었습니다.

추가 정보

JHipster와 Angular를 함께 사용하여 웹 애플리케이션을 개발하는 방법에 대한 자세한 내용은 위의 공식 웹사이트를 참조하세요.

© 2018 Colin. All rights reserved.