코딩브론즈

이번 포스트에서는 배경색 작업을 할 것이다. css에서는 gradient만드는것이 쉽지만 리엑트 네이티브에서는 뭘 좀 더 해줘야하는데, LinearGradient 를 사용해야한다. docs.expo.io/versions/latest/sdk/linear-gradient/ LinearGradient - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.io expo install expo-linear-gradient 이제 expo-linear-gradient 모듈에서 LinearGradien..

이제 날씨 아이콘을 넣을건데 그전에 Expo가 가지고 있는것을 확인해보자. docs.expo.io/guides/icons/ Icons - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.io expo/vector-icons 라는것을 이미 가지고있다. import를 하자 import {MaterialCommunityIcons} from '@expo/vector-icons'; 이제 docs.expo.io/guides/icons/에서 아이콘을 찾아 넣어보자 조금더 꾸며보자

먼저 온도부터 맞추자. 현재 화씨온도 292.23 를 섭씨온도로 바꿀것이다. 현재 사용하고 있는 API Current weather data 에서 Units of measurement를 보면 2가지 옵션이있다. units=imperial 과 units=metric 이 있다. metric은 섭씨온도를 원할때 imperial은 화씨온도이다. 화씨를 누가쓰나? metric을 쓰자 url 뒤에 &units=metric을 붙이고 저장. 화씨온도였던 292 에서 섭씨온도 19도로 바뀐것을 확인할 수 있다. 이제 날씨 정보를 보여줄 Weather.js 컴포넌트를 만들어 보자. props를 몇개 가질것이기 때문에 prop-types를 install 하자. npm install prop-types Weather.js 이..

위도 경도를 가져오기 위해서는 geolocation 을 사용해야한다. 아쉽게도 geolocation은 그렇게 파워풀하지 못하다. 현재 위치을 가져오고 (getCurrentPosition) 위치를 지켜보고 (watchPosition) watch 해제 (clearWatch) Observing 을 멈추는 정도이다. (stopObserving) 하지만 상관없다. 지금 만드는 날씨 앱은 getCurrentPosition만 사용할 것이다. getCurrentPosition은 브라우저에서 작동하는것(navigator,geolocation.getCurrentPosition)과 매우 비슷하다. Expo로 가서 Location을 보면 더 많은 API를 사용할 수 있다. (ex. gps, 주소를 가지고 위도 경도 반환 등등..

이번 포스트에서는 로딩 스크린을 만들어보자. App.js에서 바로 만들 수 있지만, Loading.js 파일을 생성하자. 참고로 paddingHorizontal 과 paddingVertical은 일반적인 css에선 찾을 수 없는 것들이고 React Native가 가진 것이다. 이제 App.js에서 Loading.js를 import 하고 쓸모 없어진 것들을 지우자. 잘 되는것을 확인했다면 이제 Text의 style를 바꿔보자. 굿

React Native의 레이아웃에 대한 규칙을 알아보자. 위와 같이 를 하나 더 추가해보니 바로 밑에 붙었다. 웹 사이트 같았으면 오른쪽에 붙었을텐데 왜 밑에 붙는거지? => React Native에서 모든 flex box의 디폴트는 flexDirection이 column이기 때문이다. (웹 사이트의 디폴트는 row) 모바일 폰은 대개 위아래로 길기때문이기도 함. 옆에 붙이고 싶다면 flexDirection : "row"를 쓰면 된다. flexDirection : "row" container 는 부모이고 flex:1 은 모든 공간을 사용할 수 있다는것을 의미한다. yellowView와 blueView 는 부모인 container에 속해있다. flex: 1 이라서 전부를 차지하고 싶지만 둘이라서 반씩 나..

모바일 앱을 만드는 방법은 3가지가 있다. 1. 완전 native 방식 Xcode - Swift or Object-c 로 iOS 앱 만들기 Android studio - Java or Kotlin 으로 Android 앱 만들기 2. 앱 기반 웹뷰를 만드는 것 매우매우 심플한 앱을 만들때. 3. React Native 방식 Android, iOS 둘 다 JavaScript 엔진을 가지고 있기 때문에 JavaScript를 실행할 수 있다. JavaScript를 웹 사이트에서 실행하고, 구글 크롬, 사파리, iOS, Android React Native가 하는 일은, JavaScript를이용해서 iOS 또는Android 의 네이티브 엔진에게 자바스크립트를 이용한 메시지를 보내는것. 연결을 이어주는 브릿지 같은..

실행 후 나온 QR 코드를 Expo앱을 열어 스캔하면 앱을 동작시킬 수 있다. 가끔 Expo connection 문제가 있기 때문에 접속하는 기기들이 같은 wi-fi에 연결되어있는지 확인하자. wi-fi를 끄고 5G에 연결하고 QR 스캔을 해보니 다음과같은 결과가 나왔다. ...그냥 맘편히 같은 wi-fi에서 접속하자. 이제 많은 앱 개발자들이 사랑하는 Expo의 좋은점 2가지를 볼것이다. 1. live reloading : 저장 시 자동 refresh Text를 바꾸고 저장을 하면 이렇게 Expo가 전체 Application을 reload한다. 스플레시 스크린이 잠깐 보이고 애플리케이션이 나타날것이다. 만약 수동으로 새로고침을 하고 싶다면 시뮬레이터로 가서 ctrl + R 을 누르면 된다. 스마트폰을 ..