새로운 컨퍼런스 소개 - ANGLEBRACKETS

2013.03.21 00:33

우연히 front-end를 주제로 하는 새로운 컨퍼런스를 발견했다. <anglebrackets/>라는 행사인데 무려 4일 동안 열리는 상당히 규모가 큰 컨퍼런스이다. (홈페이지)


올해는 4월 8일부터 11일까지 미국 라스베가스에서 개최된다. 컨퍼런스만 참여하려고 해도 1,700불에 가까운 비용을 지불해야 하는 상당히 고가(?)의 컨퍼런스인데 워크샵이 포함된 패키지를 선택하면 최대 2,500불에 가까워진다. 워크샵 컨퍼런스에는 MS 설피스 윈도 RT 테블릿이나 넥서스 7을 준다고..


워크샵의 주제는 다음과 같다.

Day of Single Page Applications

On the Metal: Essential HTML5, CSS3 and JavaScript for All Developers

Building Applications with ASP.NET MVC 4

Hacking the Creative Brain: Work Better, Produce More

User Experience Design for Non-Designers: An Interactive, Immersive Workshop


개발 관련 프로그램을 보니 ASP.NET이 포함되어 있는 것으로 봐선 Microsoft와 연관있는 곳에서 주최하는 것으로 추측한다. 세션은 상대적으로 MS의 향기가 덜 나는 편이다. 아무래도 MS의 기술만으로 채우기는 현실적으로 어렵겠지. 트위터나 웹에서 심심치않게 볼 수 있는 라이브러리들에 대한 세션도 보이고 HTML5, CSS에 대한 세션도 중간중간에 보인다. 중간 중간에 SPA라고 해서 한 페이지에서 동작하는 애플리케이션에 대한 언급이 눈에 띄는 것을 보니 한 페이지 애플리케이션 만들기라는 주제가 요즘 미국에서 유행하는 것은 아닌가 하는 생각이 든다. 세션도 전반적으로는 MS의 기술을 활용한 세션이 꽤 되는 편이다.


마지막으로 스피커를 보고 있는데.. 어이쿠.. 대부분 MS와 연관된 사람들이 스피커로 나온다. 대부분의 웹 관련 컨퍼런스에서 쉽게 찾아볼 수 있는 구글 사람은 단 한 명도 발견할 수가 없다. 아무래도 MS에서 주최하거나 관련이 깊은 단체(개인들?)에서 진행하는 행사인 것 같다. 


어찌됐든 세션의 이름만 봐서는 웹을 개발하는 사람이라면 관심을 가질만한 주제라 행사가 열리는 기간 동안에는 주의깊게 살펴보게 될 것 같다. 


nundefined HTML5_JS_CSS anglebrackets, conference, 컨퍼런스

fluent 2013에서 관심 있는 세션

2013.03.01 12:09

JavaScript와 HTML5를 주제로 하는 Fluent 컨퍼런스가 5월 28일부터 30일까지 샌프란시스코에서 열린다. 한 번쯤 가보고 싶은 컨퍼런스지만 이래저래 연이 닿고 있지 않은 컨퍼런스다. 트위터를 돌아다니다가 누가 이 컨퍼런스에 대해 이야기했길래 가볍게 스케쥴을 살펴보다가 관심이 생기는 세션 몇 개를 정리해본다.


Secrets of Awesome JavaScript API Design

혼자만 사용할 기능을 만드는 것이 아니라면 항상 고민하게 되는 주제이다. 설명 중 APIs are developer UX.라는 표현이 와닿는다.


Who Killed My Battery: Analyzing Mobile Browser Energy Consumption

모바일 브라우저와 배터리 소모량의 관계라니. 삼성전자와 같은 곳에서는 이에 대한 정보가 있겠지만 그 누구도 이야기해주지는 않는다. 웹서비스 회사에서는 관심도 없고 측정하려 하지도 않고. 좋은 정보를 얻을 수 있을 것 같다.


Web Components: A tectonic Shift for the Web Platform

아직 널리 퍼지진 않았지만.. 조금 더 보기 좋은 웹을 만드는데 도움이 될 것이라고 생각한다.


How To (Semi-)Automate JavaScript Refactoring

Refactoring에서 한 번 낚이고, Automate에서 두 번째로 낚이고, (Semi-)에서 빵 터졌다. 보다 좋은 코드를 만드는데 도움이 될 것 같다.


Break Out of The Browser With HTML5

구글 패키지드 앱이 주제로 보이는데.. 들어본 적이 있는 것 같기도 하고 아닌 것 같기도 하고 가물가물하다. 구글 확장 프로그램을 볼 때 봤던가.. 각설하고, Google Packaged Apps가 업데이트 됐다보다. 이에 대한 세션. 브라우저 바깥에서도 의미있는 HTML5를 만드는 좋은 도구가 될 듯.


Improving JavaScript Code Quality: Strategies and Tools

코드의 퀄리티가 생산성이나 총 운영비용의 감소로 이어진다는 이야기는 개발자 사이에서 많이들 하는 이야기고 -내가 모르는 어느 곳엔가- 이에 대한 연구 결과도 있을 것으로 예상된다. 하지만 최근의 내 주위에서는 동작만 하면 장땡이라는 사업가들이 너무 많아서 뭐가 옳은지 혼란스럽다. 어쨌든.. 2~3년 전에 시도했다가 지금은 싸그리 없애버린 JavaScript Code의 품질에 대한 세션. 아마 계속 했으면 이런 것도 가능했을라나.


An Overview of ECMAScript6

다음 버전의 자바스크립트 표준인 ECMAScript6에 대한 세션. 올해 말까지 표준 제정이 끝나고 나면 내년부터는 이 표준을 사용할 수 있는 브라우저들이 훨씬 많아질 것이다. 전공 필수 과목같은 느낌으로 들어야 할듯.


Scraping the World with JavaScript

Node.js로 만드는 크롤러와 스크랩퍼라니.. 재미있을 것 같다. 만들어보고 싶은 것이 있어서 Python 공부를 좀 해봤는데 그냥 때려치고 Node.js로 가버릴까..;;



세션들을 살펴보다가 들은 생각은 클라우드로 백엔드 하나쯤은 구성할 수 있어야 한다는거랑 WebRTC가 있는데 소개만 봐서는 며칠 전에 한 Getting Started with WebRTC와 큰 차이가 없어보인다는 것.


Fluent는 작년의 경우 컨퍼런스 참석자들에게 모든 세션의 동영상을 제공해줬는데 올해도 그럴지 궁금하다. 주변에 컨퍼런스 가는 사람이 없을지 잘 찾아봐야겠다.







nundefined HTML5_JS_CSS code quality, ECMAScript, ecmascript6, fluent, fluent conf, html5, javascript, node.js, refactoring, web components, webrtc

자바스크립트를 배우는 좋은 방법

2013.02.16 01:10

자바스크립트를 배우는 좋은 방법이라는 글이 올라왔는데 상당히 수긍할 수 있는 내용이라 간단히 요약하고 의견을 추가해본다. 원문은 http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/ 이다.


0번째: 어떤 것이 자바스크립트인지 이해하기

자바스크립트가 정확히 무엇을 의미하는지를 이해해야 한다는 요지이다. 그리고 라이브러리를 사용하기 전에 자바스크립트를 먼저 익히라고 조언해준다.


첫번째: 코드카데미(Codecademy.com)에서 자바스크립트 코스 수강하기

최근 코드카데미에서 파이썬을 공부했었는데 여기서도 첫번째로 코드카데미를 추천한다. 내용이 일반인을 대상으로 하고 있기 때문에 매우 쉽게 공부할 수 있다. 


두번째: appendTo의 스크린캐스트 보기

동영상으로 자바스크립트에 대한 강의를 듣는다. 영어의 압박이 있으므로 영어에 익숙하지 않다면 한국어로 된 생활코딩을 활용해보는 것을 추천한다. http://opentutorials.org/course/49


세번째: 좋은 자바스크립트 개론서 읽기

코드카데미만 잘 들어도 어느 정도 이해가 되겠지만 좀 더 잘 알아보기 위해서 좋은 개론서를 읽으면 더 도움이 될 것이다. 사이트에서 언급한 내용은 다음과 같다.


1. A Re-Introduction to JavaScript

모질라 개발자 네트워크에 올라와 있는 글로 안타깝게도 한글로 번역된 내용은 없다. 다른 글 일부가 한글로 번역되어 있으므로 필요한 경우 https://developer.mozilla.org/ko/docs/JavaScript 를 확인하기 바란다.

2. Eloquent JavaScript

이 책은 책으로도 팔지만 온라인에 무료로 공개되어 있기도 하다. http://eloquentjavascript.net/ 기억이 맞다면 온라인에 공개된 것보다 판매되고 있는 책이 더 최신판이므로 책을 구매한다고 해서 나쁜 선택은 아닐 것이다. 다행히 이 책은 자바스크립트 개론이라는 제목으로 번역서가 출간되어 있다. http://acornpub.co.kr/book/eloquent-javascript

3. Getting Good with JavaScript

이 책은 이 글을 쓴 사람의 책이다. 위에서 설명한 두 가지와는 다르게 빠르게 익힐 수 있도록 구성했다고 하며 6시간이 넘는 분량의 스크린캐스트를 제공한다고 한다. 책을 보지 않고 속단하는 것이지만 스크린캐스트를 언급하는 것을 보니 그냥 책 팔려고 끼워넣은 것이 아닐까 하는 생각이 든다.


네번째: 파이어버그(또는 개발자 도구)를 설치하고 공부하

이 두 가지 도구 모두 자바스크립트 개발에는 빠져서는 안될 중요한 도구다. 많은 개발자들이 크롬, 사파리, 파이어폭스에서 이들 도구를 사용하여 개발한 후 IE에서 보정하는 형태로 개발을 진행하고는 한다. 개인적으로는 파이어폭스 + 파이어버그 조합보다는 크롬 + 개발자 도구 조합을 추천한다. 페이지에 방문하면 몇 가지 글에 대한 링크가 걸려 있으니 살펴보기 바란다. 참고로 상반기 내에 한국어로 된(!!!) 자바스크립트 디버깅과 테스트에 대한 책이 출간될 예정이니 이 책을 기다려 보는 것도 좋을 것이다.


다섯번째: 책 읽기

네번째까지 했다면 대략 기초적인 것을 살펴본 것이다. 이제 더 깊은 수준의 내용을 다루는 책을 볼 차례다. 추천하는 책은 다음과 같다.

1. Professional JavaScript for Web Developers

2. JavaScript 24-hour Trainer

3. JavaScript Patterns

4. JavaScript: The Good Parts

1, 2번은 일반적인 내용을 깊게 파들어간 책이고 국내에 역서는 없다. 3, 4번은 자바스크립트를 이해하고 잘 사용하는데 도움이 되는 책이다. 그리고 국내에 번역서도 출간되어 있다.


여섯번째: 직접 만들기

책에 포함되어 있는 예제를 가지고 이리 저리 바꿔보거나 실제로 뭔가 만들어보는 것이 좋다. 이 글에서 추천하는 프로그램은 포토갤러리, To-do 리스트, 애니메이팅 박스이다. 


일곱번째: 자바스크립트 라이브러리 배우기

자바스크립트를 많이 익혔으니 이제 슬슬 자바스크립트 라이브러리를 배울 때가 됐다. jQuery를 비롯하여 다섯 가지 정도의 라이브러리를 추천하고 있다. 아무래도 전세계적으로 - 그리고 국내에서도 - jQuery가 최고의 인기이므로 jQuery를 선택하는 편이 도움이 될 것이다. 혹시나 특이한 것을 좋아하거나 남들과는 다른 것을 해보고 싶은 분이라면 JindoJS라는 국내에서 만든 라이브러리를 써보는 것도 괜찮으리라 생각한다.


여덟번째: 자바스크립트를 잘 하는 사람과 가깝게 지내기

자바스크립트를 잘하는 사람이 많으므로 이 사람들의 블로그도 보고 트위터도 보라고 추천하고 있다. 콕 찝어서 33명의 개발자를 추천하고 있으니 참고하기 바란다. 이 외에 팟캐스트인 JavaScript Show나 이메일 뉴스레터인 JavaScript Weekly도 추천하고 있다. 


이 글에서 언급하고 있는 정도를 공부하고 계속해서 뭔가를 만들어본다면 자바스크립트 실력이 상당히 늘어날 것이다. 주로 해외의 자료가 대부분이지만 몇몇 책들은 국내에 번역서가 나와 있고 라이브러리에 관련된 책은 워낙 많이 출간되어 있으므로 실제 공부를 하는데 큰 지장은 없을 것이다. 가장 중요한 것은 많이 만들면서 다양한 경험을 쌓는 것이다.


자바스크립트를 공부하기 위해 무엇부터 시작해야 할지 고민 중이라면 이 글에서 추천하는 방식을 따라보면 어떨까?


nundefined HTML5_JS_CSS javascript, javascript patterns, javascript show, javascript weekly, JavaScript: The Good Parts, jindo, jindojs, JQuery, 공부, 더글라스 크락포드의 자바스크립트 핵심 가이드, 자바스크립트, 자바스크립트 개론, 자바스크립트 코딩 기법과 핵심 패턴, 코드카데미

  1. 크롬 확장프로그램 같은것도 자바스크립트로 만드는건가요

  2. html, javascript, css와 같이 일반적으로 웹페이지를 만드는 것과 동일한 기술을 가지고 만들 수 있습니다.

모바일 웹에서 iOS 6 아이폰으로 사진 올리기

2012.09.20 09:46

iOS 6에서는 모바일 사파리에서도 드디어 사진을 찍어 올릴 수 있게 됐다. 이제까지는 모바일 웹에서 사진이나 카메라를 활용할 수 없어 사진이나 카메라를 사용해야 하는 경우 네이티브 앱으로 제작해야 했지만 이제는 모바일 웹에서도 사진을 올릴 수 있게 됐다. (참고로 안드로이드는 2.x부터 지원하고 있음)


<input type="file"> 태그를 사용하면 기본적으로 다음과 같은 화면이 출력된다.



이 상황에서 파일 선택을 클릭하면 아래와 같이 메뉴가 뜬다. "사진 또는 비디오 찍기"를 선택하면 카메라 화면으로 변경되며 "기존 항목 선택"을 선택하면 사진첩이 뜬다.



카메라를 이용하여 사진을 찍거나 사진첩에서 사진을 선택하면 다음과 같이 작은 썸네일이 표시되며 사진을 선택했음을 사용자에게 알려준다.



비디오를 찍거나 선택하면 사진과 동일하게 작은 썸네일을 표시하고 하나의 비디오를 선택했다는 사실을 알려준다.



이렇게 사진이나 비디오를 선택한 후에는 PC에서 일반적인 파일을 올리는 것과 동일한 방식으로 "전송"을 눌러 서버로 사진이나 비디오를 전송하면 된다. 서버에서는 PC에서의 업로드와 동일한 방식으로 처리하면 된다.


이 과정에서 주의할 점이 두 가지가 있다. 첫 번째는 파일을 업로드 하면 사진은 image.jpg라는 파일명으로, 비디오는 capturedvideo.MOV 라는 파일명으로만 서버에 업로드된다. 따라서 여러 개의 파일을 올릴 때 파일이 덮어써지는 상황을 피하려면 서버에서 파일을 저장하는 과정에서 파일진의 이름을 적절히 변경해줘야 할 것이다. 두 번째는 "사진 또는 비디오 찍기"를 사용하여 사진이나 비디오를 촬영할 경우 촬영한 사진이나 비디오는 사진첩에 저장되지 않는다. 사진첩에 저장할 수 있는 옵션이 있는지는 아직 찾아보지 못한 상황이나 기본 태그만 사용할 때는 사진이 사진첩에 저장되지 않으므로 주의해야 할 것이다. 개인적으로는 사진첩에 저장되는 것을 좋아하기에 정식 버전에서는 저장되기를 기대해본다.


nundefined HTML5_JS_CSS apple, camera, input, input tag, iOS 6, iphone, photo, video, 비디오, 사진, 아이폰, 애플, 카메라

크롬 확장 프로그램 - QRCode Generator 만들기

2012.05.31 00:55

QRCode Generator 소개

QRCode Generator는 현재 탭에 열려있는 페이지의 주소를 QR Code로 만들어주는 크롬 확장 프로그램이다. 동작하는 모습은 다음과 같다.

 

QRCode Generator를 실행시킨 모습


개발 준비

개발을 위해 별도로 준비할 도구는 없다. 우선 확장 프로그램에서 사용할 여러 파일들을 저장할 폴더를 하나 생성한다. 그리고 설정 > 도구 > 확장 프로그램 메뉴를 선택하여 우측 상단의 개발자 모드를 체크하여 개발자 모드를 활성화한다.



우측 상단에 개발자 모드를 체크할 수 있는 메뉴가 있다.

 

개발자 모드를 활성화할 경우 압축되지 않은 확장 프로그램을 로드할 수 있으며 확장 프로그램을 디버그할 수 있는 팝업 검사를 사용할 수 있다. 팝업 검사를 선택하면 일반 웹페이지를 디버깅할 때 사용하는 개발자 도구가 확장 프로그램과 함께 실행된다.

 


왼쪽은 개발자 모드를 비활성화한 모습, 오른쪽은 개발자 모드를 활성화한 모습이다.


프로그램 구성

이 프로그램에서 사용한 파일은 모두 4가지이다.

1. manifest.json: 프로그램에 대한 다양한 정보를 담고 있는 파일

2. qrcode.html: 아이콘을 클릭했을 때 팝업으로 보이는 페이지를 표시하는 파일

3. qrcode.js: QRCode Generator를 동작시키기 위한 자바스크립트 파일

4.icon.png: QRCode Generator를 실행시키기 위한 버튼에 적용할 아이콘 이미지 파일. 가로 19px, 세로 19px의 png 형식의 파일이다.


manifest.json

모든 확장 프로그램에는 JSON 포맷의 manifest.json 파일이 존재한다. 이 파일에는 확장 프로그램의 여러 중요한 정보를 기록한다.

{

  "name": "QRCode Generator",

  "version": "0.9.1",

  "manifest_version": 2,

  "description": "Convert the current page URL to QRCode",

  "browser_action":{

    "default_icon": "icon.png",

    "default_popup": "qrcode.html"

  },

  "permissions":[

    "tabs"

  ]

}


name은 확장 프로그램의 이름이다. 최대 45자까지 가능하며 확장 프로그램을 구별하는 역할을 한다. 이 이름은 설치 다이얼로그, 확장 프로그램 관리 UI와 스토어에서 노출된다. 


version은 확장 프로그램의 버전을 구별하는 숫자이다. 1개에서 4개까지의 숫자를 사용할 수 있으며 각 숫자는 점(.)으로 구별한다. 버전의 숫자는 0 ~ 65535의 숫자를 사용할 수 있다. 단, 0을 제외하고 숫자가 0으로 시작하면 안된다. 자동 업데이트 프로그램에서는 이 버전을 비교하여 업데이트를 결정한다. 


manifest_version은 manifest 파일 포맷의 버전이다. 크롬 18에서는 항상 2를 사용한다.


description은 확장 프로그램의 설명으로 최대 132자까지 쓸 수 있다. 확장 프로그램 관리 UI와 스토어에 어울리는 설명이어야 한다.


browser_action은 확장 프로그램이 동작하는 방식이다. browser_action을 선택할 경우 주소창의 오른편에 아이콘이 추가된다. 


default_icon은 주소창의 오른편에 추가되는 아이콘이며 가로, 세로 최대 19픽셀의 정사각형 이미지를 사용할 수 있다. 정적인 이미지와 캔버스를 사용하는 두 가지 방법이 있으며 캔버스를 사용할 경우에는 동적인 UI를 만들 수 있다.


default_popup이 지정될 경우 사용자가 아이콘을 클릭할 때 팝업이 나타난다. 팝업에는 HTML로 구성한 내용이 출력되며 창의 크기는 내용의 크기에 맞게 자동적으로 조정된다.


permissions는 확장 프로그램이 갖게 되는 권한을 나열한 배열이다. 각 권한은 사전에 정의된 목록에서 선택하거나 하나 이상의 호스트 이름과 일치하는 패턴으로 구성된다. 권한에 따라 설치할 때 사용자에게 안내가 이루어지기도 한다. 이 프로그램에서 사용하는 권한은 tabs로 chrome.tabs나 chrome.window 모듈을 사용하기 위해 지정했다.


여기에서 설명한 내용 외에도 많은 내용이 있다. 자세한 내용은 http://code.google.com/chrome/extensions/manifest.html를 참고하기 바란다.


qrcode.html

<!doctype html>

<html>

  <head>

    <title>QRCode Generator</title>

    <script src="qrcode.js"></script>

    <style type="text/css">

    #top{

      width: 256px;

      font-size:12px;

      font-weight: bold;

      margin-bottom: 5px;

    }

    </style>

  </head>

  

  <body>

    <div id="top">QRCode Generator</div>

    <div id="qrcode" style="width:256px; height:256px;"></div>

  </body>

</html>


사용자가 아이콘을 클릭할 때 나타나는 팝업에 표시되는 내용이다. 상단에서 실제 동작을 구현하는 qrcode.js 파일을 포함시키고 있으며 간단한 스타일을 지정했다. 그리고 제목과 QR code를 표시할 영역을 지정했다. 일반적인 HTML 파일과 다르지 않다.


qrcode.js

var url = "https://chart.googleapis.com/chart?chs=256x256&cht=qr";

var currentURL = null;


function init(){

  window.addEventListener("load", windowLoaded, false);

}


function windowLoaded(){

  chrome.tabs.getSelected(null, function(tab){

    currentURL = tab.url;

    var qrImg = document.createElement("img");

    qrImg.src = url + "&chl=" + encodeURIComponent(currentURL);

    qrImg.alt = currentURL;

    document.getElementById("qrcode").appendChild(qrImg);

  });

}


init();


실제로 QR code를 표시하는 역할을 하는 자바스크립트 파일이다. 여기서는 QR code를 표시하기 위해 구글 차트 API를 사용한다. 현재 구글의 이미지 차트 API는 2012년 4월 20일 공식적으로 지원이 중단됐다. 특별한 이슈가 없다면 2015년 4월 20일까지는 사용 가능할 것으로 예상된다. 자세한 내용은 https://developers.google.com/chart/infographics/ 페이지를 방문하기 바란다.


구글의 이미지 차트 API를 사용하여 QR code를 그리기 위해서는 다음의 세 가지 파라미터를 지정해야 한다.

1. chs: 차트의 크기. 가로x세로 의 형태로 지정한다.

2. cht: 차트의 종류. 여기서는 QR code를 사용할 것이므로 qr을 지정한다.

3. chl: QR code로 변경할 문자열. 반드시 URL 인코딩을 해야 한다.


우선 자바스크립트가 로드되면 init() 함수를 호출하여 윈도의 로드가 완료됐을 때 windowLoaded 이벤트 리스너가 호출되도록 설정한다. 문서의 로드가 완료되면 windowLoaded 함수가 실행된다. 


windowsLoaded함수에서는 chrome.tabs.getSelected 함수를 이용하여 크롬의 탭이 선택될 경우 콜백이 실행되도록 지정한다. 여기서 콜백은 익명 함수이다.


콜백 내에서는 tab.url을 사용하여 현재 탭의 URL을 얻는다. 그리고 동적으로 img 엘리먼트를 생성하고 구글 차트 API를 호출하여 이미지를 불러온다. 이 때 encodeURIComponent 함수를 사용하여 URL을 인코딩한다. 그리고 이미지 엘리먼트를 qrcode.html 파일의 div 엘리먼트에 추가한다. 그러면 현재 페이지의 URL 정보가 담긴 QR code 가 화면에 출력된다.


테스트와 디버깅

개발자 모드를 활성화하고 확장 프로그램 관리 메뉴에서 압축해제된 확장 프로그램 로드… 메뉴를 사용하여 확장 프로그램이 저장되어 있는 폴더를 선택하면 주소창의 오른편에 확장 프로그램이 추가된다. 그리고 확장 프로그램의 아이콘을 마우스의 왼쪽 버튼을 눌러 실행하거나 오른쪽 버튼을 눌러 팝업 검사를 선택하면 확장 프로그램이 실행되며 개발자 도구가 같이 실행된다. 


확장 프로그램을 수정한 뒤에는 다시 프로그램을 로드하지 않고 아이콘을 눌러 다시 실행하면 수정된 내용이 자동으로 반영된다.


디버깅을 할 때는 웹페이지에서 디버깅을 할 때 개발자 도구를 사용한 방법과 동일하게 개발자 도구를 사용하면 된다.



nundefined HTML5_JS_CSS Chrome, extension, QRCode, 익스텐션, 크롬, 확장 프로그램