the Desirable Garfield

원문 : http://developer.chrome.com/extensions/getstarted.html

오늘 : 2013 12 30

시작 : 크롬 확장 프로그램 만들기

네이티브 코드 없이 크롬 확장 프로그램에 등록할 수 있다. 이미 우리들에게 친숙한 웹 개발도구인 HTML, CSS, JavaScript의 주요 기술들로 확장 프로그램을 만들어 낼 수 있다. 이전에 웹 페이지를 만들어 본 적이 있다면, 꽤 빠르게 괜찮은 홈페이지 처럼 만들어 낼 수 있다. 원클릭으로 새끼고양이 그림에 접근할 수 있는 간단한 확장 앱을 보면서 바로 테스트해 볼 수 있다.

크롬의 옴니박스( Omnibox )에 쉽게 접근하도록 클릭가능한 아이콘 'Browser Action'이라 불리는 UI 엘러먼트를 우리는 구현할 수 있다. 클릭된 아이콘은 아래 그림과 같이 고양이 상품들이 가득한 화면이 띄워준다.

( 아래 그림이 안나올 경우, 위 원문 사이트를 다녀오면 잘 보여진다. )

가이드를 잘 따라와 준다면, 반짝거리는 디렉토리 하나가 당신 컴퓨터에 만들어 진다. 그 다음 당신이 가장 즐겨 쓰는 편집기( 개발 도구 또는 에디터 )를 띄운다. 그럼, 시작하겠습니다 !

먼저 선언( Declare ) 을 해야합니다.

우리가 가장 먼저 해야할 것은 manifest라 불리는 manifest.json을 만들어야 한다. manifest는 JSON형식과 다를바 없는 컨텐츠 테이블이다. 크롬 확장 앱의 이름, 설명, 버젼 등과 같은 속성에 대해 포함하고 있다. 상위 레벨에서 우리가 크롬에서 사용할 부분과 필요한 퍼미션( permissions )에 대해 선언할 수 있다.

새끼고양이 화면에서, 'Browser Action'를 을 만들고 싶었던 것 처럼, 인터넷에서 리소스를 부분적으로 가져와서 자유롭게 보여주려면, 크롬에게 뭔가 말을 해줘야 한다. Manifest 파일이 뭔가 말해줘야 하는 그 명령어들을 다음과 같이 포함하고 있다.

* Manifest.json

만들어 놓은 디렉토리에 menifest.json 파일 이름으로 데이터들을 저장하고 계속 진행한다. 또는 샘플을 다운로드 받아서 manifest.json으로 복사해 두어도 된다.

무슨 말인가요?

Maps Engine api 는 지도를 생성해준다. 레이어 기능이 있어서 자유자재로 지도정보를 저장할 수 있다.

https://developers.google.com/maps-engine/documentation/best-practices

admin SDK 는 사용자 정보를 관리할 수 있도록 도와준다. 사용자들의 계정정보를 그룹별로 저장하고 관리 해 준다.

https://developers.google.com/admin-sdk/directory/v1/reference/

geocode는 검색어에 해당하는 정보를 리턴해준다. 이 정보에는 위치정보가 포함된다.

https://developers.google.com/maps/documentation/geocoding/?hl=ko

Place api를 이용하면 해당 위치의 주변정보를 얻을 수 있다.

https://developers.google.com/places/documentation/search#PlaceSearchRequests

'제대로 배우는 NodeJS p170. ' 에 관한 내용이다.

처음에 MVC라고 해서 무슨 말인가 했다.

express말고 다른 MVC 모델 프레임웍을 소개하는건가 했다.

확장하기 편하도록 한 것으로 보인다.

이걸 MVC라 하기에는.. 좀 억지가 있어 보였다. '뭐..보는 사람마다 이해하는 사람마다 다르겠지만..'

내가 볼때에는 그냥 Visitor 패턴을 활용한 확장성을 높여준 코드로 보였다.

좀 더 풀어 쓰면,

Visitor 패턴을 활용한 CRUD 코드 작성하는 예제 코드라 생각하면 좋겠다. 

나는 CRUD는 IO접근을 위한 CRUD로 생각하고 있었지.. 이걸 따로 MVC로 CRUD를 구현했다는건지 어떤 의도였는지는 잘모르겠다. 뭐 여튼 결론적으로 하는 말은 같은것 같다. 편하게 코드짜게 해준다? ^^;

// CRUD 연결 메소드

exports.mapRoute = function ( app. prefix ) {

prefix = '/' + prefix;

var prefixObj = require( './controller/' + prefix );

// CRUD 연결 해주는 부분 : 색인 / 추가 / 조회 / 편집 / 업데이트 / 제거

app.get( prefix, prefixObj.index );

app.get( prefix + '/new', prefixObj.new );

app.get( prefix + '/:id', prefixObj.show);

app.post( prefix + '/create'. prefixObj.create)

app.get( prefix + '/:id/edit', prefixObj.edit);

app.put( prefix + '/:id', prefix.update);

app.del( prex + '/:id', prefixObj.destroy);

};

// 서버구동 부분에서 등록

...

app.get('/', route.index);

var prefixes = ['widgets'];

prefixes.forEach( function( prefix) { 

map.mapRoute( app, prefix );

});

....

// Widgets.js의 CRUD하는 실체 부분

exports.new = function( req, res ) { ... }

exports.create = function( req, res ) { ... }

exports.show = function( req, res ) { ... }

exports.destroy = function( req, res ) { ... }

exports.edit = function( req, res ) { ... }

exports.update = function( req, res ) { ... }

이렇게 하면~ 기본 단계 완성이 된다~

여기서 어떻게 확장이 되냐고?

위에 굵게 해둔 부분에서 추가 확장할 route를 만들면된다.

var prefixes = ['widgets', 'pictures', 'musics' ]; 

이렇게 한 후, pictures.js와 musics.js파일을 만들어서 똑같은 template으로 CRUD를 제공해 주면 됨! ㅋㅋ

요약 해서 말하면,

cURL로 테스트가 된다~ ㅋㅋ

curl --request GET http://ip:3000/widgets/new

curl --request POST http://ip:3000/widgets/create --data 'widgetname=name&widgetprice=1.0'

요러케~

난 갠적으로 다른 테스트툴을 쓰는데~ 간편하게 curl로 확인하는 것도 괜찮은 듯 하다~

MVC 흉내 내기 끝.