자바ㆍ자바스크립트용 풀 스택 프레임워크, 제이힙스터의 이해

제이힙스터(JHipster)는 리액티브 프론트 엔드를 사용한 풀 스택 자바 애플리케이션 개발을 쉽게 한다는 원대한 목표로 오래 전에 시작된 자바/자바스크립트 하이브리드 프로젝트다. 제이힙스터 개발팀은 업계의 변화에 보조를 맞춰 꾸준히 새 버전을 내놨는데, 여기서는 간단한 애플리케이션을 만들면서 이 프레임워크로 무엇을 할 수 있는지 알아보자. 
 

제이힙스터란

기본적으로 제이힙스터(JHipster)는 프론트 엔드용 리액트(React), 뷰(Vue), 앵귤러(Angular)를 지원하며 스벨트(Svelte)를 비롯한 다른 프레임워크는 블루프린트(blueprints)라는 플러그인을 통해 지원한다. 백엔드의 경우 스프링 부트(Spring Boot)의 비중이 크다. 힐라(Hilla) 프레임워크와 비슷하지만, 광범위한 프론트 엔드 스택을 지원한다는 더 큰 목표를 갖고 있다. 기본적으로 제이힙스터는 자바 및 자바스크립트 빌드 툴체인을 통합하고 그 위에 다양한 관리 기능을 덧씌우는 고급 빌드 툴이다. 

제이힙스터는 풀 스택 애플리케이션 외에 마이크로서비스 구성요소를 지원하며 JPA 기반 관계형 데이터베이스와 몽고DB(MongoDB), 카산드라(Cassandra) 같은 NoSQL 데이터스토어를 위한 골격을 제공한다. 로깅과 분석을 위한 기능도 있다. 

제이힙스터의 툴셋에는 명령줄 및 도메인별 언어(DSL)와 시각적 데이터 모델러 및 웹 기반 생성자(constructor)가 포함된다(스프링 이니셜라이저(Spring Initializr)의 강화된 형태라고 보면 된다). 여기서는 명령줄을 사용해 시작한다. 참고로 비교적 최신 자바, Node.js, 깃 버전이 설치된 시스템이 필요하다. 
 

제이힙스터 예제 애플리케이션 

제이힙스터 퀵스타트에 따라 generator-jhipster NPM 패키지를 설치하고 생성기를 실행할 새 디렉터리를 만든다. <화면 1>과 비슷한 인터랙티브 프롬프트가 표시될 것이다. 
 

대부분 기본값 그대로 두면 되지만 여기서는 몽고DB를 데이터베이스로, 리액트를 프론트 엔드 프레임워크로 사용한다(부츠워치(Bootswatch) 테마는 취향에 따라 선택하면 된다). 이렇게 옵션을 정하고 나면 제이힙스터가 작동해 조금전에 만든 디렉터리에 새 애플리케이션을 생성한다. 이를 실행하려면 시스템에 몽고DB가 있어야 한다. 설치 지침은 몽고DB 설명서를 참고한다.
 

애플리케이션 빌드와 실행 

이제 제이힙스터가 풀 스택 자바 및 자바스크립트 애플리케이션의 두 부분을 생성한다. 백엔드는 메이븐(Maven)으로, 프론트 엔드는 웹팩(webpack)으로 구축됐다. 두 부분을 동시에 실행해 애플리케이션을 시작할 수 있다(백그라운드에서 몽고DB도 실행 중이어야 한다). 셸에서 ./mvn -P-webapp을 입력한다. 이 명령은 자바 백엔드를 빌드하고 실행한다. 메이븐이 웹팩 부분을 실행하지 않도록 하기 위해 -P-webapp 플래그를 사용한다. 

다른 셸에서 npm start를 입력한다. 이 명령은 프론트 엔드를 빌드해서 웹팩의 dev 모드로 실행하며 API 호출은 방금 만든 자바 서버를 향한다. 모든 부분이 원활하게 진행됐다면 localhost:8080에서 <화면 2>와 같은 화면이 표시된다. 
 

 

테스트 사용자 만들기

이 애플리케이션은 꼼꼼히 살펴볼 필요가 있다. 먼저 제이힙스터의 생성기는 기능적 사용자 관리, JWT 기반 인증 시스템을 포함해 일반적인 툴에 비해 훨씬 더 많은 요소를 출력한다. 또한, 애플리케이션에는 기본 계정이 있는데 이 계정을 사용해 테스트 사용자를 만든다.

시작하려면 애플리케이션 화면 오른쪽 상단의 등록(Register) 옵션을 사용해 새 사용자를 만든다. 그 다음 테스트 사용자(test@test.com)를 만들고 로그인(log in)으로 이동해 기본 admin/admin 사용자를 선택한다. 사용자 관리 화면으로 이동하면(Administration(관리) > User Management(사용자 관리)) 새 사용자를 볼 수 있다. 비활성 버튼을 활성으로 전환해 사용자를 활성화한 다음 테스트 사용자로 로그인한다. 참고로 이 사용자는 관리 콘솔에 액세스할 수 없다. 

앞서 설명한 것처럼 제이힙스터는 리액트, 몽고DB 스택뿐만 아니라 앵귤러, 뷰, 그리고 다양한 SQL 및 NoSQL 데이터스토어를 지원한다. 이 때문에 기본적으로 제공하는 기능이 상당히 많다. 
 

코드 살펴보기 

제이힙스터는 이러한 모든 기능을 지원하기 위한 많은 코드를 제공한다. 좋은 점은 코드의 대부분이 최신이고 프로그래밍 모범 사례를 따른다는 것이다. 예를 들어 리액트 코드는 함수형 구성요소를 사용하고 후크를 활용하며 중앙화된 리덕스(Redux) 스토어를 대상으로 실행된다. 애플리케이션 디렉터리를 보면 다음과 같은 구조를 볼 수 있다. 
 
자바 애플리케이션의 주 클래스는 src/main/java/com/mycompany/myapp/JhipsterApp.java다. 기본적으로 스프링 부트 웹 애플리케이션이며 --spring.profiles.active=your-active-profile을 통해 명령줄 인수로 구성할 수 있다. 

기본 자바 애플리케이션은 사용자 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 위한 API이며, 인증과 권한 부여는 스프링 시큐리티(Spring Security)를 통해 실행된다. 스프링 시큐리티 시스템은 /myapp/security에 구성된다. 제이힙스터는 JSON 웹 토큰을 사용하므로 in /security/jwt에 이를 지원하는 클래스가 있다. 

애플리케이션의 도메인 모델은 /domain에 정의된다. 이 부분은 곧 나올 프론트 엔드 /entities에 상응하는 요소다. package.json에서 사용 가능한 프론트 엔드 스크립트를 찾는다. 지금 사용 중인 dev mode 명령 외에 mongodb prune 명령, 테스트 및 프로덕션 빌드 명령 등이 있다. 클라이언트 항목은 /src/main/webapp/index.html에 있지만 실제 작업은 /sec/main/webapp/app/app.tsx에서 시작되며, 이는 다양한 페이지 구성요소를 호스팅하는 애플리케이션 라우터(경로는 router.tsx에 정의됨)를 정의한다. 

main/webapp/app/modules에서 정의된 애플리케이션의 웹 페이지 구성요소를 찾을 수 있다. 예를 들어 /home/home.tsx에는 홈페이지 정의가 있다. /main/webapp/app/shared 디렉터리에서 애플리케이션 전반에 사용되는 코드를 볼 수 있다. 대부분은 모델 정의 및 리듀서와 같은 중앙 저장소용이다. 현재 애플리케이션은 사용자만 다루므로 공유 디렉터리에는 해당 구성요소 및 인증 코드만 있다. /entities 폴더에는 모델링된 엔티티를 지원하기 위한 코드가 포함된다. 사용자 모델이 공유 디렉터리에 저장된 것을 볼 수 있다. 아직 엔티티는 없으므로 추가해 보자. 
 

모델 정의 : JDL 및 JDL-스튜디오 

JDL은 애플리케이션 모델을 정의하기 위한 제이힙스터의 도메인별 언어지만 그 외에도 많은 역할을 한다. JDL 메타데이터로 전체 애플리케이션을 정의할 수 있는데 여기서는 모델을 중심으로 살펴보자. 

일단, 제이힙스터의 온라인 툴인 JDL-스튜디오(JDL-Studio)를 사용해서 도메인 모델을 위한 몇 가지 CRUD 기능을 빠르게 만든다. <화면 3>과 같은 엔티티 관계 빌더를 볼 수 있다. 
 

JDL 빌더는 엔티티 및 엔티티의 속성과 그 사이의 관계 정의를 지원한다. 구문은 이해하기 쉬우므로 따로 설명하지는 않겠다. 왼쪽 정의에서 수정한 다음 비주얼 디스플레이에서 어떻게 표시되는지를 관찰하는 방식으로 구문을 살펴볼 수 있다. 주어진 관계를 수락하고, 화면 오른쪽 맨 위의 이 JDL 소스 다운로드(Download this JDL source) 버튼을 눌러 내보낸다(도구 모음에는 모양과 동작을 구성하기 위한 여러 옵션이 있다.) 

파일이 생성되면 프로젝트 루트에서 명령줄을 열고 jhipster jdl my-jdl-file.jdl을 입력한다. 여기서 my-jdl-file.jdl은 방금 내보낸 파일의 이름이다. 파일 두 개를 덮어쓸 것인지 묻는 메시지가 표시되면 수락해서 덮어쓴다. 완료되면 서버를 다시 시작해서 애플리케이션에 추가한 부분을 볼 수 있다. 브라우저로 돌아가서 포트 9000에서 다시 애플리케이션을 열고 admin/admin으로 로그인한다. 

이제 탐색 표시줄에서 엔티티(Entities) 메뉴를 열면 방금 가져온 모든 엔티티와 이 엔티티 관리를 위해 완전히 구현된 콘솔을 볼 수 있다. 예를 들어 새 “Country” 엔티티를 만든 다음 새 “Location” 엔티티를 만들어 새로 생성된 이 국가를 자신의 위치에 사용할 수 있다. 모든 CRUD 기능도 있다. 
 

모니터링 및 API 관리 

관리 사용자를 위한 몇 가지 부가 기능을 짚고 넘어가자. 관리(Administration) 메뉴에는 실행 중인 JVM의 특성을 보여주는 메트릭(Metrics) 옵션이 포함돼 있다(<화면 4> 참조). 모니터링 기능과 관련된 자세한 내용은 제이힙스터 설명서에서 볼 수 있다. 
 

제이힙스터는 백엔드 엔드포인트를 위한 오픈 API/스웨거(Swagger) 정의와 이를 다루기 위한 간단한 콘솔도 생성한다. <화면 5>에서 API 관리 화면을 볼 수 있다. 
 

정리하면 제이힙스터는 다양한 데이터스토어와 프론트엔드 프레임워크를 쓸 수 있는 유연한 아키텍처를 사용해 다양한 기능을 제공한다. 전체적으로 인상적인 프레임워크다.
editor@itworld.co.kr