Paint To Dos Object.keys() {Object.keys(toDos).map((key) => ( {toDos[key].text} ))} - toDos는 Object형태로 저장되어 있고, todo list를 등록할 때의 시간을 key값으로 갖는다. Ex) toDos = { 220128111111 : {"Record", work: true}, 220128222222 : {"Santorini", work: false}} - 여기서 Object.keys(toDos) = [220128111111, 220128222222] 이렇게 배열로 생성되고 앞에 했던 것처럼 [].map 형태를 쓸 수 있다. (글로 설명하려니 어렵네;) 전체 소스코드 (App.js) import { StatusBar } from..
앱 개발
Todos 입력한 데이터 저장하기 ... const onChangeText = (payload) => setText(payload); /// 추가 const [toDos, setToDos] = useState({}); const addToDo = () => { if (text === "") { return; } const newToDos = Object.assign({}, toDos, { [Date.now()]: { text, work: working }, }); setToDos(newToDos); setText(""); }; ... - addToDo 메서드 추가, TextInput에서 submit과 returnKeyType을 "done" 으로 바꿈 Object.assign const newToDos =..
TextInput TextInput 추가하기 (전체 소스코드) (App.js) import { StatusBar } from "expo-status-bar"; import { useState } from "react"; import { StyleSheet, Text, View, TouchableOpacity, TextInput, } from "react-native"; import { theme } from "./colors"; export default function App() { const [working, setWorking] = useState(true); const [text, setText] = useState(""); const travel = () => setWorking(false); ..
Introduction 프로젝트 생성 expo init (프로젝트명) --npm expo init WorkHardTravelHardApp --npm Touchables 헤더 만들기 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, TouchableOpacity, } from "react-native"; import { theme } from "./colors"; export default function App() { return ( Work Travel ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: theme.bg, pa..
Icons 아이콘 사이트 접속 https://docs.expo.dev/guides/icons/ Icons Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev - 위 사이트에 가서 사진의 저 링크 클릭 - 아이콘들이 엄청많이 뜨고 filter에서 fontisto 체크한다.(Fontisto 사용할거임) 날씨에 따른 아이콘 사용하기 import { Fontisto } from "@expo/vector-icons"; const icons = { Clouds: "cloudy", Clear: "day-sunny", Atmosp..
Weather 날씨 api 받아오기 https://openweathermap.org/api/ Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 1. 접속해서 회원가입, 로그인 하고 api-key를 받는다. 2. one-call-api 사용할거임 소..
