Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

2017년 7월 12일 수요일

[Blogspot] 글목록(Posts List v2) with Angular.js

블로거를 하면서 가장 많이 찾아오신 분들이 글목록 기능을 적용하기위해 오신 분들이시네요.
2012년도에 제가 구글 블로거를 시작 하면서 가장 필요로 했던 기능이라 javascript에 막 입문한 실력으로 만들어 놓고 공유를 했었는데요.
그동안 버그도 많이 있었고 부족한 기능들도 많아 수정을 한다고 하면서도 실천을 못했는데 이번에 angular.js를 처음 접하면서 글목록 기능을 새로 만들어보았습니다.


만들면서 두가지 버전으로 만들었는데요.
순수 jquery와 angular.js로만 만든 2.0버전과
제가 최근 자주 쓰는 함수들을 모아놓은 유틸을 사용한 3.0 버전입니다.

두 버전에 기능상 차이는 없으며,
글목록 기능만을 필요로 하시는 분들이 사용하실 수 있도록 2.0 버전을 공유하고,
사실상 3.0 버전은 제가 사용하는 버전이 될 것 같습니다.

이번 포스팅에서는 역시 2.0 버전을 적용하는 방법에 대해서 포스팅 하도록 하겠습니다.

우선 소스는 제가 공유하고 있는 Github을 참고하여 주시기바랍니다.



소스를 적용하기 위해 필요한 라이브러리는 위에서 언급했듯이 jquery와 angular.js입니다.
jQuery는 어느정도 javascript 소스를 수정하신 분들은 대부분을 적용이 되어있실텐데요.
우선 두 라이브러리를 적용하기 위해 블로그 관리페이지의 [테마>HTML편집] 페이지로 이동합니다.


아래와 같이 <head>와 </head> 사이에 다음 두 스크립트 태그를 넣어주시기 바랍니다.
<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js'/>


다음 angular.js를 사용하기 위해 <html>태그에 ng-app="app" 라고 선언을 하여 주시기 바랍니다.
(해당 작업을 하지 않았을 경우 동적으로 script에서 넣어주는 처리를 하고 있어 꼭 해주셔야 하는 작업은 아닙니다.)


다음으로 레이아웃 페이지로 이동해 가젯을 추가 하신 후 HTML/JavaScript를 추가해주시기 바랍니다.


위 github에서 복사하신 소스를 붙여넣으신 후 아래쪽에 값만 설정해 주시면 됩니다.


G1sPostList( 포스트수페이지수기본정렬 )

포스트 수 : 글목록 한페이지에 보여지는 포스트 수.
페이지 수 : 글목록 하단에 보여지는 페이지 수.
기본정렬 : 기본 글목록 정렬로 게시일(pubnlished)과 업데이트일(updated).

이제 가젯을 원하시는 위치에 배치하시면 적용완료입니다.


적용상의 유의사항으로 기존 angular.js를 사용하시는 분들은 angular.module('app', []); 을 하는 부분이 중복 될 수 있을 텐데요. 이 부분은 getAngular() 함수 내부를 수정해 주시면 될 것 같습니다.

이번에 글목록 기능을 만드면서 중점을 두고 수정한 부분은 다음과 같습니다.

1. 최대 포스트 수 150개 제한 현상 수정
기존에 만든 방식은 feed의 max-result를 늘려가며 데이터를 가져와 보여주는 방식으로 최초 적용할 2012년도 당시만 해도 한번에 최대 500개의 데이터를 가져올 수 있었으나 얼마전부터 최대 150개의 데이터만 가져올 수 있어 최대 150개의 포스트만 리스트에서 보여지는 현상이 있었습니다.
이번에 블로거 feed에 대해서 찾아본 결과 start-index라는 파라미터가 있는 것을 확인하여 max-results 값을 고정값으로 넣고, start-index값을 수정해가며 데이터를 가져오도록 적용하였습니다.
현재 구글코리아 블로거로 테스트 결과 start-index를 조정해가며 현재 포스팅 된 모든 페이지(1580)를 가져올 수 있는것을 확인하였습니다.

2. 간단한 레이아웃 수정
이는 제가 angular.js를 사용한 주된 이유로, 기존 jquery로 동적으로 html태그를 컨트롤 했던 것을 angular.js를 사용할 경우 html 태그에서 데이터를 어디에 사용할지 지정만 해주면 자동으로 데이터가 바인딩이 되어 html, css, javascript를 분리하여 사용할 수 있습니다.
즉 단순 레이아웃만을 수정하시고자 하시는 분들은 html 태그와 css만을 수정하여 변경하실 수 있습니다.

3. 태그별, 날짜별 조회 및 정렬기능 적용
기존 방식은 archive 페이지로 링크를 걸어 해당 url상의 태그정보를 통해 태그들을 보여주는 방식이었는데요.
현재는 타이틀만을 링크로 사용하고 포스트의 각 태그정보와 날짜 정보는 페이지 이동 없이 글목록의 값만 해당 태그와 날짜의 월 데이터가 조회되도록 수정하였습니다.
추가로 정렬기능도 넣었으나...
정렬할 수 있는 값을 게시일과 업데이트밖에 찾지 못한데다 역순으로 정렬은 되어있지 않아 크게 유용할 것 같지는 않네요.

적용 화면은 아래와 같습니다.

기본

태그, 날짜 선택 시

가장 상단의 현재 선택한 라벨이 있을 경우 라벨을 보여주며, 선택한 라벨이 없을 경우 전체리스트라고 표시가 됩니다.
라벨을 클릭할 경우 해당 선택 된 라벨이 취소되며 전체리스트 1페이지로 이동합니다.

마찬가지로 날짜를 선택할 경우 전체리스트 또는 라벨 옆에 날짜가 표시되며 해당 월동안 게시된 포스트들이 보여집니다.
역시 상단의 날짜를 클릭할 경우 날짜 선택이 취소 됩니다.

2017년 6월 25일 일요일

[발길따라] 수도권 글램핑장 - 양지파인 리조트 캠핑장


도심의 일상에서 벗어나 자연속에서의 하룻밤.
이번주말에는 오랜 친구들과 함께 양지파인 글램핑장을 다녀왔습니다.

위치 : 경기도 용인시 처인구 양지면 남평로 112 양지파인리조트


캠핑을 떠나기 전에 가까운 마트에서 장보기는 필수이죠.
벌써부터 저녁이 기다려지는 군요.


장을 보고 용인에 있는 글램핑장에 도착.
2시부터 입장으로 알고 갔으나.. 3시부터 입장이 가능하다고 하네요.


1시간을 근처 시내에서 보내고 드디어 입장.
숲안에 글램핑장이 크지는 않지만 수영장에 샤워장 등 시설은 잘 갖춰져 있습니다.


역시 가족단위로 오신 분들이 많네요.

그리고... 이 곳이 우리를 위해 마련되어 있는 오늘의 숙소.



내부가 아늑하고 좋네요. 펜션 못지 않습니다.


짐을 풀고나서 오후의 여유시간에는 미리 예약한 짚라인 체험을 다녀왔습니다.
짚라인 체험 포스팅은 별도로....


즐거운 체험을 마치고. 날이 어두워지기 시작하네요.
글램핑장에 도착하자마자 식사준비를 시작합니다.

먼저 재료손질부터....


그리고 한편에서는 고기를 굽기 시작 합니다.


재료손질이 끝난 재료들은 꼬치에 꾀어서 굽고..
남은 재료도 모두 굽기 시작합니다.


저녁상 세팅 완료


역시 야외에서 먹는 식사가 끝내줍니다.
밖은 저녁을 준비하는 사이 비가 잔잔히 내리고 있네요.


고기를 모두 굽고 남은 숯으로에는 고구마를 굽습니다.


후식으로는 친구가 맛있다고 추천한 새우를 이용한 감바스 요리를...


식사가 끝나고.. 비도 마침 그쳤네요.
캠핑장의 여유로운 밤..


잠시 소화도 할겸 차도를 따라 근처 리조트까지 산책을 다녀 옵니다.


남는 시간에는 TV를 시청하며...


취침.....


아침에 일어나 미리 사온 부대찌게를 끓여먹고 철수 준비를 합니다.
하루동안 대여해서 쓴 그릇들은 설거지 후 반납을 하고요.


샤워실에서 샤워를 합니다.
샤워장은 미리 이용하고 있는 사람이 있어서 못찍었네요.


퇴실 준비 끝.

시끄러운 도심을 떠나 자연속에서 하룻동안의 휴식.
잘 쉬고 가네요.


2017년 6월 24일 토요일

[발길따라] 용인 짚라인 체험장


깨끗한 산림에서 바람을 가르는 짜릿한 경험.
이번주에는 친구들과 글램핑도 즐길 겸 여유 시간에 짚라인을 체험하고 왔습니다.

열대우림 정글지역 원주민들의 교통수단으로 시작했다는 이 스포츠는 현재 레저스포츠로써
문경, 용인, 충주, 설악, 청도 등에 설치 운영중에 있다고 하네요.

이번에 용인에 글램핑을 하러 가며, 인근에 있는 용인 짚라인 체험장을 다녀왔습니다.

2017년 6월 기준 짚라인 체험 정보는 다음과 같습니다.

비용 : 1인 35,000 원.
이용시간 : 동절기 9시 ~ 17시, 하절기 9시 ~ 18시 30분
코스 : 6개 코스 완주 1,238m (약 1시간)
      1코스 : 꿩 코스 (138m, 난이도 하)
      2코스 : 백로 코스  (133m, 난이도 하)
      3코스 : 매 코스 (290m, 난이도 중)
      4코스 : 두루미 코스 (209m, 난이도 중)
      5코스 : 독수리 코스 (138m, 난이도 중)
      6코스 : 알바트로스 코스 (330m, 난이도 상)
주소 : 경기도 용인시 처인구 모현면 초부로 220

홈페이지 : http://www.ziplineyongin.co.kr/


글램핑장에 짐을 풀고 예약한 짚라인 체험 시간에 맞춰 용인 자연 휴양림으로 향합니다.
짚라인 이용요금과는 별도로 입장료와 주차료를 내야하는 군요.
인원수에 따라 금액의 차이가 있는 듯 합니다. (참고 링크)


네비를 따라 주차장에 주차를 하고보니 길을 잘못 들어온 듯 짚라인 체험관으로 가기위해 숲속길을 따라 이동을 해야 하네요.


다행히 늦지않게 짚라인 체험장에 도착했습니다.


우선 체험장 요금 결제 및 이용 동의서를 작성합니다.
요금 결제기 옆에있는 짚라인 체험장비를 착용한 마네킹이 눈에 띄네요.



동의서 작성까지 맞췄다면 짚라인 장비를 착용하고 짚라인 체험을 하기 위해 차를 타고 이동합니다.
가파른 산길을 올라 제 1코스에 도착.

첫 체험에 앞서 가이드님이 짧은 강의와 시범을 보여주십니다.


한쪽에는 안전수칙에도 친절하게 내용이 써 있네요.


코스는 난이도 하의 1코스부터 중, 상급의 총 6개 코스를 순서대로 체험하며 산을 내려가도록 되어있습니다.


출발 전 가이드님 앞에 마주보고 서 있으면, 가이드 님이 세팅을 해주시고요.
가이드님이 가지고 계신 무전으로 출발신호가 떨어진 후 가이드님의 안내에 따라 출발하면 됩니다.


착지 시에는 먼저 내려가 계신 가이드님이 안전하게 속도를 감소시켜서 착지를 시켜주십니다.


가이드님의 도움이 필요한 체험자들과는 달리 가이드님들은 신발을 희생해가며 혼자서 속도조절 후 착지를 하시네요. ㅎㅎ


그럼 체험 영상을 한번 볼까요?
영상은 제 4코스인 두루미 코스로 중급 난이도의 209m 코스입니다.


6개의 코스를 모두 내려가면 짚라인 이용 고객센터 바로 맞은편에 있는 건물 뒤쪽으로 내려올 수 있습니다.


체험을 마친 후 가이드님의 도움으로 장비 해제 후 짚라인 탑승 수료증 수여가 있습니다.
짚라인 탑승 수료증이 있는 사람의 경우 전국 짚라인 체험장에서
본인 포함 동반 4인까지 할인 혜택이 있다고 하네요.


글램핑 포스팅 : [발길따라] 수도권 글램핑장 - 양지파인 리조트 캠핑장

2017년 6월 10일 토요일

[Javascript] 초성검색을 구현해보자 - with Hangul.js

이번 프로젝트에서 제 파트는 아니지만 초성검색을 Javascript로 구현해야 하는 요건이 있어서 구글링을 한 결과,
힌트를 주는 블로그는 몇개 있으나 구현되어 있는 소스가 없어 한번 만들어 보았습니다.

마침 Github에 공유 된 Hangul.js 라는 훌륭한 라이브러리가 있어 해당 라이브러리를 사용하였습니다.
Hangul.jsMIT 라이센스를 따르고 있네요.
MIT 라이센스는 가장 제약이 적은 라이센스로 저작권 표시 의무만을 가지고 있습니다.
라이센스 링크는 https://github.com/e-/Hangul.js/blob/master/LICENSE 입니다.


우선 Hangul.js는 한글을 분해/조립하는 disassemble, assemble 함수를 기본으로 동작하는 라이브러리로 search 함수를 제공하고 있습니다.
이 search 함수에 대해서 살펴보면...
우선 라이브러리의 REDME 에는 아래와 같이 설명하고 있습니다.

Hangul.search(a:string, b:string)는 문자열 a가 문자열 b를 포함하는지 검사합니다. 이때 포함관계는 '두벌식 키보드 기준으로 a문자열을 입력할 때 누르는 키들의 배열이 b문자열을 입력할 때 누르는 키들의 배열을 포함한다'로 정의합니다. 반환값이 0보다 크거나 같다면 포함합니다.
https://github.com/e-/Hangul.js#hangulsearch

즉, 검색어 'ㄷ'로 검색을 하였을 경우,
'닭'과 같이 초성의 결과를 검색이 가능하지만, '갇' 과 같이 값이 종성에 있을 경우에도 검색이 됩니다.

또한 초성이 두개이상인 검색어 'ㄷㄱ'에 대해,
초성 검색을 통해 '달걀'을 검색 할 수 없으며, 오히려 '갇가'와 같은 의도치 않은 결과가 검색 될 수 있습니다.

이에따라 해당 함수를 수정해 초성검색이 가능하도록 만들어 보았습니다.

제가 만들고자 하는 초성검색 기능은 다음과 같습니다.

  • 검색어가 초성으로만 이루어져 있을 경우 초성검색을 한다.
  • 검색어가 초성으로만 이루어져 있지 않을 경우 기존 Hangul.search 기능을 사용한다.
  • 초성검색은 문자의 초성만 추출한 후 검색어의 초성과 indexOf를 통해 판단한다.

간단하게 정리가 되네요.

위 조건을 만족하기 위해서 필요한 로직은 세가지로, 아래와 같습니다.
- 문자열이 초성으로만 이루어져있는지 판단한다. -> Hangul.isConsonant 이용
- 한글 검색 - Hangul.search
- 문자열의 초성만 추출 - Hangul.disassemble 이용

기존 Hangul.js로 모두 해결이 가능하군요.
자세히 설명하기에는 너무 길어 질 것 같구요.
수정한 Hangul.js 소스는 아래 링크를 참고하시기 바랍니다.

수정 소스 : https://github.com/g1s/Hangul.js/blob/master/hangul.js
수정 내역 : https://github.com/g1s/Hangul.js/commit/e1db92721a1e4cc98c4ef15337c2f8a9c29ebced

이를 사용하는 샘플소스는 다음과 같습니다.


샘플열기

2017년 6월 3일 토요일

[자전거따라] 시화방조제를 달려 삼도여행. 대부도라이딩


영산강을 다녀온지도 한달이 지났습니다.
작년말부터 확실히 자전거를 타는 횟수가 줄고있네요.
이번에도 즉흥적으로 자전거여행을 떠납니다.
목적지는 오이도역에서부터 시화방조제를 넘어 대부도, 선재도, 영흥도까지.
확실히 체력이 줄은것이 느껴지네요.



어젯밤 즉흥적으로 정한 여행답게 준비가 부실합니다.
늦잠에 부랴부랴 준비해서 1시간30여분에 걸쳐 지하철을 타고 오이도역에 도착하니 어느덧 시간은 12시가 넘어가네요.


바로 시화방조제까지 이동합니다.
네이버 지도의 길안내를 따라가니 도시를 흐르는 하천을 따라 자전거길이 있네요.
신호등이 많은 도로로 달리지 않아도 되어 편하긴 하지만 길상태가 썩좋지는 않습니다.


드디어 시화방조제 자전거길에 진입.
지도상으로는 방조제 좌우측으로 자전거길이 있는것으로 나오지만
우측길은 현재 통행이 금지되어있네요.


직선으로 뻥뚫린 곧은 길.
하지만 길상태가 썩 좋은 편은 아닌데다
바다 한가운데를 달리는 만큼 바닷바람이 장난이 아니네요.
아무리 달려도 속도가 나지 않습니다.


좌측으로는 통행이 금지되어 차량 하나 없는 도로도 있네요.
잘닦인 도로에 차도 하나 없는 도로를 보니 내려가서 달리고 싶군요. ㅎㅎ

힘들게 바람을 뚫고 바다가운데를 달리길 한참.
멀리 전망대가 보이기 시작합니다.


조력발전소와 전망대 등이 있는 휴게소가 하나 있네요.


휴게소를 지나 멀리 보이기 시작하는 풍력발전기를 향해 달리면 드디어 대부도 도착합니다.
바다를 빠져나와 섬으로 들어가니 바람이 좀 줄어듭니다.

확인해보니 시화방조제를 달리는데 시속이 10km/h 밖에 안나왔네요.
직선으로 뻥 뚫린 자전거길이라 시원하게 달릴 수 있을 줄 알았더니 바닷바람에 힘만 빠져버렸네요.


대부도에 들어가자마자 우측으로 바로 해수욕장이 하나있네요.
방조제를 넘느라 떨어진 체력도 채울겸 잠시 바다를 구경하며 쉬어갑니다.
이제 6월초인데 벌써부터 텐트와 사람들로 해변이 가득찼네요.


그러고보니 어느덧 점심시간이 한참 넘었네요.
마침 바로 해수욕장옆 식당들중에 하나를 골라 들어갑니다.


바다가 바로 옆으로보이는 창가에 자리를 잡고 음식을 기다리며 바다구경을 합니다.


음식이 나오는데 꽤많은 시간이 걸리네요.
그러는 사이 어느덧 넓은 식당안엔 하나둘 손님이 들어차기 시작합니다.

덕분에 충분히 쉬며 바닷구경을 하고 있는사이
드디어 주문한 음식이 나오기 시작합니다.


동동주에 해물파전. 회덮밥. 조개탕은 서비스입니다.
바다를 끼고 바닷바람을 맞으며 마시는 동동주의 맛이 끝내줍니다.

식사를 하는 사이에 어느덧 바닷물이 서서히 빠지기 시작합니다.
갯벌에 나와 즐기는 사람들과 갈매기에게 먺이를 주며 노는 사람들의 모습도 보이네요.


배를 채웠으니 이제 다시 출발해야 할 때입니다.
자전거에 올라 도로를 따라 다음 목적시 선재도로 향합니다.
지나는 길에 대부도를 지키고 있는 히어로들과도 만났네요. ㅎㅎ


아일랜드 CC 앞에서 잠깐 휴식.
지도를 보니 여기만 돌아서 내려가면 선재도를 건너는 다리가 나오네요.


다리를 건너 선재도로.


선재도로 들어가자마자 바로 좌측으로 하나의 섬이 보이네요.
썰물때만 바닷길이 열린다는 목섬입니다.
갯벌위를 운행하는 트랙터 버스도 보이네요.


이제 다시 마지막 목적지 영흥도로 향합니다.
선재도에는 도로 우측으로 자전거길이 잘 닦여 있네요.


영흥대교를 지나 영흥도에 도착.
영흥도 초입에서 안으로 조금만 들어가면 버스터미널을 만날수 있습니다.
잠시 화장실도 이용할겸 쉬면서 보니 오이도역까지 운행하는 버스들이 다니네요.


영흥도에 왔다고 그냥 갈 수는 없으니 가까운 곳에 있는 십리포해수욕장으로 향합니다.
차가 많진 않지만 그만큼 관리가 안되어 갈라지고 깨진 도로를 달려 해수욕장에 도착합니다.
여기도 역시 긴 백사장위로 텐트들이 가득 자리를 차지하고 있네요.
어느덧 바닷물이 다시 차오르고 있네요.


마지막 목적지인 만큼 잠시 구경이나 할겸 해변을 거닐다보니 마주한 나무 데크 산책로.
바다를 따라 산책로를 잘 만들어 놓았네요.


이제 돌아가야 할 시간이네요.


그대로 왔던길을 따라 돌아오는 길..
어느덧 7시가 넘어 석양이 지기 시작합니다.
마침 대부도를 들어오자마자 만났던 방아머리해수욕장에 도착해 석양을 감상합니다.




바다로 지는 낙조는 정말 오랜만이네요.
석양이 지는 하늘은 언제봐도 아름답지만 그 중에서도 바닷가에서 보는것만한게 없죠.

이제다시 바다위를 달려 돌아가는 것만 남았네요.
돌아오는 길에는 대부도로 향하면서 봤던 아래쪽의 통행이 제한된 도로위를 달립니다.
앞에서 부는 바람도 없고, 차도 없고, 잘닦인 도로위를 순풍을 맞으며 순식간에 육지에 도착합니다.


돌아오는 길은 친구와의 저녁약속때문에 오이도역이 아닌 안산까지....
추가로 달리니 전체 92km를 달렸네요. ㅎ