호기심, 관심사

도서 검색 크롬 확장프로그램 만들기 - 7. 크롬 확장프로그램 만들기

일단 현 수준으로 익스텐션까지 만들기로 하고 구글 형님에게 방법을 물어봤다. 링크를 보니 역시 만드는 방법을 아주 친절하게 떠먹여주신다. https://developer.chrome.com/extensions/getstarted

 
- menifest.json ( 예제를 참고해서 작성 ) 
- png 파일 ( 확장프로그램 아이콘으로 쓸 png 파일)
- 확장프로그램버튼 누르면 띄울 html 페이지를 같은 위치에 넣고 

chrome://extensions => 우측 상단 개발자 모드 체크 => 압축해제된 확장프로그램 로드 해서 위 3개파일 있는 곳을 지정해주면 끝.


그러나... 검색 결과를 누르면 php 소스가 그대로 출력된다. 왜일까. 브라우저에서의 동작과 Extension 에서의 동작이 차이가 나는 이유는 뭘까. 


검색해보니 크롬 확장프로그램은 PHP 를 Interpret 할 수 없기 때문이라는데 깔끔하게 이해되지는 않는다. 크롬 브라우저는 잘 동작하는데 얘만 왜 그럴까. 
 안되는 이유 이해는 천천히 하기로 하고 크롬 익스텐션으로 구현할 다른 방법을 찾아봐야겠다. 


,
호기심, 관심사

도서 검색 크롬 확장프로그램 만들기 - 6. 검색결과 페이지 다듬기

검색 결과 책 그림과 정보를 나란히 나오게 하고 그 사이를 선으로 구분해봤다.

아래 검색결과화면에서 책은 201개 이나 쿼리결과는 10개씩 받아오고 있다. 구글 검색했을때 아래에 나오는 페이지 이동 링크와 유사한 것을 만들어야겠다. 


CSS 적용을 위해 상단 회색바탕은 <header>로, 검색결과가 많아 여러 페이지로 이동할 수 있는 링크를 숫자로 표시할 영역은 <footer>로 구분했다. 


,
호기심, 관심사

도서 검색 크롬 확장프로그램 만들기 - 5. 중간 리뷰

이 프로그램을 만드는 목적중 하나는 2번의 강의에서 배운 것들을 실습해보기 위함이다.

그러면 크게
  • HTML, CSS, JavaScript 로 웹페이지 만들기
  • PHP로 클라이언트 입력을 받아 처리하여 동적으로 결과를 보여주기
  • PHP로 중복되는 HTML 페이지, 소스를 간소화하기
  • MySQL DB 연동
  • 크롬익스텐션 만들기
인데, 현재까지 적용못해본 것들이 CSS/JavaScript 와 DB 연동, 크롬익스텐션이다.

그리고 추가로 해보고 싶은것은 두가지
- GitHub 에 소스 올려놓고 작업해보기
- 다 만들면 AWS에 올려놓고 써보기 

CSS/JavaScript 이용해서 일단 검색 결과페이지를 어떻게 해볼까. 
아마존처럼 단을 나누고 Description 일부를 넣어보기로 한다.

그리고 MySQL DB 연동은 뭘로 할까... 고민중 

마지막으로 확장프로그램을 만드는 것 자체는 특별히 문제될 것은 없어보이는데 만약 이걸 Public 하게 크롬스토어에 등록을 한다면 문제가 있다.

알라딘 도서 검색시 API내 개인이 신청한 TTB 값이 포함되는데, 내 TTB 키를 넣는다면 불특정 다수가 사용하게 된다는 점. 일 5천 쿼리가 넘어갈 수도 (진짜?) 있다는 점이 걸린다.

검색창이나 옵션으로 TTB 키를 입력받아서 쓰게끔 고쳐야겠다.


,
호기심, 관심사

도서 검색 크롬 확장프로그램 만들기 - 2. 알라딘 API 사

찾아보니 API는 아무나 쓸 수 있는게 아니고 알라딘으로 부터 TTBKey를 발급받아 쿼리문에 포함시켜야 사용이 가능하다.  

 ==> 알라딘 OpenAPI 신청, 사용방법 참고 (http://blog.aladin.co.kr/openapi/category/29154404?communitytype=MyPaper

TTB 란 Thanks To Blogger 의 약자. 예를 들어 본인 블로그에 책 리뷰를 작성하고 알라딘 API 를 사용해서 책 링크를  걸었을때 글을 본 사람이 해당 링크를 통해 알라딘에서 책을 구입하는 경우 수익을 일정부분 나눠주는 제도.

API 는 3가지로 1.일반검색(제목,저자등 검색어로), 2.단독검색(ISBN or 알라딘id), 3.상품검색(베스트,신간 식) 이 있는데 1번 방식으로 하면 될듯.

URL 쿼리 input/output 옵션이 꽤 다양하다.

  • 요청 URL샘플 : http://www.aladin.co.kr/ttb/api/ItemSearch.aspx?ttbkey=TTBKey&Query=aladdin&QueryType=Title&MaxResults=10&start=1&SearchTarget=Book&output=xml&Version=20070901 

<< 검색 요청(Request) 파라미터 스펙 >>
구분 요청변수 변수종류 설명
필수 TTBKey 문자열 부여받은 TTBKey값
Query 문자열 검색어
옵션
(옵션 조정 변수가 없을 경우에는 기본값으로 검색)
QueryType Keyword (기본값) : 제목+저자
Title : 제목검색
Author : 저자검색
Publisher : 출판사검색
검색어 종류
SearchTarget

Book(기본값) : 도서
foreign : 외국도서
Music : 음반
DVD : DVD
Beauty : 화장품
Gift : 기프트
used : 중고샵(도서/음반/DVD 등) 
Movie : 영화정보 
All : 위의 모든 타겟(몰)

검색 대상 Mall
Start 1이상, 양의 정수(기본값:1) 검색결과 시작페이지
MaxResults 1이상 100이하, 양의 정수(기본값:10) 검색결과 한 페이지당 최대 출력 개수
Sort accuracy : 정확도순(기본값)
PublishTime : 출간일
Title : 제목
SalesPoint : 판매량
CustomerRating 고객평점
MyReviewCount :마이리뷰갯수
정렬순서
Cover Big : 큰 크기
Mid(기본값) : 중간 크기
Small : 작은 크기
Mini : 매우 작은 크기
None : 없음
표지크기
CategoryId 양의정수 - 분야의 고유 번호(기본값:0, 전체)
(참고 : 알라딘 모든 분야 카테고리)
특정 분야로 검색결과를 제한함
Output XML(기본값) : REST XML형식
OS : 확장RSS(OpenSearch방식)
JS : JSON방식
출력방법
Partner 문자 파트너코드. 제휴사의 경우 파트너코드 입력으로 제휴사 유효성 체크.
Omitkey 양의정수(기본값:0) Omitkey가 1인경우 결과링크값에 TTBKey가 제외됨.
InputEncoding 문자열(인코딩의 영문이름 - 기본값:utf-8) 검색어의 인코딩 값을 설정. "utf-8"이나 "euc-kr"과 같은 인코딩의 영문이름.
Version 정수형 날짜
(기본값: 20070901이며 20131101도 가능)
검색API의 Version(날짜형식)을 설정. 
20131101의 경우 검색결과 최대 상품수는 200건으로 제약.
CallBack javascript function이름 호출후 불려질 javascript function의 이름을 지정.
output이 js인 경우에 한해 작동됨.
outofStockfilter 품절/절판 등 재고 없는 상품 필터링("1"이 제외 필터) 숫자

<< 검색 응답(Reponse) 결과값 스펙 >> 
필드명 설명 자료형
title 조회결과의 제목 문자열
link 조회결과를 확인할 수 있는 Html페이지의 링크 문자열(URL)
language 검색결과의 언어. 무조건 "ko"가 입력됨 문자열
copyright API제공자의 Copyright 문자열
pubDate 조회시간(GMT기준시) 날짜
totalResults 총 검색 결과 개수 정수형
startIndex 현재 페이지 정수형
itemsPerPage 한 페이지당 출력 결과 개수 정수형
query 요청 쿼리 문자열
version 현재 검색API의 Version 정수형 날짜
searchCategoryId 특정 분야로 검색을 제한한 경우 분야의 고유번호 출력 정수형
searchCategoryName 특정 분야로 검색을 제한한 경우 분야의 이름 출력 문자열
ISBN 해당 아이템의 ISBN(10자리) 숫자
ISBN13 해당 아이템의 ISBN(13자리) 숫자
item < itemId 해당 아이템의 고유한 값(알라딘 내부 KEY값) 숫자
item < category
(출력형식 OS에서만 해당)
'알라딘'이 출력 문자열
item < content:encoded
(출력형식 OS에서만 해당)
바로 사용할 수 있는 HTML이 포함된 간략한 상품 설명 문자열
item < description OS 출력형식: HTML이 없는 상품설명
기타 출력형식: HTML이 포함된 간략한 상품 설명
문자열
item < pubDate
item < dc:date
도서 출간일(GMT기준) 날짜
item < dc:creator
(출력형식 OS에서만 해당)
'aladdin'이 출력 문자열
item < priceStandard 상품 정가 숫자(통화)
item < priceSales 알라딘에서 판매하는 판매가(수시로 변동 가능) 숫자(통화)
item < stockStatus 상품의 재고 상태.
재고 보유 상태에서는 특별한 문자도 들어가있지 않으며 
품절,절판 등의 특별한 상태일때만 문자열이 출력
문자열
item < mileage 상품 구입시 지급되는 마일리지 숫자(통화)
item < cover 상품 표지 URL 문자열(URL)
item < categoryId 상품 대표 분야의 고유번호(알라딘은 복수 분류체계,그 중 대표 분류 하나)(참고 : 알라딘 모든 분야 카테고리) 숫자
item < categoryName 대표 분류의 상위 분류들(분류 히스토리, "<"를 기준으로 나누어져 있음) 문자열
item < publisher 상품의 출판사(제작사) 문자열
item < customerReviewRank 상품에 대해 고객이 부여한 별점(10점만점) 숫자

저자(김충원)로 검색하면 이런 식으로 xml 반환이 된다. ( 확장RSS, JSON 포맷도 지원함 ). To be continued....
 


,
호기심, 관심사

도서 검색 크롬 확장프로그램 만들기 - 1. 시작

 올여름과 가을에 각 5회에 걸쳐 웹어플리케이션 관련 수업을 두번 들었다. 교육이란게 그렇다. 필요해서 선택했고 들을 땐 내 것이 된 것 마냥 이해가 잘 되고 지적포만감이 들기도 한다. 하지만 한 주만 지나면 도루묵 상태로 컴백하기 일쑤다. 

 지난번 수업은 내용도 좋았지만 중간중간 개발자로서 강사가 본인이 느낀 자세와 마인드 이야기가 더 좋았다. 특히 보편적인 프로그램과 개인적인 프로그램에 대한 이야기가 떠오른다. 자기가 필요해서 만든 개인적인 프로그램은 세상에서 자기만 사용할테고, 자기에게만 의미가 있겠지만 그렇기 때문에 프로그램에는 온전히 자기 자신이 들어가 있다. 그래서 100% 온전히 목적과 기능을 이해한 상태에서 작업을 할 수 있고 불필요한 겉치레 기능나 낭비요소도 적다. 

 하지만 보편적인 프로그램. 예를 들어 일로써 만들거나, 불특정 다수를 타겟으로 만드는 것들은 계획대로 진도를 잘 맞춰 만들었다고 해서, 버그가 없다고 해서, 많은 사람이 사용한다고 한다고 해도 뭔가 하나 부족한게 있다. 바로 본인에게 얼마나 의미와 쓰임새가 있는지이다.

 사람마다 다를 수 있겠고 모름지기 개발자라면 본인의 것이 아니더라도 잘 만드는데 당연하다. 하지만 동기부여나 성취감 측면에서 아무래도 Self-Inspired 되서 시작한 것에는 견주기 힘들 것 같다. 개인적인 프로그램이 주변을 통해 입소문의 나 쓰는 이가 늘어나면서 보편적인 프로그램으로 대박이 나는 경우가 많지 반대로 처음부터 보편적인 프로그램을 만들어 대박내겠다고 해서 잘 되는 경우는 드문것 같다.   

 작은 것부터 개인적인 것부터 시작해야 의미와 성취감을 갖기 좋다는 이야기다. 어쨌든 들은 건 다른 귀로 날아가버리고 본건 잠들면 다음날 잊혀지지만 직접 해본건 평생 기억에 남는다고 했던가. 하나 만들어보기로 한다.

 평소에 생각했던 여러 아이디어중 만만해 보이는 것을 골랐다. 읽고 싶은 책들이 있으면 에버노트에 "읽을 책"이라는 노트북 안에 읽을 책들 커버이미지를 넣은 노트들을 만들어 넣는다. 도서관에서 책을 빌릴 때나 서점에서 책을 구매할 때 참고한다. 이후 책을 다 읽으면 후기를 적어 "읽은 책" 이라는 노트북으로 옮겨 넣는다. 


이때 책 커버 이미지를 찾으려면 알라딘 사이트로 가서 도서를 검색해야 되는데, 크롬 익스텐션으로 만들어서 책을 검색하고 이미지를 찾아낸다면 노트에 이미지 넣을 때 편할 것 같다.


,
호기심, 관심사

풀스택(Full Stack) 개발자

난 웹개발자는 아니다. C/C++ 로 Windows Application 과 Embedded OS 기반 Application ,Device Driver 를 주로 개발해봤다. 최근 웹에 급 관심을 갖고 적극적으로 배우고 있으니 곧 웹 개발자가 될것 같다. ^^

웹을 선택한 이유에 대해 곰곰히 생각해봤다. 다른 것도 많은데 난 왜 웹을 해보고 싶은걸까. 

첫번째는 플랫폼 프리한 특성. 요새 왠만한 기기들은 인터넷이 연결이 가능하고 웹을 이용할 수 있다. 따라서 웹으로 서비스를 만들어 놓으면 기기가 안드로이드든 iOS든 윈도우든 상관없이 실행할 수 있다.
 
두번째로는 확장 가능성. IFTTT, Zapier 와 같은 웹 오토메이션 서비스를 보며 Open API 가 조합되면서 예전에는 단독으로 만들기 요원했던 기능들을 서로 연결하면서 자동화할 수 있는 것을 발견했다. API가 홍수인 시대라 외부에서 빨대를 잘 꼽아 쓸 수 있는 서비스들이 많다. 내 것 역시 누군가가 빨대를 꼽아 쓸 수 있도록 홈을 잘 만들어놓기만 하면 된다. Thing 들이 기하급수적으로 증가하고 있고 크기나 기기 사양은 컴팩트해지는 추세다. 기기들이 네이티브하게 갖고 있을 수 있는 기능은 한정적일 수 밖에 없지만 웹을 통해서는 기능확장이 무한정 가능하다.

마지막으로는 호기심이다. 프로그래밍 개발업무에서 손을 뗀지는 수년이 넘었다. 웹 자체가 진입장벽이 낮다고는 하지만 각종 서비스들의 API 가 많아진데다가 손품발품을 줄여주는 각종 프레임워크도 많고 클라우드 기반 인프라, 가상화 지원 등이 잘 되있는 상황이니 할만하다고 느꼈다. 생각없이 웃고 들어왔다가 울고 나갈 수도 있다. 나이와 주변환경을 봤을때 지금 아니면 늦을 것 같은 절박한 심정도 한몫했다.

오픈튜토리얼에서 제공하는 웹프로그래밍 수업을 듣고 나니 이런 기사도 눈에 쓱 들어온다. 웹세계에 이제 막 들어선 이 시점에 제목만 봐도 왠지 값싸고 저렴하게 일당백 해주실 수 있는 개발자 뽑아요. 라는 구인문구가 떠오른다. 풀스택 개발자는 뭐하는 사람일까. 설마 모든 레이어의 기술을 마스터하고 있는 사람을 이야기 하는 건 아니겠지...


웹 개발자가 되는 진입장벽은 낮으나 관련 기술은 갈수록 복잡해지고 있다. 업계의 다이나믹한 특성때문에 당시 가장 인기있고 유망한 툴과 언어를 습득하는게 필요하다. 개발자에게 한개의 언어 혹은 특정 프로세스만 요구하는 시대는 갔다. 요새는 멀티 플랫폼을 걸친 다양한 기술을 꿰차고 있어야 한다.

풀스택 개발자란 어떤 사람을 말하는가?

풀스택 개발자라함은 프론트 엔드, 백엔드 기술 모두를 가지고 일할 수 있는 개발자를 뜻한다. 좀더 상세하게 하자면 DB를 다룰줄 알고, PHP, HTML, CSS, JavaScript 그리고 프론트 엔드 코드에 필요한 포토샵 디자인 기술까지 포함한다.

풀스택 개발자는 위 모든 기술을 마스터해야할 필요는 없다. 그것은 거의 불가능하기 때문이다. 그저 저 기술들을 가지고 일하는게 익숙하거나 편하면 되는 것이다. 

풀스택 개발자를 카테고리를 나누고 세분화해보면

System Administration
  1. Linux and basic shell scripting
  2. Cloud computing : Amazon, Rackspace, tec
  3. Background processing : Gearman, Redis
  4. Search : Elasticsearch, Sphinx, Solr
  5. Caching : Varnish, Memcached, APC/OpCache
  6. Monitoring : Nagios

Web development tools
  1. Version control : Git, Mercurial, SVN
  2. Virtualization : VirtualBox, Vagrant, Docker

Back-end tech
  1. Web servers: Apache, Nginx
  2. Programming language: PHP, NodeJS, Ruby
  3. Database: MySQL, MongoDB, Cassandra, Redis, SQL / JSON in general

Front-end tech
  1. HTML / HTML5: Semantic web
  2. CSS / CSS3: LESS, SASS, Media Queries
  3. JavaScript: jQuery, AngularJS, Knockout, etc.
  4. Compatibility quirks across browsers
  5. Responsive design
  6. AJAX, JSON, XML, WebSocket

Design
  1. Converting website design into front-end code
  2. UI
  3. UX

Mobile Technology
  1. iOS
  2. Android
  3. Hybrid: PhoneGap, Appcelerator


,
호기심, 관심사

생활코딩 오프라인 수업 후기


일요일 아침 선릉 D캠프에서 참여한 생활코딩 오프라인 수업, 웹 어플리케이션을 만드는 전체 과정을 훑어주는데 무료인데다가 8시간짜리다. 생활코딩 사이트에도 물론 동영상 강의가 있고 자료가 쌓여있지만, 들어야지 들어야지 세월아 네월아 하고 있는 관계로 직접 수업에 와서 짧고 굵게 듣기로 했다.

기억하기론 몇년전 생활코딩 사이트는 초보들을 대상으로 웹프로그래밍을 소개하는 곳이였다. 요즘은 MOOK 와 비슷한 것 같으면서도 살짝 다른게 컨텐츠를 생산하고 소비하는 사람들을 연결하는 공공재 역할을 하고 있다. 이름도 오픈 튜토리얼스로 바뀌었다. (https://opentutorials.org/)

수업 내용도 내용이지만 강사분은 웹을 두루두루 이해하고 있고 사람들에게 쉽게 전파하는 것을 즐기는 것 같다. 웹과 인터넷의 차이. 웹이 어떻게 해서 만들어졌는지 이런 저런 스토리를 조곤조곤 알려주던게 기억에 남았다. 기술도 배경을 알면 이해하기 쉬운법. 팀버너스리가 유럽입자물리연구소에서 웹이 필요할 수 밖에 없었겠구나. HTML 을 그가 다 만들지는 않았지만 링크라는 것을 만들었기 때문에 웹의 아버지로 불리고 있다는 것도 알게되고, 이후 CSS, JS 가 출현한 배경도 어느새 이해할 수 있었다.


수업 막판에 보여준 그래프. 배우는 것이 교양과 직업으로 나뉘게 되는 접점이 있으니 잘 찾으라는 당부를 해주셨다. 프로젝트나 일도 어느 수준을 넘어서려면 노력과 시간투자가 반드시 필요하고 전문가가 되려면 반드시 넘어야할 단계다. 삶의 당연한 원칙이지만 잊고 산거 같다. 무료 이상의 경험을 한 하루다.



,
호기심, 관심사

홈플러스와 스타벅스를 해킹하는 라이프해커들

일상의 불편함 또는 아이디어가 만든 작은 생활 코딩들. 곧 막히겠지만 기업입장에서는 잠재적인 취약점을 알게 되니 좋고, 이런 불편함이 있었다는 아이디어를 거저 얻는것이니 애교로 봐줘야 하지 않을까 싶다.  


출처 : http://www.bloter.net/archives/227537

# 마트모어 
“저는 사람들이 이 서비스를 좀 더 많이 썼으면 좋겠어요. 물건의 가격 주도권을 지금은 대형마트가 쥐고 있는데, 이런 서비스가 확산하면, 주도권을 사용자가 쥐게 되지 않을까요? 소비자의 파워가 강해지면, 마트에서는 좀 더 투명하게 제품 가격을 관리할 것이고요. 마트 3사가 경쟁을 통해 소비자는 좀 더 저렴한 가격에 물건을 구입하는 효과도 볼 수 있을 것입니다.”




# 스타벅스 와이파이 북마크릿 http://tumblog.ryubro.com/

‘우리가 보통 쓰는 북마크는 웹페이지 주소가 써 있잖아요. 하지만 북마클릿 속에는 자바스크립트 소스코드가 들어 있어요. 웹페이지에서 북마클릿을 누르면 소스코드가 가리키는 일을 수행하도록 하는 간단한 기능입니다.”
스타벅스 자동 로그인 소스코드는 사용자의 이름을 멋대로 만든다. 존, 스티브, 마이클, 리차드, 브라이언, 윌리엄스, 브라운, 밀러, 데이비스와 같은 이름 중 아무거나 2개를 고르도록 돼 있다. e메일 주소도 마찬가지로 영문 알파벳 중 무작위로 골라 e메일 형식으로 만들어준다. 이후 스타벅스 로그인 화면에 서버로부터 ‘Y’ 응답을 받았다는 신호를 준다. 가짜 정보로 와이파이에 접속할 수 있는 것은 이 같은 기능 덕분이다.
김병용 개발자는 “이게 대단히 유용하다고는 말할 수 없지만, 재미있지 않나요?”라고 반문했다. 김병용 개발자에게 생활 해킹은 자신이 할 수 있는 범위 안에서 즐길 거리를 찾는 일종의 ‘트리비아’다.



# CGV 자동로그인 http://tumblog.ryubro.com/

CGV 홈페이지에 접속해 예매하고자 하는 영화를 고르고, 극장과 관람 인원수를 선택해 좌석 지정 페이지에 접속한다. 좌석 지정 페이지에서 CGV 자동 예매 북마클릿 단추를 누르면, 앉고 싶은 자리를 선택할 수 있다. 이미 누군가 예매한 자리를 골라도 된다. 정상적인 CGV 홈페이지라면 이미 누군가 구입한 자리라며 마우스 클릭이 불가능하겠지만, CGV 자동예매 북마클릿을 쓰면 선택할 수 있다. 이제 사용자가 할 일은 기다리는 일이다. 만약 앉고 싶은 자리를 먼저 구입한 누군가 예매를 취소하면, CGV 자동 예매 북마클릿이 알람을 울려준다. 사용자는 다시 컴퓨터 앞으로 돌아와 여유롭게 결제하기만 하면 된다.


,
  [ 1 ]  

최근 댓글

최근 트랙백

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

태그

링크

카운터

Today :
Yesterday :
Total :