코딩브론즈

이번 포스트에서는 배경색 작업을 할 것이다. 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 이..

날씨 데이터를 가져오기 위해 사용할 API는 아래의 웹 사이트에서 얻을 수 있다. openweathermap.org/api Weather API - OpenWeatherMap Please sign up and use our fast and easy-to-work weather APIs for free. Look at our monthly subscriptions for more options rather than the Free account that we provide you. Read How to start first and enjoy using our powerful weather APIs. openweathermap.org 회원가입을 하면 API key를 확인할 수 있다. API key를 복사해서..

위도 경도를 가져오기 위해서는 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 의 네이티브 엔진에게 자바스크립트를 이용한 메시지를 보내는것. 연결을 이어주는 브릿지 같은..