Peter's hardware & software

Getx로는 제대로 된 Bottom tab navigator를 구현하기 힘들다는 블로그를 봤는데... 개뿔.. 잘만하더라.... 일단 기본 네비게이터로 구현했던 nested navigation 시스템에서는 좀 있어 보일라고 NavigationTree.dart라는 파일에서 모든 네비게이션 시스템이 관리되도록 하려고 했는데.... 👇👇 참... 등신짓이었어. 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 ..

이전 작업 2022.10.24 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #5. Model and Firestore 1% [소셜차트] 앱 제작기 #5. Model and Firestore 1% 이전 작업 2022.10.22 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작.. engschool.tistory.com 뭔가 로그인에 불만이 있거나 문제가 있는 양반들을 위한 ReportScreen을 제작했어. DB model도 만들고 firestore에 데이터가 잘 들어가는 것도 ..

CircularProgressIndicator라고 위젯이 하나 있는데 뭐 별건 아니고 동글동글 도는 녀석이지. 보통 서버와 통신하거나 할 때 화면이 정지된 상태로 가만히 기다리면 이상하잖아? ㅋㅋ 그래서 돌돌이를 돌려놓는거지 ㅋ 단순히 이 위젯을 설명할 건 아니여~ 뭘 할거냐면 이 돌돌이를 돌려놓을 때 화면이 스크롤이 된다거나, 버튼이 또 눌린다거나 할 수도 있어서 그걸 좀 막고 싶을 때 있잖아? 배경도 좀 뿌옇게 처리해서 유저한테 컨트롤 못합니다~ 하고 알려주고 ㅋ👇 이걸 구현하려면 우선 Stack에다가 children으로 Offstage로 감싸진 CircularProgressIndicator와 ModalBarrier 위젯을 사용해. 말만 들어도 쀨이 딱 오지 않아? ㅎㅎㅎ 그림을 보면 쫌 쉽지 👇 S..

이전 작업 2022.10.22 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기.. engschool.tistory.com 무언가 잘못되어 로그인이 되지 않을 때 사용자가 보고할 수 있는 페이지를 제작했고 그에 맞춰 firestore에 내용을 저장할 수 있도록 했어. 먼저 firebase firestore 데이터..

2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵.. engschool.tistory.com 로그인은 Firebase authenticate를 사용해서 구현할거야. 이메일 로그인하고 소셜 로그인을 넣을건데 소셜 로그인은 Apple이랑 Google만 넣으면 될 것 같아. ..

2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵션으로 com.petercircuitsoft 줬는데 이건 우리 회사 도메인이야. 각자 회사 도메인 이름으로 하자. 제발~~ 이렇게 설정.. engschool.tistory.com 카카오가 터지는 바람에 몇일 블로그를 못썼네;;; 망할 카카오.. 다른데로 블로그를 옮길까봐! ㅎㅎ 일단 앱 만들던건 만들고 ㅋ 기본 설정까지하고 지나갔는데 약간 진도가 나갔어. 소셜차트는 4개의 탭으로 구성되는데 그리고 각 탭은 여러 개의 ..

Firebase auth에서 email password 로그인 말고 email link 로 로그인하는게 있어. 그냥 email, password하면 되지 왜 사서 고생이냐고? firebase 방식이 email이랑 password만 입력하면 바로 계정을 만들 수 있어. email을 소유자 확인없이 말이지! 물론 email verification을 하면 돼. 기능도 있고. 내가 등신인지 모르겠다만..자! 생각을 해보자. 그림 보면 심플! 👇 그런데 말이지! 만약 악의적인 사용자가 훔친 이멜 주소로 회원 가입을 시도해. 앱은 verification을 보내고 기다릴텐데 그 동안 이멜 진짜 주인이 가입을 시도한다 치자! 그럼 어떻게 돼? 실제 이멜 주인은 10분을 기다렸다가 다시 가입하던지, 아니면 비번 찾기를 ..

Flutter 문서에서 상태관리 잘 모르면 닥치고 프로바이더 쓰라고 그랬다. 그래서 프로바이더 열심히 쓸라고 그랬는데;;;; 이새끼들 뭐야... 더 좋은 게 있었잖아? Likes가 무려 10559! getX! 당연히 그럼 getX 써야지..설치! %flutter pub add get main.dart에서 App을 GetMaterialApp으로 감싸주란다. 그런데 이건 Get.to()나 Get.back()같은 route management 할 때만 필요한 과정이라고 안쓸거면 안해도 된단다. 써보지 뭐. import 'package:get/get.dart'; void main() => runApp(GetMaterialApp(home: Home())); 그리고 Controller 하나 만들고 그 안에 coun..

2022.10.12 - [Flutter/Flutter Study] - [Flutter] - Firebase firestore [Flutter] - Firebase firestore React native에서는 React Query가 있어서 디따 편하게 했는데;;; 찾아보니까 Flutter에는 대표적으로 사용되는 React Query처럼 대표적으로 많이 사용되는 패키지는 없는 듯해... 음 뭐 그렇다고 Firestore 테 engschool.tistory.com 이전에 firestore 테스트할 때 읽는 방식이 매우 요상했어! 한마디로 등신처럼 스트림 설정하고 등신처럼 읽었지. 뭐 나도 공부해가면서 하는 거니까 ㅋㅋㅋ //이렇게 등신처럼 스트림 설정하고 final Stream userTextStream =..

2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #1. 시작하기 전에! [소셜차트] 앱 제작기 #1. 시작하기 전에! 나는 원래 임베디드 엔지니어였고 회사를 그만두기 전 마지막 타이틀은 인도지사장이었어 ㅋㅋ 앱 같은 건 만들어 본 적이 없어. 그야말로 무근본이지! 그런데 그렇다고 못할 건 없잖아 ㅋㅋ 무 engschool.tistory.com 자! 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵션으로 com.petercircuitsoft 줬는데 이건 우리 회사 도메인이야. 각자 회사 도메인 이름으로 하자. 제발~~ 이렇게 설정하면 bundle 이름이 com.peterc..

나는 원래 임베디드 엔지니어였고 회사를 그만두기 전 마지막 타이틀은 인도지사장이었어 ㅋㅋ 앱 같은 건 만들어 본 적이 없어. 그야말로 무근본이지! 그런데 그렇다고 못할 건 없잖아 ㅋㅋ 무근본 앱을 만들면 되지 ㅋ 시작해보자구 ㅋㅋㅋㅋㅋ 내가 제작하려고 하는 건 소셜차트라는 앱인데 정보와 차트를 결합해서 유저한테 제공하는 소셜 네트워킹 앱이라고 보면 돼. 배포는 못해봤지만 React native로 만들어서 테스트까지는 해봤어. 하지만 속도 이슈도 있었고 개선해야 할 사항이 많았지. 그런데 React native는 뭔가 수정하면 할수록 개복잡 + 개꼬임(물론 100% 내가 멍청해서 그렇겠지만) 그리고 툭하면 튀어나오는 알 수 없는 오류들 때문에 도저히 스트레스를 받아서 못하겠더라. 그래서 Flutter로 변..

React native에서는 React Query가 있어서 디따 편하게 했는데;;; 찾아보니까 Flutter에는 대표적으로 사용되는 React Query처럼 대표적으로 많이 사용되는 패키지는 없는 듯해... 음 뭐 그렇다고 Firestore 테스트를 못할 건 아니니까! 프로젝트 구조적으로 개판이되서 글치.. 암튼 고고.. 달려! 우선 Firebase console 설정부터! 그리고 걍 프로덕션 모드에서 시작하기 선택(로그인하면 DB 접근 가능)하고 다음 그리고 DB 위치를 선택해야 하는데 asia-northeast3가 서울 리젼이니까 난 이거 선택했음. 그런데 실제로 배포할 때는 여러가지 고려할 게 많겠지 주요 사용자의 위치라던지, 리전마다 DB 가격도 틀리니깐! (서울 리젼이 조금 비쌌던 걸로 기억함...

2022.10.11 - [Flutter] - Flutter - Firebase auth! 이메일 로그인. Flutter - Firebase auth! 이메일 로그인. 난 React native로 앱을 만들 때 firebase를 주로 사용했어. Firebase authenticate, Firebase firestore, Firebase Storage, Firebase function 이런 것들을 사용했었지. 사실 혼자서 백앤드까지 할 자신이 없어.. engschool.tistory.com 이메일 로그인을 해봤어. 그리고 나면? 그럼 소셜 로그인을 해봐야지! 구글이랑 애플만 해보면 될 거 같아. 카카오처럼 firebase가 지원 안하는건 별로도 해보는 게 좋겠어. Flutter 만으로 끝나지 않거든. 카카오..

난 React native로 앱을 만들 때 firebase를 주로 사용했어. Firebase authenticate, Firebase firestore, Firebase Storage, Firebase function 이런 것들을 사용했었지. 사실 혼자서 백앤드까지 할 자신이 없어서 쉬워 보이는 거 찾다보니 google firebase랑 aws amplify 둘 중에 선택하게 되더라고 😅 난 결국 firebase를 선택했는데 amplify는 아직 본격적으로 사용해보지 않아서 잘 몰라. 게다가;;; flutter를 하고 있잖아? 그래서;;; 더더욱 amplify는 해볼 기회가 없어지네 ㅠㅠ 암튼 flutter나 firebase나 둘다 구글거니까 연동 잘되도록 만들어놨겠지? 일단 firebase에서 프로젝트..

2022.10.10 - [Flutter] - React Native에서 Flutter로 갈아타기 #8 - Navigation React Native에서 Flutter로 갈아타기 #8 - Navigation React native에서는 react navigation를 사용했었는데.... react navigation 말고 다른 옵션이 있나? 음.. 암튼 React navigation에는 여러가지 navigator가 있는데 보통 Bottom tab navigator에 stack navigator.. engschool.tistory.com 👆👆 (이전 글에서) React navigation으로 했던 bottom tab navigator와 stack navigator를 합친 구조를 Flutter에서 구현해봤어...

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..