[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

레이블이 아이폰인 게시물을 표시합니다. 모든 게시물 표시
레이블이 아이폰인 게시물을 표시합니다. 모든 게시물 표시

2016년 4월 11일 월요일

[jQuery]모바일 웹에서 앱 설치 여부 확인 및 앱 이동 관련..

갑자기 모바일을 만질 기회가 생겼다.. 지금 생각해보면, 모바일 앱을 한것이 아니라 모바일 웹을 하게 되서 그나마 다행이라고 생각한다.. 앱은 진짜 아닌것 같다.. -_-;;

이유는 웹만 하던 나이기에 모바일 웹이란 것을 처음 접했는데 이건 머 테스트하기도 겁니 드럽고, 웹도 브라우저 버전에 따른 특성을 꽤나 타고 있다고 생각을 했는데 모바일 웹 쪽은 말도 안되게 더 많았다.. 진짜 말 그대로 욕나오는 헬이었다.. 좀 간단한 개념에서 바꾸는 것은 몰라도 스크립트 만지고 어쩌고 하면서 조금 깊게 들어가는건 절대!!! 하고 싶지 않다..

못하더라도 그냥 웹이 더 좋았다.. ㅠㅜ

구현해야 될 상황은 모바일 웹에서 버튼을 클릭하면, 특정 앱이 설치가 되어있는지를 판단 후 설치 페이지로 이동하거나 설치되어 있는 앱을 실행하는 것이었다.. 처음 상황을 파악한 후에 겁니 간단하군.. 이라고 생각을 했다.. 근데 완전 오산이었다.. 나만의 착각이었다..

검색을 하다보니 좋은 글이 있었다.. tageon 님 블로그 소스가 바로 그것이었다.. 역시 구글링이라고 생각을 하면서 해당 소스를 코딩했다.. 컨셉은 간단했다.. click(function) 이벤트가 발생하면, 꼼수의 개념으로 frame 을 만들고, setTimeout fucntion 을 통해서 딜레이 될 시간동안 현재날짜와 시간을 비교하고, 모바일 OS 버전에 따라서 분기를 해주고, 스토어 url 로 링크가 되거나 혹은 기 설치된 url 로 이동하는 패턴이었다.. 물론 첨에는 한참 쳐다보고 이해했다.. 한눈에 알아볼정도로 두뇌가 좋지는 않은 관계로..

근데 이걸 해보니 이런 된장 마즐.. OS 버전 등의 문제로 내 폰이 갤럭시 노트2 인데 그 외 노트 4이상 내지는 iPhone 9.X 버전에서는 죄다 실행이 안되는 것이다..

그래서 꿍시렁대면서 또 검색결과 정영탁 님의 블로그에 또 다른 소스가 있었다.. 해당 컨셉도 거의 비슷하긴 하지만, 약간의 차이가 있어서 또 열심히 코딩을 했는데 역시나 결과는 같았다.. 내 폰에서만 되고, 나머지 상위 버전 폰에서는 다 안되는 것이다..

찾아보면, 대부분 소스 패턴은 비슷한데 안된다.. 이상해서 검색을 해봤다.. 대체 왜.. 무엇 때문에.. 안되는 것일까..

1차적으로 Android 는 버전이 4.X 대에서 5.X 대로 넘어가면서 frame 적용 등에 대한 부분이 문제가 있었다.. 무엇보다 Chrome 의 버전 문제가 태반이었다.. 대신 소스에도 적겠지만, Intent 라는 개념을 통한 활용방법이 있었다.. 하지만, 개념 자체를 이해하고 있는것은 아니다..

2차적으로 iOS 는 버전이 9.X 대로 넘어가면서 웹에서 앱을 호출하면, safari 브라우저에서 주소가 올바르지 않아 찾을수 없다면서 자체적으로 오류를 한 번 뱉어낸다.. 그리고 9.X 대에서도 9.1, 9.2, 9.3 버전별로 틀린것인지 아이폰 내부적으로 사용하는 alert 창이 발생하는 것도 있고, 아닌 것도 있었으며, setTimeout 에 대한 초 셋팅에 대한 딜레이 개념도 조금씩 틀린 부분이 있었다.. 모바일을 오래 다루지 않다보니 확실한 경우의 수는 모르겠으나 우선 내가 당장 느낀 부분은 저정도였다..

그렇다면 이제 소스를 봐볼까..

아!!! 한 가지 언급을 안하고 잊어먹은 부분이 있는데 해당 글은 내가 위와 같은 이슈들을 뒤로한채 해결을 했다..!!! 라는 글은 아니다.. 적용하면서 로그성?? 과정?? 으로 남기는 글이라고 보는게 좋다.. 그래서 제목도 완료형이 아닌 뒤에 ..관련.. 이라고 붙인 것이다.. 혹시라도 누군가 이 글을 보게되면, 이 소스에 덧붙여서 해결하거나 해결을 했다면, 코멘트를 해줬으면 하는 마음에서 말이다..


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script type="text/javascript">
$(document).ready(function() {

 var androidAppLink = 'redpigScheme://'; //각자 정의된 scheme 를 적는다..
 var androidIntentUrl = 'intent://scan/#Intent;scheme=redpigScheme;package=com.android.chrome;end';
 var iosAppLink = 'redpigScheme://';
 var playStorePrefix = 'market://details?id=com.soribada.android&hl=ko'; //각자 정의된 store url 을 적는다..
 var appStorePrefix = 'https://itunes.apple.com/kr/app/id346528006?mt=8'; //각자 정의된 store url 을 적는다..

 var ua = navigator.userAgent;
 var supportDevicesRegEx = /Android|iPhone|iPad/i;
 var supportDevice = ua.match(supportDevicesRegEx);

 if(!!supportDevice) {
  var deviceName = supportDevice.pop();
  launchApp(deviceName);
  
 } else {
  location.href = playStorePrefix;
 }

 function launchApp(deviceName) {
  var isIOS = 'Android' != deviceName ? true : false;
  
  if(isIOS && isChromeAndBigThanChromeVersion18()) {
   location.href = androidIntentUrl;
      
  } else if(isIOS && isBigThanIOS9()) {
   location.href = universalLink;
   failApp(isIOS);
   
  } else {
   var src = deviceName == 'Android' ? androidAppLink : iosAppLink;
   $('<iframe>').attr('src', src);
   failApp(isIOS);
  }
 }
 
 function isChromeAndBigThanChromeVersion18() {
  var ua = navigator.userAgent;
  if(ua.indexOf('Chrome') == -1 ){
   return false;
  }
  
  var versionRegEx = /Chrome\/[0-9]+\.[0-9]+\.[0-9]+/;
  var majorVersion = ua.match(versionRegEx).pop().split('\/')[2];
  return parseInt(majorVersion) > 18 ? true: false;
 }
    
 function isBigThanIOS9(){
  var ua = navigator.userAgent;
  var versionRegEx = /iPhone OS [0-9]+/;
  var version = ua.match(versionRegEx).pop().split(' ')[2];
  var majorVersion = parseInt(version.split('_')[0]);
  return majorVersion >=9 ? true: false;
 }
 
 function failApp(isIOS) {
  var storeURL = isIOS ? appStorePrefix : playStorePrefix;
  var deLay = 1000;
  setTimeout(function() {
   location.href = storeURL;
  }, deLay);
 }
});
</script>

소스가 아주 어렵지는 않을 것이다.. 이 소스는 나 스스로 짠것이 아니라 칭구가 도와줬는데 이것저것 관심이 많은 녀석이고 해서 도움을 요청했다.. B 씨 이 자리를 빌어서 진정 고맙다.. 주말에 본인 시간 빼가면서 도와줬으니.. 쌩유..!!!

우선 기본적으로 var 선언을 해주는데 5번 라인 androidIntentUrl 변수가 초반에 언급했던 Intent 다.. 모바일 웹에서 설정 파일을 통해서 본인이 링크하고자 하는 앱의 url 정보를 간단한 명칭으로 정의해주고, package 등의 정보도 같이 하면, 보다 손쉽게 링크되고 하는 듯하다.. java xml 의 매핑정보 정도가 아닐까 생각하고 넘어갔다.. 개념 자체를 파해친건 아니라서 잘은 모르겠다..

14번 라인은 12번 라인 supportDevice 에서 가져온 정보를 통해서 분기를 시킨다.. 정상이라면, 모바일 OS 명을 넘겨주고, 그것이 아니라면 PC 혹은 기타 기기에서 접근이기에 무조건 스토어 설치 페이지로 보내버린다..

위에서 정상처리가 되었다면, 22번 라인 launchApp 을 통해서 분기를 시도한다.. 신형 안드로이드 기반, iOS 기반, 기타 OS 로 구분해서 분기를 한다..

단, 분기하기 위한 조건 판별 과정에서 39번 라인 isChromeAndBigThanChromeVersion18 과 50번 라인 isBigThanIOS9 에서 정규식을 통해서 navigator.userAgent 에서 뽑아온 정보를 확인하고 버전을 리턴하게 되는 것이다..

58번 라인은 setTimeout 개념을 집어넣어서 1초의 시간을 주어진 후에 스토어 url 로 가거나 혹은 앱 url 로 이동하게 된다..

완성 소스도 아니고, 그나마 오래한 분야가 아니다보니 누군가에게 누가 될까봐 아주 디테일하게 설명하기가 좀 부끄럽다.. ㅎㅎ..

실제 소스에는 삽질한 흔적이 겁나 많은데 그것들을 다 보여줄 수는 없는 노릇이고, 최대한 깔끔하게 갖고 왔다..

현 시점에서의 최종 소스는 Android 쪽 코딩은 그대로 가고, iOS 는 30번 라인에 존재하는 failApp(isIOS); 부분을 없애서 설치, 미설치 할 것 없이 무조건 스토어로 가게 변경하였다..

항상 개발을 하다보면, 싫다고는 하지만 그래도 기왕 나한테 넘어온것이라면, 어느정도의 해결 이상을 해내고 싶었는데 아쉽다.. 항상 그렇게 해온것은 아니긴 하지만, 주말에도 나와서 찾아보고 코딩하고 했는데 결과가 이렇게 되니 좀 아쉽게 남는 듯하다..

무튼.. 어느쪽 모바일 OS 건 간에 좀 어느정도 패턴에 있어서 확일화를 했으면 좋겠다.. 웹 개발 때도 그랬는데 이건 머 버전이 0.1 이 올라갔음에도 안되는거 투성이고, 모바일 개발자분들 진짜 존경스럽다.. 특히나 웹하고 틀리게 단말기 기준으로 돌아가니 나에게 기기가 없으면, 테스트가 안되는 것 아닌가.. 에씨 ㅡㅡ..


나중에 언제가 될지는 모르겠으나 해당 개발 관련해서 무엇인가 추가가 되거나 수정이 되서 기능적인 보완이 된다면, 추가적으로 포스팅을 해야겠다.. 그렇지만 개인적으로 모바일쪽은 좀 멀리하고 싶어진 계기였다.. ㅋㅋㅋㅋ..

글구 고생을하고 찾아보고 하면서, schme, intent, Universal Link, 모바일 OS 버전 등등에 대해서 알게 되서 좀 좋았다..

2016년 3월 17일 목요일

[Book] 시작하세요! 아이폰 3 프로그래밍..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/


시작하세요! 아이폰 3 프로그래밍 - 8점
데이브 마크 외 지음, 이준호 외 옮김
이창신.정상일 특별부록 저자
위키북스

아이폰 프로그래밍을 공부하면서 처음으로 읽은 책입니다. 3기반으로 된 책이 많지 않고(올해 엄청 나게 나오긴 했네요.) 여러가지로 봤을때 괜찮아 보여서 골랐습니다만 이것저것 같이 진행하느라고 거의 2달을 읽었습니다.(다 읽고나니까 새버전이 출시되었군요. ㅋ)

다 읽고 난 느낌은 아주 초심자용 책은 아닙니다. 책이 어렵다라고 말하는 것은 아니지만(책은 친절합니다.) 타게팅이 무작정따라하기 식의 완전 초심자용보다는 약간 초중급자를 노린 것으로 생각됩니다. 이부분은 아마도 아이폰 개발을 하는 사람들이 개발을 아예 모르기 보다는 다른 언어개발은 알지만 아이폰의 Objective-C는 처음 해보는 사람들이 많기 때문에 그런 점을 고려한 부분이라고 생각되고 저는 이 부분이 더 좋다고 생각하고 있습니다.(무작정따라하기 식은 다보고 나면 다시 볼일이 별로 없어서...)

제가 이렇게 생각하는 이유는 이 책의 나오는 예제들은 모두 Windows-Based Application 템플릿을 이용해서 프로젝트를 생성합니다. xcode에서는 각 상황에 맞는 여러가지 탬플릿등을 제공하고 있지만 목적에 맞는 Navigation Based나 Tab bar application 템플릿을 사용하지 않고 모두 윈도우베이스드로 만들어서 소스를 수정해서 네비게이션과 탭바를 만드는 식으로 진행이 됩니다. 이 부분은 초반에는 접근하기가 약간 어려울수도 있기는 하지만 결과적으로 로우레벨(이걸 로우레벨이라고 하긴 어렵지만)을 이해하는 것은 꽤 중요하기 때문에 자동생성되는 코드대신 이 접근방식은 iPhone개발을 이해하는데 큰 도움이 될 것이라고 생각합니다.(그렇다고 제가 이해했다는 것은 아닙니다.)

C나 C++은 거의 안해본 저로써는 특히 코드 컨벤션이 다른 랭귀지들과 상당히 다른 Objective-C의 코드 컨벤션을 읽는것조차 익숙해 지는것이 쉽지 않았는데 아이폰의 여러 소스코드들이나 책들을 보면 코드를 작성하는 스타일이 약간씩 다름에도 불구하고 이 책에서 나오는 소스코드들은 상당히 Apple이 제공하고 있는 예제코드들의 기반을 하고 있고 코드 컨벤션도 거의 모두 따라하고 있기 때문에 Objective-C의 초기 코딩습관을 익히는데 도움이 된다고 생각합니다.(각자 코딩하는 스타일이 있지만 각 언어의 다른 코드컨벤션들은 그럴만한 이유가 있어서 그렇기 때문에 언어가 바뀔때는 그쪽언어의 문화를 따라주는 것이 좋다고 생각하고 있습니다.)

또한 아이폰 개발의 기본기에 약간 치중을 하고 있다고 생각합니다. 기본적인 아이폰 개발의 구조적인 부분과 UI만들기, 멀티뷰, 탭바, 네이게이션 컨트롤러와 가장 많이 쓸만한 테이블뷰에만 책에 반 이상을 할애하고 있고 그 외에 부분은 셋팅 번들과 여러가지 데이터 저장 방법, 쿼츠와 OpenGL을 이용한 드로잉들을 찬찬히 소스코드와 함께 각 사용법들을 친절하게 설명해 주고 있기 때문에 이해하기가 쉽습니다. 그외 가속도 센터나 지코어 로케이션, 카메라 등에 대해서는 간단히 설명하고 있어서 전체적으로 봤을 때 아이폰 개발에 기본적이고 공통된 부분에 집중하고 미디어등의 부가적인 부분은 소개정도를 해주는 듯한 느낌입니다.(아이폰 개발이 워낙 범위가 넓은 느낌이라서 다 다루려다가 이도저도 안되는것 보다는 훨씬 좋은 접근인듯 합니다. 그외부분에 대해서 보려면 다른책이나 레퍼런스를 좀더 봐야겠죠.) 어째보면 중요하다고 할수도 있는 아이폰앱 배포에 대한 부분에 대해서는 거의 설명이 없습니다.(배포하는 것도 꽤나 복잡하더군요.)

책이 출간후 출시된 아이폰 3.1버전에서 바뀐 점들에 대해서는 역자가 부록으로 제공하고 있기 때문에(양이 아주 많지는 않지만) 거의 3.1위주로(아직은...) 개발할 아이폰 개발에서 어떤 추가사항이 있는지를 아는 부록도 꽤나 유용하게 생각됩니다.

다른 아이폰책은 아직 안본 상태라 비교해 본 것은 아니지만(아이폰 개발 책은 요즘 워낙 많기도 하고요) 아주 초심자라면 더 쉬운책을 한번 보고 이 책을 보는 것도 나쁘진 않겠지만 일반적으로는 기본을 공부하기에는 꽤 충실한 책인듯 합니다.


My Comment..
해당 글은 아이폰 관련 서적이라 안갖고 올까 하다가.. 사람일은 모르는 것 아닌가 싶어서 우선은 가져와서 후기를 다 읽어보긴 했다.. 지금 회사에서 모바일 웹을 좀 다루기는 하지만, 어디까지나 모바일 기반으로 한 웹일 뿐 안드로이드나 iOS 같은 것을 토대로 하는 것은 아니다.. 햄처럼 방대하게 관심이 있는 것은 아니지만, 혹시 진짜 혹시나 해서.. ㅎㅎ..

2016년 3월 10일 목요일

[EP]자바 커뮤니티 공동 세미나 "자바 개발자를 위한 ‘共感(공감)’을 찾아서" #2..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

앱스토어 효과 - 유주완(블로그)
World of devlopers의 시대가 왔습니다.
개발은 초등학생때부터 했으며 2009년 10월에 아이폰 출시가 가시화되면서 맥을 구입해서 개발을 시작했습니다. 언론에서는 엄청난 고민 끝에 나온 아이디어인 것처럼 나왔지만 실제로는 5분정도도 안걸렸다고 합니다. 그냥 밤에 누가 막차끝났다고 해서 1시간여의 거리를 걸어가던 중에 막차가 지나가버리는 경험도 있고 해서 누구나 할수 있는 쉬운생각으로 만들기 시작했다고 합니다. 10월 20일 서울버스 베타테스터를 모집해서 진행하고 11월 15일에 업로드를 시작했답니다. 인터페이스 빌더가 있었기 때문에 쉽게 개발을 하였다고 합니다. 11월 21일 사용하다가 초선검색의 부재를 인식하게 되고 22일날 kontacts를 만들어서 업로드를 합니다.

배운 점과 느낀 점은 혼자하기에는 다소 벅차고 가장 많이 올때는 하루에 60개정도까지 매일이 오기 때문에 읽고 처리하는데만도 하루가 다 간다고 합니다. 아이폰과 아이팟 터치라는 2개의 기기의 차이점이 있기 때문에 QA의 중요성을 느꼈으면 UX의 중요성도 깨닫게 되었답니다.

발표하시는 유주완님아이폰 개발 히스토리Seoul Bus, Kontacts 개발 히스토리

서울버스를 공개하고 경기도에서 무단 사용에 대한 연락이 와서 겁먹고 앱을 내렸으나 아버지께서 왜 내리냐고 하셔서 다시 올렸는데 실제로 내려간 시간은 30분 정도였고 그 뒤로는 다 아시는대로 경기도권에서 버스정보가 차단되면서 여론을 타게 되었습니다. 관련해서 국회토론회도 불려갔다 왔다더군요.

그 뒤에는 Q&A시간도 진행되었는데 오브벡티브C를 공부하면서 Seoul Bus를 개발하는데 한달정도가 걸렸답니다. 그 이전에 대부분의 언어는 거의 모두 사용해 보았기 때문에 시간이 그리 오래걸리지 않았으며 UX는 따로 연구하거나 하지는 않고 아이폰에 기본적으로 들어있는 어플들을 보면서 어떤식의 UX를 가지고 있는지를 보면서 만들었지 따로 UX를 기획하거나 하지는 않았답니다.

아이폰 앱인 "Seoul Bus"로 일약 스타로 떠오른 유주완님의 세션입니다. 어도비에서 특별세션을 준비하면서 어떤 분을 초청할까 고민하면서 여러군데에 물어보니 유주완님의 얘기를 듣고 싶다는 얘기가 가장 많아서 초청했다고 합니다. 대단하시더군요 어렸을때부터 개발을 해서 개발습득 능력은 확실히 뛰어나신것 같고(나이에 상관없이 이런점이 개발의 흥미로운 점이지요. ㅎ) 나이답지 않게(얼굴얘기아니고요 ㅎㅎ) 그 많은 사람들 앞에서 떨지않고 발표를 정말 잘하시더군요. 여러가지로 자극도 많이 받고 요즘 이슈되고 있는 주제중의 하나이기도 하기 때문에 상당히 흥미롭게 들었습니다.

뒷풀이도 같이 가서 전화번호도 땄(?)내요. ㅎㅎㅎ


아이폰에서 잘 보이는 모바일 웹 페이지 만들기 - OKJSP 허광남(블로그)
모바일 브라우저에 대해서는 아픈 기억들이 있습니다. 핸드폰에 있던 Show, June같은 버튼들은 돈이 많이 나가는 버튼이라는 이미지였습니다. 과거 모바일 유저가 400만 정도 된다는 얘기가 있었는데 그중에서 200만은 실수로 눌러서 들어간 유저라는 얘기가 있습니다. 이제 패킷요금은 현실화 되었습니다. 계산해보니 08년도에 1메가에 921원정도, 1기가의 94만 3천원정도였지만 2010년에는 1기가의 3만원 정도입니다.

모바일에는 현재 국내에 4가지 플랫폼이 있다고 할 수 있습니다.

  • 아이폰/아이팟 터치
  • 안드로이드
  • 윈도우 모바일
  • 모바일웹
발표자료발표하시는 허광남님 발표자료

최근에 알게된 PhoneGap도 있지만 여기서는 iUI (iPhone User Interface Framework)를 보겠습니다. 각자의 습득정도에 따라 차이가 있겠지만 아주 간단한 주소록을 앱으로는 2일이 걸린 것은 모바일앱으로는 1시간 정도밖에 걸리지 않았습니다. iui의 css와 javascript를 임포트하고 웹페이지 개발하듯이 개발하면 됩니다.

iUI는 매우 쉽고 또 웹페이지 제작시 사파리의 비표준 태그를 이용해서 키보드타이핑시 첫글자 자동대문자가 되지 않게 한다던지 input의 type에 tel, number, email등의 값을 넣어주면 자동으로 type에 맞는 키보드가 호출되도록 할 수 있습니다. 강의자료는 여기에 있습니다.

오랜만에 뵌 kenu님은 머리가 많이 기르셨더군요. 최근 모바일웹에 관심을 좀 가지고 있는데 여건상 거의 찾아보지는 못하고 있었는데 아주 디테일한 내용은 아니고 대략적인 내용이었지만 몰랐던 부분도 꽤 있어서 좋았습니다. 더군다나 모두가 앱에만 관심가지고 있는 상황에 저는 거의 앱과 모바일웹을 같은 비중으로 바라보고 있기 때문에 이런 주제를 다루주신 것도 좋았습니다. 앱을 개발하시느라고 모바일웹에 대해서는 아직 디테일하게 만지고 계신것 같지는 않았는데 앱에 비해서 모바일웹의 장점이라든지 디테일한 노하우가 좀더 공유되었으면 하는 아쉬움이 약간 있기도 했습니다.


Spring Roo와 함께하는 쾌속 웹개발 - KSUG 정상혁(블로그)
스프링 루는 벤 알렉스(Ben Alex)가 만들었으며(어제 날짜로 1.0.2가 릴리즈 되었군요.) 자바를 위한 Text Based RAD(Rapid Application Development) 툴입니다. Roo는 호주사람들이 좋아하는 캥거루를 의미하기도 하며 Real Object Oriented의 첫글자를 딴 것이기도 합니다. Spring, Maven, JUnit등을 바탕으로 코드를 자동생성합니다. 생산성을 빠르게 해준다던지 이것을 사용하면 개발속도가 빨라진다는 건 이제 오랫동안 사기(?)를 당해서 이젠 Rapid라고 해도 시큰둥한 것도 사실입니다. 하지만 Roo는 의존성이 거의 없는 특징도 가지고 있습니다.

Spring Roo와 함께하는 쾌속 웹개발 세션발표하시는 정상혁님 Roo Shell 화면

발표를 하시면서 동시에 콘솔창을 띄워서 Ruby on Rails가 처음 나왔을 때 15분만에 블로그만들기처럼 간단한 주류판매페이지를 Roo로 개발하는 시연을 보여주셨습니다. 자바코딩을 하나도 안하는데 콘솔에서 Roo의 명령어만을 이용해서 자바소스를 생성하고 디비를 연결해서 테이블까지 생성하고 UI까지 만들어내는 예제였는데 Roo를 어필하기에는 아주 적합한 예제였다고 생각합니다.

Roo를 사용할 때는 Hint와 Help만을 기억하면 됩니다. 명령어가 생각안날때는 tab을 2번 누르면 어떤 명령어가 있는지가 나오고 지금 어떤 단계를 실행해야 하는지에 대해서 아주 자세하게 나옵니다.(이거 아주 매력적이더군요.) ~는 탑레벨을 의미하고 셀레니움테스트까지 자동화에 포함되어있어서 자동으로 파이어폭스가 실행되면서 UI테스트가 진행되는 시연도 보여주셨습니다. 이렇게 만든 소스를 마지막에 perform eclipse 명령어를 실행하면 이클립스 프로젝트로 개발하기 위한 관련 파일들을 자동으로 생성해 주었습니다.

똑똑한 Shell을 제공하고 있기 때문에 개발하기가 편하며 모든 명령수행은 Transactional하기 때문에 전체가 실행되거나 말거나 뿐입니다. 자동생성된 파일에서 개발자는 .java와 .xml파일만을 다루도록 하고 Roo는 AspectJ파일인 .aj만 다루기 때문에 개발자는 java, xml만 신경쓰면 됩니다. 쉘이 파일을 모니터링하고 있어서 소스를 수정하면 자동으로 aj에 반영해주고 한계가 약간 있을수 있는 UI자동생성은 옵션으로 제공되고 있습니다.

Shell에 대한 설명hibernate의 구인인 ibatis를 압도하는 그래프 또 한 번 봄의 시작이 되길...

Entity소스상에 getter/setter가 전혀 없으며 이는 Mixin으로 Roo가 자동삽입해 줍니다. 이렇게 뻔한 것은 개발자가 안해도 된다는 것이고 Assert로직도 Mixin으로 넣어줍니다. Shell에서 backup을 입력하면 자동으로 시간기록된 파일로 백업을 해주고 Roo Shell에서 입력한 명령어가 자동으로 Log파일에 남게되고 이 파일을 이용해서 다시 프로젝트를 생성시킬 수 있습니다.

Spring Roo는 Full Stack으로 모든 레이어의 기술을 다 제공하며 Seam이나 Ruby on Rails처럼 강한 주장을 가지고 있는 프레임웍이며 베스트 프렉티스를 컨벤션으로 삼아서 CoC를 지향합니다. DAO를 버리고 Entity와 Controller의 단순한 2단구조이며 엑티브 레코드 패턴도 적용하였습니다. ORM에 대해서 성능에 대한 걱정들이 있지만 현재 생성성이라는 말이 들어가는 많은 곳에서 ORM이 적용되고 있으며 여러가지 기술로 성능에 대한 걱정은 하지 않아도 됩니다.

최근에 많은 인기를 얻고 있는 Dynamic typing언어 진영의 발전에 대하 Java진영의 대답으로 볼 수 있습니다.

발표자료는 여기에 있습니다.

이번 세미나에서 본 내용중 가장 인상적이 세션이었습니다. Spring Roo에 대해서 들은 적은 있었지만 정상혁님 말씀대로 RAD에 대해서 크게 매력을 느껴지지 않을만큼 무뎌지기도 했고 그래서 큰 관심까지는 안가지고 있었는데(난 기초를 더 다져야돼 하는 생각도 있었고요.) 작년 후반기 쯤에 0.9얘기를 들었던 것 같은데 그사이에 Spring Roo가 이렇게 그럴듯한 도구로 발전했는지 전혀 몰랐습니다.

제가 가장 매력적으로 느낀 것은 대부분의 RAD들은(경혐은 별로 없지만 그냥 인상으로만...) 속도의 향상을 위해서 많은 것을 따라야 하는 부분이 있기에 당연히 감수해야하는 제한적 부분도 있는데 Roo는 자동화할 부분을 자동화하는 것과 함께 개발자가 개발할 수 있는 것들은 개발자가 할 수 있게 내어준 것 같은 느낌입니다. 세세한 것은 만져봐야 알겠지만 Roo의 자동화를 잘 활용하면 Java개발을 상당히 편리하게 할 수 있을것 같은 생각이 들었습니다. arawn도 요즘 Roo에 빠져서 조만간 Roo공부를 좀 해야겠군요.(전 Spring도 잘 모르는데요 ㅠ..ㅠ)


신청은 했지만 많은 기대감을 가지고 갔던 세미나는 아니었지만 아주 많은 것을 얻어올 수 있었던 세미나였습니다. 너무 테크니컬하지도 않으면서 너무 추상적이지도 않은 아주 적절한 세션들로 구성되어 있었던것 같습니다. 이날은 뒷풀이도 5시간가까이 진행되면서 많은 생각도 하게 된 날이었습니다.

뒷풀이에 정말 많은 얘기들이 오갔지만 가장 맘에 남는 말은 "개발자가 너무 개발자끼리만 어울리는 것은 좋지 않은것 같다. 개발외에 많은 것을 봐야한다."는 것이었습니다. 개인적으로 노력도 하고 있고 적극 동감은 하고 있지만 개발쪽은 공부해야할께 너무나도 많다는 말이지요 ㅠ..ㅠ


2016년 3월 2일 수요일

[jQuery]jQuery로 iPhone스타일의 Checkbox 만들기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

아이폰이 전세계적으로 히트친 뒤로 아이폰의 UI는 하나의 상징이 되어버렸습니다.(요즘도 루머때문에 국내에서 난리죠.)

Thomas Reynolds라는 사람이 jQuery를 이용해서 iPhone스타일의 checkbox를 웹에서 구현할 수 있는 스크립트를 만들어서 공개했습니다. 실제 아이폰의 체크박스처럼 아주 부드럽게 잘 동작합니다.

1
2
3
4
5
6
7
8
<script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $(':checkbox').iphoneStyle();
    });
</script>

저는 jQuery는 거의 안만져봤지만 사용법은 아주 간단합니다. jQuery를 인클루드하고 iphone스타일로 바꾸기 위한 Thomas Reynolds의 js파일과 CSS와 이미지 5개면 준비가 끝이고 Dom Ready 콜백에 iphoneStyle()함수를 지정만 해주면 간단하게 실행됩니다.

아이폰스타일 체크박스

위 스크린샷처럼 아주 깔끔하게 표현이 됩니다. Thomas Reynolds의 아이폰스타일 체크박스 소개페이지를 보면 간단한 예제를 볼 수 있습니다. 머 체크박스를 바뀌주는 것이므로 이 이상의 예제도 없기는 합니다. 옵션을 주면 기본인 ON/OFF 메시지 대신 원하는 글자를 표시해 줄 수도 있습니다. 소스저장소를 보면 처음 소개할때보다 소스가 좀더 나아져서 스타일 class에 대한 지정을 옵션으로 줄 수 있습니다.

가장 좋은 점은 역시 js가 돌아가지 않으면 일반적으로 보는 checkbox를 그대로 볼 수 있기 때문에 접근성에도 문제가 별로 없어보입니다. 전 jQuery를 아직은 안써봐서 이걸 prototype.js기반으로 해볼까 했는데 소스저장소를 보니까 이미 prototype.js기반으로도 제작중이군요.(아직 제대로 돌아가지는 않습니다.)