Judy

Judy

Hi, there!

Jhipster와 Vue.js로 CRUD 게시판만들기 1편

Updated:

Jhipster의 Front-End 개발을 시작하며..

Jhipster로 서비스 개발 후, back-end를 완성한 뒤 이제 front-end를 개발할 때가 되었을 때 입니다.

Jhipster에서 기본적으로 front-end를 제공해주긴 하지만, 기본적인 화면뿐이고 가능한 기능은 Entity 별 CRUD를 확인할 수 있는 정도입니다.

처음 Jhipster 프로젝트를 구성할 때, front-end를 React로 설정하였는데… 이 React는 장벽이 생각보다 꽤 높았습니다.

React는 전 세계에서 가장 많이 쓰이는 front end 중 하나 입니다. 따라서, 튜토리얼도 굉장히 잘되어있고 해외 뿐만아니라 국내 자료도 많습니다.

하지만, React를 빠른 시간 내에 익히기에는 front end 개발 경험이 별로 없는 저에겐 너무나도 장벽이 높은 언어였습니다.

그래서 열심히 Search 한 결과! 개발 경험이 있는 thymeleaf는 Jhipster에서 사용하기에 적합하지 않고 Angular는 react보다 훨씬 어려운 언어이며, Vue.js가 그나마 타협할 수 있는 수준의 난이도였습니다.

그렇게 프로젝트의 front-end는 Vue.js로 구현하게 되었습니다.

게시물을 작성하고 있는 현재도 Vue.js로 예시 기능을 만들며 배워가고 있기에, Vue.js 자체에 대한 설명 보다는 Jhipster와 Vue.js를 사용해 어떻게 front-end와 back-end를 연결하는지를 중점으로 설명하겠습니다.

그럼, 이제 시작해보겠습니다!

조회 및 검색기능 추가하기

작년에 처음 thymeleaf로 front-end 개발을 공부할 때 front는 역시 게시판 만들어보기가 가장 접근하기 쉽고, 그 언어의 로직을 이해하기 좋다는 생각을 했습니다.

그래서 게시판 만들기와 비슷한, 조회 및 검색기능을 가진 페이지를 만들어보겠습니다.

조회 및 검색은 기존에 구현되어있는 Microservice 들의 entity에 저장되어있는 내용을 불러오는 기능입니다.

Vue.js로 다시 gateway 만들기

Jhipster로 gateway개발 시 client를 선택할 수 있는데, 기본적으로는 Angular와 react만 제공됩니다. Vue.js로 개발하기 위해서는 Jhipster 프로젝트를 만들 때 아래와 같이 command를 입력해야합니다. 또, 기존의 gateway는 directory이름을 변경하여 백업해두고 새로운 gateway를 생성했습니다.

mkdir gateway
cd gateway
jhipster --blueprint vuejs

이후 Microservice gateway로 app종류를 설정하고 적절하게 옵션선택 후, 기존 gateway에 작성했던 user service 관련 내용을 복구시킨 뒤 본격적으로 front-end 개발을 시작해봅니다.

  1. Gateway directory 열기 이전에 Jhipster 개발 시리즈에서 소개하였듯, Jhipster 프로젝트에서는 모든 Front end를 Gateway에서 구현합니다. 다른 서비스들은 그저 기능 수행만 하는 역할이죠. 따라서, 모든 Front end 코드는 Gateway에서 개발한다~ 생각하시면 됩니다. 앞으로 나올 front관련 파일 또는 폴더의 경로는 모두 Gateway directory 내부에 있는 것으로 생각하시면 됩니다.

  2. jhi-navbar.vue에 rent 추가하기

    src -> main -> webapp -> app -> core -> jhi-navbar 의 경로에 있는 파일들이 JHipster 페이지의 상단 헤더 부분입니다.

    navbar 폴더 내부의 jhi-navbar.vue 를 열어 아래 코드를 추가합니다.

    <!-- NEW MENU-->
          <b-nav-item to="/rent">
                 <font-awesome-icon icon="book"/>
                 <span v-text="$t('global.menu.rentalpage')">Rental Page</span>
          </b-nav-item>

    코드를 살펴보면, to=”/rent”라는 옵션이 보입니다. 이부분이 바로 해당 메뉴를 클릭하면 원하는 페이지로 연결시켜주는 부분입니다. (별표별표)

    그리고 fontawesome icon의 ‘book’ 아이콘을 사용할 예정입니다. fontawesome icon은 ... app -> shared-> config-> config.ts에 아래 코드와 같이 import 후, library에 추가하면 사용할 수 있습니다.

        
 import {
     faBook
 } from "@fortawesome/free-solid-svg-icons/faBook";

 export function initFortAwesome(vue) {
  library.add( ...

 ,faBook);
 }

Vue.js router에 등록해주기

Jhipster의 Vue.js는 일반적으로 가장 많이 사용하는 구조를 적용해둔 듯 합니다. 위에서 설명한 navbar에 to="rent"라는 코드를 통해 저 메뉴를 누르면 "rent"로 이동하게 됩니다. 그럼 이 "rent"를 Vue.js는 어떻게 찾을까요?

바로, router를 통해 찾습니다.

... app -> router -> index.ts 로 이동합니다.

파일을 열어보면 아주 많은 path들이 등록되어있는 것을 볼 수 있습니다.

여기에 아래와 같이 "rent"를 위한 path를 등록해줍니다.

    ...
    },
    {
      path: '/rent',
      name: 'BookRental',
      component: BookRental,
      meta: { authorities: [Authority.USER]}
    }

코드를 살펴보면, path와 name, component, meta가 있습니다. 유추해볼 수 있듯이 path는 vue파일에서 to로 연결됩니다. name은 vue파일에서 to대신 name으로 연결 시에 사용됩니다. component는 vue 파일에서 쓰이는 component파일 이름입니다.

하지만 component 파일 이름을 vue는 어떻게 찾을 수 있을까요?

바로 아래와 같이 해당 component를 import 하여 찾게됩니다.

const BookRental = () => import('../cnaps/book-rental-service/book-rental.vue');

위 코드는 index.ts파일의 Vue.use(Router); 라는 코드 윗부분에 추가하면 됩니다. 아마, 이미 수많은 path들이 등록되어있는 만큼 수많은 컴포넌트가 import 되었기 때문에 index.ts파일의 어느 부분에 추가해야할 지는 바로 찾을 수 있을 거에요 :)

한국어 번역 등록하기

자, 다시 navbar에 추가한 코드를 살펴볼게요.

    <b-nav-item to="/rent">
        <font-awesome-icon icon="book"/>
            <span v-text="$t('global.menu.rentalpage')">Rental Page</span>
    </b-nav-item>

span부분에 v-text="$t('global.menu.rentalpage')"는 바로 이 영문 text를 해당 언어로 바꿔쓴다는 것입니다.

webapp -> i18n -> ko -> global.json 파일로 이동합니다.

"menu": {
      "home": "홈",
      "rentalpage": "도서 대여",
      "jhipster-needle-menu-add-element": "JHipster will add additional menu entries here (do not translate!)",
      "entities": {
        "main": "Entities",
        "bookBook": "Book",
        "bookInStockBook": "In Stock Book",
        "bookCatalogBookCatalog": "Book Catalog",
        "bookCatalogTopListBooks": "Top List Books",
        "rentalRental": "Rental",
        "rentalOverdueItem": "Overdue Item",
        "rentalRentedItem": "Rented Item",
        "rentalReturnedItem": "Returned Item",
        "jhipster-needle-menu-add-entry": "JHipster will add additional entities here (do not translate!)"
      }

rentalpage를 menu의 바로 하위에 등록하였기 때문에, 위 코드처럼 home과 같은 위치에 rentalpage를 도서 대여 로 번역을 등록합니다.

결과 확인

이제 gateway를 실행시켜보면, 아래와 같은 화면을 볼 수 있습니다.

물론, 해당 메뉴를 클릭하는 순간 브라우저의 개발자용 콘솔을 열어보면 에러가 가득할 겁니다.

왜냐하면 bookRental 이라는 component를 등록하지도 생성하지도 않았기 때문입니다.

그럼 2편에서는 component를 등록하고 Book Catalog라는 조회용 entity에 등록되어있는 DB를 조회하는 기능까지 추가해볼게요.

2편을 기다려주세요~!

You May Also Enjoy