조준장 개발자 생존기

이전까지 모두 Room을 통해 MVVM 패턴을 구현해보았는데 이번에는 외부 백엔드와 연결하여 MVVM 패턴을 구현해보도록 하자. Retrofit을 통해 BE와 연결 후 데이터를 가져오는 게시판 예제이다. 비동기 작업은 Corutine을 사용하였고 자세한 내용과 공부한 내용은 주석을 달아 놓았다. Retrofit에 대해 잘 모른다면 다음 링크를 통해 알아보고 온 후에 아래 내용을 보면 이해가 더욱 쉬울 것으로 예상한다. [kotlin] 코틀린 Android Retrofit 활용(기상청단기예보 오픈 API 사용) Retofit이란? 이번에는 Retofit 라이브러리를 이용하여 기상청 단기예보 오픈 API와 통신하는 방법에 대해서 알아보도록 하자. Retofit이란 모바일에서 HTTP API 통신을 할 때 사..

RecyclerView를 구현할 때 Item이 카운트 되지 않아 똑같은 데이터를 부르거나 item을 재사용 하지 않는 오류가 종종 발생한다. 예를 들어 item의 갯수는 10개지만 처음에 화면에 보이는 item이 4개라서 4개의 뷰만 계속해서 화면에 뿌리는 것이다. 이러한 현상이 발생하는 이유는 RecyclerView의 재사용이다. RecyclerView는 리소스를 아끼기 위해 뷰를 재사용한다. 그래서 재사용을 막기 방법을 쓰기도 하는데 그러면 RecyclerView의 목적이 손실되므로 권장하는 방식이 아니다. 해결 방법은 다음과 같다. RecyclerView Adapter에 다음 메소드를 오버라이드 하는 것이다. override fun getItemViewType(position: Int): Int {..

Retofit이란? 이번에는 Retofit 라이브러리를 이용하여 기상청 단기예보 오픈 API와 통신하는 방법에 대해서 알아보도록 하자. Retofit이란 모바일에서 HTTP API 통신을 할 때 사용하는 라이브러리이다. 안드로이드 애플리케이션에서 통신 기능에 사용하는 코드를 사용하기 쉽게 만들어놓은 라이브러리로 REST 기반의 웹서비스를 통해 JSON 구조를 쉽게 가져오고 업로드할 수 있다. 다음에 나올 코드를 보다 보면 기상청 단기예보 오픈 API Key가 숨겨진 것을 확인할 수 있는데 API Key 숨기는 법을 모른다면 다음 링크를 통해서 글을 읽어보고 오면 좋을 것 같다. [kotlin] 코틀린 Android local.properties에 API Key 숨기고 활용하는 방법 이번에는 local.p..

이번에는 local.properties에 API Key를 숨기고 활용하는 방법에 대해서 알아보자. 개발하다 보면 많은 API Key를 사용하게 되는데, 이런 많은 Key를 가지고 Git이나 오픈되어 있는 공간에서 작업을 하다 보면 Key가 노출되어 악용될 위험이 있다. 이럴 때를 대비해서 Key를 숨기고 활용하는 방법에 대해서 알면 참 좋을 것 같다! local.properties 우선 local.properties 자신이 숨기고픈 Key를 입력한다. # api url url.weather="xxxxxx" # api key api.key="xxxxxx" # kakao map rest api key kakao.map.rest.api.key = "xxxxxx" 입력을 했다면 build.gradle(Modul..

이번에는 Hero 애니메이션에 대해 알아보자. Hero 애니메이션은 tag로 연결된 image를 다른 화면에 띄어주는 위젯이다. 이미지를 확대하여 보거나 특정한 위젯을 따로 보고 싶을 때 사용하면 유용할 것 같다. 코드 import 'package:flutter/material.dart'; class HeroScreen extends StatefulWidget { const HeroScreen({Key? key}) : super(key: key); @override _HeroScreenState createState() => _HeroScreenState(); } class _HeroScreenState extends State { @override Widget build(BuildContext cont..

이번에는 AnimatedBuilder 애니메이션을 구현해보자. 코드 import 'package:flutter/material.dart'; import 'dart:math' as math; class AnimatedBuilderScreen extends StatefulWidget { const AnimatedBuilderScreen({Key? key}) : super(key: key); @override _AnimatedBuilderScreenState createState() => _AnimatedBuilderScreenState(); } // TickerProviderStateMixin은 매 프레임마다 함수를 호출하는 객체인데 // 프레임이 변화되어야 할 때 알려주는 거라고 한다. class _Ani..

이번에는 Slivers 애니메이션 효과에 대해서 알아보도록 하자. Slivers는 화면 헤더를 동적으로 표현하고 헤더를 위로 스크롤했을 때, 헤더 하단 부분이 나오는 애니메이션이다. 당근 마켓, 번개장터 등 게시물이 있는 UI를 생각하면 이해하기 쉬울 것 같다. 코드를 작성하기 전에 간단하게 알아보면 CustomScrollView를 통해 body를 감싸게 된다. 그냥 Sliver를 사용하기 위한 ScrollView라고 생각하면 좋을 것 같다. CustomScrollView 안에는 SliverAppBar와 다양한 Sliver 위젯이 들어간다. SliverAppBar는 헤더 부분이 되고 Sliver 위젯은 헤더 하단 부분이 된다. 그럼 코드를 작성하면서 구현해보자. 코드 import 'package:flut..

이번에는 Flutter와 Firebase를 연동해보려고 한다. 연동하기 전에 Firebase에 대해서 간단하게 알아보자. FIrebase란? Firebase는 백엔드 서비스라고 생각하면 이해하기 쉬울 것이라고 생각하고 flutter와 쉽고 간편하게 연동되며 여러 가지 기능을 제공하고 있다. 우선 간단히 빌드를 살펴보면 6개의 기능을 제공하고 있다. Authentication 서버 기반의 서비스를 제공하는 앱이라면 사용자의 가입과 로그인 기능이 필수인데, Firebase에서는 이 기능을 제공하고 있어서 직접 구현할 필요가 없다. google, facebook, twitter, github와 제휴되어서 각각의 계정으로 로그인 인증을 제공한다. kakao와 naver도 가능하다고 알고 있다. Database(..

이전에 image_picker 패키지를 통해 카메라를 구현해보았다. [Flutter] 플러터 image_picker 패키지를 통해 카메라 구현 이번에는 Flutter에서 카메라를 구현해보려고 했다. 카메라 구현을 위해 여러 패키지를 알아보았지만 UI 커스터마이징은 불가능한 것으로 보였고 다른 분들에 오픈 소스 코드도 확인해보았지만 fre2-dom.tistory.com 이번에는 이전에 만든 image_picker 패키지를 가지고 tflite를 활용하여 이미지 분류를 하는 앱을 만들어보려고 한다. tflite(TensorFlow Lite) tflite를 알기 위해서는 우선 TensorFlow부터 알아야 한다. TensorFlow는 인간이 사용하는 학습 및 추론과 유사한 패턴과 상관관계를 감지하고 해독할 수 ..

이번에는 Flutter에서 카메라를 구현해보려고 했다. 카메라 구현을 위해 여러 패키지를 알아보았지만 UI 커스터마이징은 불가능한 것으로 보였고 다른 분들에 오픈 소스 코드도 확인해보았지만 앱을 재실행 시 카메라 구현이 안 되는 버그가 있어 보였다. 그중에서 image_picker 패키지는 다른 패키지보다 비교적 구현이 쉬웠고 버그도 없는 것으로 판단되어 image_picker 패키지를 통해 카메라를 구현해보려고 한다. 라이브러리 image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev..