ES6 in Depth 번역글

HTML5 2016.07.12 08:47
크리에이티브 커먼즈 라이선스
Creative Commons License

어쩌다보니 혼자 하게 된, ES6에 대한 아주 알찬 소개. 정성을 다해 번역했습니다.


ES6 in depth

http://hacks.mozilla.or.kr/category/es6-in-depth/

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

  1. 웹 개발자 2016.08.23 14:19 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다.

    덕분에 유익한 시간이 되었습니다.

  2. 지나가다가 2017.03.15 08:44 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 좋은 내용을 읽을 수 있었습니다.

  3. 정말로감사 2017.07.19 14:15 신고  댓글주소  수정/삭제  댓글쓰기

    정말로 감사합니다.

크리에이티브 커먼즈 라이선스
Creative Commons License

Karma 개발자가 직접 쓴 Karama 에 대한 소개 <논문>

을 요약한다. TDD(Test Driven Development)에 대한 저자의 확고한 신념을 느낄 수 있었다.


TDD

  • TDD는 고품질의 SW를 개발할 수 있는 효과적인 방법
  • TDD는 문서화 측면에서도 이득, 테스트 코드는 항상 up-to-date한 (개발) 코드의 사용법을 알려준다(알려줄 수밖에 없다)
  • 테스트 가능한 코드(testable code)는 재사용성(reusable)이 더 높다


TDD를 위해서는 두가지 전제 조건이 필요

  • Testable Code: 느슨하게 결합된 모듈 구조로 코드를 개발, AngularJS 같은 프레임워크가 해결
  • Testing Environment: Karma 같은 테스트 자동화 도구가 해결


Karma는

  • JavaScript를 위한 Test Runner
  • Jasmine 같은 Test Framework 이 아님. 어떤 Test Framework도 사용 가능(Karma의 장점)
  • 웹앱 테스트의 가장 어려운 점은 코드를 테스트하기 위해 에디터를 떠나 브라우저를 실행시켜 결과를 확인해야 하는 워크플로우의 단절 (context switching), Karma는 이를 해결하기 위한 도구


Karma 모듈 구성도 (Figure 4.1: The high level architecture)


왜 클라이언트-서버 구조를 선택했나?
웹앱은 다양한 기기와 다양한 브라우저에서 실행, 디바이스와 브라우저의 편차를 테스트하기 위해 클라이언트를 분리했음


(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee
TAG Karma, TDD

댓글을 달아 주세요

크리에이티브 커먼즈 라이선스
Creative Commons License
정갈하게 편집된 Grunt 소개 글을 봤다. 글쓴이가 디자이너라고 한다.
Grunt for People Who Think Things Like Grunt are Weird and Hard
http://24ways.org/2013/grunt-is-not-weird-and-hard/?utm_content=buffer4bb0b

Grunt는 Task Runner이다. C/C++ 개발자에게 친숙한 make와 똑같은 역할을 한다.


Grunt에만 관심을 가질게 아니라 Yeoman을 보는 것이 좋다.
Yeoman (http://yeoman.io/)은,
  • yo : 스캐폴딩(Scaffolding : 골격, 뼈대) 자동 생성 도구
  • grunt : 타스크 실행 도구
  • bower : 패키지(라이브러리) 관리 도구
  • ...들을 잘 묶어 놓은 개발도구이다.
한시간 정도 투자하면 사용법을 익힐 수 있는 튜토리얼을 제공한다 (http://yeoman.io/codelab.html).
웹 개발자에게 축복과도 같은 도구다. Node.js 가 세상을 많이 바꿔놓는 것 같다.

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

크리에이티브 커먼즈 라이선스
Creative Commons License

Backbone.js를 써서 프론트엔드 웹앱을 만들 때 폴더 구조와 파일 이름을 어떻게 정할까 고민스러웠는데, 비슷한 고민을 담고 있는 블로그 기사가 있어 요약한다.

  • JavaScript는 폴더/파일의 구조 및 이름에 대해 규정하는 바가 전혀 없다.
  • 그러니 당신이 어떻게 하고 있더라도 "당신은 옳다".
  • 개인적으로 Backbone 등 MVC framework을 사용하는 경우 models, collections, views 등 타입별로 폴더 구조를 가져가는 것에 반대한다.
  • contact, mail 등 업무나 역할 별로 폴더 구조를 만들고,
  • person.js (model), persons.js (collection), personview.js, personrouter.js 처럼 파일 이름에 타입을 명시하는 방식을 선호한다.
  • 하지만, 다시 한번 말하지만 당신이 어떤 결정을 하더라도 "당신은 옳다"


JavaScript File & Folder Structures: Just Pick One

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

크리에이티브 커먼즈 라이선스
Creative Commons License

HTML5 Device API 지원 현황 (2014년 4월 기준)

  • W3C를 비롯 웹 진영은 HTML5를 본격적인 OS수준의 App 실행 플랫폼으로 자리매김하려 하지만, 모질라를 제외한 브라우저 벤더(애플, 구글)의 지원이 미미한 상황
  • 애플과 구글은 앱스토어와 구글 플레이 스토어를 중심으로 하는 네이티브 앱 생태계를 지키기 위해 웹 생태계 활성화에 적극적이지 않음
  • Device API를 비롯 HTML5 웹앱 생태계가 활성화되기 위해서는 시간이 필요할 전망

Device API
출처: http://caniuse.com (2014.4.)
Device API          표준화 단계      모바일 브라우저 지원현황
--------------------------------------------------------------------------
File API                 WD        FF 27+, iOS 6+,   Android 4.4+
File Reader API          WD        FF 27+, iOS 6+,   Android 3.0+
Filesystem & Writer API  WD        FF x,   iOS x,    Android x
Geolocation API          CR        FF 27+, iOS 3.2+, Android 2.1+
getUserMedia API         WD        FF 27+, iOS x,    Android x
WebRTC API               WD        FF 27+, iOS x,    Android x (Chrome 29+)
Full Screen API          WD        FF x,   iOS x,    Android x
Web Audio API            WD        FF 27+, iOS 6+,   Android x
Vibration API            WD        FF 27+, iOS x,    Android 4.4+
Battery Status API       CR        FF 27+, iOS x,    Android x



저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

W3C TPAC 2013 메모

HTML5 2014.03.09 23:21
크리에이티브 커먼즈 라이선스
Creative Commons License

벌써 한참된, W3C TPAC 2013 메모


게으름이 깊어졌다. 더이상 기억이 유실되기 전에 2013년 중국 심천에서 열렸던 W3C TPAC에 대한 메모를 남긴다.


11.11.월
# System Application WG
: OS와 긴밀히 통합된 Web App을 개발하기 위한 런타임과 API 도출을 목표로 하는 WG
: Native App과 대등한 Web App의 가능성을 논의
: WebOS 에서 전화 calling에 반응하는 app 등 제작 가능
- Service Worker에 대한 논의
  - Page에 종속되지 않은 WebApp
  - 독자적인 life-cycle에 의해 실행
  - system event 처리
  - scheduled wakeup
- Web Manifest에 대한 논의
  - packaged Web App의 메타 정보 서술 방식
  - 크롬, 파이어폭스 등 브라우저 별 독자 구현 방식의 표준화 논의

# 국내 20여명 참여
  ETRI , 달리웍스(주), SKT, 삼성전자 등

11.13.수
# 총회
: 대강당에 모여 W3C의 현안을 공유
- W3C 표준 제정 프로세스를 기존 waterfall 방식에서 agile 방식으로 변환
- Last Call 단계를 폐지 CR 단계에 흡수
- Recomendation 대신 Standard 사용(용어)

# Telco (Web and Mobile WG)
- 차이나모바일, KDDI, 텔레포니카, 하웨이(다수) 참석
- 텔코는 근원적으로 Openness를 필요로 하며 W3C 등 표준화 기구와 협조해야 함

# Web Redesign
- W3C 웹사이트 개편 방안 논의

11.14.목
# Web Crypto
: 표준화가 상당히 진행된 마무리 단계 (LC)

# Web & Mobile
: 모바일 웹앱 관련 표준화 현황과 향후 이슈 논의

# Web Performance Mini WS
: W3C가 현재 집중하고 있는 분야라고 함
: 인텔(중국), NTT(일본), ??(일본) 3개 회사에서 웹 기술 현황 미니 세미나 개최




(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee
TAG HTML5, w3c

댓글을 달아 주세요

크리에이티브 커먼즈 라이선스
Creative Commons License

장대한 세월 굴러먹은 운영되어온 모질라 프로젝트 답게 문서들이 잘 정리되어 있다. 그들의 오랜 숙적이었던 MS의 MSDN( MS 개발자 네트웍 )을 연상시키는 모질라의 MDN( 모질라 개발자 네트웍 )에서 문서 2개를 골라 요약한다. 한국 모질라 개발팀에서 모질라의 최신 블로그 기사 및 개발 문서들을 잘 번역해서 소개하고 있는 것 같다. 장한 사람들이다. 모질라 프로젝트에 참여하면 세상에 의미 있는 기여를 할 수 있을 것 같은 막연한 설레임이 든다.


모질라 코드에 기여하기
https://developer.mozilla.org/en-US/docs/Introduction
- step 1 : Firefox 등 빌드하기
- step 2 : 모질라에 기여하는 절차 이해하기
- step 3 : 할 일 찾기
    - 평소 불만이었던 문제 해결하기
    - 초보자를 위해 찾아놓은 버그 보기
- step 4 : 버그 해결하기
- step 5 : 코드 리뷰 신청하기
- step 6 : 리뷰 대응하기
- step 7 : 코드를 트리에 넣기
- setp 8 : 반복하기


모질라 코드에 기여하는 요령
https://developer.mozilla.org/en-US/docs/Mozilla_Development_Strategies
- 모질라의 문서는 wiki 기반이다. 직접 수정하라.
- 문서화 스킬이 부족해도 안심하라 문서팀이 도울 것이다.
- QA팀의 역할은 품질을 확인하는 것이지 없던 품질을 추가하는 것이 아니다. 자신의 코드는 자신이 책임져라.
- 일을 시작하기 전에 모듈 리더와 소통하라.
    - 아이디어 단계에서 거절당하는 편이 패치코드를 거절당하는 것보다 덜 아플 것이다.
    - 다음에 할 일을 일러줄 것이다.
    - 막혀있는 문제를 풀어줄 것이다.
- 리뷰를 요청하기 전에 스스로 리뷰하라. 당신의 리뷰 스킬을 높일 필요가 있다.


(이상)


저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

Firefox 빌드하기 2

HTML5 2013.07.15 12:19
크리에이티브 커먼즈 라이선스
Creative Commons License

Firefox 빌드하기 2

윈도7에서 빌드환경 갖추기


개발PC 1호기에서 멋지게 한방 빌드를 끝낸 다음, 개발PC 2호기에서 다시 한번 파이어폭스 빌드를 시도했다. 보기 좋게 실패했다. 실패 증상은 다음과 같았다.


- DirectX SDK가 설치되지 않았다. 빌드 과정에서 DirectX가 설치 되지 않아 빌드 못해먹겠다는 에러가 발생했다.

- 우여곡절 끝에 DirectX SDK를 설치하고 빌드했더니 LNK1123 링크 에러가 발생했다.

 2:48.22 Executing: link -NOLOGO -OUT:crashinject.exe -PDB:crashinject.pdb -LARGEADDRESSAWARE -NXCOMPAT -RELEASE -DYNAMICBASE -SAFESEH -DEBUG -DEBUGTYPE:CV -DEBUG -OPT:REF @d:\mozilla-central\obj-i686-pc-mingw32\build\win32\tmp3vs529.list module.res kernel32.lib user32.lib gdi32.lib winmm.lib wsock32.lib advapi32.lib secur32.lib netapi32.lib kernel32.lib user32.lib gdi32.lib winmm.lib wsock32.lib advapi32.lib secur32.lib netapi32.lib
 2:48.22 d:\mozilla-central\obj-i686-pc-mingw32\build\win32\tmp3vs529.list:
 2:48.22     crashinject.obj
 2:48.22
 2:48.22 LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt
 2:48.22


TIP1,

2호기는 Windows7 머신이었다. 여기에 VS2012를 설치했던게 문제의 원인이었다. Windows7에는 VS2010을 권한다.


TIP2,

DirectX SDK 2010년 June 버전과 MS의 최신 SDK들이 잘 맞지 않는다 (설치시 충돌이 일어난다). DirectX SDK를 설치할 때는 VS2012 관련 SW들을 모두 제거하고 설치해야 한다. 그리고, tool 설치 순서가 중요한데, DirectX SDK --> Windows7 SDK --> VS2010 Express 순서로 설치할 것을 권한다.


TIP3,

VS2010 계열 빌드 도구(리소스컴파일러)와 VS2012 계열 빌드 도구 사이에 충돌이 있다 (실행시 LINK 에러가 난다). 순간의 욕심으로 VS2012를 설치했다가 파이어폭스 빌드 실패를 맛보고 있는 상태라면, VS2012 관련 SW 전부, .Net SDK 관련 SW 전부, Windows SDK 전부를 제거한 다음, 필요한 빌드 도구들을 위의 순서대로( DirectX SDK --> Windows7 SDK --> VS2010 Express ) 다시 설치하고 시도해 볼 것을 권한다.



(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

Firefox 빌드하기

HTML5 2013.07.02 22:37
크리에이티브 커먼즈 라이선스
Creative Commons License

Firefox 빌드하기

https://developer.mozilla.org/en-US/docs/Simple_Firefox_build

준비물 갖추기 (for Windows)
    - VC++ 2010 (official) or 2012; Express(free) 버전도 무방
    - VC++ 2010을 쓸 경우 Windows 7 SDK도 추가 설치
    - June 2010 DirectX SDK 설치
    - MozillaBuild 패키지 설치
        - 설치후 c:\mozilla-build 디렉토리의 start-msvc10.bat (VS 2010) 실행, 콘솔이 정상적으로 실행되는지 확인
소스 가져오기
    - hg clone https://hg.mozilla.org/mozilla-central 실행, mozilla-central 디렉토리와 소스가 생성됨
빌드하기
    - mozilla-central 디렉토리에서 ./mach build 실행
실행하기
    - Windows: obj-.../dist/bin/firefox.exe 실행
소스 업데이트하기
    - mozilla-central 디렉토리에서 hg pull -u 실행


정말... 아무런 힘 안들이고 한방에 빌드가 끝났다. 모질라 만세~!


저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

WebRTC 현황 요약

HTML5 2013.06.21 15:24
크리에이티브 커먼즈 라이선스
Creative Commons License

WebRTC 현황 요약 (2013.6.21. 기준)


- WebRTC는 브라우저 간의 실시간 통신 서비스(음성통신, 화상회의)를 위한 표준기술

- 안드로이드 단말에서의 WebRTC 지원 현황

- 2013-04-16, WebRTC가 안드로이드 파이어폭스에 구현됨

- 디폴트 설정은 off

- ICS 이전 버전에서는 사용에 문제 있을 수 있음

- 이유는 제조사에 따라 일부 하드웨어의 경우 성능이 부족함

- 그리고 일부 제조사 단말에는 WebRTC를 위해 필요한 안드로이드 API가 부재함

- 그러나, 갤탭 10.1 안드로이드 3.2의 경우 비디오 콜이 정상 수행됨

- 2013-06-03, 크롬 안드로이드 베타 최신 버전에서 WebRTC 지원 시작함

- 2013년 6월 현재, 안드로이드 내장 브라우저는 WebRTC를 지원하지 않음


Reference

WebRTC support on Android

http://www.morbo.org/2013/04/webrtc-support-on-android.html

2013-04-17


You Can Try WebRTC on Chrome for Android Beta Now

http://www.chromestory.com/2013/03/you-can-try-webrtc-on-chrome-for-android-beta-now/

2013-06-03


[인터넷] 웹 브라우저에서의 실시간 통신기술

http://weekly.tta.or.kr/weekly/files/20124031104031_admin.pdf

2012-06-04


(이상)


저작자 표시 비영리 변경 금지
신고
Posted by ingee
TAG HTML5, WebRTC

댓글을 달아 주세요

  1. 김호천 2013.06.23 23:33 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다^^

  2. ajb 2014.11.29 16:41 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 WebRTC에 관심이많은데요
    WebRTC를 이용하면 제가 만약 안드로이드폰으로 말을하면 그 말이 실시간으로 웹에 나올수있게 할수있습니까 ?ㅠ

    • ingee 2015.05.26 17:56 신고  댓글주소  수정/삭제

      예, 가능합니다. 예전엔 스카이프나 카톡 같은 전용 어플리케이션으로만 가능하던 P2P 통신이 웹브라우저라는 범용 어플리케이션으로 가능해진 것이 WebRTC의 가장 큰 의미라고 생각합니다.



티스토리 툴바