alt

리액트 네이티브로 날씨앱 만들기

리액트 네이티브를 사용하여 날씨앱을 만드는 첫번째 강좌입니다. 간단하게 현재 위치(GPS좌표)를 읽어 날씨를 조회하여 보여줄 것입니다. 기능을 하나씩 천천히 구현하면서 진행하겠습니다.

이전글

[React Native #1] 리액트 네이티브 시작하기

리액트 네이티브 프로젝트 생성

$ create-react-native-app weather_app

Choose a template에서 blank를 선택한다.

alt

아래와 같이 weather_app 프로젝트가 생성된다.

alt

현재 위치 GPS 가져오기

navigator.geolocation에서 제공하는 getCurrentPosition 함수를 사용하면 현재 GPS 좌표를 가져올 수 있다.

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position);
});

App.js에서 아래와 같이 componentDidMount() 함수를 구현한다.

export default class App extends React.Component {

  // ... 생략 ...

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        console.log(position);
      }, 
      function(error) {
        console.log(error);
      }
    );
  }
}

componentDidMount 함수는 리액트 컴포넌트 마운트가 되었을때 실행된다.
[React.Component의 lifecycle 문서]를 참고.

앱 실행하기

$ npm start

또는,

$ expo start

앱을 실행하면 아래와 같이 브라우저에 http://localhost:19002/ 페이지가 표시된다. 브라우저가 자동 실행되지 않은 경우에는 URL을 직접입력한다.

alt

디바이스에서 Expo앱을 실행하고 QR코드를 촬영한다. 그리고 앱에서 위치정보 액세스 권한을 물어보는 경우 확인을 누른다.

alt

그러면 콘솔창에 현재 GSP좌표 데이터가 Object 형태로 출력된다.

Object {
  "coords": Object {
    "accuracy": 15.47599983215332,
    "altitude": 54.5,
    "heading": 0,
    "latitude": 37.5354432,
    "longitude": 127.0542137,
    "speed": 0,
  },
  "mocked": false,
  "timestamp": 1542729762017,
}

참고로 브라우저 콘솔창에서도 확인 가능하다.
alt

다음번 강좌에서는 위치정보(GPS)로 날씨를 조회하는 기능을 구현할 것입니다.

날씨 앱을 안드로이드 자바로 구현할 때는 개발환경 세팅이나 필요한 모듈을 다운로드하는데 시간이 많이 걸렸습니다. 그런데 리액트 네이티브는 개발환경 세팅이나 모듈 설치하는데 많은 시간이 필요하지 않아서 좋네요. 그리고 저는 리액트 네이티브가 자바스크립트로 구현해서 그런지 코딩이 금방 손에 익었습니다.ㅋ 구글의 플러터도 자바스크립트를 사용했으면 더 좋았을 텐데 하는 아쉬움이 남았습니다.

여기까지 읽어주셔서 감사합니다.