동네 도서관에서 책 찾기

동네 도서관에서 책 찾기 웹 서비스를 만들어 사용하고 있었는데 불편했다. 수정 내용을 간단하게 정리했다.

수정 전

우선, 책 이름을 입력한 후 나타나는 회색 바탕의 도서관 이름들의 의미가 분명하지 않다. 검색 시작 버튼을 눌렀는데 내용에 비해 화면이 너무 작아서 검색 결과를 볼 수 없으며 다시 시작 버튼의 의미가 분명하지 않다. 간단한 기능임에도 어떻게 사용해야 하는지 자꾸 궁금해지는 서비스다. 아래 입력란에 책 제목을 입력해서 테스트할 수 있다. 아래 서비스는 늦게 로딩되는 경우가 있는데 그 때는 10초 정도 걸린다. 무료 서버를 사용하고 있기 때문이다.

수정 후, 더욱 단순한 UI

CSS 프레임워크로 이전에 사용하던 Bootstrap 대신 Bulma사용하기로 결정했다. UI를 새롭게 만들기 위해 도서관 검색 서비스에서 웹 API 서비스를 따로 분리했다. 이것을 사용하여 검색 UI를 다시 만들었다. 서비스 내용을 알려줄 제목, 책 제목을 입력할 입력란, 검색된 책 제목 리스트 이렇게 3가지만 사용자에게 보여줄 생각이다. 웹 API 서비스public 디렉토리 제공 기능을 추가하여 이 기능을 올렸다.

자바스크립트 프레임워크

자바스크립트 프레임워크는 종류가 많아서 선택이 중요하다. 그렇지만 시간이 부족함으로 그 동안 사용해 왔던 AngularJS를 사용할텐데 이전과 다르게 yo의 제너레이터를 사용하지 않고 하나의 js 파일을 읽어들이는 방법으로 사용했다.

public$ tree
.
├── app.js
└── index.html

App.js 파일 안에 AngularJS로 만드는 모든 자바스크립트 파일을 넣었다. 이 안에 하나의 service와 하나의 controller를 만들었다. 아래 두 개의 웹 API사용한다.

이 API를 사용하는 저바스크립트 코드는 아래와 같으며

function getLibrary(option, callback) {
  $http({
    method: 'GET',
    url: '/',
    timeout: 30000,
    params: {
      title: option.title,
      libraryName: option.libraryName
    }
  }).then(function successCallback(response) {
    if(callback) {
      callback(null, response.data);
    }
  }, function errorCallback(response) {
    if(response.status === -1) {
      callback({
        msg: '검색에 실패했습니다.'
      }, response.data);
    }
    $log.log('status: ' + response.status);
    $log.log('statusText: ' + response.statusText);
  });
}

function getLibraryNames(callback) {
  $http({
    method: 'GET',
    url: '/libraryList'
  }).then(function successCallback(response) {
    if(callback) {
      callback(response.data);
    }
  }, function errorCallback(response) {
    $log.log('status: ' + response.status);
    $log.log('statusText: ' + response.statusText);
  });
}

결과는 모두 JSON 형식이다.

[
    "경기도립중앙도서관",
    "경기도립평택도서관",
    ......
    "수원시일월도서관",
    "수원시화서다산도서관"
]


[
    {
        "title": "javascript",
        "libraryName": "판교도서관",
        "totalBookCount": "28",
        "booklist": [
            {
                "libraryName": "판교도서관",
                "title": "Java script:step by step",
                "exist": true
            },
            ......
        ]
    }
]

마무리

전체 코드를 다운로드하여 살펴보거나 온라인에서 기능을 확인할 수 있다. 참고로 터미널 명령어로 검색할 수도 있다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.