개발자를 향해...

이 글은 노마드 코더 님의 [ React Native로 날씨앱 만들기 ] 를 수강하며 작성하였습니다. #1.0 Layouts with Flexbox in React Native react native에서 flex의 기본은 cloumn이기 때문에 모든 flex박스는 row이다. 따라서 여러개를 나열하면 아래로 정렬된다. 물론 flexDirection으로 방향을 정의할 수 있다. 다음과 같이 바꾸면 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Hello B..

이 글은 노마드 코더 님의 [ React Native로 날씨앱 만들기 ] 를 수강하며 작성하였습니다. #0.4 Getting to know Expo 휴대폰에서 앱을 실행해보기 위해서는 우선 폰과 컴퓨터가 같은 와이파이에 접속해있어야한다. splash 스크린은 assets > splash.png에서 바꿀 수 있다. npm start로 시작하면 브라우저에 현재 작동중인 시뮬레이터와 앱을 실행중인 기기의 목록이 뜬다. 만약 같은 와이파이에 접속되어있지 않으면 에러가 뜨게 된다. 이제 live loading과 hot reloading으로 실행시켜보자. 만약 폰에서 개발자 모드를 실행시키고 싶으면 폰을 흔들어야한다. #0.5 How does React Native Work? 모바일 앱을 만드는 여러가지 방법에는 ..

이 글은 노마드 코더 님의 [ React Native로 날씨앱 만들기 ] 를 수강하며 작성하였습니다. #0.0 Introduction 리액트 네이티브로 안드로이드ios 모두 가능한 앱을 만들어보자 react js만 있으면 된다.!! #0.1 Requirements node js 버전 10 이상과 npm 버전 6이상을 설치한다. 그리고 윈도우는 안들외드 스튜디오가 필요하고 mac os는 simulator가 필요하다. 또한 휴대폰에 expo를 설치한다.그리고 터미널을 켜서 npm install -g expo-cli를 설치한다. reactnative.dev/docs/environment-setup 참고 #0.2 Expo vs RN CL react native expo 방식으로 우리는 더 많은 설치를 한번으로 ..

#32 로그아웃 랜딩 페이지에 로그아웃 버튼을 추가한다. import React, { useEffect } from 'react' import axios from 'axios'; import { withRouter } from 'react-router-dom'; function LandingPage(props) { useEffect(() => { axios.get('/api/hello') .then(response => { console.log(response) }) }, []) const onClickHandler = () => { axios.get(`/api/users/logout`) .then(response => { if (response.data.success) { props.histo..