본문 바로가기

리액트네이티브3

[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.
[React Native 101] #1. INTRODUCTION 이제 ReactJS를 활용해서 웹페이지는 많이 만들어 봤으니까, 니꼬쌤과 함께 React Native를 배워보자! ~1.7까지의 강의 이 강좌를 위해서는 먼저 ReactJS를 알고 있어야 한다. state, props, useEffect, useState를 알고 있으면 된다. 우선 터미널에 가서, node -v를 실행시킬 수 있으면 된다. 핸드폰에 있는 앱에 코드를 전송해서 앱을 실행해볼 것이다. 기본 시설들이 준비된 앱이 있다. 인프라가 준비되어 있는데, 코드만 준비되어 있지 않아서 우리는 앱을 complie 시킬 필요없고, 앱을 다운받고 앱으로 코드를 전송시키면 된다. 그 앱은 바로! Expo이다. Expo는 작성한 코드의 결과를 앱에서 즉시 확인할 수 있다. 다음을 터미널 창에 입력한다. 아니 Ex.. 2022. 7. 15.