티스토리

Flutter 개발 Story
검색하기
블로그 홈

블로그 홈

Flutter 개발 Story

kimtaewookdeveloper.tistory.com/m
신고

flutter 개발하자 님의 블로그입니다.

구독자
1
방명록 방문하기
구독하기

주요 글 목록

  • Flutter 플러그인 VS 모듈 Flutter 플러그인은 Flutter에서 기본 기능을 사용할 수 있도록 하는 것이고, 모듈은 기존 기본 응용 프로그램과 통합하는 것이라고 한다. 다시 말해 플러그인은 안드로이드나 ios처럼 native와 관련된 개발이고, 모듈은 기존에 있는 flutter 기능을 사용하는 것과 관련된 개발이다. 공감수 0 댓글수 0 2021. 10. 7.
  • Bus형 Topology와 Event Bus Bus형 Topology Bus형 Topology란 공통의 공유된 케이블에 컴퓨터를 연결한 형태를 의미한다. (*Topology - 컴퓨터 케이블 및 기타 네트워크 구성 요소의 배열 또는 물리적 배치 상태) Bus형 Topology의 특징은 통신 채널 버스를 공유하기 때문에 한 번에 오직 한 대의 컴퓨터만 데이터 패킷을 전송한다는 점이다. Bus형 Topology에서 Terminator은 신호의 반사를 방지하기 위해 사용된다. 즉, 목적지 없는 데이터를 잡는 역할이라고 보면 된다. Event Bus Event Bus는 확장성이 뛰어난 반응성 어플리케이션을 구현하기 위한 분산 비동기 아키텍처 패턴이다. 해당 패턴에서 주요한 점은 이벤트를 비동기적으로 전달하고 처리하는 것이다. Event Bus는 총 4가지.. 공감수 0 댓글수 0 2021. 9. 24.
  • SPOF SPOF(Single point of failure) SPOT란 시스템 구성 요소 중, 동작하지 않으면 전체 시스템이 중단되는 요소이다. 공감수 0 댓글수 0 2021. 9. 23.
  • Nginx에 대하여 Nginx란? Nginx(엔진엑스)란 트래픽이 많은 서버의 확장성을 위해 설계된 비동기 이벤트 기반 구조의 웹서버 소프트웨어이다. "더 적은 자원으로 더 빠르게 서비스"를 하는 SW로 알려져 있다. Nginx 등장 배경 Nginx는 러시아의 프로그래머 이고르 시쇼브가 Apache HTTPd를 코딩하다 Apache의 C10K문제를 해결하기 위해 개발되었다. Apache의 C10k문제는 하나의 웹서버에 10,000개의 클라이언트의 접속을 동시에 다룰 수 있는 기술적인 문제를 의미한다. Nginx 더 깊이.. Nginx는 여러 요청을 한 번에 처리할 수 있는 장점이 큰 웹 서버이다. apache보다 동작이 단순하고 전달자 역할만 하기 때문에, 동시 접속에 특화되어 있다. 구조적으로는 Apache HTTPd에서.. 공감수 0 댓글수 0 2021. 9. 23.
  • CDN에 대하여... CDN(Contents Delivery Network) 의미 CDN이란 Contents 전송 네트워크로 지리적으로 분산된 여러 개의 서버를 의미한다. CDN(Contents Delivery Network) 등장 배경 CDN은 Contents를 어떻게 전달해줄 것인가에서 시작하는 개념이다. CDN은 인터넷 초기 전국에 깔려 있는 인터넷 회선을 적게 사용하고 최단 경로로 사용자에게 data를 전달하려는 목적에서 개발됐다. 이후 Contents 이용과 용량의 증가로 자주 사용하는 Contents를 미리 사용자 인근에 저장해 뒀다가 필요할 때 빠르게 보내주는 기술로 발전했다. 즉, 인터넷으로 이미지나 비디오 등 용량이 큰 Contents를 전송하면 트래픽이 폭주할 때처럼 네트워크 혼잡 문제가 발생할 수 있다. .. 공감수 0 댓글수 0 2021. 9. 23.
  • Oauth) 카카오톡으로 API 로그인하기 (with Firebase function) 참고 글 - https://sudarlife.tistory.com/entry/flutter-firebase-auth-%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EB%8F%99-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-part-7?category=1176193 공감수 0 댓글수 0 2021. 9. 14.
  • Explicit concurrent copying GC freed 4884(175KB) AllocSpace objects, 1(20KB) LOS objects, 89% free, 1485KB/13MB, paused 61us total 11.319ms flutter로 개발하다 보면, 위와 같은 로그가 뜬다. Explicit concurrent copying GC freed 4884(175KB) AllocSpace objects, 1(20KB) LOS objects, 89% free, 1485KB/13MB, paused 61us total 11.319ms 앱이 메모리를 사용하는데 있어서 GC(Garbage Collector)에 할당된 메모리까지 사용해 GC가 메모리를 비우는데 시간이 오래 걸리게 된다는 뜻이다. 공감수 0 댓글수 0 2021. 6. 1.
  • Isolate 사용방법 Isolate 사용 방법 compute의 경우 다른 예제 글들이 많으니 넘어가고, spawn의 방법에대해 알아보자. isolate간의 통신을 위한 방법은 RecievePort를 통해 하는 것인데, RecievePort - isolata간에 메세지를 주고 받을 수 있는 포트 - RecievePort는 sendPort를 반환하는 SendPort getter를 갖고 있음 SendPort - 지정된 RecievePort에 메세지를 보냄. - SendPort를 통해 전송된 메세지는 지정된 RecievePort에 전송되고, RecievePort는 해당 메세지를 RecievePort의 listener를 통해 받을 수 있다. Isolate.spawn Isolate.spawn(함수, recievePort.sendPort.. 공감수 0 댓글수 0 2021. 5. 31.
  • MethodChannel MethodChannel MethodChannel이란 비동기 호출을 사용해 플랫폼 플러그인과 통신하기 위한 채널이다. 즉, flutter와 Native(Android, IOS)사이에서 메세지를 통해 native 메서드 또는 plugin을 호출하는 것이다. 플랫폼 채널 flutter(Client)는 플랫폼 채널을 통해 IOS나 Android가 될 수 있는 호스트에게 메세지를 보냄 -> 호스트는 플랫폼 채널에서 메세지를 받고 플랫폼 네이티브 언어를 사용해 플랫폼 별 API를 호출해 flutter(client)에게 보냄 (메서드 호출은 전송되기 전에 binary로 인코딩 되고, 수신된 binary 결과는 dart값으로 디코딩됨.) 공감수 0 댓글수 0 2021. 5. 26.
  • Isolate vs Thread Thread 스레드는 독립적인 프로세스로 고유의 메모리를 갖고 있으며, 해당 메모리에서 작업을 실행한다. 또한 다른 스레드와 동시에 작업을 할 수 있다. 여기서 주목할 부분은 c나 java등의 언어에서 thread는 HeapMemory를 공유한다는 점이다. HeapMemory 프로그래머가 원할 때, 원하는 만큼 메모리를 할당받아와 사용하고 원할 때 반납(해제)가능한 메모리 - compiler나 cpu가 자동을로 메모리를 관리 하지않음 - 컴퓨터에 남아있는 메모리만큼 사용 가능 - 호출이 끝난다고 사라지지않음(반납(해제)해야 사라짐) 다시 돌아와서 c나 java등의 언어의 thread는 HeapMemory를 공유한다고 했다. 즉, 동일한 메모리에서 Main thread와 다른 thread 들이 있는 것이다.. 공감수 0 댓글수 0 2021. 5. 26.
  • Factory Factory란? Factory란 새로운 인트턴스를 생성하지 않는 생성자를 구현할 때 사용하는 키워드이다. constructor는 매번 인스턴스를 새로 생성해 비용이 많이 발생하지만, factory는 기존에 이미 생성된 인스턴가 있다면, 그 인스턴스를 return하여 재사용한다. 즉, constructor는 생성자를 호출하면 새로운 인스턴스가 만들어지지만, factory는 생성자를 호출하면, 최초에 생성된 인스턴스를 생성자가 호출될때마다 갖다 쓰는 것이다. constructor를 사용한 클래스는 항상 새로운 인스턴스를 리턴한다. (Book({this.title, this.description})을 호출해 새로운 인스턴스를 리턴) class Book { final String title; final Str.. 공감수 0 댓글수 0 2021. 5. 24.
  • Flutter _ Retrofit Retrofit Retrofit은 통신(networking) 기능을 사용하기 쉽게 만들어놓은 라이브러리이다. REST 기반의 서비스를 통해 json, xml등의 구조인 데이터를 쉽게 가져오고 업로드할 수 있다. Flutter에서 Retrofit 사용하기 Flutter에서 Retorfit을 사용하기 위해서는 6가지의 라이브러리가 필요하다 1. Retrofit 2. dio 3. json_annotaion 4. retrofit_generator 5. build_runner 6. json_serializable 위의 라이브러리를 하나하나 설명하자면 다음과 같다. 1. Retrofit - Retrofit 라이브러리는 위에서 설명한 바와 같다. (https://pub.dev/packages/retrofit) 2. .. 공감수 0 댓글수 0 2021. 5. 24.
  • 위젯) SingleChildScrollView SingleChildScrollView A box in which a single widget can be scrolled. 위젯 하나를 스크롤할 수 있게 해주는 위젯이다. 즉, Column등의 위젯을 이용해서 리스트뷰같은 효과를 낼 수 있는 위젯이다. 해당 위젯을 사용하려면 하나의 조건이 있다. SingleChildScollView를 감싸는 위젯이 높이를 알려주어야한다. 그렇지 않으면 높이를 모르겠다고 에러를 띄운다. 공감수 0 댓글수 0 2021. 5. 11.
  • Flutter BLE 다루기 Flutter BLE 다루기 Flutter에서 ble를 다루기 위한 대표적인 라이브러리는 flutter_blue이다. pub.dev/packages/flutter_blue flutter_blue | Flutter Package Flutter plugin for connecting and communicating with Bluetooth Low Energy devices, on Android and iOS pub.dev 세팅같은 것은 위의 글에서 설명해주는 데로 하면 된다. 해당 글에서는 ble를 다루는 방법을 아래와 같은 방법으로 설명할 것이다. BLE 다루기 순서 1. BLE 디바이스 스캔 2. BLE 디바이스와 앱 연결(페어링) 3. BLE 디바이스와 통신 사실 BLE 관련 글에서 위의 1번과 2번.. 공감수 1 댓글수 0 2021. 4. 30.
  • noSuchMethod noSuchMethod noSuchMethod는 존재하지 않는 함수나 속성이 접근했을 때 호출된다. 즉, 존재하지 않는 함수나 속성이 있을때 어떻게 이를 처리할지 정의하는 함수라고 생각하면 된다. 공감수 0 댓글수 0 2021. 4. 27.
  • Provider 패턴 Provider란? UI와 데이터 처리 로직 분리를 위해 사용하는 기술이다. 즉, 데이터를 담당하는 애가 다른 애들한테 데이터를 알려주는 기술이라고 생각할 수 있다. Provider는 데이터 생산과 데이터 소비, 2가지의 구성으로 이루어진다. (데이터를 어떻게 생산하느냐에 따라 Provider의 종류도 달라진다.) 믹스인 - dart에서 클래스를 확장하지 않고 다른 클래스의 메서드나 변수를 빌릴 수 있는 기술인다. 키워드 - with Provider를 사용하는 순서는 아래와 같다. 1. 데이터를 생산하는 클래스를 만든다. - ChangeNotifier를 믹스인하는 클래스 ChangeNotifier는 Provider에서 setState없이 해당 기능을 할 수 있게 해주는 클래스로 notifyListener.. 공감수 0 댓글수 0 2021. 4. 26.
  • State란? 우리는 flutter를 개발하면서 State란 말을 많이 접하게 된다. 한국말로 번역하면 상태지만, flutter에서도 동일한 의미로 쓰일까? State Flutter에서 state는 데이터를 의미한다. UI를 통해 사용자에게 보여주는 데이터, APP을 통해 사용자와 상호작용하며 변화하는 데이터, 내부적으로 사용되는 데이터등이 이에 속한다. 그러면 StatelessWidget과 StatefulWidget은 각각 데이터가 없는 위젯과 데이터가 넘쳐나는 위젯을 의미하는 걸까? Flutter 공식 홈페이지에서 StatelessWidget - A widget that does not require mutable state. (api.flutter.dev/flutter/widgets/StatefulWidget-c.. 공감수 0 댓글수 0 2021. 4. 15.
  • StateManagement(InheritedWidget, Provider) InheritedWidget InheritedWidget은 flutter에서 Base class for widgets that efficiently propagate information down the tree라고 설명한다. 데이터를 트리 아래로 효율적으로 전파하는 위젯이라고 하는데, 잘 이해가 않간다. 그래서 구글링을 통해 InheritedWidget에대해 조사해봤다. 등장배경 - 기존에 위젯 트리내에서 데이터를 공유하기 위해서는 코드가 지저분해졌다. 이랬던 구조를 InheritedWidget이 등장하면서 코드를 깔금하게 만들어줬다. 1. InheritedWidget을 상속받은 subclass를 생성한다. 2. data를 위한 filed를 추가한다. 3. of메서드를 추가한다.(of는 데이터를 참조하.. 공감수 0 댓글수 0 2021. 4. 15.
  • Gradle exception 에러 잘 동작하던 Flutter가 갑자기 에러가 발생했다. 안드로이드 context를 찾을 수 없다는 등, Gradle expection은 create하라고 하는 등의 에러에 직면했다. 필자는 다음과 같이 해결했다. 우선 flutter의 버전을 업데이트하고, 안드로이드 gradle에 buildTypes { release { minifyEnabled false shrinkResources false} 을 추가했다. 그리고 sdk를 android 30으로 맞췄다. 추후에 해당 부분에서 왜 이런 에러가 발생했는지 자세히 알아봐야겠다. 공감수 0 댓글수 0 2021. 4. 5.
  • Future Future Future란 Flutter에서 미래에 요청한 데이터나 에러를 담을 박스를 의미한다. 데이터나 에러중 어느 것이 나올지 모르므로 두 가지 경우를 모두 대비한 함수를 구현해야한다. then - 데이터가 나올 경우 catchError - 에러가 나올 경우 예) futureNumber()는 데이터 타입이 Future이다. 즉, 미래에 요청할 데이터 타입이 int인 것이다. 결과에서 "기다리는 중" 이 먼저 나온 이유는 비동기이기 때문이다. 참고 - velog.io/@jintak0401/FlutterDart-%EC%97%90%EC%84%9C%EC%9D%98-Future-asyncawait 공감수 0 댓글수 0 2021. 4. 2.
  • Node.js 서버 구축하기_3(외부 ip접속 허용) 이 글이 이번 주제의 핵심일 것 같다. Node관련해서 수많은 포스트들이 있지만, 외부 ip 접속 관련된 글들이 적었고, 필자의 경우 며칠동안 헤매다가 해결 할 수 있었다. 우선 서버를 돌릴 ip와 포트를 설정해야한다. ip의 경우 로컬 ip주소를 넣으면 된다. www var app = require('../app').app; var debug = require('debug')('서버명:server'); var http = require('http'); //server ip const hostname = '아이피주소'; var port = normalizePort(process.env.PORT || '포트주소'); app.set('port', port); var server = http.createSer.. 공감수 1 댓글수 0 2021. 3. 30.
  • Node.js 서버 구축하기_2(서버 설계) 이전 포스트에서는 세팅을 했으므로 여기서는 서버를 코드의 구조에 대해서 알아보자. 대략적인 구조는 이렇다 사용자 Request -> App.js에서 요청에 맞는 라우터로 보냄 ->라우터에서는 요청에 맞는 컨트롤러(함수등)을 이용해response를 사용자에게 보낸다. 코드 예제를 통해 알아보자. App.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var indexRouter = require('./routes/index'); .. 공감수 0 댓글수 0 2021. 3. 30.
  • Node.js 서버 구축하기_1(세팅) 안드로이드에서 사용할 RestAPI 서버를 만들기위해서 Node.js를 사용했다. 했던 내용을 정리하고자 이 포스트를 쓴다. 우선 Node 를 받는다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node가 설치됐으면 Node 프레임워크인 Express를 사용해 기본 세팅을 만들자. npm install -g express-generator 프로젝트 생성 express 프로젝트명 --view=pug (pug은 jade의 다른 버전 명, 뒤의 --view를 사용하지 않으면 자동으로 jade로 설정되는데 이러면 npm install 과정에서 에러 발.. 공감수 0 댓글수 0 2021. 3. 30.
  • A RenderFlex overflowed by ~ pixels on the bottom. A RenderFlex overflowed by ~ pixels on the bottom. RenderFlex RenderFlex는 하위 항목을 1차원 배열로 표시하는 것을 의미한다. 위의 에러는 아래쪽에 ~ pixels의 RenderFlex가 넘쳤다는 것을 얘기하는 것인데, 말그대로 ui가 차지할 공간이 부족하다는 것이다. 해당 에러를 해결하기 위해서는 widget을 SingleChildScrollView로 감싸줘야한다. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being size.. 공감수 0 댓글수 0 2021. 2. 17.
  • Flutter 기본_isolate Isolate란? Isolate는 모든 Dart코드가 실행되는 곳임. 마치 기계안의 작은 공간에 메모리 덩어리가 있는 것임. 단일 스레드가 이벤트 루프를 실행하고 있는 것 Dart에서는 스레드가 메모리를 가진 채로 isolate에 있음. 그리고 이벤트만 처리함. 만약 계산이 많은 경우 isolate.spwan이나 flutter 계산 함수를 사용하면 됨. 둘 다 새로운 개별 isolate를 만들어서 이를 처리하기 때문에 main isolate에 부담을 주지 않음. 기존의 isolate에 새로운 isolate가 만들어지며, 각각 할당된 메모리에서 각각 고유의 이벤트 루프를 갖게 됨. 하지만 기존 isolate에서 새로운 isolate에 접근할 수 없음. 그래서 이름이 isolate임. isolate들을 함께.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_ListView2 이전 kimtaewookdeveloper.tistory.com/23의 ListView는 그냥 무한 스크롤만 가능한 리스트 뷰였다. 여기서 더 나아가 ListView에 하트 icon을 추가하고, 하트 icon이 눌린 item만 있는 화면도 만들어보자. 이전 ListView와 달라진 부분은 RandomWordSate클래스이다. _saved 변수는 하트 아이콘을 통해 누른 값들을 저장할 set이다.(set은 배열과 같지만, 순서가 없고, 중복된 값을 허용하지 않는다.) 먼저 _buildRow 위젯을 보자. _buildRow는 이전 글에도 써 있듯이 ListView의 각 행을 리턴해주는 위젯이다. 추가된 부분은 alreadySaved변수, trailing, onTap이다. alreadySaved 변수는 인자로 .. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_ListView ListView Flutter에서 ListView는 ListTile로 구성된다.(ListTile을 행이라고 생각하면 쉽다.) ListView 사용법 ListView를 사용하기 위해서는 ListView.builder의 속성중 하나인 itemBuilder를 사용해야한다. itemBuilder는 익명함수 형태의 콜백함수를 받으며, 인자는 BuildContext와 행 반복자인 i를 받는다. itemBuilder는 행 하나하나의 item을 구성하는 것이라고 생각하면 쉽다. 예시 위의 예시를 보면 ListView를 구현하는 코드는 RandomWordState 클래스 안에 있다. _suggestions는 WordPair로 구성된 배열이다. ListView를 리턴하는 위젯은 _buildSuggestions이다. _bu.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_StatefulWidget 사용해보기 StatefulWidget 사용해보기 StatefulWidget을 사용하기 위해서는 최소 2개 이상의 클래스가 필요하다. - StatefulWidget을 상속한 클래스 (StatefulWidget을 상속한 클래스는 변경이 불가능함.) - StatefulWidget을 상속한 클래스를 generic으로 한 State를 상속한 클래스 (State를 상속한 클래스가 위젯의 수명동안 상태를 유지함) 예시. - RandomWords 클래스가 StatefulWidget을 상속한 클래스 - RandomWordState 클래스가 State를 상속한 클래스 Flutter가 StatefulWidget을 빌드하면, 즉시 createState()가 호출된다. 즉, 해당 코드에서는 Flutter가 빌드되면, MyApp의 buil.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본 _ 위젯의 개념과 라이브러리 추가하기 위젯(Widget) - 위젯이란 현재 구성과 상태(State)에서 화면이 어떻게 보일지를 정의한 것 Material 모바일 및 웹에서 표준으로 사용되는 시각 디자인 언어 (android 개발자라면 material design을 떠올리면 쉽다.) - Scafford 위젯 트리를 구성하는 app bar, title, body 속성을 기본으로 제공 Material 라이브러리의 위젯 중 하나 라이브러리 추가하기 1. pubspec.yaml의 dependencies: 아래 라이브러리 추가 (flutter에서 의존성 및 asset관리는 pubspec.yaml이 담당한다.) 2. pubspec.yaml의 상단의 pub get(package get)을 누른다. 3. 파일에 라이브러리를 import한다. ex)impor.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_StatelessWidget과 StatefulWidget StatelessWidget - 이름 그대로 상태(State)를 갖지 않는 위젯 클래스 -> StatelessWidget 클래스 내부의 모든 UI 위젯들은 상태를 가질 수 없음 -> 상태가 없으니 상태의 변화를인지할 필요도 없고, 할 수도 없음 -> 그래서 화면이 생성될 때 한 번만 build 메서드를 호출해 화면을 구성한 후에는 build 함수가 다시 호출되지 않음 즉, StatelessWidget은 변화가 필요없는 화면을 구성할 때 사용하는 위젯 클래스이며, build 메서드는 한 번만 호출됨 StatefulWidget - 이름 그대로 상태(State)를 갖는 위젯 클래스 -> StatefulWidget 클래스 내부의 모든 UI 위젯들은 상태를 갖음. -> setState() - StatefulWid.. 공감수 0 댓글수 0 2021. 2. 15.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.