Colin's Blog
[javascript] Polymer를 사용한 공개 도서관리 시스템 개발

Polymer는 웹 컴포넌트를 개발하기 위한 JavaScript 라이브러리입니다. 이번 포스트에서는 Polymer를 사용하여 공개 도서관리 시스템을 개발하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, Polymer 프로젝트를 생성하기 위해 Polymer CLI(Command Line Interface)를 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.

npm install -g polymer-cli

Polymer CLI를 설치한 후, 다음 명령을 사용하여 프로젝트를 생성합니다.

polymer init

프로젝트 생성 시, 필요한 설정을 입력하고 프로젝트를 초기화합니다.

2. 데이터 모델링

도서관리 시스템에서 사용할 데이터 모델을 설계해야 합니다. 예를 들어, 도서에는 제목, 저자, 출판사 등의 정보가 필요하며, 각 도서는 고유한 식별자를 가져야 합니다. 이러한 데이터 모델을 구현하기 위해 Polymer의 데이터 바인딩 기능을 활용할 수 있습니다.

class Book {
  constructor(id, title, author, publisher) {
    this.id = id;
    this.title = title;
    this.author = author;
    this.publisher = publisher;
  }
}

위와 같이 도서 클래스를 정의한 후, 도서 목록을 관리하는 컴포넌트에서 데이터를 바인딩하여 사용할 수 있습니다.

3. 화면 구성

Polymer를 사용하여 화면을 구성하는 코드는 HTML과 JS를 조합한 형태로 작성됩니다. 예를 들어, 다음은 도서 목록을 표시하는 기본적인 컴포넌트의 코드입니다.


<dom-module id="book-list">
  <template>
    <table>
      <tr>
        <th>제목</th>
        <th>저자</th>
        <th>출판사</th>
      </tr>
      <template is="dom-repeat" items="{{books}}">
        <tr>
          <td>{{item.title}}</td>
          <td>{{item.author}}</td>
          <td>{{item.publisher}}</td>
        </tr>
      </template>
    </table>
  </template>
  <script>
    class BookList extends Polymer.Element {
      static get is() { return "book-list"; }
      static get properties() {
        return {
          books: {
            type: Array,
            value: []
          }
        };
      }
    }
    customElements.define(BookList.is, BookList);
  </script>
</dom-module>

위 코드에서, <template is="dom-repeat">은 배열 형태의 데이터를 바인딩하여 반복적으로 화면에 표시하는 기능을 제공합니다.

4. 데이터 CRUD 기능 구현

도서관리 시스템에서는 도서의 추가, 수정, 삭제 기능이 필요합니다. 이를 구현하기 위해, Polymer에서 제공하는 이벤트 바인딩 기능을 활용할 수 있습니다.


<dom-module id="book-editor">
  <template>
    <!-- 도서 입력 폼 -->
    <form>
      <label>제목</label>
      <input type="text" value="{{title::input}}">
      <label>저자</label>
      <input type="text" value="{{author::input}}">
      <label>출판사</label>
      <input type="text" value="{{publisher::input}}">
      <button on-click="addBook">추가</button>
    </form>
    <!-- 도서 목록 -->
    <book-list books="{{books}}"></book-list>
  </template>
  <script>
    class BookEditor extends Polymer.Element {
      static get is() { return "book-editor"; }
      static get properties() {
        return {
          books: {
            type: Array,
            value: []
          },
          title: {
            type: String,
            value: ""
          },
          author: {
            type: String,
            value: ""
          },
          publisher: {
            type: String,
            value: ""
          }
        };
      }
      addBook() {
        const book = new Book(Date.now(), this.title, this.author, this.publisher);
        this.push("books", book);
        this.title = "";
        this.author = "";
        this.publisher = "";
      }
    }
    customElements.define(BookEditor.is, BookEditor);
  </script>
  <style>
    /* 스타일 지정 */
  </style>
</dom-module>

위 코드에서, addBook 함수는 도서를 추가하기 위한 이벤트 핸들러로, this.push 메서드를 사용하여 도서 목록에 새로운 도서를 추가합니다.

5. Polymer 앱 실행

개발이 완료된 Polymer 앱을 실행해 보겠습니다. 다음 명령을 사용하여 앱을 실행할 수 있습니다.

polymer serve

브라우저에서 http://localhost:8080을 열어 앱을 확인할 수 있습니다.

결론

Polymer를 사용하여 공개 도서관리 시스템을 개발하는 방법에 대해 알아보았습니다. Polymer의 강력한 데이터 바인딩 기능과 컴포넌트 기반 아키텍처를 활용하여 실용적인 웹 애플리케이션을 구축할 수 있습니다.

참고 문서:

© 2018 Colin. All rights reserved.