본문 바로가기

Projects/React Native 위치 기반 날씨앱

 (7)
#6. 프로젝트 후기 https://github.com/chanmin-kim/rn-expo-weather chanmin-kim/rn-expo-weather react native expo weather app. Contribute to chanmin-kim/rn-expo-weather development by creating an account on GitHub. github.com 전체 코드는 여기서 볼 수 있다 웹프론트엔드에서 React 프레임워크를 사용할 때와 거의 동일하게 화면 구성을 진행할 수 있다는 점에서 접근성이 좋다고 생각했다. 다만, ios와 안드로이드에 맞추어 자동적으로 UI가 바뀌는 것이 아니어서, 사실상 ios, 안드로이드 별도로 화면구성을 해야한다는 것을 알 수 있었다. 그럼에도, JavaScript..
#5. 디테일한 날씨정보 띄워주기 메인화면 정보를 띄워주는 것과 별반 다르지 않다. 다만, 섭씨/화씨의 단위에 따라 정보가 달라지듯이, 풍속의 단위도 달라져야 한다. 이 부분을 수정해주기 위해서는 조건문을 넣어주면 된다. //app.js에서 필요한 정보들을 받는다 export default function WeatherDetails({currentWeather, unitsSystem}) { //api에서 받은 정보 중 필요한 정보만 추출한다 const { main: {feels_like, humidity, pressure}, wind : {speed}, } = currentWeather //단위에 따라서 풍속을 다르게 표시해줘야 한다 //삼항연산자를 활용하여 windSpeed를 다르게 정의할 수 있다 const windSpeed = un..
#4. API 요청 중 로딩 화면 구현 및 새로고침 버튼 openweathermap에 비동기 요청을 하기 때문에 로딩 중 화면을 구현해야 한다. 이를 위해선 로딩 중인지를 확인하는 조건문이 필요하고, 로딩중이라면 로딩 UI를 띄우는 부분이 필요하다. //로딩 중임을 표시할 수 있는 UI를 가져온다 import { ActivityIndicator, ActivityIndicatorBase } from 'react-native'; //기존코드와 동일한 부분 if(currentWeather){ return ( ); }else if (errorMessage){ return ( {errorMessage} ); }else { //날씨정보가 있는 것도 아니고, 에러 메시지도 없다면, 로딩중이라 판별가능 return ( //로딩중임을 표시하는 UI를 별도의 라이브러리를 활용하..
#3. 단위환산에 따라 다른 정보 표시하기 섭씨/화씨 단위를 설정할 수 있는 버튼을 만들고, 이 버튼을 클릭하여 단위를 변경하면, 변경한 단위로 다시 openweathermap에 api를 재 요청하여, 정보를 받아온 뒤, 이를 메인화면에 띄워주면 된다. 이 기능을 구현하기 위해선, 우선 단위를 선택할 수 있는 ui를 만들고, 이 ui 상에서 상태변화가 일어나는 부분을 저장해줄 state hook을 정의하고, 클릭이라는 이벤트가 발생할 때, 단위와 관련된 state를 변경해줄 수 있어야 한다. 단위와 관련된 state를 변경한다면, 그 state 대로 다시 api 요청이 진행될 것이다. export default function App() { //단위를 담을 수 있는 state를 설정한다. 이 state에 따라 api에 요청하는 정보가 달라진다 c..
#2. 받아온 API 요청을 화면에 띄우기 앞에서 openweathermap에 api 요청을 하였는데, 이제 이 요청들을 실제로 화면에 띄우는 부분을 만들어보자. //날씨정보가 제대로 들어왔다면 그 부분을 보여준다 if(currentWeather){ return ( //currentweather에 담긴 날씨 정보를 데이터바인딩 ); }else { //날씨정보가 제대로 담겨있지 않다면 errormessage를 출력한다 return ( //errormessage state에 담긴 정보를 데이터바인딩 {errorMessage} ); } 간단한 if 문으로 currentWeather이라는 state에 제대로 정보가 들어갔는지 체크하고, 이를 보여주는 별도의 컴포넌트를 app.js에 넣는다. 그리고 currentWeather의 정보는 WeatherInfo..
#1. 날씨앱 메인 화면 구성 가장 먼저 구현해야할 기능은, 앱을 실행시켰을 때, 현재 위치 정보를 불러오고, 그 위치를 기반으로 외부 API에 날씨 정보를 요청한뒤, 요청한 정보를 표시하는 부분이다. 우선은, 앱을 바로 실행시켰을 때, 위치 정보를 불러오고, 이를 API에 요청하는 부분까지 구현하고자 한다. export default function App() { //사용할 상태Hook들 const [errorMessage, setErrorMessage] = useState(null); const [currentWeather, setCurrentWeather] = useState(null); const [unitsSystem, setUnitsSystem] = useState('metric'); //앱이 실행되었을 때, load 함수..
#0. 위치 기반 날씨앱 개요 React Native를 활용하여, 위치 기반 날씨앱을 만들어 보고자 한다. Kotlin 등을 이용한 네이티브 개발 그리고 Flutter를 이용한 크로스 플랫폼 개발을 할 수 있겠으나, 웹개발에서 사용하던, JavaScript로 모바일 앱을 완성할 수 있다는 점이 매력적으로 다가왔다. 또한 웹에서 사용하던 React 프레임워크를 거의 그대로 모바일에서 사용할 수 있었기 때문에 그 점 또한 매력적으로 다가왔다. 유일한 차이점은 두 가지 였는데, 1) 기존의 Return 부분에서는 JSX를 사용하였는데, 여기서는 Div 대신에 View 등을 사용하여 UI를 그려나간다는 점 2) CSS나 SCSS가 아닌 StyleSheet 라이브러리를 사용한다는 점 이 두 가지가 다른 부분이었다. 그 외에는 똑같이 React..

티스토리툴바