React-Native

import * as Location from "expo-location";

const getLocation = async () => { //수많은 로직중에 에러가 발생하면 //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행 try { //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await await Location.requestPermissionsAsync(); const locationData= await Location.getCurrentPositionAsync(); //현재 위치좌표를 가져오는 함수 console.log(locationData) } catch (error) { //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다 Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?"..

리액트]중요한것 '화살표함수'

화살표함수를 그냥 아 그런가보다 하고 넘겼더니 계속 뭐지? 헷깔리게된다. 그냥 계속신경쓰여서 이해가 안된다. 화살표함수를 이용한 코드 const StackNavigator = () =>{ return ( //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다. //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다. //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다. {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/} ) } 원래 코드는 아래와 같지않았을까?? function St..

expo- status bar 상태바설치, 네비게이터설치

expo install expo-status-bar 나만의 꿀팁 오늘의 날씨: {todayWeather + '°C ' + todayCondition} {category('전체보기')}}>전체보기 {category('생활')}}>생활 {category('재테크')}}>재테크 {category('반려견')}}>반려견

setState, setCateState, setReady

setState(tip) setCateState(tip) setReady(false) setState : 여기안에 초기페이지를 저장해놓음 setCateState 상태변경함수 리액트네이티브의 장점은 화면을 뿌려주는 것. 다시 불러오는것이아니라 화면을 다시 뿌리고 새로운 것을 거시기하는것.이 장점

[나만의꿀팁제작]그 후 24시간 후에 문제해결.

data.js 파일에 오류가 있었다. data안에는 꿀팁 내용이 들어가있는데 이부분을 분명 써넣었는데 한참 고생고생 여러 인터넷도 찾아보고 했으나 결과는 "프로그래밍중 뭔가의 누락" 이라고 하는것이다. 아무리 찾아봐도 몰라서 오늘 다시 설치해야겠다. 분명 expo에서 문제가 있으리라 생각했다. 파일도 다시만들고 다시 공부한다 생각하고 모든걸 다시 써넣었다. 그 와중에 문제점이 발견됐다. Data.json를 찾을 수 없다고 나오는것이다. Data.json???? 기억이 가물가물해서 다시 처음부터 강의록을 보기시작했고. Data.json를 찾아서 열어봤고 Data.json를 다시만들고 써넣었더니 해결됐다. 그간 열심히 따라 해 온 시간이 아까워 어떻게든 해결해보려고 했던것이 문제였다. 누락이있었다. 에러가 ..

[리액트]함수의 골격

import React from 'react'; import main from './assets/main.png'; import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native'; export default function App() { console.disableYellowBox = true; //return 구문 밖에서는 슬래시 두개 방식으로 주석 return () } const style = StyleSheet.create({})

[리액트]flexDirection , justifyContent

import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex:1 }, containerOne: { flex:1, backgroundColor:"red" }, containerTwo:{ flex:2, flexDirection:"row", backgroundColor:"yellow" }, innerOne: { flex:1, backgroundColor:"blue" }, innerTwo: { flex:4, backgroundColor:"orange" ..

[리액트] flex

import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex:1 }, containerOne: { flex:1, backgroundColor:"red" }, containerTwo:{ flex:2, backgroundColor:"yellow" }, innerOne: { flex:1, backgroundColor:"blue" }, innerTwo: { flex:4, backgroundColor:"orange" } });

[리액트]이미지 꽉 채우기 cover

import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; //이렇게 상단에 가져와 사용할 이미지를 불러옵니다 import favicon from "./assets/favicon.png" export default function App() { return ( {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', //혹시 미리 궁금하신 분들을 위해 언급하자면, //justifyContent와 alignContent는 영역 안에 있는 ..

[리액트]이미지이용하여 반복채우기 [리액트네이티브]

import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; //이렇게 상단에 가져와 사용할 이미지를 불러옵니다 import favicon from "./assets/favicon.png" export default function App() { return ( {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', //혹시 미리 궁금하신 분들을 위해 언급하자면, //justifyContent와 alignContent는 영역 안에 있는 ..