디렉토리 구조 변경 현재 프로젝트는 react를 create 하면 생성되는 구조이다. 이를 그대로 사용해도 괜찮지만 디렉토리 구조를 변경하여 나중에 추가될 기능이나 모듈에 대해 관리하기 쉽게 만들어 주는 것이 좋다. Redux를 위한 _actions, _reducer Components/Views Page가 들어가는 디렉토리이다. 즉, 화면에 대한 파일이 들어간다. Components/Views/Sections css파일이나 component들이 들어가는 디렉토리이다. App.js routing 관련 작업을 처리한다. Config.js 환경 변수를 저장한다. hoc(Higher Order Component) 권한을 검사하여 접근할 수 있는 component를 가지는 component이다. utils 여러..
React facebook에서 개발한 라이브러리이다. Component를 기반으로 만들어져 module과 비슷하게 재사용성이 매우 좋다. 또한 Virtual DOM을 사용한다. Virtual DOM과 Real DOM의 차이는 다음과 같다. Virtual DOM Real DOM 로컬에서 Virtual DOM을 생성한 뒤 렌더를 요청하기 전 단계에서 변경 사항을 적용하여 요청하는 방식으로 동작한다. 따라서 어떠한 Component가 변경이 된다면 해당 Component만을 업데이트하면 된다. html 문서를 읽어와 DOM Tree를 생성한 뒤 Rander Tree를 생성한다. 그 후 렌더링을 하는 구조이다. 따라서 어떠한 Component가 변경이 된다면 전체 페이지에 대한 Tree들을 다시 작성하여 렌더링..
Create Weather Screen 필요한 정보들은 모두 props로 전달받은 component를 구현하기만 하면 프로젝트는 완성이다. 함수형 component를 사용할 것이고 prop-types 모듈을 사용하여 편하게 props를 관리할 것이다. 다음은 Screen.js 코드이다. import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import propTypes from 'prop-types'; import { LinearGradient } from 'expo-linear-gradient'; import { MaterialCommunityIcons } from '@expo/vector-icons'; con..
Pass to Weather Screen 날씨 정보를 얻어 왔으면 다음 단계로 날씨를 나타내는 화면을 만들어 프로젝트를 완성시키면 된다. 그전에 정보들을 뽑아내 화면을 출력해주는 컴포넌트에 보내야 한다. 이전 포스트에서 받아온 data의 항목을 보면 "main"이라는 부분과, "weather"이라는 부분을 보면 원하는 정보들이 있다. "main"부분의 temp는 온도를 나타내는 지표이다. 원래는 화씨온도로 나오는데 HTTP 통신 제일 뒤에 &units=metric이라고 붙여 주면 섭씨온도로 변환해준다. api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={your api key}&units=metric weather은 배열로 응답이 왔다...
Get Weather 이전 포스트에서 위치를 받아와 위도, 경도를 알아내 log를 찍어보았다. 이제는 위도, 경도를 이용하여 해당 지역에 날씨를 받아오는 일을 하면 프로젝트의 전반적인 부분을 다 마치게 된다. 날씨를 받아오는 방법은 아래의 api를 이용한다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Dashboard and Agro API We provide satellite imagery, weather data and other agricultural services that are based on geodata. By using Agro API , you can easily power your solution..
Getting Location 날씨를 받아오기 전에 내 위치를 받아와야 날씨를 알 수 있다. expo에는 이미 위치를 받아오는 모듈이 존재한다. 모듈만으로도 충분히 훌륭한 어플을 만들 수 있다고 생각이 든다.... 그렇다면, 언제나 그랬듯이 모듈을 설치해야 한다. 위치를 받아오는 모듈의 이름은 expo-location이다. 아래의 명령어를 입력하면 설치할 수 있다. expo install expo-location 모듈설치를 완료한 뒤, 문서에 나와있는 usage를 보며 사용법을 익혀보자. ( 공식문서는 글 아래에 첨부하겠음. ) import * as Location from 'expo-location'; 위와 같이 import 해주고, 함수를 이용해 받아오면 된다. 비동기 처리를 위해 asnyc & aw..
Create Loading Screen 제일 기본인 로딩 스크린을 만들었다. 강의에서는 다른 배경화면과 글씨를 썼지만 내 취향에 맞게 바꿔 보았다. 내가 만든 로딩 화면이다. 밋밋한 배경이 싫어서 그러데이션을 넣어 보았다. 그라데이션을 사용하려면 모듈을 다운로드하여 적용하면 된다. 늘 그랬듯이 expo install로 간단하게 진행할 수 있다. 아래의 명령어를 터미널에 입력하면 된다. expo install expo-linear-gradient 모듈 설치를 완료한 뒤, 모듈을 import 하면 된다. 다음은 Loading Screen 코드이다. import { LinearGradient } from 'expo-linear-gradient'; import React from 'react'; import {..
Requirements 우선적으로, node.js를 설치해야 한다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ver10.0 이상이면 된다. npm은 ver6 이상이면 된다. 코드 편집기는 VS Code로 진행할 예정이다. window개발 환경에서 iphone어플을 개발하기는 쉽지 않다. 테스트 또한 그렇다. 하지만 expo를 이용하면 window환경에서도 iphone으로 테스트하며 개발을 할 수 있다. 만약 안드로이드 app 개발을 원하는 경우에는 안드로이드 스튜디오 AVD를 이용할 수 있지만 실제 핸드폰에 어떻게 보이는지 확인하면 더욱 쉽게 개발할 수 있..
React Native State react native ver16.8 이전의 버전에서는 state를 사용하려면 class형 Component를 사용해야 했다. 즉, 함수형 Component에서는 state를 사용할 수 없었다. state는 해당 Component가 가지고 관리하는 값들이기 때문에 객체 형태의 class형 Component에서만 사용하도록 통제되어 있었다. 하지만, ver16.8 이상에서는 함수형 Compnent에서도 state를 사용할 수 있게 되었다. 이를 Hooks라고 한다. Hooks 사용법 import React, {useState} from 'react'; import {Text, TouchableOpacity, View} from 'react-native'; function ..
Screen 간 data전달 방법 Screen 이동은 navigation으로 한다는 내용은 저번 post에 언급했다. 만약 첫 번째 화면에서 두 번째 화면으로 data를 전달하려면 어떻게 해야 할까? 정답은 navigation을 이용하여 data를 전달하는 것이다. 저번 코드를 수정하여 data를 넘기는 예제를 해볼 예정이다. 첫 번째 화면에서 click을 하면 click 한 수를 보여준 뒤, 두 번째 화면에서 클릭한 수만큼의 아이콘을 출력해 보는 예제이다. 우선, 첫번째 화면의 코드이다. const First = ({navigation}) => { const [count, setCount] = useState(0); return ( setCount(count + 1)}> {count} navigatio..
