본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HybridApp30

HybridApp-React Native 2세대 (기능 - NativeBase Library 쉽게 스타일 적용 ) 웹에서 Bootstrap처럼 UI 손쉽게 만들기 위한 라이브러리, 프로토타입때 많이 사용하는 방식 다양한 사이트가 있다. 이번 예제에서는 NativeBase 사이트를 이용하겠다. https://docs.nativebase.io/Components.html#picker-input-headref Components · NativeBase type Ionicons AntDesign, Ionicons, Entypo, EvilIcons, Feather, FontAwesome, FontAwesome5, Foundation, MaterialIcons, MaterialCommunityIcons, Octicons, Roboto, rubicon-icon-font, SimpleLineIcons, Zocial Specifie.. 2020. 1. 30.
HybridApp-React Native 2세대 (기능 - DataArchitecture- Context API, 전역변수 같은) MVC나 MVP를 사용하지 않고 flux 패턴을 사용하여, Context API를 이용한다. ( 전역변수 사용 하는 것 같은 효과 ) 1. Main.js 파일 내에서 전역변수처럼 사용해서 다른 클래스에서 사용할 수 있다. 2. Second2.js 파일을 새로 만들어서 보라색 Text와 녹색 버튼을 만들었다. 다른 파일에서 import 해서 Main.js의 전역 변수 같은 변수를 사용한다. 실행 전에 AVD를 켜놓자. 작업할 경로까지 접근하여 init하자. 만든 폴더로 가서 run하자. RN22DataArchitectureContextAPI폴더에 Main.js 파일을 만들자. 우선 값을 전달하지 않지만, Main, First, Second class를 만들자. Main class 위에 전역 변수를 선언하듯.. 2020. 1. 30.
HybridApp-React Native 2세대 (기능 - DataArchitecture ) 상위 클래스에서 값을 전달해서 화면에 보여주고, props를 이용해서 전달 받은 값을 사용한다. ( 값 전달 : Main -> First -> Second ) 버튼을 누르면 Main에 changeData() 메소드를 Main에서 전달->First에서 전달->Second에서 changeData()호출하여 state 변수 값을 바꾼다. 그럼 화면에 보여주고 있던 state 변수 값이 일제히 변경된다. 우선 AVD를 켜놓자. 그리고 작업할 경로에서 init하자. 화면에 보여줄 text를 state변수로 지정하여 보여주자. 이제 First 클래스 (컴포넌트)를 만들고, 임의로 작성한 data로 데이터를 전달하자. 그 데이터는 자동으로 props에 생성된다. First class에서 그 데이터를 보여주자. Fir.. 2020. 1. 30.
아직 내용 수정 안함 HybridApp-React Native 2세대 (기능 - Stateful(extends),Stateless(함수형) Component) state 변수를 변경하면 화면 갱신 props는 상수이므로 전달 받은 값을 변경 불가. 전달한 부모에서 변경 가능 자바 객체 만드는 방법 1. 리터럴 {name:"sma", age:20} 2. 함수로 객체 생성 Mian class에 화면에 보이는 것들을 배치 시킬 수 있지만, 다로 컴포넌트를 만들어서 Main에서는 그 컴포넌트 만 쓰면 된다. 예) 함수도 내용은 밑에 함수안에 쓰고 Main에서는 함수 호출만 하듯이... 우선 AVD를 실행시켜놓자. 작업할 경로로 접근하여 init하자. Main class에 를 놓지 않고, 임의의 컴포넌트를 만들어서 배치하자. 임의로 만든 Mycomponent는 Component이기 때문에 extends로 Component로 상속받자. 1 2 3 4 5 6 7 8 9 1.. 2020. 1. 30.
HybridApp-React Native 2세대 (기능 - Map Google 라이브러리 사용 ) Google API를 사용하여 지도를 보여준다. 이 과정에서 Map API키 발급받음. 작업하기 전에 AVD를 켜놓자. 작업할 경로에서 RN19GoogleMapTest를 init하자. 빌드 에러가 난다. 이제 구글 지도를 사용하기 위해 API 키 발급을 해야한다. Map에 관련된 것이기 때문에 Products에 Maps Platform을 선택하자. https://developers.google.com/ 문서탭으로 이동하자. 문서탭에서 Android 관련으로 아래 사진과 같이 선택하자. 좌측에 Get an API Key가 있을 것이다. 해당 메뉴에서 key 발급 방법을 알아보자. 그전에 구글 로그인이 되어있어야 한다. ( 프로젝트가 있다면 굳이 안만들어도 된다. ) 임의로 프로젝트명을 쓴다. 자신이 원하는.. 2020. 1. 29.
HybridApp-React Native 2세대 (기능 - Geolocation API ) 퍼미션을 추가하고 Geolocation을 이용하여 위도, 경도 정보를 알아오자. init 하기 전에 AVD를 켜놓자. 작업할 공간까지 접근하여 RN18Geolocation을 init 하자. 해당 사이트를 들어가서 사용 방법을 알아보자. https://facebook.github.io/react-native/docs/geolocation.html React Native · A framework for building native apps using React A framework for building native apps using React facebook.github.io 아래 사진의 설명을 읽어보면 대략 안드로이드에서는 android.location API를 사용하고 React Native에서는 G.. 2020. 1. 29.
HybridApp-React Native 2세대 (기능 - AsyncStorage API ) 1. AsyncStorage를 이용하여 데이터를 저장하고 불러온다. 2. AsyncStorage를 이용하여 데이터를 저장하고 불러온다. 추가로 await 사용 ( AsyncStorage는 비동기라서 순서의 문제가 생길 수 있다. 저장하는 동안 다른 작업을 진행하므로... AsyncStorage을 할 동안 잠깐 메인 스레드를 대기하게 만든다. ) d\hybridapp\reactnative 경로에서 RN17AsyncStorage를 만들어서 작업하자. asyncstorage를 사용하기 위해 아래 해당 사이트를 가보자. 이제는 AsyncStorage를 사용하려면 community에서 공유하는 것을 사용해야한다. 새탭으로 열어서 보면 어떻게 사용하는지 나와있다. 우선 install을 해주자. 아까 init한 폴더.. 2020. 1. 29.
HybridApp-React Native 2세대 (기능 - Lifecycle Method) React Native의 Lifecycle에 대해 알아보자. constructor() -> UNSAFE_componentWillMount() -> render() -> componentDidMount() - > ->componentDidUpdate() [화면 갱신될시 작동] -> componentWillUnmount() [컴포넌트 종료시 작동] 우선 AVD를 켜놓고 작업을 하자. 자신이 작업할 경로까지 접근하여 RN16Lifecycle을 만들자. 코드를 작성하기 전에 우선 run을 하는 것이 좋다. 화면에는 태그에 있는 글자만 보일 것이다. Lifecycle을 알기 위 log 확인해보자. 방법 1. log 확인하는 방법 - 이미 run을 했을때 node창이 실행이 된다. node창을 보면 log가 나와 .. 2020. 1. 28.
HybridApp-React Native 2세대 (기능 - ImagePicker / 카메라,갤러리앱) 작업하기 전에 AVD를 실행해 놓자. 작업할 경로까지 접근하여 RN15ImagePicker를 init하자. Image picker에 대해 해당 사이트를 들어가보자. https://github.com/react-native-community/react-native-image-picker react-native-community/react-native-image-picker :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera. - react-native-community/react-native-im.. 2020. 1. 28.

티스토리툴바