android studio와 avd (Android 6.0 기반)을
windows 7과 proxy 기반 network상에서 설정하였고 삽질한 것 정리함.
다른 환경에서는 proxy 설정이 필요 없을 수 도 있음(ex. exclipe, linux 등)
방법 1. AVD 내에서 설정
: http://stackoverflow.com/a/6026364
(1) avd 내의 Settings > Cellular networks > Access Point Names > T-Mobile US 이나 다른 것 선택 > Proxy, Port 에 숫자 입력 & Username, Password 설정 (없다면 지움)
(2) 상단 상태 표시바에서 airplane mode를 실행 했다가 끔. (이거 해야 되더라..)
(3) browser app으로 인터넷 확인
방법 2. avd 실행 시 -http-proxy 옵션 설정 (내 환경에서는 안먹힘)
- avd 실행 시 -http-proxy 설정 옵션을 추가하는 방법
: http://developer.android.com/intl/ko/tools/devices/emulator.html#proxy
ex) emulator.exe -netdelay none -netspeed full -avd {avd_name} -http-proxy http://x.x.x.x:pppp
: 하지만 fd number 1024 제한에 걸려 avd 동작 안됨.
. (에러메세지) FATAL:.//android/base/sockets/SocketWaiter.cpp:88:Check failed: isValidFd(fd). fd 1548 max1024
: -no-audio 옵션을 주는 방법을 사용해도 동작 안됨. (http://stackoverflow.com/a/26503029)
: avd의 메모리를 1024 보다 낮추는 방법 => 동작 안됨.(http://stackoverflow.com/a/7249408)
=> 결론적으로 이 방법으로는 실행 & 성공 못해 봄..
2016년 1월 28일 목요일
2016년 1월 27일 수요일
Windows 환경에서 React native Getting started sample project 실행하기.
Windows laptop에서 React Native Getting started sample인 AwesomeProject를 돌려보고자 하였음.
React Native Getting started.
: https://facebook.github.io/react-native/docs/getting-started.html
- Homebrew => Scoop (https://www.outcoldman.com/en/archive/2014/07/20/scoop/)
대체 하여 사용할 수 있지만 정작 watchman, flow는 scoop을 사용해서 설치 못함.
단 curl, git, nodejs 같은 기본적인 것들은 설치 가능함.
: proxy 설정 : https://github.com/lukesampson/scoop/wiki/Using-Scoop-behind-a-proxy
Android Setup guide
: https://facebook.github.io/react-native/docs/android-setup.html
- 프로젝트 빌드 시 guide에서 표시한 대로 SDK builde tool 23.0.1 은 설치가 되어야 함.
- emulator 실행 설정에 실패함.
: Android SDK의 emulator는 부팅은 되지만 정작 실행이 안된다. HAXM install에도 불구하고 실행이 안된다.
: Windows에서 제공하는 Hyper-V 기반으로 emulator를 실행하였지만 "preparing virtual machine" 메세지만 표시되고 실행이 안된다. 좀 Hyper-V 관련 trouble shooting을 찾아봤지만 내 환경 설정이 좀 문제인듯.
=> 그래서 그냥 device 연결해서 AwesomeProject 실행.
- 두 개의 shell에서 "react-native start" 실행 후 "react-native run-android" 실행
- 실행 시 JS load에 문제가 생겼다는 메세지와 빨간 화면 표시
: bundle js 파일이 asset에 포함되지 않아서 생긴 known issue인 듯 아래 처럼 필요한 다운로드 하면 된다.
=> http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle
windows 기반에서 React native project를 실행은 했으나...
개발을 위해서 맥북을 사야하나라는 생각이 마구마구 듬.
React Native Getting started.
: https://facebook.github.io/react-native/docs/getting-started.html
- Homebrew => Scoop (https://www.outcoldman.com/en/archive/2014/07/20/scoop/)
대체 하여 사용할 수 있지만 정작 watchman, flow는 scoop을 사용해서 설치 못함.
단 curl, git, nodejs 같은 기본적인 것들은 설치 가능함.
: proxy 설정 : https://github.com/lukesampson/scoop/wiki/Using-Scoop-behind-a-proxy
Android Setup guide
: https://facebook.github.io/react-native/docs/android-setup.html
- 프로젝트 빌드 시 guide에서 표시한 대로 SDK builde tool 23.0.1 은 설치가 되어야 함.
- emulator 실행 설정에 실패함.
: Android SDK의 emulator는 부팅은 되지만 정작 실행이 안된다. HAXM install에도 불구하고 실행이 안된다.
: Windows에서 제공하는 Hyper-V 기반으로 emulator를 실행하였지만 "preparing virtual machine" 메세지만 표시되고 실행이 안된다. 좀 Hyper-V 관련 trouble shooting을 찾아봤지만 내 환경 설정이 좀 문제인듯.
=> 그래서 그냥 device 연결해서 AwesomeProject 실행.
- 두 개의 shell에서 "react-native start" 실행 후 "react-native run-android" 실행
- 실행 시 JS load에 문제가 생겼다는 메세지와 빨간 화면 표시
: bundle js 파일이 asset에 포함되지 않아서 생긴 known issue인 듯 아래 처럼 필요한 다운로드 하면 된다.
=> http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle
Update
To run with local server, run the following commands under your react-native project root directory
- react-native start > /dev/null 2>&1 &
- adb reverse tcp:8081 tcp:8081
please take a look at dsissitka's answer for more details.
To run without a server, bundle the jsfile into the apk by running:
- create an assets folder under
android/app/src/main curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
please take a look at kzzzf's answer for more details.
android
windows 기반에서 React native project를 실행은 했으나...
개발을 위해서 맥북을 사야하나라는 생각이 마구마구 듬.
2016년 1월 2일 토요일
W3C HTML5 Conference 2015 (오후) -개인 메모 정리
개인 메모 저장
모든 기술 문서는 여기에
http://www.html5forum.or.kr/front/knowhow/tech.jsp
--------------------------------------------
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_11_%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90_%EC%9E%84%EB%8F%99%EC%9A%B0_%EC%B1%85%EC%9E%84_Trend_of_The_Open_Source_Web_Engines.pdf&folder=upload/board
크로미엄 (블링크) . 크롬 vs 웹킷 . 사파리 vs 모질라 . 파이어폭스
Web as a platform
. Convertor > Cordova. PhoneGap
. Os > Chrome os. Firefox os
=> 위 방법으로는 뭔가 부족하다.
[Progressive Web Apps의 특징들]
. Installable
: 하이브리드와 다르게 검색사이트에서 클릭 시 바로 앱이 실행 되고 실행 중 설치를 유도 함.
. Connectivity independent
: 인터넷 연결에 상관없이 동작
. Re-engageable
: Push notification이 가능함 > 이를 사용 하여 수익. 재방문율을 높일 수 있음.
. Interoperability
[앱을 위한 표준 들]
. Web app manifest 표준
: http://www.w3.org/TR/appmanifest/
: 웹앱의 아이콘 설치하게 해 줌.
. Splash screen
. Service workers 표준
: http://www.w3.org/TR/service-workers/
: 오프라인. 백그라운드에서 task 수행 가능하게 함.
. Web Bluetooth 표준
: 브라우저에서 접근
. Web USB 표준 . Chrome experimental
. Push api. Web notifications 표준들
: http://www.w3.org/TR/push-api/
. Media capture and streams. WebRTC 표준
. Pointer Events 표준
: 터치 압력. 각도 정보
-------------------------------------------
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_12_SK%ED%94%8C%EB%9E%98%EB%8B%9B%EC%9E%84%EC%83%81%EC%84%9D_%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94%EC%82%AC%EB%A1%80-W3C-2015.pdf&folder=upload/board
HTML5로 시럽 스토어 만드는 삽질기
고려사항
.타협불가 최소품질
. Native 수준 look motion
안드로이드 4.2 이상에서 가능한 수준
uI framework > Ionic - angularJS 기반 HTML5 Framework. Android/ios native style
Ionic 기능. 장점
. SPA dom cycle 관리
. Native style ui component
. Grade에 따른 성능 제어
. UI routing
GPU cPU acclation
Declarative animation vs JS animation
: Declarative animation
. css 기반
. Web kit엔진 에서 기본 최적화
. Keyframe
. Transition
: JS animation
. Settimeout인 경우 frame drop
: 화면은 60Hz. JS는 ms 단위
. Vsync는 단말 성능에 좌우
Native 사용
. Push
. BLE
. Splash screen
. Cipherstorage
. Camera
. Image cropper
웹으로 80%정도 코딩
Scroll View
. 버전별 문제 있음
. Ionic Scroll View는 다양한 옵션(native scroll도 선택 가능)
Page navigation animation
. 페이지 깜박 안되도록 처리 필요
DOM element load timing
. 이벤트 (beforend. Afterenter. Load. Unload)에 따라서 분배해야 지 시간 잘약
Gradient. Box-shadow. Border radious 는 속도가 안나와서 제거
URL 기반 3rd party
Iframe vs 별도 Webview
. Iframe는 안드 4.2 이후에서 가능. 이전 버전은 안정성 이슈
* 최소 Android 4.2 이상. iOS 7.0 이상 앱 상용개발 가능
* UI layer 복잡도 고려 필요
* Ionic 성능 고려 필요
-------------------------------------------
JS 선택이유. 대중성. 쉬움.
JS 대신 JerryScript를 만든 이유는
V8를 IoT 기기에 올리기에는 거대한 footprint가 문제임. (ROM 10MB. RAM 8MB)
JerryScript 2014년 기준
.96kb bi ary size
.16kb runtime memory foot print
. Compact profile
IoT.js
. Node.js를 jerryscript로 가능하도록 함
(사진참고)
-------------------------------------------
2014.10 원형 디스플레이 css 확장안 제안
Media query media feature : device-radius
0이면 사각. 숫자면 외곽 curve radius
Shape-inside
모양에 맞춰서 내용을 안에 표시
Border-boundary
Display를 하면 border이 화면 내에서 표시
Polar-angle. Distance. Anchor. Origin
화면에 각도와 반지름으로 배치
박스모델 조정
Crosswalk. Blink 관련 Intel과 협업 중
-------------------------------------------
Web App Manifest
: Splash screen은 manifest의 name, background_color, Icon 값을 기반하여 보여줌
별도의 프로세스. 아이콘 설치가능 (롤리팝 기준)
Service Worker
: 페이지를 닫아도 web push notification을 받을 수 있음.
Push notification
: 72%방문 증가 26%지출 증가 효과 - chrome dev summit
: 필요사항들
. Background service
. Push register event
. Notification UI
> Web Push 표준 = 구독 + 받기
: Gcm을 통해 sender id를 받은 Push server와 service worker 상에서 연결되어야 함.
: 메세지를 service worker에서 받으면 UI로 알리고 UI 클릭 시 서비스 워커에서 notification 창으로 데이터를 전달한다.
: FB에서 지원 중, 브라우저로 FB에 접속하면 push 수신 여부 팝업 표시 됨.
: Native에서는 payload를 받을 수 있지만 web push는 payload 없이 event만 받고 있음.
Web Components
: <template>내에 컴포넌트를 작성.
. 브라우저에서 표시돠지 않음
: <decorator> 컴포넌트를 꾸밀 때 사용. CSS 사용
: <element> template를 Custom elements로 지정
. 단 스크립트 방식을 사용하라.
Pointer Events
: 입력을 추상화 하여 처리.
: 특징
. 기존 마우스. 터치. 타블렛. 펜. 인식 등 및 추후 모든 입력을 대상
. 입력장치의 유형. 발생 이벤트 유형 확인 가능
. 기울기. 압력 등의 추가 메소드 지원
: 지원 > IE 10. FF. Webkit에 MS가 추가하였으나 실제 사용 불능
: MS가 PC, mobile, tablet 등에서 사용하려고 만든 것이라고 보면됨...
모든 기술 문서는 여기에
http://www.html5forum.or.kr/front/knowhow/tech.jsp
--------------------------------------------
[브라우저엔진 오픈소스 현황]
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_11_%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90_%EC%9E%84%EB%8F%99%EC%9A%B0_%EC%B1%85%EC%9E%84_Trend_of_The_Open_Source_Web_Engines.pdf&folder=upload/board
크로미엄 (블링크) . 크롬 vs 웹킷 . 사파리 vs 모질라 . 파이어폭스
Web as a platform
. Convertor > Cordova. PhoneGap
. Os > Chrome os. Firefox os
=> 위 방법으로는 뭔가 부족하다.
[Progressive Web Apps의 특징들]
. Installable
: 하이브리드와 다르게 검색사이트에서 클릭 시 바로 앱이 실행 되고 실행 중 설치를 유도 함.
. Connectivity independent
: 인터넷 연결에 상관없이 동작
. Re-engageable
: Push notification이 가능함 > 이를 사용 하여 수익. 재방문율을 높일 수 있음.
. Interoperability
[앱을 위한 표준 들]
. Web app manifest 표준
: http://www.w3.org/TR/appmanifest/
: 웹앱의 아이콘 설치하게 해 줌.
. Splash screen
. Service workers 표준
: http://www.w3.org/TR/service-workers/
: 오프라인. 백그라운드에서 task 수행 가능하게 함.
. Web Bluetooth 표준
: 브라우저에서 접근
. Web USB 표준 . Chrome experimental
. Push api. Web notifications 표준들
: http://www.w3.org/TR/push-api/
. Media capture and streams. WebRTC 표준
. Pointer Events 표준
: 터치 압력. 각도 정보
-------------------------------------------
[모바일 웹 성능 최적화 동향 및 사례]
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_12_SK%ED%94%8C%EB%9E%98%EB%8B%9B%EC%9E%84%EC%83%81%EC%84%9D_%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94%EC%82%AC%EB%A1%80-W3C-2015.pdf&folder=upload/board
HTML5로 시럽 스토어 만드는 삽질기
고려사항
.타협불가 최소품질
. Native 수준 look motion
안드로이드 4.2 이상에서 가능한 수준
uI framework > Ionic - angularJS 기반 HTML5 Framework. Android/ios native style
Ionic 기능. 장점
. SPA dom cycle 관리
. Native style ui component
. Grade에 따른 성능 제어
. UI routing
GPU cPU acclation
Declarative animation vs JS animation
: Declarative animation
. css 기반
. Web kit엔진 에서 기본 최적화
. Keyframe
. Transition
: JS animation
. Settimeout인 경우 frame drop
: 화면은 60Hz. JS는 ms 단위
. Vsync는 단말 성능에 좌우
Native 사용
. Push
. BLE
. Splash screen
. Cipherstorage
. Camera
. Image cropper
웹으로 80%정도 코딩
Scroll View
. 버전별 문제 있음
. Ionic Scroll View는 다양한 옵션(native scroll도 선택 가능)
Page navigation animation
. 페이지 깜박 안되도록 처리 필요
DOM element load timing
. 이벤트 (beforend. Afterenter. Load. Unload)에 따라서 분배해야 지 시간 잘약
Gradient. Box-shadow. Border radious 는 속도가 안나와서 제거
URL 기반 3rd party
Iframe vs 별도 Webview
. Iframe는 안드 4.2 이후에서 가능. 이전 버전은 안정성 이슈
* 최소 Android 4.2 이상. iOS 7.0 이상 앱 상용개발 가능
* UI layer 복잡도 고려 필요
* Ionic 성능 고려 필요
-------------------------------------------
[JerryScript와 IOT.js]
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_13_%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90_%EC%9D%B4%EC%84%B1%EC%9E%AC%EC%88%98%EC%84%9D_JerryScript_and_IoT.js-v1.0-20151207.pdf&folder=upload/boardJS 선택이유. 대중성. 쉬움.
JS 대신 JerryScript를 만든 이유는
V8를 IoT 기기에 올리기에는 거대한 footprint가 문제임. (ROM 10MB. RAM 8MB)
JerryScript 2014년 기준
.96kb bi ary size
.16kb runtime memory foot print
. Compact profile
IoT.js
. Node.js를 jerryscript로 가능하도록 함
(사진참고)
-------------------------------------------
[CSS round display 표준]
발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_21_Lg%EC%A0%84%EC%9E%90_%EC%86%A1%ED%9A%A8%EC%A7%84151209_HTML5_Conference_2015_CSS_Round_Display.pptx&folder=upload/board2014.10 원형 디스플레이 css 확장안 제안
Media query media feature : device-radius
0이면 사각. 숫자면 외곽 curve radius
Shape-inside
모양에 맞춰서 내용을 안에 표시
Border-boundary
Display를 하면 border이 화면 내에서 표시
Polar-angle. Distance. Anchor. Origin
화면에 각도와 반지름으로 배치
박스모델 조정
Crosswalk. Blink 관련 Intel과 협업 중
-------------------------------------------
[최신 Web API Lighting Talk]
발표 시간이 부족해서 제대로 못 적었는데... 발표자료가 없다..Web App Manifest
: Splash screen은 manifest의 name, background_color, Icon 값을 기반하여 보여줌
별도의 프로세스. 아이콘 설치가능 (롤리팝 기준)
Service Worker
: 페이지를 닫아도 web push notification을 받을 수 있음.
Push notification
: 72%방문 증가 26%지출 증가 효과 - chrome dev summit
: 필요사항들
. Background service
. Push register event
. Notification UI
> Web Push 표준 = 구독 + 받기
: Gcm을 통해 sender id를 받은 Push server와 service worker 상에서 연결되어야 함.
: 메세지를 service worker에서 받으면 UI로 알리고 UI 클릭 시 서비스 워커에서 notification 창으로 데이터를 전달한다.
: FB에서 지원 중, 브라우저로 FB에 접속하면 push 수신 여부 팝업 표시 됨.
: Native에서는 payload를 받을 수 있지만 web push는 payload 없이 event만 받고 있음.
Web Components
: <template>내에 컴포넌트를 작성.
. 브라우저에서 표시돠지 않음
: <decorator> 컴포넌트를 꾸밀 때 사용. CSS 사용
: <element> template를 Custom elements로 지정
. 단 스크립트 방식을 사용하라.
Pointer Events
: 입력을 추상화 하여 처리.
: 특징
. 기존 마우스. 터치. 타블렛. 펜. 인식 등 및 추후 모든 입력을 대상
. 입력장치의 유형. 발생 이벤트 유형 확인 가능
. 기울기. 압력 등의 추가 메소드 지원
: 지원 > IE 10. FF. Webkit에 MS가 추가하였으나 실제 사용 불능
: MS가 PC, mobile, tablet 등에서 사용하려고 만든 것이라고 보면됨...
피드 구독하기:
글 (Atom)