'nodejs' 태그의 글 목록

CORS 문제 문제 문제

모바일 2015. 10. 29. 04:09

회사 일이 많아져서 정신없이 바쁘네요 ㅜㅜ

어떻게 하다보니 하이브리드앱에 모바일 웹을 넣는 조금은 변태적인 구조로 개발을 하게되었습니다.

거기다가 모바일 웹을 인앱브라우저 형태로 보여주기만 하는게 아니라 모바일웹처럼 보이는 하이드리드 앱이라고 해야하나 그런 모양새가 되어버렸습니다. 네이티브로 다 개발하기에는 이미 시간이 얼마 남지 않았고 앞으로 개발해야 하는 것도 눈에 밟히고;; 순수? 하이브리드로 하고 싶었지만 여러가지 이유로 무산 여튼 변태적인 구조속에서 골치가 아픈건 로그인 연동(모바일웹이 iframe으로 들어갔습니다)인데 크로스 도메인으로 인한 쿠키 공유가 되지 않아 무한 검색을 하다가 nodejs 플러그인(CorsProxy)을 찾았습니다.

https://www.npmjs.com/package/corsproxy

별도의 프록시 서버가 구동된다고 보면 되는데 사용 방법을 보면 아시겠지만 Prefix? 도메인명을 맞춰줘서 어떤 사이트라도 Sub도메인명이 되게 하여 해결하는 것입니다.(https도 지원)

http://localhost:1337/localhost:3000/sign_in

http://localhost:1337/my.domain.com/path/to/resource

다만 ionic framework+cordova로 만든 하이드리드 앱에 이걸 어떻게 넣어줘야하냐인데 방법이 없다는게 함정;;

무한 검색을 해보았지만 디바이스에서는 안된다는 글을 보고 nodejs 플러그인이 정말 많구나를 느끼며 낚시글을 마감합니다. ㅎㅎㅎ

아 그래서 쿠키를 포기하고 특정 User-Agent + 쿼리 스트링으로 연동하기로 했답니다;;;

크로스 도메인 관련 정리된 사이트는 아래걸 한번 보면 도움이 될듯 싶습니다.

http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

저작자표시 비영리 변경금지

Posted by resisa

,

하이브리드 아키텍처

모바일 2015. 8. 26. 21:31

작심 3일로 끝나버릴까봐 더 늦기 전에 다음 진도를 나가봅니다.

구성도는 아래와 같습니다.

FrontEnd

이전에 글에 썼던 것처럼 nodejs 기반으로 뷰에 대한 렌더링이 클라이언트에서 된다고 생각하시면 됩니다.
Ionic Framework는 AngularJS와 Sass기반으로 구현되어 있습니다. Ionic을 단순하게 말하면 UI Framework라고 생각하시면 됩니다. CSS기반으로 작성된 앱스럽게 보이는 컨트롤 및 자바스크립트를 제공해준다고 생각하시면 됩니다.
모바일 웹에서는 모바일 디바이스 API(디바이스 정보, 카메라 기타 등등)에 접근하는 것이 어렵지만(불가능?) 하이드리드 앱에서는 이러한 부분을 Apache Cordova를 통해서 가능하게 해줍니다. Cordova 디바이스 API는 플러그인 형태로 제공되며 추가적인 플러그인(PushPlugin 등등)도 Github에 공개되어 있습니다.
ngCordova는 AngularJS 컨트롤러에서 Cordova 디바이스 API를 사용하기 쉽게 확장해둔 라이브러리라고 생각하시면 됩니다.
Ionic Material은 Google Material 디자인처럼 Ionic 컨트롤을 확장한 라이브러리라고 생각하시면 됩니다.
참고 : https://www.materialup.com/
FrontEnd는 atom으로 코딩을 하고 gulp로 빌드를 해서 개발을 진행하고 있습니다.
참고 : http://programmingsummaries.tistory.com/356

BackEnd

서버는 Web API로 json 데이터를 제공해줍니다. Nancy로 구현하였는데 Nginx에도 올릴 수도 있다고 해서 다른 프로젝트에서 적용을 해보았는데 특별한 문제는 없고 IoC부터 라이팅 규칙 작성도 쉽고 직렬화 등 라이브러리 교체와 같은 부분들이 쉽게 되어 있습니다.
보통 .NET에서는 직렬화 라이브러리로 JSON.NET를 많이 사용하는데 ServiceStack.Text(4.0이상은 유료입니다;;)가 성능이 제일 괜찮다고 하여 사용해보았습니다. 이전에 말한 것처럼 Nancy에서는 라이브러리 교체가 쉽게 때문에 문제가 생기면 바로 교체를 하려고 했었는데 크게 문제는 없었습니다.(json 데이터 파일을 읽다가 공백과 관련된 버그는 있었습니다.) 아 또 한가지 CSV와 JSV 다양한 데이터 포맷을 제공합니다. 동일 주소를 호출을 하여 다양한 포맷으로 데이터를 받을 경우(Content Negotiation)에 활용하면 괜찮습니다.
PushSharp은 GCM, Apns 기타 등등과 관련된 푸쉬 서비스에 대한 프로바이더입니다. GCM에 쏘는건 실제로 Http Post방식으로 쏘면 되는거라 어렵지 않아 굳이 쓸 필요까지는 없었는데 저는 오픈 소스를 사랑하기 때문에 ^^; 소스도 볼겸 사용해보았습니다.

SignalR은 실시간(양방향) 통신이 필요할 경우에 사용하려고 고려만 해둔 상태입니다.
참고 : 초록색으로 표시한 부분은 직접 구현한 부분들이 아닌 외부와의 연동을 의미합니다.

GCM(Apns)

푸쉬 서비스를 사용하는 이유는 앱이 실행중이지 않더라도 알림을 받으려고 하는 것입니다. 디바이스에서 먼저 GCM Service에 등록을 해줘야 하며 등록하는 과정에서 Token를 받습니다. 이러한 Token은 사용자별로 푸쉬 프로바이더로 전송을 해줘서 저장을 해줘야 합니다. 푸쉬 프로바이더에서는 저장된 Token을 사용하여 메세지를 GCM Service로 보냅니다. GCM Service에서는 받은 메세지를 디바이스로 보냅니다.
PushSharp에서는 GCM, Apns에 대한 구현이 각각 되어 있었는데 보통 아이폰은 Apns를 안드로이드폰은 GCM를 사용합니다. GCM 3.0부터는 등록 프로세스를 간소화하여 아이폰, 안드로이드폰, 크롬까지 지원을 합니다.
GCM를 사용하더라도 Apns에 인증을 하는 절차를 거쳐야 합니다. 실제로 GCM Service에서 Apns에 인증만 받는 건지 아니면 중간 역할을 해주는 건지는 확실하지 않지만 등록 프로세스를 간소화를 통하여 GCM의 Topic과 Device Group를 사용하기 위함입니다. 관련 내용은 슬라이드를 보시면 아실 수 있을 겁니다~ ^^

아직까지도 보여줄 코딩한줄이 없네요 ㅎㅎ;; 블로그질을 오랫만에 하니 시간을 은근히 잡아먹네요 ㅜㅜ

다음에는 GCM 3.0의 등록 프로세스 간소화를 위한 iOS와 관련된 설정 및 코드로.........

저작자표시 비영리 변경금지

Posted by resisa

,

하이브리드 앱의 시작

모바일 2015. 8. 23. 23:48

오랫만에 블로그에 글을 쓰네요 ^^;

블로그질을 다시 시작해보는 이유는 회사에서 제목처럼 하이브리드 앱 개발을 시작한게 동기가 되어서 입니다. 몇 개의 글을 쓸지는 모르겠지만요.. ㅎㅎ

스터디 모임으로 iOS, Android 개발을 해보았는데 생각보다 진행이 잘 되지 않았습니다. 여러가지 이유가 있겠지만 아무래도 경험이 없었던게 걸림돌이 되지 않았나 싶습니다. 그래서 눈을 돌려 하이브리드 앱 개발을 해보았습니다.

아래는 회사에서 발표한 내용으로 개요나 앞으로의 계획 등등을 제외한 발표 자료입니다.

http://slides.com/sungkikim/deck#/

결론적으로 Ionic Framework와 Apache Cordova를 사용하여 프로토타입 앱을 만들었습니다.

React Native, Native Script도 Ionic과 마찬가지로 프론트엔드 즉 배포되는 앱에 nodejs를 기반으로 마치 클라이언트에 웹서버가 있는 것처럼 구동되는 방식입니다.

실제로는 Ionic으로 먼저 개발이 어느정도 되고 나서 다른 것을 알게 되었는데 다른 것을 알았다고 하더라도 Ionic을 선택하지 않았을까 싶습니다. angularjs도 한번 해보고 싶었고 html5 + javascript의 조합이 지식활용도 면에서도 좋은 선택이지 않았나 싶습니다.

처음부터 너무 무리하면 안될 것 같아 첫 번째 글은 여기서 마치고 다음 글은 구성도에 대한 이야기를 더 자세히 해볼 예정입니다.

P.S 블로그 관리를 안하다보니 한달 전부터인가 방명록에 일본어로 된 글들이 엄청 많아서 모두 삭제했는데 그때부터 방문자가 늘었는데 줄지 않고 있네요 ㅎㅎㅎ;; 의미없는 숫자이지만 블로그질을 하라는 하늘이 계시?? ㅎㅎ