Peter's hardware & software

React native에서는 react navigation를 사용했었는데.... react navigation 말고 다른 옵션이 있나? 음.. 암튼 React navigation에는 여러가지 navigator가 있는데 보통 Bottom tab navigator에 stack navigator를 합쳐서 사용해. Bottom tab으로 3-4개의 tab을 마련하고 그 안에 여러개의 screen이 stack navigator에 묶여 있는 거지. 페이스북을 예로들면 6개의 tab이 있고 각 탭마다 여러개의 screen을 가지고 있는 stack navigator가 있어. 그래서 사용자가 댓글달기를 누르거나 사용자 사진을 누르면 tab은 가만히 있고 stack navigator 안의 스크린만 샥 이동하는 거지. 그래..

Provider! 이게 우리가 flutter에서 할거야. Provider는 State management 패키지야. React에서 Redux라고 불렀던 그것 비슷한 것이지. 심플하게 말하자면 전역적으로 관리되는 state management? 정도 될거 같은데? 사실 나는 Redux는 모르고 Recoil만 사용했었는데 ㅋㅋㅋ 뭐 전역 변수 관리 툴이 그게 그거겠지 ㅋㅋㅋㅋ 암튼 Recoil에 대해서는 아래 글 참고하시고 ㅋ 2022.05.24 - [React Native] - Recoil 가장 기본적인 사용법 Recoil 가장 기본적인 사용법 난 최근에 React native를 시작해서 그런지 왠만하면 최신 라이브러리를 사용하고 싶더라고~ 그래서 상태 관리 라이브러리도 가장 최근에 나온 Recoil을 사..

React Native에서는 하위 컴포넌트로 데이터를 전달할 때 props을 사용했지. 👇👇 import React, { useState,useEffect } from 'react'; import { Text, TouchableOpacity, View, Button } from 'react-native'; function App() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prev => prev + 1); console.log(number); } const onDecrease = () => { setNumber(prev => prev - 1); console.log(number); } return ( {..

2022.10.04 - [Flutter] - React Native에서 Flutter로 갈아타기 #4 - useState => setState React Native에서 Flutter로 갈아타기 #4 - useState => setState React native 상태 관리가 쉬웠었나? 어려웠나?.. 글쎄.. 난 늦게 react native를 시작해서 useState() 같은 훅으로 상태 관리하는 걸 배웠거든.... 그래서 음.. 딱히 어렵지 않았어. 예를 들어 number라는 state.. engschool.tistory.com 저번에 useState를 간단하게 살펴봤고 오늘은 useEffect를 살펴보자구. useEffect는 component의 lifecycle 관리를 위한 것이지... lifecy..

React native 상태 관리가 쉬웠었나? 어려웠나?.. 글쎄.. 난 늦게 react native를 시작해서 useState() 같은 훅으로 상태 관리하는 걸 배웠거든.... 그래서 음.. 딱히 어렵지 않았어. 예를 들어 number라는 state가 유지되게 하려면 아래처럼 👇👇 useState()를 사용했잖아? import React, { useState } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; function App() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prev => prev + 1); cons..

Lorem ipsum 들어봤나? 가짜로 만드는 문장 이야기 하는 거임 ㅇㅇ. 디자인에 글이 필요할 때가 있잖아? 그런데 "어제 부대찌개 먹는데 김부장이 침튀어서 따귀 때리고 싶었다." 이렇게 써놓으면 안되잖아? 그래서 그럴싸하지만 읽어보면 전혀 말이 안되는 그런 문장을 로렘 입숨이라고 그랴. "때로는 별들에 떠오르는 태양은 숨죽였다." 뭐 이런식으로 말이지. 이미지도 그럴 때가 있잖아 아무거나 하긴 뭐하고... 대강 아무거나 있어보이는 거 넣고 싶은데 언제 그거 일일이 찾아서 넣어. 이럴 때 랜덤으로 사진을 가져올 수 있는 사이트가 있어. 👇👇 https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos 사용법은 초간단해...

React native와 flutter를 layout 측면에서만 살펴볼거야. 문법(?)적인 차이는 표준 문서를 보도록 하고 이 글에서는 React native에서 주로 사용하는 컴포넌트에 대응하는 Flutter 위젯이나 구현 방식 등에 대해서만 이야기하도록 할게. 먼저 React native는 html처럼 태그로 컴포넌트들을 감싸서 layout을 만드는데 비해 flutter는 함수를 호출하는 것처럼 보여.👇 // React Native ... return ( Hello world ); ... // Flutter ... return Container( child: Text("Hello world"), ) ... 그래서 React는 (태그가) 중첩되면서 복잡해지고 ㅋㅋㅋ Flutter는 (),{} 가 중첩되..

Flutter로 앱을 개발하려면 Android studio가 반드시 설치되어 있어야 해. 그런데 그렇다고 개발할 때 꼭 android studio를 사용할 필요는 없어. 그냥 vscode에 extension 설치해서 사용해도 개발에는 무리가 없거든. vscode 많이들 사용하니까 나도 그렇고.. vscode부터 살펴보자구. 먼저 extension 설치해야겠지? flutter와 dart로 검색하면 여러가지가 나오는데 난 4개 설치했어. Dart, flutter, flutter Widget Snippets, Flutter Tree Dart는 언어, Flutter는 기본 프레임웍이니까 기본으로 깔고 들어가는 거고, Flutter Widget Snippets는 flutter 관련 코드 자동 완성툴. 그리고 마지..

매우 기본적인 사항이라 어느정도 하는 사람은 읽을 필요 없음! flutter 공홈에 전부 다 나오는 내용임! React native랑 flutter랑 프로그램 외적인 차이에 대해 알고 넘어가보면 개발할 때 IDE, simulator 같은 건 다 똑같아. 다른 게 없어. 명령이나 디버깅 툴 정도만 조금 다를 뿐. 그래도 굳이 나열해보자면 👇👇 React에서는 필요한 Package를 설치할 때 npm이나 yarn을 사용하는데 flutter에서는 flutter pub add package_name 이런식으로 설치해. 아니면 pubspec.yaml 에 원하는 package 이름을 추가한다음 flutter pub get 명령으로 install 할 수 있어. 예를 들어 웹뷰 패키지를 설치하고 싶으면 👇👇 % flu..

React native는 Javascript, Flutter는 Dart를 기반으로 해. 그런데 사실 큰 차이점을 모르겠더라고 눈에 띄는 Asynchronous 부분부터 보자구. 우선 Javscript에서는 promise로 선언된 함수를 .then()과 함께 사용하잖아? 이런식으로 👇👇 const result = fetch("example.url").then(response => response.json()).then(jsonResult => jsonResult); Promise는 fetch 안에 숨어있을거야 그러니까 then() 도 사용할 수 있는거고. 혹시나 도중에 error 처리를 하고 싶으면 .catch()를 붙여주면되고.. Dart도 거의 똑같아. 그런데 promise 대신 Future를 키워드로..