반원 블로그

1회차 - 09 react native 날씨 앱 따라 만들기(4) - 디자인 시작

계속 이어서 노마드코더 니콜라스의 React Native Weather를 따라해보도록 하자. 이제부터 디자인 부분이다. https://www.youtube.com/playlist?list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi 영상 #2 0 Displaying Temperature 부터 시작합니다. 현재 흰색화면은 당연 render함수에 이 리턴되는 조건이 isLoading이 false일 경우이다. 날씨 데이터를 제대로 받아와졌다면, 당연히 흰색으로 나온다. openweather api uni format 보통이라면 섭씨를 사용하지만, openweather api는 절대온도 기준으로 값이 나온다. 파이썬 할 때는 그냥 공식으로 변환했었는데, 나중에서야 요청할 대 units설정이 있..
2018~/react native 2020. 7. 1. 19:11
1회차 - 08 ES6 문법 - Arrow function

=> : 이것이 Arrow function 기존 자바스크립트 + ES5문법의 filter을 사용한 코드를 보자. const years = [ { year : 2000, data : '크리스마스', }, { year : 2005, data : '설날', }, { year : 2010, data : '광복절', }, { year : 2015, data : '추석', }, ]; // 함수 생성 - ES5 형식 const result = years.filter(function(data){ return data.year > 2008; }); // 실행 console.log(result); 출력결과 [ { year: 2010, data: '광복절&#3..
2018~/react native 2020. 7. 1. 00:22
1회차 - 07 ES6 문법 - rest operator

실습 페이지 : https://repl.it/languages/babel rest operator function printYears(years) { console.log(years); } printYears(2000, 2001, 2010, 2015, 2018); 출력 결과 2000 => undefined기대한 결과는 매개변수로 넣은 2000, 2001, 2010, 2015, 2018 이 출력되는 건데 2000만 나온다. 기존 해결 방식 이를 해결하기위한 문법은 다음과 같다. function printYears(years) { console.log(arguments); } printYears(2000, 2001, 2010, 2015, 2018); 출력결과 { 0: 2000, 1: 2001, 2: 2010..
2018~/react native 2020. 6. 30. 18:46
1회차 - 06 componentDidUpdate , ReactNative의 LifeCycle API

니콜라스 강의를 보면 도중에 App.js에서 export default function App()를 export default class extends React.Component로 바꾼 뒤 componentDidMount()란 함수가 갑자기 튀어나온다. https://gosmcom.tistory.com/164?category=410099 import React from 'react'; import Loading from "./Loading"; import * as Location from 'expo-location' export default class extends React.Component { // 함수 만들기 geoLocation = async() => { const..
2018~/react native 2020. 6. 30. 18:21
1회차 - 05 ES6 문법 - Async, Await

연습 사이트 : https://repl.it/languages/babel Async, Await 기존 javascript의 콜백 지옥 문제를 해결해준 문법이다. 과거 비동기식 함수 호출의 경우 콜백시킬 함수를 받아서 이를 실행시켜주기 때문에 [콜백할 함수를 서버에서 받는다->실행]을 반복하게 된다. callback=>{ callback=>{ callback=>{ callback=>{return data;} } } } 이제 Async, Await를 배워본다. 먼저 함수 하나를 만든다. 이 때 기존에 있는 Promise 객체(함수)를 이용할 건데, 이것의 콜백리턴으로 resolve와 reject가 들어온다. 이를 이용해보자. function resolvePromise() { return new Promise..
2018~/react native 2020. 6. 30. 17:51
[자료 찾기] react native expo로 firebase 사용하기

스토리지가 필요한 앱을 만들 수 있어야 가능한 범위가 늘어나고, 주로 firebase(firestore)나 mongoDB 를 쓰지않을까 싶어 미리 자료를 모아두자 EXPO firebase 문서 https://docs.expo.io/guides/using-firebase/ expo install firebase로 SDK 설치 import * as firebase from 'firebase'; SDK 기본 설정 config import * as firebase from 'firebase'; // Optionally import the services that you want to use //import "firebase/auth"; //import "firebase/databas..
2018~/react native 2020. 6. 30. 14:18
Prev 1 2 3 4 ··· 28 Next