오늘도 공부

배달앱 클론 3주차 내용메인화면에서 ListActivity 로 이동메인화면에 RecyclerView 를 등록 한 후에 GridLayoutManager 를 등록한 후 일것이다. 그럼 Adapter 에 클릭 이벤트를 등록해서 ListAcitivity 로 이동 처리 한다. fun T.listen(event: (position: Int, type: Int) -> Unit): T { itemView.setOnClickListener { event.invoke(adapterPosition, itemViewType) } return this }MainRecyclerViewAdapteroverride fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHold..

보통 이런 오류는 lazy 하게 네트워크 상태가 늦어지거나 할 경우 이미 위젯은 dispose가 된 상태인데 setState 를 호출 하는 경우로 보인다. 해결법은 간단하게 onDispose 함수에서 변수 하나 선언해서 true / false 로 해주면 된다. 라이프사이클에 대해서 궁금하면 여기 로 가서 한번 보고 오자. 우선 이렇게 변수를 지정 후에@override void dispose() { super.dispose(); isDisposed = true; } 변경하는 부분에서 if(!isDisposed) { setState(() {.... }); }이런식으로 하면 된다. 팁으로 시작시 setState 를 하는 경우에는 this.mounted 로 체크가 가능하다. 이상으로 늦은 setState 오류에..

Android 사용시 자주 사용되는 게 같은 Task 내에서 onActivityForResult 를 사용하는 편이죠. 물론 안드로이드내에서는 호출하는 쪽에서는 startActivityForResult 를 하고 다음 엑티비티에서 할일 하고 값을 다시 보낼때 onActivityResult 를 통해서 값을 받습니다. 관련 글은 http://liveonthekeyboard.tistory.com/150 보시면 됩니다. Flutter 내에서는 라우터를 이용을 할텐데요 그럴경우 주고 받는 걸 어떻게 하는 지 볼게요. 우선 A -> B -> A 라고 가정하면A 에서 라우팅을 Map results = await Navigator.of(context).push(new MaterialPageRoute( builder: (B..

Flutter로 작업시 Android Native 모듈과 통신할 일이 생길 수 있다. 그럴경우 android 폴더를 오른쪽 클릭 후 open Android module in Android Studio 로 열면 된다. 기존에 Flutter에 라이버러리들을 안 붙인 상태이면 정상적으로 작동이 될것으로 보인다. 하지만 다른 라이버러리들을 사용을 하고 있는 경우 하단의 오류 같은게 나올 수 있다. 이 부분을 해결하기 위해선 플러터 오픈 채팅방에서 고수 두부랩님이 알려주신 팁으로 gradle 폴더안에 gradle-wrapper.properties 파일을 열어서 gradle 버전을 수정해주면 된다. distributionUrl=https\://services.gradle.org/distributions/gradle..

Flutter BuildContext 알아보기https://flutterbyexample.com/build-context-class 보고 공부한 내용입니다.Flutter 에서 BuildContext는 위젯 트리에 있는 위젯 위치라고 보면 된다.각각의 위젯마다 고유의 BuildContext 가 존재한다.class _MyHomePageState extends State { _MyHomePageState() { print(context.hashCode); // prints 2011 } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body:..

Flutter 에서 내위치 가져오기모바일에서 내 위치를 가져오는 건 필수 기능 중 하나!!관련 플러그인은 https://pub.dartlang.org/packages/geolocator#-readme-tab- 에서 확인 가능하다.그럼 설정은?pubspec.yamlgeolocator: '^2.0.1'Geolocator 라는 메인 클래스를 통해서 위치를 가져 올 수 있다.Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high)리턴 값은 Future 비동기로 받는다. 그래서 then이나 await 로 사용이 가능하다.Future getCurrentUserLocation() async { return Geolocator() .getCurre..

2주차 배달앱 강의 스터디 수업 내용1주차 복습 내용http://javaexpert.tistory.com/971?category=7201022주차 클론 수업 내용Category 데이터 클래스 구현List 구현리사이클러뷰를 그리드 레이아웃 매니저로 구현 및 데이터 연결GPS 기능 켜져있는지 체크유저 위치 가져오기 위해 퍼미션 작업Presenter 함수 구현Address Object Data 클래스 구현퍼미션 승인 후 트래킹 진행좌표를 가져온 후 네이버 지오코딩 api 를 통해 자세한 동을 가져온다.Retrofit Api 구현converter-moshi 를 통해 JSON -> Address Class 로 변환RxJava Converter 구현RxJava Subscribe 를 통해 화면에 푸시최종적으로 화면에..

도커 2주차 수업복습http://javaexpert.tistory.com/967?category=719756docker-compose를 만드는 방법에 대해 진행1. package.json{ "dependencies": { "express": "*", "redis": "2.8.0" }, "scripts": { "start": "node index.js" } }2. index.jsDocker compose를 통해서 내부 네트워크 설정을 진행redis를 연결시 redis-server을 바로 호출 해서 연결함process를 강제로 죽는 오류를 발생시켜서 도커 컨테이너상에서 오류에 대한 여러가지 대처방법을 배움"no",always,on-failure등 여러가지 프로세스 오류에 대처할 수 있음const expres..

Stateful Widget Lifecyclehttps://flutterbyexample.com/stateful-widget-lifecycle/#6-didupdatewidget 을 공부해서 요약한 글입니다. 자세한 내용은 원문확인 부탁드립니다.StatefulWidget을 만들때 State 라는 오브젝트를 만든다. 이 오브젝트는 위젯이 동작하는 동안 mutable state를 뜻한다.state의 컨셉은 두가지로 정의되어 진다.위젯에 의해서 사용되어지는 데이터는 변할수 있다.위젯이 빌드 될때 데이터들을 동기적으로 읽을수 없다. 모든 State 들은 build 함수가 호출될 때까지 설정되어야 한다.StatefulWidget 와 State 는 클래스를 분리를 한 이유는?성능때문이다.1. createState()..

Transform 활용Stream 사용시 주어진 값들을 이용해서 가공할 일이 생길수 있다. 그럴경우 Transform 을 활용해서 가능하다.우선 예제를 보면서 살펴보자.이메일을 넣는 경우 유효성 체크 하는 validate stream 을 만든다고 가정하자.'@' 포함되는 경우 정상, 없는 경우 오류로 리턴하는 아주 간단한 예제우선 bloc 패턴을 이용할 예정이다.bloc 생성하자.StreamController 생성sink 정의transform 정의... final bloc = new Bloc(); ... class Bloc { final emailController = StreamController(); Function(String) get changeEmail => emailController.sink..

Android 에서 WebView사용시 정말 XX 한게 파일 업로드가 아닐수 없다. 이부분에서 괜찮은 소스가 보여서 공유 해본다. webView.setWebChromeClient(new WebChromeClient() { //The undocumented magic method override //Eclipse will swear at you if you try to put @Override here // For Android 3.0+ public void openFileChooser(ValueCallback uploadMsg) { mUploadMessage = uploadMsg; Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Inten..

Android 배달앱 클론 스터디 부산에서 진행한 배달앱 클론을 진행하면서 공부한 내용을 정리 ( 1주차 )목표Android로 배달 앱을 클론 하면서 개발하는 방법과 패턴, RxJava등 사용법을 배우게 된다.MVP flow Base MVPView화면 단위를 뜻한다. Fragment, Adapter, ActivityModel데이터 연결 하는 부분을 담당한다. Sqlite, Retrofit등PresenterView Model 간의 연결을 도와주는 역할을 한다.Base 작성BaseMvpViewinterface BaseMvpView { fun getContext(): Context fun showError(error: String?) fun showError(@StringRes stringResId: Int)..

Relative Programming - BLoC 패턴아래 내용은 https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/ 을 공부하고 요약해놓은 글입니다.BLoC Pattern 은 구글 개발자 Paolo Soares 와 Cong Hui 에 의해서 디자인 되었다. 그리고 처음 발표된 건 2018년 DartConf 이다.관련 영상BLoC = Business Logic Component.하나 또는 여러개의 BLoC가 존재할수 있다.Presentation Layer(UI 부분)에서 가능하한 제거되며 로직부분만 분리해서 테스트가 용이함플랫폼 종속적이지 않다.환경에 종속적이지 않다.BLoC 패턴은 스트림을 이용해서 만들어진다.위젯은 ..

Reactive Programming part 1 - Stream스트림이란 무엇인가?스트림을 이해하기 위해선 파이프를 상상해야 한다.뭔가를 입력을 했다면 그것이 파이프 안에서 흘러서 다른 출구쪽으로 배출 되는 걸 뜻한다.그럼 Flutter 을 대입해보자면파이프는 Stream 이라고 부른다.Stream을 제어하기위해 우리는 자주 StreamController 를 이용한다.Stream 입력하기 하기 위해 StreamSink 를 사용한다.입력 할수 있는 것들은 어떤 것이든 가능하다.데이터, 오브젝트, map, 에러코드, 이벤트, 심지어 다른 스트림도 가능하다.배출은 어떻게 확인하나?일단 입력이 되면 Rx 처럼 subscribe 를 통해서 받을 수 있다. 이 과정을 flutter에서는 listen 한다고 말한다..

NodeJS 로 도커 시스템 구축package.json{ "dependencies": { "express": "*" }, "scripts": { "start": "node index.js" } }index.jsconst express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hi there'); }); app.listen(8080, () => { console.log('Listening on port 8080'); });Dockerfile# Specify a base image From node:alpine # install some depenendencies RUN npm install # De..

Container 레이아웃 치트시트https://medium.com/jlouage/container-de5b0d3ad184 Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Paddinghttps://medium.com/coding-with-flutter/flutter-layouts-walkthrough-row-column-stack-expanded-padding-5ed64e8f9584 Flutter Layout Cheat Sheethttps://proandroiddev.com/flutter-layout-cheat-sheet-5363348d037e 레이아웃 Flutter 영상 #1https://codingwithflutter.com/

Flutter App Tutorial #1이 글의 모든 내용은 udemy 강좌를 공부하고 따라해본 내용입니다.https://www.udemy.com/dart-and-flutter-the-complete-developers-guide완성 된 형태이다.첫 화면에서 오른쪽 아래 플로팅 버튼 클릭시 오른쪽 화면처럼 이미지와 글자를 가진 뷰가 하나씩 추가되는 형태이다.소스는 http json 을 통해서 가져왔다.소스는 https://github.com/bear2u/flutter-sample-pic.git 에서 확인가능하다. main.dart 시작flutter는 첫진입은 일반적으로 lib/main.dart 로 시작된다.매트리얼 테마를 사용하기 위해서 import를 한다.runApp 은 메테리얼 라이버러리를 통해 실..

Await / Future 비동기 함수 호출Http 로 통신할때 일반적으로 비동기로 호출을 하는 편이다. 비동기란 함수 호출시 블럭이 되지 않고 한번 다 훝고 콜백식으로 완료가 됐을 경우 다시 결과를 받는 경우를 말한다.만약 아래와 같은 코드에서 실행시 결과값은 마지막에 'I got the data' 로 떨어지게 된다.그리고 자바스크립트에서 Promise 형태와 비슷한 걸 볼수 있다.import 'dart:async'; void main () { print('1. start to fetch data'); get('http://weasds.com') .then((data) { print(data); }); print('3. finish call to fetch the data'); } Future get(..

JSON 핸들러서버와 통신시 제일 자주 사용되는 형태가 JSON 이다. 그럼 다트에서는 어떻게 다룰수 있는 지 살펴보겠다.테스트 환경은 https://dartpad.dartlang.org/ 에서 진행한다.import 'dart:convert'; void main() { var rawJson = '{"url": "http://blah.jpg","id":1}'; var parsedJson = json.decode(rawJson); print(parsedJson); print(parsedJson['url']); } ............. {url: http://blah.jpg, id: 1} http://blah.jpg그리고 모델 클래스를 만들어서 매핑하고자 할때에는 값을 키값을 줘서 값을 가져온다음 set ..

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ StatefulWidgetStatefulWidget은 위젯에 변경되는 state 를 담고 있는 커스텀 위젯을 뜻한다.그럼 어떤식으로 만들어지는 지 살펴보자.우선 StatefulWidget 을 extends 한다.class App extends StatefulWidget { } State를 상속받은 클래스를 만든다.class AppState extends State { int counter = 0; Widget build(context) { return MaterialApp( home: Scaffold( body: Text('$counter'), appBar: AppBar( title: Text("L..

Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ 커스텀 위젯 추가하나의 파일에 많은 코드를 추가시 복잡해지고 길어지는 단점이 있다. 이럴때 파일로 빼서 분리를 할수 있다.임포트 방법내부에 src 폴더를 만들고 그 안에 app.dart 파일을 만들자.클래스 구조를 만들수 있다.import 매트리얼Stateless(StatefulWidget)Widget class 생성Build 함수 구현main.dart 에서 src/app.dart 호출# src/app.dart import 'package:flutter/material.dart'; class App extends StatelessWidget { Widget build(context) { return..

Scaffold 위젯 추가 Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ 기본적으로 모바일 구조가 상단에 Appbar가 있으며 하단에 바텀시트가 있으며 floating action button이 있다.그 구조를 기본적으로 지원하는 하나의 위젯이 Scaffold라고 보면 된다.그럼 하나씩 적용해보자.import 'package:flutter/material.dart'; void main() { var app = MaterialApp( home: Scaffold( appBar: AppBar(), // 추가 ), ); runApp(app); }짜잔~ 이런 타이틀바가 생긴걸 볼수 있다. 이걸 AppBar 라고 한다.그리고 아래 floating butt..

Flutter 시작하기. Flutter 카카오톡 오픈 채팅방 바로가기 : https://open.kakao.com/o/gsshoXJ Flutter는 구글에서 나온 모바일 프레임워크입니다. Reactive Native 와 비슷하다고 보면 될것 같습니다. 네이티브 성격을 가진 하이브리드 앱인 셈이죠.무엇보다 강력한 점은 각 플랫폼(Android, IOS)에 있는 대표 디자인 즉 메테리얼 디자인을 손쉽게 짤수가 있습니다.하지만 플랫폼별로 다르게 나올수가 있는데 그 이유는 메테리얼도 플랫폼에 맞게 바뀌어서 나올 수 있기 때문입니다.만약 IOS 에서 특유의 시스템을 이용하고 싶으면 쿠퍼티노 위젯을 사용하면 됩니다.그 외에도 안드로이드 스튜디어, 비쥬얼 스튜디어 코드등 통합 IDE 도 사용 가능한 점이 큰 메리트입..

Pm2를 이용한 Spring boot deployEC2에 노드 서비스를 배포 함에 있어서 forever와 pm2를 이용을 하는 편이다.Pm2는 슬랙이나 외부 연동도 좋아서 자주 이용되는 편이다.그래서 이번에 Spring boot 도 배포를 하는데 pm2 를 이용할 수 있을까 찾아보니 당연히 가능하다.우선 스프링 부트를 배포를 해보자.mvn package 그럼 war or jar 파일이 나올것이다.나온걸 서버로 올려놓고. 노드를 설치를 한다.나는 주로 nvm 을 이용해서 설치를 하는 편이다.https://medium.com/@jjeaby/nvm-node-%EC%84%A4%EC%B9%98-a4bcab00a5efhttps://github.com/creationix/nvm설치를 진행 한 다음 pm2를 설치를 하..

가변 인자를 보통 넣어서 사용시 ( ... )로 사용되는데 이를 Variadic 이라고 한다. 예를 보자. func sum(numbers ...int){ sum := 0 for _, num := range numbers { sum += num } return sum } sum(1,2,3) //6 sum([]int{1,2,3}...) //6 sum(1) //1Sum 함수는 int 인자값에 대한 가변적으로 가능하다. sum([]int{1,2,3}...) //6의 경우 뒤에 ... 을 붙여서 할수 있는데 더 예를 보자면func f(ids []int){ // } func service(id int){ f([]int{id}) } func service2(id []int){ f(id) }위를 Variadic 을 적..

apt-get update apt-get install python2.7 ln -s /usr/bin/python2.7 /usr/bin/python

Boltdb 연동공식 Github빠르고 효율적인 저레벨 DB 중 하나인 bolt db 이다. key, value 로 되어있고 byte로 값을 넣을 수 있다는 장점이 있다.우선 설치는$ go get github.com/boltdb/bolt/... // DB 여는 작업 package main import ( "log" "github.com/boltdb/bolt" ) func main() { // Open the my.db data file in your current directory. // It will be created if it doesn't exist. db, err := bolt.Open("my.db", 0600, nil) if err != nil { log.Fatal(err) } defer db..

Golang 으로 CRUD Restfual Api 만들기최근 블록체인을 공부하면서 이더리움 코어를 보고 싶다는 생각이 자주 들었다. 그리고 하이퍼레저에서 스마트 계약 개발시 Go 로 짜고 있는 걸 보고 고랭을 배워야 겠다는 마음을 먹고 하나씩 보고 있습니다.언어를 제일 배우고 제일 먼저 해보는 건 무엇보다 게시판 하나 짜보는 거겠죠?그래서 Restful Api 를 먼저 구성해보고 화면단을 만들어서 해보도록 합니다.어설픈 TDD 방식으로 하나씩 짜보도록 하겠습니다.우선 Go 가 아직 설치가 안되신 분은 https://golang.org/dl/ 으로 가셔서 받으시길 바랍니다.그리고 환경 설정을 해줍니다.혹시 Gopath 와 Gopath bin 설정이 안되신 분은 여기 에서 따라해보시면 됩니다.현재 DB는 몽..

윈도우 상에서 도커를 이용해서 몽고 DB 세팅윈도우상에서 몽고디비 설치시 가끔 오류 나는 부분이 있다. 그럼 설치도 안되고 개발도 안된다.그럴때 도커를 이용해서 빠르게 테스팅을 할수 있다.우선 도커를 켜서 다음 명령어를 하자.docker pull mongo docker run --name database -d -p 27017:27017 mongo --noauth --bind_ip=0.0.0.0 27017 포트에 0.0.0.0 으로 바인딩하는 문구이다.-noauth 는 아이디랑 비번없이 들어갈 수 있다.만약 설정시 아래와 같이 가능하다.docker run --name some-mongo -d mongo --auth docker exec -it some-mongo mongo admin db.createUse..

다트 기본온라인 다트 편집기에서 실행가능하다.https://dartpad.dartlang.org/함수편기본 출력void main() { var test = "test"; print('test = $test'); }기본값 설정void printMsg(String msg, [String value = 'undefined']) { print('msg = $msg, value = $value'); } void main() { printMsg('1234', '5678'); printMsg('1234'); } ........................ msg = 1234, value = 5678 msg = 1234, value = undefinedname, value 쌍으로 map 형태로 인수 넣기void pri..