[CTI] JavaScript 는 프로그래밍의 미래인가? 외 3건

CTI 란?

 Cat's Tail Info 라는 의미로 Cat's Tail 은 저의 닉네임을 가르키고 Info 는 주로 IT, 그 중에서도 웹 기술에 대한 정보를 말합니다. CTI 공간을 통해서 제가 관심있는 웹 기술 정보를 모아서 여러분과 공유하고자 합니다 :)
 제가 관심있는 정보만 한 곳에 모아 정리해봤습니다. 제 관심분야는 주로 모바일 웹과 앱입니다. 따라서 HTML5, JavaScript, CSS, Phonegap, HybridApp 정도가 될 것 같습니다.

2주차

JavaScript 는 프로그래밍의 미래인가?

 JavaScript 는 프로그래밍의 미래인가? 라는 주제로 JavaScript 의 현재 스펙과 전망에 대하여 쓴 기사 입니다. 요약하자면 Web 에서는 JavaScript 로 모두 구현할 수 있다는 것이 핵심인데요. 클라이언트 부분은 JavaScript 로.. (jQuery 등 라이브러리를 이용한) 또한 DB 부분은 MongoDB 로.. (이름은 들어봤는데 JavaScirpt 로 작성하는 듯 합니다) 또한 서버 부분은 Node.js 로.. (Node.js 가 지금 대세인 듯) 이런 식으로 JavaScript 만으로도 웹을 구현할 수 있다는 얘기.. 이러한 것들 덕분에 JavaScript 의 미래도 밝다는 얘기 입니다.

http://mashable.com/2012/11/12/javascript/?utm_source=twitterfeed&utm_medium=twitter&utm_campaign=Feed%3A+Mashable+%28Mashable%29

 iPad mini 용도별 평점

 iPad mini 의 용도별로 평점을 ZDNet Korea 에서 매겨봤습니다. iPad mini 에 대한 정보가 필요하시면 참고할만 합니다. 개인적으로 저는 아직까지 iPad mini 에 의문점이 들긴 합니다. 분명 7인치 iOS 태블릿은 매력적이지만 iOS 기반을 뺀다면 뭐 암것도 없는 느낌입니다. 이미 기존에 7인치 비슷한 태블릿 PC 는 출시된 상태이고, 우리나라에서 만큼은 7인치를 사기엔 좀 꺼림직한 커다란 대형 핸드폰이 줄비된 상태입니다. (갤럭시 노트, 옵티머스 뷰, 베가R3) 결국 iOS 만이 강력한 특징인데요.. 대부분은 안드로이드에 익숙한 사람이 더 많으니 iPad mini 의 파급효과는 그리 강력하지 않을 것으로 봅니다.

http://www.zdnet.co.kr/news/news_view.asp?artice_id=20121112140152

모바일앱과 웹의 컨버전스를 주목하라

 '앱은 웹으로, 웹은 앱으로' 라고 한 문장으로 표현할 수 있는 글입니다. 이 글은 왠지 하이브리드의 앱을 선호하는 저에겐 매력적인 전망을 쓴 글이네요. 하이브리드 앱은 언제든지 앱이든 웹이든 쉽게 만들 수 있으니까요 : )

http://techit.kr/13193

Co-Creation Workshop에 참여할 H-Buddy 1기를 모집합니다.
  KTH 에서 다음과 같은 대외활동을 할 인원을 구하네요. 자세한 사항은 아래 사이트로 접속하세요. 수요일(?) 까지니까 어서 지원하세요. KTH 아시죠? 활동특전에는 KTH 인턴쉽과 공채에 가산점을 적용해준다고 합니다 : )
저는 이번이 마지막 학기라 지원하기가 그러네요 : ( 

http://j.mp/RUkZQ6

To be continued...

이번에는 기술 관련 정보보다는 IT 트렌드 정보가 많네요.
다음에도 다시 만나요, 제발~

[ CTI ] HTML5 에 대한 7 가지 오해 외 6건

 CTI 란?

 Cat's Tail Info 라는 의미로 Cat's Tail 은 저의 닉네임을 가르키고 Info 는 주로 IT, 그 중에서도 웹 기술에 대한 정보를 말합니다. CTI 공간을 통해서 제가 관심있는 웹 기술 정보를 모아서 여러분과 공유하고자 합니다 :) 

  제가 관심있는 정보만 한 곳에 모아 정리해봤습니다. 제 관심분야는 주로 모바일 웹과 앱입니다. 따라서 HTML5, JavaScript, CSS, Phonegap, HybridApp 정도가 될 것 같습니다.

1주차

HTML5 7가지 오해 외 6건

1주차라 정보가 많이 있네요.. 앞으로도 얼마나 많은 정보를 공유할 수 있을 지 모르겠습니다. 처음이니 힘차게 고양잇 정보 출발합니다 : ) 

 

HTML5 7가지 오해

 HTML5 에 대한 7 가지 오해를 반론하면서 오히려 HTML5 에 대한 7가지 특징을 보기 좋게 설명하고 있습니다. HTML5 에 대해 지속적으로 많은 관심이 있었다면 크게 공감할 내용이며 HTML5 이 낯설거나 아직 익숙치 않다면 아래 글을 추천해드립니다. HTML5 를 기성복으로, 네이티브를 맞춤형 의복으로 비교한게 인상이 깊군요.

 

http://hacks.mozilla.or.kr/2012/11/html5-mythbusting/

소프트 웨어 개발자 90% 이상이 모바일 앱 개발은 HTML5 이 이기는 것에 베팅한다.

 HTML5 의 저력을 나타내고자 하는 글입니다. 그만큼 앱개발에서도 HTML5 가 각광받고 있다는 것을 보여주는 글입니다.

 통계자료를 사용하면서 신뢰성을 더욱 높힌 듯 하나, 개인적으로는 통계자료가 매우 의심이 되는군요. 통계를 실시한 곳이 KendoUI 라는 웹 UI 를 꾸며주는 프레임워크를 제공하는 회사입니다. 따라서 KendoUI 에서 실시했다고 하면 웹에 관심이 많은 사람이 조사 대상이 될 가능성이 높습니다. 게다가 4천여명 정도는 표본집단이 매우 낮은 것 같구요.
 이에 관하여 제가 따로 KendoUI 사이트에 접속하여 조사에 대한 자료를 대강 살펴봤는데 표본집단을 어떻게 추출했는지 자세히는 안 나와있더군요.
 개인적으로 이 정보는 신뢰성의 의문을 제기하면서 읽자는 의도로 첨부합니다.

http://venturebeat.com/2012/11/07/mobile-app-development-94-of-software-developers-betting-on-html5-winning/

프로그래머는 치킨 집을 차릴 수 있는가?

 프로그래머의 끝은 치킨 집 사장이라는 속설을 누가 만들었는지... 대부분 이 씁쓸한 현실에 공감을 하는 것 같습니다. 하지만 정말로 치킨 집 사장이 되어서 계속 살아갈 수 있을까요? 이 글은 치킨 집 사장도 아무나 하는 게 아니니 제발 정신차리고 코딩 공부나 더하라는 메시지를 재미나게 설명하고 있습니다. 프로그래머 삶이나 프로그래밍에 지쳐있을 때 재미로 보는 것이 좋을 것 같아요.

http://www.slideshare.net/hypersix/ss-15043607

4G와 4G LTE의 차이점

 저는 몰랐던 정보였습니다. 4G가 4G가 아니라니요. 영어지만 짧게 간단 명료하게 4G 와 4G LTE 차이점을 설명하였습니다. 4G는 결국 3.5G 의 느낌이고 4G LTE 가 레알 4G 였군요.

http://nyti.ms/Z1z2Xa

HTML5 forms and IE10 mobile 

 HTML5 form, 그러니까 엘리멘트를 IE 10 mobile 에 초점을 두고 설명하고 있습니다. IE10 은 HTML5 를 대부분을 지원한다는 점과 지원하지 않는 몇몇 요소나 속성을 예로 들어가면서 설명하고 있습니다. IE10 이 없어서 깊게 파고 들어가지는 못 했네요.
 멘 아래에 글쓴이가 유용하다고 생각하는 링크를 달았다고 합니다. 좋은 정보가 있을지 모르겠네요.

http://blog.trasatti.it/2012/11/html5-forms-and-ie10-mobile.html?utm_source=TwitterFeed&utm_medium=Twitter&utm_campaign=Feed%3A+AndreaTrasatti+%28Andrea+Trasatti%27s+tech+notes+and+more%29

폰갭으로 안드로이드 네이티브 메뉴 만들기

간만에 안드로이드 폰갭을 하려니 프로젝트 생성하는 것도 힘들더군요. 아무튼 심사숙고 끝에 저도 튜토리얼 완성하였습니다.
 이 튜토리얼은 네이티브 코딩을 이용하여 앱 실행 중에 메뉴 버튼을 누르면 네이티브 메뉴가 뜨게끔 하는 것입니다.
 고려해야 할 사항은 MainActivity.java 파일에 붙여넣기 하는 부분에서 Menu 나 MenuItem, Intent 에 빨간 줄이 그어져 있습니다. 간단하게 마우스 커서 가져다 놓으면 type 을 변형하는 메뉴가 뜨니 이런 방법으로 타입을 수정시켜서 프로젝트를 실행하면 될 것 같습니다.
 이 글은 제가 나중에 튜토리얼로 만들어 볼까 생각하고 있습니다.

http://simonmacdonald.blogspot.ca/2012/11/building-native-menu-with-phonegap.html

구글보이스 & Siri 비교

 그냥 음성 인식이 신기해서 첨부했습니다.영어로 말하느라 정확히 뭐라고 하는 지도 모르겠네요. 글을 보면 구글 보이스가 더 뛰어나다는 뉘앙스가 있는 듯 합니다.

 

http://updates.gizmodo.com/post/34656322615/google-voice-search-vs-siri-whos-the-best

 To be continued...

 다음에도 다시 만나요, 제발~
그런데 이 형식 구루의 기술뉴스랑 엄청 똑같지 않나요? 찔리긴 합니다.
그러나 저는 수준이 낮으니 관심주지 않을 꺼라 믿습니다 :)

[CSS3] Translate3d 에 대하여..

W3School 에 Translate3d 속성에 대한 자세한 설명을 발견 못 해서 이렇게 정리합니다 :)

참조 : https://developer.mozilla.org/en-US/docs/CSS/transform-function#translate3d()
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

요약 : Translate3d 는 기존 Translate 에서 공간이 하나 더 추가된 CSS 이다.

 translate3d(tx, ty, tz) CSS 는 엘리멘트를 3D 공간에서 움직이게끔 하는 기능을 갖고 있습니다. 따라서 2D 공간에서 사용했던translate(tx, ty)나 top, left 속성과는 공간개념의 차이가 가장 큽니다.
 3D 공간에서 엘리멘트를 변형할 때는 Matrix3d() 를 사용합니다.

| 1 0 0 tx |             | 1 0 0  0 |
| 0 1 0 ty |             | 0 1 0  0 |
| 0 0 1 tz |             | 0 0 1  0 |
| 0 0 0  1 |   혹은    |tx ty tz 1 |

  위는 Matrix3d 의 기본 형태입니다. tx, ty, tz 는 엘리멘트를 다른 곳으로 옮기는 길이 값을 지닙니다. 그리고 나머지 요소들은 엘리멘트의 모양을 변형할 때 적용되는 값을 지닙니다. 다른 곳으로 옮긴다는 말은 top 과 left 속성을 떠올리고, 모양을 변형한 다는 말은 rotate 나 scale 을 생각하면 쉽게 감이 올 것 같습니다.

Matrix3d 를 쉽게 이해하기 위해서는 아래 링크에 접속하세요.
http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html?iframe=true&width=720&height=640

 참고사항으로는 translate(tx, ty) 의 경우는 Matrix() 를 사용합니다.
 
| 1 0 tx |            | 1  0  0 |
| 0 1 ty |            | 0  1  0 |
| 0 0 1  |   혹은   |tx ty  1 |

 2차원 평면에서만 적용되므로 tx, ty 로 엘리멘트를 옮기고 나머지 요소들로 엘리멘트를 변형시킵니다. translate() 에서 파생된 CSS 로는 translateX 와 translateY 가 있습니다. 이 둘은 평면 상에서 사용되고 또한 3D 공간에도 적용됩니다. 반면에 translateZ 는 translate3d 에서 파생되었습니다. 이는 평면에서 적용이 안 되고 3D 공간에서 적용됩니다.

 




 
 

[Pop Up Book] 전체 좌표와 translate3d 계산 그림

 책을 두 개로 쪼개는 것처럼 앞면 뒷면을 그룹으로 구분해준다. (이래야 애니메이션 적용이 편하다) 그리고 책이 완전히 펴지는데 Transform을 이용하면서 계산을 해야한다. 대략적인 계산은 연습장에 계산해가면서 스타일 속성값을 할당해야 하지만 조금씩 어긋나는 것들은 요소검사에서 스타일 속성을 수정해가면서 진행하는 편이 낫다.

[Phonegap] iOS6 업데이트 후 기기 테스트 에러

폰갭 버전마다 대처 방법이 다릅니다

폰갭 2.0 이전과 이후로 나뉘는데요...

폰갭 2.0 버전 이전 (1.9.0 아래)

1. iOS 버전 폰갭을 설치하셨다면 도큐멘트 폴더 안에 CordovaLib 프로젝트가 있습니다. 그 프로젝트를 실행하세요.

2. 왼쪽에 CordovaLib 프로젝트 아이콘 누르시고 UniversalFramework 탭 누르시면 Build settings 탭에 Architectures 카테고리가 나옵니다. 거기서 Architectures 값과 Valid Architectures 값에 armv7s 값을 추가해주세요 : )

3. 그리고 Build Phases 탭으로 옮기셔서 Run Script 를 펼치세요. 그리고 46번째 줄에 ARCHS="armv6 armv7" 이 부분 큰 따옴표 안에 armv7s 를 추가하세요.

4. Project 를 실행(Run)하세요. UniversalFramework 인 상태로 실행해야 합니다.

5. /Users/Shared/Cordova/Frameworks 안에 Cordova.framework 폴더를 document/CordovaLib/build/Release-iphoneos or Release-iphonesimulator or Release-universal 안의 Cordova.framework 와 대치하시면 됩니다. 

6. 이제 원하는 프로젝트를 기기테스트로 실행해보세요 : )

폰갭 2.0 버전 이후 (2.0.0 이후)

1. 생성한 프로젝트 내 CordovaLib.xcodeproj 클릭 > Build Settings 탭 > Architectures 카테고리 내 Architectures 값을 Standard로 변경, Valid Architectures 값을 armv7s 값 추가

2. CordovaLib 로 프로젝트 실행 후 하고자 하는 프로젝트 실행

안 되는 부분이 있거나, 궁금한 점이 있으면 댓글로 문의해주세요 : )