본문 바로가기

전체 글134

Flutter Firebase auth 사용하기 로그인 또는 회원가입시 email / password로 동작하는 과정을 알아보고자 한다. 입력시 validate과정, flutter와 firebase를 이용해서 firebase authenticate 동작하는 과정이 되겠다. 흐름을 파악하고 이해한 후에 코드를 다시 보자. 1. email / password 입력시 validate되는 과정 (email / password를 제대로 입력했는지 검증) email / password 입력하기 : TextFormField TextFormField와 상응하는 formKey 존재 formKey의 currentState (입력상태랄까?) validate() 메소드로 검증하기 → 비어있진 않은지 등의 내가 체크하고자 넣었던 로직 검증이 완료되면 Sign in 버튼 누르.. 2020. 5. 27.
Flutter로 ToDo앱 클라우드DB로 데이터 관리하기 (feat. Firestore) Firestore는 문서기반 구조로 데이터를 저장하며 기존 SQL 등의 문법 없이도 실시간으로 손쉬운 데이터 CRUD(쓰/읽/업/삭)이 가능하다. 저장단위는 문서(document)이다. 문서는 컬렉션(collection)에 저장되며 문서에는 키-값 형태로 다양한 자료(data) 저장이 가능하다. 자료구조 : Collection > Document > Data (key-value) 1. 컬렉션 생성 : 할일 정보를 저장할 컬렉션을 생성. Firestore화면에서 '컬렉션 시작' 클릭 > '컬렉션 ID'에 'todo' 입력 > 다음 클릭 2. 할일 목록 가져오기 (Query) main.dart에 cloud_firestore.dart import 하기 Todo 클래스 수정 import 'package:flut.. 2020. 5. 23.
Flutter로 ToDo앱 클라우드DB로 연결하기 (feat. Firebase) 지난 번 만든 ToDo 앱은 종료를 하게 되면 데이터가 초기화될 것이다. 다음으로 클라우드DB인 Firebase와 연동하여 데이터를 관리해보자. 1. Firebase 연동하기 (android, iOS) 2. Firestore 설정 1. Firebase 연동하기 - firebase.google.com 구글계정 로그인 후 시작하기 버튼 클릭 - 프로젝트 추가 - 프로젝트 이름 작성 후 계속 버튼 클릭 - Google 애널리틱스 체크해제 후 프로젝트 만들기 클릭 - 생성 완료 - 안드로이드 버튼 클릭 - android > app > build.gradle : applicationId 복사 - 앱 등록 경로에 붙여넣기 후 앱 등록 클릭 - 다음 화면에서 google-services.json 받고 android .. 2020. 5. 23.
Flutter로 ToDo앱 만들기 (feat. GitHub) ToDo 앱에서는 클라우드 DB를 활용하는 앱이다. 할일 추가하기, 할일 완료하기, 할일 삭제하기, 할일 추가/완료/삭제시 클라우드DB인 Firestore에서 데이터 관리 Step1. git repository 만들고 연결 Step2. ToDo앱 기본버전 작성 Step1. git repository 만들고 연결 - flutter app 생성 > 프로젝트 열기 > VCS > Import into Version Control > Create Git Repository - flutter_todo_app 선택 - Git init > Yes 클릭 > (다음캡쳐본 보면 알겠지만) 모든 파일들이 빨간 표시로 보임 - flutter_todo_app 우클릭 > Git > Add (Git에 내 프로젝트들 Add 시키자) .. 2020. 5. 22.
Flutter로 비만도 계산기 만들기 키, 몸무게 2개의 숫자값을 입력받아 비만도를 계산하는 어플 1. 입력 화면 2. 결과 화면 3. 값 검증 및 화면 전환 4. 최종 화면 및 소스 1. 입력 화면 키, 몸무게 입력받는 양식을 Form 위젯으로 wrap해준다. 그리고 submit을 누를 때 키, 몸무게값을 검증하기 위해 form의 상태를 얻기위한 key가 필요하다. 키는 GlobalKey타입으로 선언하고 Form 위젯의 key 프로퍼티로 선언하면 상태를 얻을 수 있다. 키, 몸무게 입력필드는 검증 로직을 작성할 수 있는 TextFormField를 사용한다. form key의 currentState.validate()로 Form 입력값에 대한 검증이 가능하다. (아래 소스는 검증부분 미작성) import 'package:flutter/mat.. 2020. 5. 19.
Flutter 자주 쓰이는 생산성 높여주는 단축키 Flutter로 앱개발을 하다보면 Column, Row, Padding 등의 위젯으로 감싸는 경우가 자주 발생한다. 반대로 감싸고 있던 위젯을 제거해야 하는 경우도 있을 것이다. 내가 작성하고 있는 코드의 탭 위치가 맞지 않는 것 같다. 자동으로 정렬할 순 없을까? 이 때 쉽게 처리해주는 단축키에 대해 정리해보자. 1. 위젯을 다른 위젯으로 감싸거나 감싸져 있는 위젯 제거하기 - 감싸고 싶거나 제거하고 싶은 위젯에 커서를 위치하고 Alt + Enter (mac기준 option + enter)를 누른다. 감싸고 싶다면 Wrap with Widget 으로 가능하며 제거하고 싶은 경우 Remove this widget으로 가능하다. 2. 코드 정렬하기 - 안드로이드스튜디오 : 'Code > Reformat C.. 2020. 5. 17.
Flutter 자주 쓰이는 위젯을 이용한 복잡한 UI 그리기 주요 사용 위젯 - BottomNavigationBar : 하단 탭 구성 - AppBar : 상단 제목줄 구성 - Row, Column : 가로, 세로 레이아웃 구성 - GestureDetector : 클릭 이벤트 만들기 위한 위젯 - Opacity : 투명도 - CarouselSlider : 좌우 슬라이드하는 UI 작성을 위한 라이브러리 - Listview : ListTile과 함께 사용하여 스크롤 가능한 리스트를 만드는 위젯 * ListView 안에 ListView 를 넣어야 하는 경우 physics / shrinkWrap 프로퍼티를 지정해줘야 함 Step 1. 전체 틀 잡기 2. BottomNavigationBar를 이용해 하단 탭 만들기 + AppBar 수정해서 상단부 만들기 3. 메인 화면(Ho.. 2020. 5. 17.
Flutter 버튼 관련 위젯 버튼 위젯은 onPressed 프로퍼티를 꼭 추가하여 클릭했을 때 실행될 함수를 반드시 정해줘야 한다. RaisedButton, FlatButton, IconButton, FloatingActionButton return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ RaisedButton( // 입체감을 가진 버튼 child: Text('RaisedButton', style: TextStyle(color: Colors.blue)), color: Colors.amber, onPressed: () {} // 클릭시 실행할 영역 ), FlatButton( // 평평한 버튼 child: Text('FlatBut.. 2020. 5. 15.
flutter 개발환경 셋팅 - (macOS 기준) 1. flutter 설치페이지에서 flutter sdk 다운로드하기 https://flutter.dev/ 2. development 폴더 생성해서 그 안에 압축 풀기 $ mkdir ~/development $ cd ~/development $ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.8-stable.zip (나는 그냥 Finder에서 압축 풀고 development 폴더로 옮김) ⭐️ PATH 추가하기!!! - development 폴더에서 PATH 추가하기 (해당 폴더 이외에서는 flutter 먹지 않는다) $ export PATH=`pwd`/flutter/bin:$PATH - 터미널 어느 세션이든 flutter 명령어를 사용하기 위해서는 bash_profi.. 2020. 2. 19.
DAsP 시험 정리 1. 2020년 시험 일정 시험명 원서접수 시험일 결과발표 제42회 DA준전문가 자격검정 01.10~02.17 03.14 04.14 제43회 DA준전문가 자격검정 03.23~05.18 06.14 07.14 제44회 DA준전문가 자격검정 06.29~08.17 09.12 10.13 제45회 DA준전문가 자격검정 09.21~11.09 12.06 21.01.05 2. 데이터아키텍쳐준전문가 자격검정시험 과목 과목명 필기 검정시험시간 문항수 배점 전사아키텍쳐 이해 10 20 (문항당 2점) 90분(1시간 30분) 데이터 요건 분석 10 20 (문항당 2점) 데이터 표준화 10 20 (문항당 2점) 데이터 모델링 20 40 (문항당 2점) 계 50 100 3. 세부 내용별 문항수 시험과목 과목별 세부 항목 문항수 전.. 2020. 2. 17.
react native로 timer앱 만들기 (1) - 간단 화면구성, 버튼 추가 terminal > expo init sky-timer components 폴더 만들고 Timer, Button 폴더 만들기 > 각 폴더 안에 index.js 생성 - Button > index.js TouchableOpacity(터치효과), onPressOut (터치후 손 뗄 때 동작), import FontAwesome(expo vector 아이콘 가져다 쓰기) propTypes (이전 상황에서 값 넘어오는 정보들 설정) - Timer > index.js Button 사용하기 위해 import 해주기, StatusBar 색상 변경, 상단에 time, 하단에 button 추가(클릭하고 뗄 때 alert 나오도록 테스트) redux : State Management for React (리액트 상태 관리 .. 2020. 1. 15.
reactJS 로 영화목록 웹사이트 만들어보기 (3) - 네비게이션 추가하기 react-router-dom 설치 : 네비게이션 사용을 위해 필요 src 폴더 안에 components 폴더와 routes 폴더 생성 Movie.js, Movie.css는 components 폴더로 이동 routes 폴더에 Home.js(영화 리스트 보여주는 페이지) 와 About.js 파일 생성 ( app.js 내용을 home.js 로 이동 라우터를 이용하여 url을 보고 어떤 화면을 보여주면 될지 판단하도록 적용해볼 예정 바보같은 오타 오류 : import Route 라고 해야할 것을 import Router 라고 해서 아래와 같은 오류가........ 수정 후 다시.... url에 보면 /#/ 이 붙은 것을 확인할 수 있다. 이제 /#/about 으로 이동해보자 자, 이제 네비게이션을 추가해보자 .. 2020. 1. 5.
reactJS 로 영화목록 웹사이트 만들어보기 (2) - 영화 목록 가져오기 async() : 비동기 방식. await() ~ : ~ 할 때까지 기다려라. [ES6 에서 나온 새로운 개념인가보다] yts에서 영화 정보 가져올 때 팁 : json파일에서 가져오는 데이터를 잘 정리하면 간편하게 사용 가능 1. 단순하지만 접근하기에 복잡한 타입 2. 설정을 해두면 접근이 용이함 자 이제.. 가져온 movies 정보를 state의 movies 에 담아서 출력해볼까? wow 잘 된다! api 를 통해 얻어오는 데이터에 보니 sorting by rating 옵션을 먹일 수 있겠다 (평점 좋은 순으로 보여주기 위해) api 가져오기 위해 Movie.js 를 만들고 propTypes를 설정하는 부분에서 오류났는데 대소문자 구분이 정말 중요한거같다..... 온갖 css 를 먹여서 아래의 화면까지.. 2020. 1. 5.
reactJS 로 영화목록 웹사이트 만들어보기 (1) - React 기초 #만들어 볼 것 : 영화 리스트, 추천, 별점 등의 정보가 있는 웹사이트 - api : yts api (영화와 관련된 정보 가져다 쓸 수 있는 API) - 리액트를 써서 자바스크립트로 변환해주는 웹팩 (리액트 코드를 브라우저가 이해할 수 있게 변경해주는)을 사용 예정 - 웹팩 이용해서 최근 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 함 #시작 1. create-react-app 설치 : npm install create-react-app 2. 프로젝트 생성 : create_react_app movie_app 3. movie_app 폴더로 이동 : cd movie_app 4. 서버 띄우기 : yarn start 5. vscode에서 movie_app 열기 6. 소스코드를 한 번 변경해보자. 리액트.. 2020. 1. 2.

티스토리툴바