Wednesday, July 20

'Pinterest'


%ec%8a%a4%ed%81%ac%eb%a6%b0%ec%83%b7 2016 07 20 %ec%98%a4%ed%9b%84 5.22.01

프로젝트 소개

Front-end 관련 프로젝트를 진행한지가 오래되어서 관련 내용을 공부하던 중에 'Pinterest' 라는 서비스를 알게 되었습니다. 여기서는 단순히 Listing 하는 것이 아니라 각각의 Object를 화면에 따라 동적으로 그리고 Scroll 위치에 따라 새로운 객체를 로딩하는 효과가 있었습니다. jQuery와 JavaScript를 이해하고 사용해야하기 때문에 단순 (.HTML) 파일을 구현하는 것도 쉽지 않았습니다. 이번 프로젝트를 통해 앞으로 만들게 될 웹 서비스에서 오픈 소스로 풀린 jQeury와 JS를 원하는 방식에 맞도록 커스터마이징하는 데 많은 자신감을 얻게 되었습니다.

프로젝트 요약

프로젝트 풀이

주요 기능 1 - Masonry

#pins.js.coffee

...This is Javascript scripts for loading masonry...
$ ->
  $('#pins').imagesLoaded ->
    $('#pins').masonry
      itemSelector: '.box'
      isFitWidth: true

주요 기능 2 - Infinite Scrolling

/*pins.js.coffee*/

jQuery ->
    if $('.pagination').length
        $(window).scroll ->
            url = $('.pagination .next_page').attr('href')
            if url && $(window).scrollTop() > $(document).height() - $(window).height() - 40
                $('.pagination').text("조금만 기다려봐 =ㅅ=...")
                $.getScript(url)
        $(window).scroll()

/*index.js.erb*/

/*모든 pin을 불러와 boxes에 담고 id="pins"인 곳에서 box 들의 이미지를 추가하는데, masonry 클래스를 부여합니다.*/
$boxes = $('<%= j render(@pins) %>')
$('#pins').append($boxes).imagesLoaded( function(){
    $('#pins').masonry('reload');
});

/*각각의 페이지는 will_paginate로 나누어져 있는데, 그 것을 기준으로 next_page를 결정하고, scroll이 더이상 없으면, 페이지네이션 효과를 제거합니다.*/
<% if @pins.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@pins) %>');
<% else %>
    $(window).off('scroll');
    $('.pagination').remove();
<% end %>

$('#pins').masonry( 'appended', $boxes, true)

아래 링크를 클릭하면, 소개 영상을 확인할 수 있습니다.
(*Elasticsearch가 현재 Heroku 에서 유료로 제공중이어서 소개영상으로 대체하였습니다.)
https://www.youtube.com/watch?v=_j8cg7lZPKc

프로젝트 소감

오랜만에 Rails 를 다시 사용해서 그런지 스스로 프로그램을 만드는데에 생각보다 많은 시간이 소요되었습니다. 메모해두었던 자료들을 참고하고 이전 자료들을 참고하여 개발했지만, 구글에 많이 의존하게 되었던 것 같습니다. Rails가 대한민국에서 입지가 아직까지도 커지지 않아서 그런지 한글로 된 자료가 없어서 해석을 하고 천천히 자료를 읽어보는 시간을 많이 들였습니다. 그리고 실제로 배포할 환경이 유료이고 유지비용이 들어서 사람들과 함께 공유하지 못하게 된 점이 아쉬움으로 남습니다. 하지만 이 프로젝트를 통해서 그동안 만들었던 프로젝트들을 다시 열어보면서 흔히 말하는 더러운 코드를 조금 더 깔끔하고 정교하게 만들 수 있게 되었다고 느꼈습니다.


공유하기