티스토리 뷰
Jhipster 소개
github 에 올라와있는 opensource 로 backend 는 java springframework 으로 되어있고 frontweb 은 angularjs(angular1), angular(angular2) 중에 선택을 할수 있다. 그 밖에도 OAuth2, *다국어지원 *등 여러 reference 가 될만한 소스 들을 sample 로 만들어 놓았다.
Jhipster(블로그) 예제 설치 방법
- jdk(java developer kit) install 8 이상 설치 (오라클 사이트가서 운영체제에 맞는 jdk 를 다운받는다.) 이후에 환경변수를 설정해주도록한다. (웹검색 추천)
- nodejs 설치 - nodejs 사이트에서 자신의 운영체제에 맞는 설치버전을 받아서 설치한다.
npm install -g yo gulp yarn generator-jhipster를 사용하여 필요한 모듈을 전역으로 설치해준다. (yo, gulp, yarn, generator-jhipster 등은 소스생성, 소스빌드, 모듈관리, 소스생성 등의 기능과 관련있다. 웹검색 추천)- 위 설치가 다 되었으면 프로젝트 소스를 생성할 곳으로 들어가서 다음 명령어를 실행해준다.
yo jhipster
# 이후에 소스 생성이 진행되는데 프로젝트명,자바 패키지명,인증방식,db,기본언어,기타추가적인기능을 선택할수 있다. 뭔지 모르면 기본값 enter쳐서 계속 넘어가도록한다.
# angular1 , angular2 를 선택하는 부분에서 angular2 를 선택하도록 한다.
- 소스가 제대로 생성이 되었는지 확인 이후에 소스 디렉토리로 이동해서 Command 창을 실행하고
gradlew명령어를 입력하면 BackEnd Java Web Application Server 가 8080포트를 사용하며 실행이 된다. 이제npm start를 실행하면 Frontweb Server 가 실행이 되고 브라우저도 자동으로 실행된다.
html 과 script source 는 /src/main/webapp 아래에서 확인할 수 있다. 소스를 보면 대부분 ts 확장자(type script)로 되어 있다.
/package.json
nodejs 모듈 의존성(dependency)등이 명시되어 있다. line 33 : @angular/cli 이 입력되어있다.
@angular/cli module 은 angular-cli.json 설정파일을 사용하는 듯하다.
/angular-cli.json
///angular-cli.json
...
"root": "src/main/webapp/",
...
"index": "index.html",
"main": "app/app.main.ts"
...
위를 보면 angular 소스의 root directory 경로 등과 index html 파일.. main script 등이 지정되어있다.
src/main/webapp/index.html 안에는 jhi-main 태그가 있는데, 나중에 main component 로 사용된다.
<!--src/main/webapp/index.html-->
...
<body>
...
<jhi-main></jhi-main>
...
</body>
src/main/webapp/app/app.main.ts 안에 ng2 module 을 초기화(angular create) 하는 내용들이 있다.
// src/main/webapp/app/app.main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ProdConfig } from './blocks/config/prod.config';
import { JhipsterAng2AppModule } from './app.module';
...
platformBrowserDynamic().bootstrapModule(JhipsterAng2AppModule);
위에서 platformBrowserDynamic 은 브라우저 플랫폼을 만드는데 root module 을 Jit complie 할수 있도록 해준다. type script 로 작성된 소스코드를 브라우저가 해석할수 있는 javascript 로 compile 해준다.
ProdConfig 는 app 을 Product 또는 develop mode 로 개발할지를 정해주는 부분이고,JhipsterAng2AppModule 는 root module 로 사용자가 만든 ang2 module, layout, 설정 부분들을 import 되어있다. angular 로 만든 app 이라면 적어도 하나의 module 은 가지고 있어야한다.
import 를 사용하면 다른 파일에서 선언한 상수,클래스,함수 등을 가져다가 사용할 수 있다.import 하려면 가져오려는 파일에서 클래스나 상수등을 export 하는 부분이 있어야 한다.import { } from ''; 에서 from 뒤에 ts 파일명 or 폴더명이 올수 있는데 폴더명일 경우 해당 폴더의 ./index.ts 를 바라본다.
예를 들어보면 app.module.ts 에서 layout componet 를 가져올때 import { ... } from './layouts'; 에서 ./layouts 는 폴더명이다. index.ts 를 사용하였다.
// src/main/webapp/ 은 앞으로 생략하고 표현하겟다.
// app/layout/index.ts
export * from './error/error.component';
export * from './error/error.route';
export * from './main/main.component';
export * from './footer/footer.component';
export * from './navbar/navbar.component';
export * from './navbar/active-menu.directive';
export * from './profiles/page-ribbon.component';
export * from './profiles/profile.service';
export * from './profiles/profile-info.model';
export * from './layout-routing.module';
위는 layout 폴더에 있는 index.ts 이다. jhipster 에서는 decorator(장식자) 는 @NgModule @Component @Injectable() 등이 주요하 사용된다. @가 앞에 오는 키워드를 decorator(장식자) 라고 한다.
class 란 비슷한 기능을 하는 함수 또는 변수들을 관리를 용이하게 하기 위하여 모아놓은 집합이다.
app.module.ts 의 @NgModule 는 장식자(decorator) 는 바로 아래 따라오는 class 꾸며주는 역할을 한다. @NgModule 의 property 로는 imports, declarations, providers, bootstrap 등이 있다. imports 속성은 다른 모듈 객체들의 배열을 값으로 받고, providers는 inject 된 service 배열을 받고, declarations 는 component 객체 배열을 값으로 사용하고, bootstrap 은 index.html 에서 사용할 제일 먼저 시작할 컴포넌트(main component) 배열을 명시해준다
'nodejs' 카테고리의 다른 글
| Managing the frontweb source with bower (0) | 2017.09.01 |
|---|---|
| Frontweb 개발 study 2 (0) | 2017.03.26 |
| Front web 개발 스터디 (0) | 2017.03.11 |