안드로이드 웹앱 콘테츠 개발자 양성(국비지원)226 HybridApp-React Native 2세대 (CustomComponent) 임의로 Component를 상속받은 클래스를 만들어서 태그문을 안에 넣고 편하게 화면에 보일 수 있다. init하기 전에 AVD를 켜놓자. MainComponents.js 에있는 changeMessage 메소듣 onPress로 전달하자. MyComponent2.js에서 받은 메소드는 해당 버튼을 누르면 실행하게 된다. 새로운 파일을 추가하여 새로운 Component를 만들어보자. 만약 값을 전달할때 값을 누락해서 보내면 어떻게 될까? 결론, color,onPress는 상관없다.. 그러나 title을 쓰지 않으면 에러 값을 전달되지 않았을시 에러를 막기 위해, 값이 없을시 해당 값을 우선 초기화 할 수 있다. 아까 title이 없는 버튼의 주석을 풀고 실행해보자. 에러가 나지 않는다. title이 없어도 .. 2020. 1. 21. HybridApp-React Native 2세대 (Image) 이미지를 클릭 할 때마다, 이미지가 바뀐다. 이미지가 많아지면 밑으로 배치되어 볼 수가 없다. 스크롤뷰 안에 넣어서 스크롤로 볼 수 있다. 백그라운드 배경을 주는 속성이 따로 없다. 태그를 이용하자. 실행 전에 AVD를 실행해 놓자. 예제는 d:\HybridApp\ReactNative폴더에 만들 것이다 해당 경로까지 접속 후 init하자. MainComponent.js를 만들자. MainComponent.js가 화면에 보이기 위해 index.js에서 사용을 한다. 그리고 이미지르 사용할 것이기 때문에 images 폴더를 만들어서 거기에 이미지를 넣자. 이제 실행을 해보자. 원본 이미지가 커서 잘린다. 이미지의 너비, 높이 값을 주자. 너비와 높이 값을 주면 이미지의 비율이 깨질 수 있다. 현재 이미지는 .. 2020. 1. 21. HybridApp-React Native 2세대 (Layout) flex를 이용하여 여러가지 배치를 연습해본다. 예제는 D드라이브에 HybridApp\ReactNative폴더에 예제 폴더를 만들어서 작업할 것이다. 해당 경로까지 접근하여 init하자. 명령어가 잘 실행되었다면 RN04Layoyt폴더가 생겼을 것이다. 배치를 연습하기 위해 네모를 만들어 보자. cmd창에서 만들어진 폴더까지 접속하여 run을 하자. 네모 두개를 추가 배치해보자. 배치에 대해서 스타일을 주지 않더라도 기본으로 flex-direction은 column이다 (수직배치) 비율로 배치를 해보자. 우선 flex:숫자를 쓰면 flex-gorws만 준 값이다. (월래 세개의 값을 줄 수 있다. flex:) 배치를 수평으로 바꿔보자. 중첩 구조를 연습해보자. index.js 1 2 3 4 5 6 7 8.. 2020. 1. 20. HybridApp-React Native 2세대 (TextInput 입력칸에 글자 입력후 버튼으로 화면 갱신) TextInput에 입력한 값을 받아서 화면에 갱신해본다. 예제들을 d드라이브에 HybridApp에 모아두고 있다 그래서 해당 경로까지 가서 RN03TextInput 을 만들자. MainComponent.js가 화면에 나오도록 바꿔주자. 스타일도 적용해보자. 코드를 작성해다면, 우선 화면에 잘나오는지 확인해보자. TextInput을 화면에 배치하고 스타일을 주자. 입력된 글씨를 보여주기 윈한 변수를 만들자. 화면이 갱신되려면 state변수를 사용하자. 입력된 글씨를 보여줄 Text에 스타일을 주자. TextInput에 글씨가 바뀌었을때, 반응하는 onChangeText를 이용하자. changeText의 두꺼운 화살표 함수로 state변수의 값을 변경하자. setState()메소드 이용. 위 실행 화면은 .. 2020. 1. 20. 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. 이전 1 2 3 4 5 6 ··· 26 다음
