Application/React Native7 [React Native 101] #7. PUBLISHING OUR APPS ~4.4까지의 강의 expo를 얘기하고 어떻게 앱을 공유하는지에 대해서 알아보도록 하자. 어떻게 프로젝트를 publish할 수 잇을 까? 그것은 expo로 가서 위의 버튼을 눌러주면 된다. 그러면 모든 사람과 코드를 공유할 수 있다. 그럼 어플리케이션 이름을 적고 publishing을 누르면 된다. 이 작업은 React.js를 평범한 JS로 바꿔주는 것이다. 그리고 이것은 expo로 간다. 링크에 접속해서 바로 다운받을 수 있다. 이것은 test를 위한 것이다. React Native Web에서는 view를 div로 바꾼다. 리액트 네이티브를 가지고 가서, js처럼 변경해준다. expo로 한 것을 웹사이트로도 만들 수 있다는 것이다. run with browser를 클릭해보자. 가끔 storage가 nu.. 2022. 7. 26. [React Native 101] #6. Persist&Delete ~3.8까지의 강의 얼레벌레 전부 듣기는 했지만, 뭔가 휘몰아 쳐서 들은거라 나중에 한 번 더 듣도록 하자 이제 작은 박스를 수정해보도록 하자. 즉, Work는 Work만 Travel은 Travel만. work 대신에 working이라고 해서 비교를 해주면 된다. 즉 ScrollView에서 해주면된다. {Object.keys(toDos).map((key) => toDos[key].working === working ? ( {toDos[key].text} ) : null )} todo가 지금 우리가 있는 모드인 working하고 같은지 확인을 해주면 된다. 일치파면, 보여주고 아니면 안 보여주면 된다. 이제 이 메모를 핸드폰에 저장을 해주어야 한다. expo로 돌아가서, asyncStorage를 사용한다... 2022. 7. 25. [React Native 101] #5. Touchables&TextInput&Todos ~3.4까지의 강의 이제부터 투두앱을 만들어보자. 원하는 위치로 가서 expo init WorkHardTravelHardApp --npm 후, blank를 선택한다. 그리고, 마찬가지로 열어준다. 이제 어플 만드는걸 빨리 시작해보자. App.js 더보기 import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, Pressable, } from "react-native"; import { theme } from "./colors"; export default func.. 2022. 7. 25. [React Native 101] #4. Location & Weather & Icons ~2.10 까지의 강의 이제 위치정보를 가지고 올 건데, expo install expo-location 를 한다. https://docs.expo.dev/versions/latest/sdk/location/ Location - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 유저의 권한을 요청할 수 있고, 유저의 마지막 정보를 가지고 올 수 있고, 위치를 알 수도 있다. App.js 더보기 import * as Location from "expo-location"; import.. 2022. 7. 21. [React Native 101] #3. Styles ~2.6 까지의 강의 이제 드디어 앱을 만들어 보도록 하자. App.js import { View, Text, StyleSheet } from "react-native"; export default function App() { return ( Seoul 27 Sunny ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "tomato", }, city: { flex: 1.2, justifyContent: "center", alignItems: "center", }, cityName: { fontSize: 68, fontWeight: "500", }, weather: { flex: 3, }, day: { flex: .. 2022. 7. 18. [React Native 101] #2. Rules & Packages ~2.4까지의 강의 Snack은 브라우저에서 React 앱을 만들 수 있게 해주는 브라우저이다. 브라우저를 통해 바로 React 앱을 만들면 된다. 핸드폰에서 코드를 미리볼 수 있다. 규칙을 몇가지 알아보도록 하자. App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Hello ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "white", alignItems: 'center', justifyConten.. 2022. 7. 18. 이전 1 2 다음
