본문 바로가기

프로그래밍91

Docker, nginx, php, mariaDB를 이용한 백엔드 구현 - (1) 백엔드 구현에 필요한 환경들을 구축하고 내가 개발한 Flutter앱과 연동하는 게시글을 작성해보겠다. 첫 번째로 Docker 설치부터 알아보겠다. docker 설치하기 도커는 셋팅하는 것이 상당히 쉽다고 한다. 도커에 대해 깊이 알려면 공부해야 할 것들이 굉장히 많은데 가장 많이 쓰이지만 간단하게 도커를 이용해 백엔드 환경을 구축하는 방법에 대해 알아보고자 한다. 단, 이 게시글에는 도커에 대한 개념, 지식이 없이 바로 설치/실습으로 간단히 들어가기 때문에 개념에 대해서는 공식 문서나 다른 게시글을 확인하시길 바란다. 나는 이번에 하게 된 스터디에서 매우 훌륭한 강사님께서 직접 지도를 해 주시기에 소중한 가르침을 기록으로 남겨둬야 겠다는 생각이 든다. 늘 Flutter로 앱 화면을 구성하고 Firebas.. 2021. 5. 28.
Flutter 문제해결 : Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema flutter doctor 의 결과 중 android sdk 를 찾지 못했을 때 해결 방법에 대해 알아보자. (feat) Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema 터미널에서 flutter doctor 명령어를 수행했더니 Android toolchain에 문제가 있나보다. 해결방법 : 환경변수 설정을 추가해줘야 한다. // 터미널(mac) 또는 cmd(windows)에서 아래 명령어 입력 flutter config --android-sdk /Users/${Users}/Library/Android/sdk 설치가 되었다면 flutter doctor 실행해보자. 자 명령어를 입력해보자.. 2021. 5. 27.
FVM를 이용한 Flutter 버전 걱정 없이 사용하기 Flutter 2.0이 나온지 2개월이 넘어 가는 시점이다. 나는 아직 Flutter 1.22.6 버전에 머물러 있다. 업데이트 하기가 겁난다랄까... 그런 도중 FVM 이라는 것을 알게되어 내용을 정리하고자 한다. FVM ? Flutter Version Management 플러터의 버전을 관리해주는 것인데, 내 피씨에 여러개의 프로젝트들이 있다면 FVM을 이용해 각 프로젝트마다 다른 Flutter version을 사용할 수 있게 도와준다. 기본 환경 설정은 별거 없다. https://github.com/leoafarias/fvm leoafarias/fvm Flutter Version Management: A simple CLI to manage Flutter SDK versions. - leoafari.. 2021. 5. 24.
Android studio에서 내 아이폰이 감지되지 않는다면? 아래 설정을 터미널에서 수행하고 IDE를 재시작하니 아이폰이 감지되었다. export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH Android studio restart 자, 그래도 되지 않는다면!!!??? iPhone 재부팅 하고 다시 연결해보자! 나는 이렇게 해결 되었다 ^^^^ 2021. 5. 21.
Flutter iOS 푸시 알림(FCM) 이거 보고 바로 설정하자. Flutter 앱개발자를 위한 iOS 푸시 알림 설정하는 방법에 대해 알아보자 Apple Developer 사이트에서 APNs 등록을 위한 Certificate 및 Key 생성하는 방법에 대해 나온다. #1. Apple Developer 사이트 내 App등록/Certificate 생성(CSR 필요) #2. Firebase 프로젝트 설정 (APN 인증키, APN 인증서 업로드) #3. XCode 설정 추가 iOS의 경우 APNs 라는 서비스가 별도로 있다. 만일 Firebase에서 푸시를 날리게 되면 안드로이드의 경우 앱에서 바로 알림이 오지만 iOS의 경우엔 APNs 를 거쳐서 앱으로 알림이 전달되게 된다. 때문에 APNs 를 중간다리로 연결시켜주는 작업이 필요하며 아래의 방법대로 잘만 따라온다면 어려울.. 2021. 5. 11.
머신러닝 개요 머신러닝머신러닝은 데이터와 알고리즘을 기반으로 추론하는 프로그램으로 정의할 수 있다.소프트웨어는 입력이 들어오면 정해진 출력값만 출력해낼 수 있는 결정론적 소프트웨어이다.머신러닝의 발전과 함께 결정론적 소프트웨어가 상용화 되고 있는데,쉬운 예로 얼굴 인식 자동잠금해제, 음석비서, 영화사이트 영화추천 기능 등이 있다.이 것은 입력값이 늘 같은 것이 아니라 머신러닝을 통해 학습해온 데이터를 통해 출력값을 도출해내고 있다. 머신러닝의 추론은 어떤 데이터를 사용하느냐, 어떤 알고리즘을 사용하느냐에 따라 달라질 수 있다. 머신러닝 프로젝트는 크게 문제정의, 데이터 획득, 모델 구현, 검증, 테스트 단계로 진행된다. 문제 정의프로젝트의 목표를 정의하고 그에 따른 계획을 세우는 단계이다. 어떤 데이터를 수집해서 어떤.. 2021. 4. 1.
5분만에 Flutter 앱에 Admob 광고 달기 Flutter 앱 안에 애드몹 광고 달기 admob_flutter 패키지를 이용해 배너광고, 전면광고, 보상형광고 등 앱에 달 수 있는 광고를 달아보자. #1. admob_flutter 패키지 pubspec.yaml 파일에 추가 #2. 애드몹 앱, 광고단위 만들기 #3. Android, iOS 기기별 환경설정 #4. 광고별로 내 앱에 적용하기 #1. admob_flutter 패키지 pubspec.yaml 파일에 추가 - 사용할 패키지를 pub.dev 페이지에 이동해 버전을 확인해주자. 나는 1.0.1 버전으로 추가해주었다. - 프로젝트 내의 pubspec.yaml 파일에 패키지 버전을 포함해 추가한 후 pub get을 실행시키자. #2. 애드몹 앱, 광고단위 만들기 - 애드몹 페이지로 이동하고 로그인하자.. 2021. 3. 30.
Release 버전(.apk)에서 구글 로그인이 되지 않을 때 대처법 Debug 모드에서 테스트할 땐 잘 되던 구글 로그인이 Release를 위해 apk 설치파일로 변환 후 테스트기기에 설치하고 구글 로그인을 했을 때 이상하게 로그인이 되지 않는 현상이 발생했다. 사실 아직도 원천적인 원인을 알아내진 못했으나... 왜냐하면, 여러 앱들을 구글스토어에 배포해보았지만 이런 경우는 처음이었기 때문... 여튼, 본론으로 돌아가서 디버그 모드에서 빌드할 때 잘 되던 구글 로그인이! 스토어 배포를 위해 릴리즈 apk 로 떨궜을 때,(flutter build apk 명령어) 해당 설치파일을 안드로이드 폰에서 설치하고 실행하니 구글 로그인이 전혀 동작하지 않았다. 구글링을 해본 결과 해결책은 아래와 같으니 나와 같이 삽질했던 사람이라면 부디 도움을 얻고 가시길 바란다. 원인 : key... 2021. 3. 25.
3분만에 Flutter 구글/앱스토어 업로드용 앱 아이콘 만들기 아주아주 간단하고 심플하게 스토어에 올릴 앱 아이콘 만들기 따라하면 3분만에 앱 아이콘을 변경할 수 있다. #1. web_hi_res_512.png 대표아이콘 생성하기 #2. flutter_launcher_icons 패키지 추가하기 #3. 단숨에 아이콘 생성하기 #1. web_hi_res_512.png 대표아이콘 생성하기 - App icon 을 생성해주는 아래의 링크로 이동하자. Android Asset Studio - Launcher icon generator romannurik.github.io - 이미지 선택해서 추가하기 - 이미지가 정상적으로 로드된 것을 확인하자. - 우측 상단 다운로드 버튼을 클릭해 아이콘 set 을 저장하자. - 다운로드 받으면 ic_launcher.zip 파일로 받아질 것이.. 2021. 3. 16.
Flutter iOS 애플 로그인 기능(Sign in with apple) 구현하기 오늘의 목표 앱 로그인시 Apple 로그인 기능 구현하기 #1. Firebase Authentication > Apple sign in 활성화하기 #2. Firebase hosting 시작하기 > URL 기억해두기 #3. Flutter 에서 Apple with sign in 코드 작성하기 (낱낱이 파헤쳐보자) iOS앱은 로그인화면에 구글/페이스북/트위터 등 다른 SNS로그인 버튼이 있는데 애플로그인을 추가하지 않으면 앱스토어에 앱을 등록할 수 없다는 정책이 있기 때문에 이번 기회를 계기로 애플 로그인 기능을 추가해보고자 한다. 차근차근 하나하나 따라해보자. #1. Firebase Authentication > Apple sign in 활성화하기 Firebase의 Authentication 플랫폼은 로그인.. 2021. 3. 9.
매우 간단하게 Firebase Hosting 시작하기 Firebase를 이용하면 무료로 Hosting 이 가능하다. 본인의 웹페이지를 만들고 싶거나, 개인정보 처리방침 등의 static한 페이지를 만들거나, 앱에서 애플 로그인을 구현할 때 등 많은 상황에서 호스팅 기능이 필요하다. 아래의 방법대로 아주 간단하게 Firebase 의 hosting 기능을 사용해 보도록 하자. 우선 Firebase 콘솔로 이동하여 Hosting 메뉴를 클릭하자. https://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트가 없다면 이 참에 하나 생성하자. 프로젝트 생성을 하고 들어가면 왼쪽 메뉴 중 Hostin.. 2021. 3. 9.
Flutter 앱에서 Firebase 사용 하기 (iOS 편) Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼 Firebase 에서 제공하는 수많은 기능을 통해 사용자의 데이터를 저장하고 분석하며 비즈니스를 성장시킬 수 있다? 잘 이해가 안간다면 우선 뭐든 만들어보고 무엇을 의미했던건지 역추적해보도록 하자. 해당 게시글에서 Firebase 프로젝트를 생성하는 방법에 대해 알아볼 것이다. #1. 구글 로그인 및 Firebase 프로젝트 생성 #2. Flutter 앱 만들기 (Android Studio 기준) #3. Firebase - iOS 플랫폼 추가하기 #1. 구글 로그인 및 Firebase 프로젝트 생성 - Firebase 프로젝트를 생성하기 위해선 일단 본인의 구글 계정으로 로그인이 필요하다. 자.. 2021. 1. 31.
Flutter 앱에서 Firebase 사용 하기 (Android 편) Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼 Firebase 에서 제공하는 수많은 기능을 통해 사용자의 데이터를 저장하고 분석하며 비즈니스를 성장시킬 수 있다? 잘 이해가 안간다면 우선 뭐든 만들어보고 무엇을 의미했던건지 역추적해보도록 하자. 해당 게시글에서 Firebase 프로젝트를 생성하는 방법에 대해 알아볼 것이다. #1. 구글 로그인 및 Firebase 프로젝트 생성 #2. Flutter 앱 만들기 (Android Studio 기준) #3. Firebase - Android 플랫폼 추가하기 #1. 구글 로그인 및 Firebase 프로젝트 생성 - Firebase 프로젝트를 생성하기 위해선 일단 본인의 구글 계정으로 로그인이 필요하.. 2021. 1. 25.
CLLANGEDU화상영어 개발~출시~배포~홍보 트러블슈팅 모음 2020.12.28- 앱의 기능이 아직 제대로 동작하지 않는 것들이 많고.. 구글플레이스토어에 출시한 1.0.0버전을 설치하고 구글/카카오 로그인을 해보지만... 제대로 동작도 하지 않는다. 슬프다.- 구글로그인 이슈는 다행히도 해결되었다. 해결방법 : Firebase > 안드로이드앱에 구글 콘솔에서 얻을 수 있는 앱 배포용 키를 복사해서 넣으니 제대로 동작한다. - 구글콘솔의 앱 서명값을 (배포하게 되면 새로운 앱서명이 되기 때문에) 카카오 측에는 키해시값으로 추가해줘야 카카오 로그인이 정상작동하게 된다. 이를 위해 아래의 명령어로 앱서명값을 키해시로 변경한 후 카카오개발자 측 키해시값 입력란에 추가해주자. 앱서명값 -> 키해시 변경 명령어 : echo SHA-1값(앱서명키) | xxd -r -p | .. 2020. 12. 28.
Vue/Firebase 이용해서 홈페이지 만들기 (11) axios 이용해서 storage에 파일 업/다운로드 하기 오늘의 목표 axios 이용해서 storage에 파일을 업/다운로드 하는 법을 알아보자. #1. axios 설치 및 테스트코드 작성 #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 #1. axios 설치 및 테스트코드 작성 - axios 사용법 . 설치 : yarn add axios . 사용 : import axios from 'axios' - write와 read 버튼 만들어서 제대로 동작하는지 테스트 read write #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 - CORS오류 발생할 것임 : localhost와 실제 도메인이 달라서 오류가 남. . 해결법 : CORS 설정해줘야 함 (google cloud SDK 설치돼야 함 : https://.. 2020. 10. 26.
Vue/Firebase 이용해서 홈페이지 만들기 (10) 게시글 페이징 처리하기 (total count 관리, watch) 오늘의 목표 게시판의 페이징 처리가 되도록 게시글의 total count를 관리하고 페이징 개수별로 처리되도록 해보자. #1. total count 관리를 위한 functions 만들기 (increment / decrement) #2. 페이징 처리를 위한 v-data-table 옵션 셋팅 #3. head, last 이용해서 첫번째, 마지막 게시물 정보 가져오기 #4. startAfter, endBefore 이용해서 전/후 페이지 이동하기 #1. total count 관리를 위한 functions 만들기 (increment / decrement) - 페이징 처리를 하기 위해선 게시글의 총 개수 (total count)가 별도로 관리돼야 한다. 이를 위해 게시글이 생성되거나 삭제될 때 총 개수를 제어하는 f.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (9) - Firebase 게시판 실시간 조회로 변경하기 오늘의 목표 게시판을 실시간으로 조회하도록 변경하자. (정적 -> 동적) #1. 기존의 read는 사용하지 않으므로 삭제 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) #1. 기존의 read는 사용하지 않으므로 삭제 - 기존의 read는 버튼을 눌러야만 데이터를 가져와서 뿌려주는 방식으로 실시간으로 알아서 읽히도록 (다음에서 좋아요/싫어요 실시간으로 바뀌는 것처럼) read 메소드는 과감히 삭제하자 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) - subscribe : 화면이 렌더링되기 전 (created 메소드) firestore의 게시판을 구독하자. (onSnapshot) created () { this.subs.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (8) - Firebase 게시판 만들기 (CRUD) 오늘의 목표 Firebase firestore에 게시판 내용을 저장(Create)/조회(Read)/수정(Update)/삭제(Delete) 해보자. #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) #2. 글쓰기를 위한 다이얼로그 띄우기 #3. 버튼 클릭시 Firestore에 동작하도록 구현하기 #4. ㅁㅁㅁ #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) - router/index.js 에 board 경로를 추가하자 - 메뉴에 추가된것 확인 #2. 글쓰기를 위한 다이얼로그 띄우기 - 먼저 저장기능을 해보도록 글쓰기를 누르면 다이얼로그가 뜨고 title과 content를 입력 후 저장누르면 firestore에 저장되도록 구현해보자. boar.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (7) - Firebase 관리자 권한 넣기 오늘의 목표 Firebase 내 functions를 사용자만 쓸 수 있도록 설정해보자. #1. 관리자 설정하기 #1. 관리자 설정하기 - functions 환경 설정를 위한 참고문서 : Firebase > docs > Cloud Functions > Write functions > Environment configuration - config 설정해주기 : $ firebase functions:config:set 블라블라(이메일, db_url설정 해줌) - 제대로 설정 되었는지 확인 : $ firebase functions:config:get - 실 사용은 functions.config().admin 의 키를 이용해서 사용한다. 아래는 dbURL과 사용자 저장시 level 설정해줄 때 관리자 이메일인지 .. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (6) - Firebase Realtime Database Read and Write 오늘의 목표 Firebase Realtime Database에 데이터를 쓰고 읽는 방법을 알아보자. (Read는 on과 once 두 가지 방식이 있다.) #1. firebase 전역에서 쓸 수 있도록 설정하기 #2. Read and Write #1. firebase 전역에서 쓸 수 있도록 설정하기 - firebase.js 파일 생성 후 main.js에 import - firebase를 전역에서 사용하기 위해 firebase.js에 아래의 코드 생성 - config 파일은 firebase 프로젝트에 웹앱 추가하면 관련 snippet을 얻을 수 있다. 이후 프로젝트 최상단에 firebaseConfig.js 파일을 만들고 아래와 같이 설정해주자. (아래 * 표시는 각자 만든 firebase project의 웹.. 2020. 10. 21.
Vue/Firebase 이용해서 홈페이지 만들기 (5) - Firebase 프로젝트 생성 및 연결하기 오늘의 목표 Firebase 프로젝트를 생성하고 내가 작업하고 있는 vue 프로젝트와 연결해보자. #1. firebase 프로젝트 중 web 어플리케이션 생성 #2. vscode에서 firebase-tools 설치 #3. firebase login #4. firebase init #1. firebase 프로젝트 중 web 어플리케이션 생성 - 기존에 앱을 만들때 만든 프로젝트에 android, ios만 연결해주었고 이제 web을 추가로 생성해보자. #2. vscode에서 firebase-tools 설치 - vscode를 열고 아래의 명령어를 실행해서 firebase-tools를 설치하자. sudo npm install -g firebase-tools (mac 기준이고 windows 사용자라면 앞에 sud.. 2020. 10. 20.
Vue/Firebase 이용해서 홈페이지 만들기 (4) - Component 만들기 오늘의 목표 앞서 복잡한 App.vue 파일의 코드들을 여러개의 Component로 나누고 보다 가독성이 좋은 코드로 변경해보자. #1. Component용 vue 파일 생성하기 #2. Component를 가져다 사용하기 (import, components에 추가, 해당 component 사용하기) #1. Component용 vue 파일 생성하기 - 아래의 기존 소스에서 title 부분을 별도의 vue 파일을 생성하고 옮겨보자. - components 폴더에 title.vue 파일 생성 후 위 코드를 옮기자. 여기서 주의해야 할 것은, 하나의 component는 하나의 태그로 구성돼야 하고, 반드시 template으로 감싸줘야 한다. #2. Component를 가져다 사용하기 (import, compon.. 2020. 10. 13.
Vue/Firebase 이용해서 홈페이지 만들기 (3) - Navigation drawers 만들기 오늘의 목표 Navigation drawers에 대해 알아보고 내 홈페이지에 추가해보자. #1. Navigation drawers란? - 앱에서 좌측 상단에 나오는 버튼을 이용하여 홈페이지의 곳곳을 이동할 수 있게 도와주는 역할을 한다. - 아래의 사이트로 접속하여 Navigation drawers에 대한 예제코드를 살펴보면 도움이 될 것이다. Navigation drawer component The navigation drawer component contains internal navigation links for an application and can be permanently on-scre... vuetifyjs.com - 위 사이트에 나온 예제의 소스를 참고하여 작성한 것이니 직접 타이핑하거나.. 2020. 10. 13.
Vue/Firebase 이용해서 홈페이지 만들기 (2) - Vuetify 추가, app bar/footer 만들기 오늘의 목표 Vuetify css framework 추가한 후 기본적인 홈페이지 틀에 대해 익혀보자. #1. Vuetify 추가하기 #2. app bar, footer 셋팅하기 #1. Vuetify 추가하기 - 프로젝트가 있는 폴더에서 터미널을 열어 vue add vuetify 명령어를 실행시키자. 옵션은 아래와 같이 선택하였다. - 다시 서버를 띄우고 (npm run serve) 로컬서버에 접속해보았다. - 이제 Vuetify에서 미리 구현된 버튼, 앱바, 툴바, 네비게이션 등의 여러 기능을 가져다 쓸 수 있게 되었다. #2. app bar, footer 셋팅하기 - app bar 추가하기 : vuetify에서 v-app-bar-nav-icon은 좌측 상단의 네비게이션을 위한 아이콘이다. 아래와 같이 .. 2020. 10. 13.
Vue/Firebase 이용해서 홈페이지 만들기 (1) - 개발환경셋팅, Vue프로젝트 생성 오늘의 목표 Vue 사용을 위한 개발환경 셋팅 후 첫 Vue 프로젝트를 만들어 서버를 띄우고 접속해보자. #1. 개발환경 셋팅 (npm, vue cli, vscode) #2. vue 프로젝트 생성 #1. 개발환경 셋팅 (npm, vue cli, vscode) - npm 설치 (google 에서 node.js 검색 후 나오는 홈페이지에서 설치파일을 받아 설치하자.) - vue cli 설치 : npm install -g @vue/cli - vscode : google에서 vscode 검색 후 나오는 홈페이지에서 다운로드 받고 설치하자 (실제 개발에 필요한 에디터) * 유용하게 쓰이는 extension : vuetify(vue 라이브러리), ESLint(자동 문법체크), vetur(소스에 색상 표시) #2. .. 2020. 10. 7.
Flutter & Firebase - 인스타그램 클론 (5-1) - 프로필 화면 만들기 오늘의 목표 프로필 페이지를 만들어보자. 내 프로필을 보는 경우, 프로필 편집 버튼이 보여야 할 것이며 다른 사용자의 프로필을 보는 경우, 팔로우 상태가 아니라면 팔로우 버튼이 보여야 하고 팔로우 상태라면 언팔로우 버튼이 보여야 할 것이다. #1. 프로필 화면 구성 #2. 프로필 화면 결과 화면 #3. 프로필 수정 화면 #4. 프로필 수정 화면 결과 화면 #1. 프로필 화면 구성 - 기본 화면 구성 중 프로필 상단부 영역 // build method @override Widget build(BuildContext context) { return Scaffold( appBar: header(context, isAppTitle: false, title: 'Profile',), body: ListView( c.. 2020. 9. 3.
Flutter & Firebase - 인스타그램 클론 (4) - 업로드 화면 만들기 오늘의 목표 이미지를 업로드하기 위한 페이지를 만들어보자. 이미지는 카메라 촬영, 갤러리에서 가져오기의 기능으로 가져올 것이다. #1. 업로드 화면 구성 #2. 업로드 화면 #3. 결과 화면 #1. 업로드 화면 구성 - Upload Image 버튼 클릭 - 사진촬영/갤러리에서 가져오기 기능을 위한 다이얼로그 팝업 - 사진 선택 후 게시를 위한 동작 (share버튼 클릭시) #2. 업로드 화면 - 업로드화면 displayUploadScreen() { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.add_photo_alternate, color: Colors.grey, siz.. 2020. 9. 2.
Flutter & Firebase - 인스타그램 클론 (3) - 사용자 검색화면 만들기 오늘의 목표 사용자를 검색하는 사용자 검색화면(Search Page)을 만들어보자. 검색어 입력시 입력한 검색어와 일치하거나 검색어를 포함하는 사용자 리스트를 보여주게 된다. #1. 검색창 화면 구성 #2. 검색창(상단) 만들기 #3. 검색결과(하단) 만들기 #4. 참고내용 #5. 결과화면 #1. 검색창 화면 구성 - 상단 : appBar로 된 검색창 - 하단 : 검색 결과를 보여줄 ListView @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: searchPageHeader(), body: futureSearchResults == null ? displayNoSearc.. 2020. 9. 2.
Flutter & Firebase - 인스타그램 클론 (2) - 기본 화면 만들기 (OAuth 구글 로그인) 오늘의 목표 앞서 추가한 기본 화면에 구글 SignIn 버튼을 실제로 동작하도록 구현해보자. #0. 구글 SignIn 관련 variable 설명 #1. 앱 시작시 build 전 initState #2. 구글 SignIn 버튼 클릭시 동작 #0. 구글 SignIn 관련 variable 설명 - GoogleSignIn : 구글 로그인의 기능을 담당할 변수 - GoogleSignInAccount : 구글 로그인시 계정을 담을 변수 - userReference : 로그인시 user정보 db(firestore)에 저장할 때 사용할 변수 - isSignedIn : 앱 시작시 기 로그인여부를 확인할 변수 - DocumentSnapshot : Firestore에서 실시간 데이터를 주고받을 때 사용하는 용도 // var.. 2020. 9. 2.
Flutter & Firebase - 인스타그램 클론 (1) - 기본 화면 만들기 (로그인 페이지) 오늘의 목표 #1. 프로젝트 생성 (시작이 반이다.) #2. firebase 프로젝트 생성 #3. 로그인 화면 만들기 #4. 하단부 bottomNavigator로 각 페이지 연결해주기 #1. 프로젝트 생성 (시작이 반이다.) #2. firebase 프로젝트 생성 - Android 앱 추가 - iOS 앱 추가 #3. 로그인 화면 만들기 - home_page.dart 파일을 생성하고 간단히 구글 버튼을 추가해보자. import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState ext.. 2020. 8. 31.

티스토리툴바