전체 글406 HybridApp-React Native 2세대 (Button눌렀을때 텍스트,이미지 변경) 버튼을 눌러서 텍스트를 변경한다. ( setState() 메소드를 이용해서 state변수 값 변경 ) 버튼을 눌러서 이미지를 변경한다. (이번에는 화살표 함수가 아닌, 익명함수를 이용했다.) 플랫폼에 종속적이지 않는 cmd로 실행시키자. 만든 RN02Button 폴더로 들어가서 실행을 시키자. run이 잘 됐다면 node창이 새로 열릴것이다. 작업할 새로운 파일을 만들자. ( MainComponent.js ) 화면에 보이도록 index.js에서 사용하자. 우선 버튼을 만들고, 버튼을 누르면 알림창이 나오도록 해보자. 그러나, alert()는 웹에서 쓰이는 형식이다. 앱에 알맞는 것은 Alert클래스의 alert()를 사용하자. 함수를 익명 함수로 변경 가능하다. 두꺼운 화살표 함수로 변경 가능하다. 전역.. 2020. 1. 20. HybridApp-React Native 2세대 (설치 및 간단한 예제) 1세대 Cordova는 느려서 React Native로 사용을 한다. [cordova와 똑같이 웹기술만으로 쉽게 앱을 만들 수 있다.] 위 설치 메모장을 보면 이전에 Cordova를 설치할때 했던 행동들이다. 그래서 그냥 개발로 바로 가능하다. npm은 최신버전이 안될 수 있다. 그래서 그때그때 적용이 되는 npx를 사용하자. 해당 사이트에서도 npx를 권장. ( npm에서 버그가 발견된 것이, npx에서는 최신 버전이 반영되어 버그가 개선되었다.) #### nodeJS 버전 업 하면서 npx 등장 및 사용권장. ################################### - npm과 다르게 일회용설치 같은 개념. [전역으로 react-native명령어를 사용할 수 있음] - 매 명령 작업마다 그때 .. 2020. 1. 17. HybridApp - 1세대 cordova (카메라, 갤러리앱) hml,js,css로 화면을 구성하고 버튼을 만들 수 있지만, 그것을 Android Studio와 연동하여 휴대폰 기능을 사용할 수 있다. 카메라와 갤러리앱을 실행해보자. 새로 폴더와 패키지, 앱이름을 만들자. 처음 실행 화면은 저렇게 나온다. 기본적으로 코드가 써져 있다. 이제 이것을 지우고 새로 코딩해보자. index.html에 쓸때 없는 내용은 지우고 새로 만들자. index.html 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 Hello World Camera Test APP Camera use index.css와 index.js 안에.. 2020. 1. 16. HybridApp - 1세대 cordova 설치 및 안드로이드 연결 Cordova는 Java없이 웹을 만들수만 있다면 웹앱을 쉽게 만들어주는 프로그램이다. 즉, 웹 개발자가 좀더 쉽게 웹을 앱으로 만들 수 있다. (Java를 모르더라도) Cordova 설치 관련 문서 우선 cordova 사이트에서 다운 받는 방법을 보자. GET STARTED를 누르면 다운 받는 방법이 나온다. 그전에 필요한 것이 있다. 사이트를 읽어보자. 자바스크립트 없이 js 를 쓰기 위해 Node.js가 필요하다. NPM - 자바 프로그램을 관리하는 library를 모아둔 것 ( 깃허브처럼 ) CORDOVA 설치를 위해선 Node.js 와 NPM이 필요하다. CORDOVA는 Java가 필요하다. JSK 필요. 안드로이드 스튜디오의 openJDK 가 안먹는다. 그래서 openJDK를 따로 설치해주는 .. 2020. 1. 16. HybridApp - 0세대 WebApp( listview ) 이미지의 크기를 조절하려면 어쩔 수 없이 크기 값을 줘야한다. 2020. 1. 16. HybridApp - 0세대 WebApp(다양한 버튼) 여러가지 버튼에 대해서 알아보자. webapp 폴더 안에 02_Button폴더를 만들고, index.html파일을 만들자. index.html 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 " target="_blank" rel="noopener">jquerymobile.com--> Button Widget Anchor button Button element 2020. 1. 15. HybridApp - 0세대 Webapp (웹페이지를 모바일 크기로 만들기) ● WepApp - JQM library [ data-role 속성 ] - Bootstrap [ class 속성 ] 안드로이드 스튜디오를 이용하지 않고, 모바일형식으로 만든다. JQM library를 이용하면 모바일형식으로 쉽게 웹을 만들 수 있다. 우선 작업할 폴더를 만들고 거기에서 작업을 하자. D\HybridApp\webapp 폴더를 만들었다. webapp폴더에서 작업을 할 것이다. visual code를 이용하겠다. webapp폴더에 01_Introduce 폴더를 만들고, index.html 파일을 만들자. 이제 아래 사이트에서 JQM library를 다운받자. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feat.. 2020. 1. 15. HybridApp - 0세대 WepApp (갤러이앱 열고, 웹-앱 문자열 전달) 버튼을 통해 휴대폰 갤러이앱을 열고, 웹과 안드로이드 앱 데이터 전달 빈 액티비티를 만들자. activity_main.xml 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 MainActivity.java 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 5.. 2020. 1. 15. Hybrid App - 0세대 WebApp (안드로이드 스튜디오로 html 작성 및 반응형 웹 열기) -WebApp 웹페이지인데 CSS를 이용해서 앱처럼 보이는 것 ( JQM library를 사용하면 편하다. ) -하이브리드앱(1세대) Native App 안드로이드 앱 안에서 WebView가 있고 거기에 HTML, CSS, JS를 넣으면 된다. 그러나 핸드폰의 기능을 사용을 못한다. 그래서 JS와 자바의 메소드를 연결 [ cordova ]해서 웹어서 버튼을 눌러도 휴대폰 기능을 사용할 수 있다. -하이브리드앱(2세대) React Native 0세대부터 알아보자. 기본적인 WebApp android studio에서 html등을 만들고 보여줄 수 있다. 그리고 미리 만든 반응형 웹도 앵커요소를 통해 열린다. activity_main.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ht.. 2020. 1. 15. 이전 1 ··· 19 20 21 22 23 24 25 ··· 46 다음
