Java를 사용하여 JHipster 기반 프런트 엔드 개발 애플리케이션을 개발하는 방법

Java를 사용하여 JHipster 기반 프런트 엔드 개발 애플리케이션을 개발하는 방법

서문:
프런트 엔드 개발 분야에서 JHipster는 개발자가 최신 웹 애플리케이션을 빠르게 구축하는 데 도움이 되는 매우 인기 있는 오픈 소스 도구입니다. JHipster는 Java, Spring Boot, Angular, React 등을 포함하여 일반적으로 사용되는 많은 프런트엔드 및 백엔드 기술을 통합하여 개발자가 모든 기능을 갖춘 웹 애플리케이션을 신속하게 구축할 수 있도록 합니다. 이 기사에서는 Java를 사용하여 JHipster 기반의 프런트 엔드 개발 애플리케이션을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. JHipster 설치
   먼저 JHipster를 설치해야 합니다. JHipster는 Yeoman 기반 코드 생성기입니다. npm을 통해 설치할 수 있습니다.

npm install -g generator-jhipster

설치가 완료된 후 설치가 성공적으로 완료되었는지 확인할 수 있습니다.

jhipster --version

2. 새 JHipster 프로젝트 만들기
   명령줄을 입력하세요. 프로젝트의 디렉토리를 생성하고 다음 명령을 실행합니다.

jhipster

JHipster는 프런트 엔드 기술(Angular 또는 React) 선택, 데이터베이스 유형 등과 같이 프로젝트를 구성하기 위한 몇 가지 옵션을 선택하라는 메시지를 표시합니다. 필요에 따라 선택하세요.

3. 프런트 엔드 애플리케이션 개발
   JHipster는 모든 프런트 엔드 코드와 리소스 파일이 포함된 프런트 엔드 애플리케이션을 위한 별도의 디렉터리를 제공합니다. 여기서는 프런트엔드 프레임워크로 Angular를 사용하지만 React와 같은 다른 프레임워크를 사용할 수도 있습니다.

프런트 엔드 디렉터리를 입력하세요:

cd src/main/webapp

이 디렉터리에서 모든 Angular 코드와 리소스 파일이 포함된 앱 폴더를 볼 수 있습니다.

앱 디렉토리를 열면 home이라는 하위 디렉토리를 찾을 수 있습니다. 이는 앱 개발을 시작할 수 있는 샘플 페이지입니다.

4. 프런트 엔드 코드 작성
   홈 디렉터리에서 파일을 열면 home.comComponent.ts라는 파일이 있습니다. 이는 구성 요소의 논리와 뷰가 포함된 Angular 구성 요소 정의 파일입니다.

텍스트 편집기를 사용하여 파일을 열고 코드 작성을 시작할 수 있습니다. 다음은 간단한 예입니다.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title = 'Hello, JHipster!';

  constructor() { }

  ngOnInit(): void {
  }
}

위의 코드는 title이라는 속성이 있는 HomeComponent라는 Angular 구성 요소를 정의합니다. 제목을 표시하기 위해 HTML 템플릿에서 이 속성을 사용할 수 있습니다.

5. 프런트 엔드 템플릿 작성
   홈 디렉토리에는 home.comComponent.html이라는 파일도 있습니다. 이는 구성 요소의 보기를 정의하는 구성 요소의 HTML 템플릿 파일입니다.

home.comComponent.html을 열고 다음 내용을 작성합니다.

<h1 id="title">{{ title }}</h1>

위 코드는 단순히 컴포넌트의 제목을 표시합니다.

6. 애플리케이션 실행
   프로젝트의 루트 디렉터리로 돌아가서 다음 명령을 실행하여 애플리케이션을 시작합니다.

./mvnw

시작이 성공적으로 완료되면 브라우저를 열고 http://localhost:8080/을 방문합니다. "안녕하세요, JHipster!" 페이지를 참조하세요.

7. 고급 기능 및 고급 개발
   위의 기본 기능 외에도 JHipster는 라우팅 구성, 인증 및 권한 부여, API 호출 등을 포함한 다양한 고급 기능과 고급 개발 옵션도 제공합니다. JHipster의 문서와 커뮤니티 리소스를 통해 자세한 내용을 알아볼 수 있습니다.

결론:
이 기사에서는 Java를 사용하여 JHipster 기반 프런트 엔드 개발 애플리케이션을 개발하는 방법을 소개합니다. 우리는 JHipster를 사용하여 모든 기능을 갖춘 웹 애플리케이션을 신속하게 구축하고 기본 프런트 엔드 개발 프로세스를 시연했으며 특정 코드 예제를 제공했습니다. 이 기사가 JHipster를 사용하여 프런트 엔드 애플리케이션을 더 잘 개발할 수 있도록 도움이 되기를 바랍니다.

위 내용은 Java를 사용하여 JHipster 기반 프런트 엔드 개발 애플리케이션을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!