Frontend

Flutter BLOC 기반의 Widget Test

BLOC 패턴을 적용하면 가독성있는 테스트 코드를 작성할 수 있다. 특히 각각의 BLOC 단위 테스트 말고도 BLOC과 상호작용하는 위젯을 테스트하는 코드도 깔끔하게 작성할 수 있다. 이 문서에서는 BLOC 패턴이 적용된 페이지 위젯을 테스트하는 위젯 테스트에 대하여 알아본다. 편의상 Bloc 대신 Cubit을 활용하였다. 위젯 테스트란? 화면에 그려진 위젯에 대하여 클릭이나 스크롤과 같은 이벤트가 발생했을 때 원하는 결과가 발생하는 지 확인하는 테스트. 예를 들어 로그인 버튼을 눌렀을 때 로그인 요청이 발생하는지 테스트하려면 앱을 켜서 직접 눌러보아야 하는데, 매번 사람이 테스트 할 수 없으니 코드 레벨에서 테스트 하여 결과값을 보장받는 것이다. 위젯 테스트는 단위 테스트보다 포괄적인 테스트를 수행한다..

Swift UI - Observable Object로 이벤트 프로그래밍

기존에 UIKit에서 화면 데이터의 값이 변경되었을 때 rxSwift를 통해서 변경을 감지하고 View를 갱신해주었습니다. SwiftUI도 마찬가지로 데이터 변경을 감지하고 View를 갱신할 수 있도록 하는 Combine 프레임워크가 있습니다. Combine 프레임워크는 iOS 13 이상부터 사용 가능합니다. Combine 프레임워크의 ObservableObject 는 아주 쉽게 여러분들의 데이터가 변경될 때마다 View를 갱신하는 코드를 작성하게 도와줍니다. 가볍게 ObservableObject 이 뭔지 알아보고 실제로 어떻게 사용하는지 예시 코드를 보겠습니다. ObservableObject ObservableObject 는 Combine 프레임워크에 포함된 Publisher입니다. Observable..

swift ui - navigation 활용하기

Swift UI에서 Navigation을 하려면 NavigationView 를 사용해야 한다. Swift UI라고 해서 기존에 없던 기능이 제공되는 것은 아니고 기존의 UI Kit의 네비게이션 시스템을 View로 다룰 수 있게 해놓은 것이다. iOS 버전이 증가하면서 부족했던 네비게이션 기능들이 추가되고 있으므로 업데이트를 항시 확인해주어야 한다. iOS 16부터는 NavigationStack 을 사용하는 것이 권장사항이다. 아직 16버전을 타겟하는 것은 이르기 때문에 iOS 17정도 나왔을 때 마이그레이션을 고민해본다. NavigationView NavigationView는 하나의 View Stack을 만들어주고 관리할 수 있게 한다. 사용법은 매우 간단하다. NavigationView 안에 페이지 뷰..

플러터 싱글턴 구현하기

이 문서에서는 플러터에서 싱글턴을 구현하는 방법에 대해 알아봅니다. Class 이름 활용하기 싱글톤으로 만들고 싶은 클래스에 다음과 같이 코드를 작성합니다. class Database { static final Database _instance = Database._internal(); factory Database() => _instance; Database._internal(); } 위와 같이 작성하면 코드 어디에서든 ClassName()로 싱글톤 객체에 접근할 수 있게 됩니다. Database().getSomthing(); 공유 객체 생성하기 공유 객체를 정적으로 하나 선언하고 다른 객체를 만들지 못하도록 생성자를 private 선언합니다. class Database { static final sh..

플러터 원격 저장소 패키지 의존성 추가하기

Flutter 공식 패키지 저장소 pub.dev에 있는 패키지가 아닌 원격 저장소 (Git, Bitbucket ...)에 있는 패키지의 특정 버전을 사용하는 방법 Github 프로젝트 타겟팅 dependencies: package_you_want: git: url: ref: 9f90296751984b359937c38563da5b19db5550f5 Bitbucket 프로젝트 타겟팅 앱 프로젝트에 빗버킷에 올린 ollacare_app_theme 패키지 의존성을 추가하려면 다음과 같이 작성합니다. dependencies: ollacare_app_theme: git: url: git@bitbucket.org:blueant_git/ollacare_app_theme.git ref: master 원격 저장소의 특정 ..

flutter 특정 원격 저장소 패키지 의존성 추가하기

목표 Flutter 공식 패키지 저장소 pub.dev에 있는 패키지가 아닌 원격 저장소 (Git, Bitbucket ...)에 있는 패키지의 특정 버전을 사용 Github 프로젝트 타겟팅 dependencies: package_you_want: git: url: ref: 9f90296751984b359937c38563da5b19db5550f5Bitbucket 프로젝트 타겟팅 앱 프로젝트에 빗버킷에 올린 ollacare_app_theme 패키지 의존성을 추가하려면 다음과 같이 작성합니다. dependencies: ollacare_app_theme: git: url: git@bitbucket.org:blueant_git/ollacare_app_theme.git ref: master원격 저장소의 특정 경로 패..

플러터 앱 oAuth 간편 로그인을 직접 구현해보기

이 글에서는 플러터 앱과 백엔드 서버가 oAuth 로그인을 통하여 회원가입을 하는 과정에 대해서 알아봅니다. 예시로 애플 로그인을 언급하고 있지만, 내용 자체는 카카오, 페이스북, 구글과 일치합니다. 배경 회사에서 개발중인 플러터 앱에 간편 로그인 기능을 사용하기로 결정하였습니다. 기존 개발할 때 파이어베이스 서비스를 이용하여 간편 로그인을 구현하였는데, 이번에는 자체 서버가 있기 때문에 oAuth 로그인 규약에 맞춰 개발을 진행해야 했습니다. 개발을 진행하면서 알게된 점, 특징들을 공유하고자 이런 글을 남깁니다. 이 글에서는 애플 로그인을 통하여 서버에 계정을 생성하기까지의 과정을 알아보도록 하겠습니다. oAuth 로그인이란 oAuth 로그인이란 쉽게 생각해서 새로운 서비스를 이용하기 위해 기존에 이용..

Swift | lazy property에 대해 알아보자

Lazy Property Lazy Property는 Property의 종류 중 하나입니다. 사용하는 데에 소모되는 비용이 큰 프로퍼티를 Lazy Property로 사용하면 비용 절감의 효과를 누릴 수 있습니다. 예를 들어서 다음과 같은 클로저 프로퍼티가 있다고 가정해보겠습니다. class MyClass{ var myProperty: Int = { // 비싼 연산 수행 } } MyClass의 인스턴스가 생성될 때마다 myProperty 프로퍼티가 할당되야 하고 클로저 내부의 비싼 연산이 수행될 것입니다. 물론 비싼 비용으로 만든 이 프로퍼티를 사용해야만 한다면 어쩔 수 없이 비용을 감수해야겠지만, 실제로는 이 프로퍼티가 사용되지 않을 수도 있습니다. 만약 사용되지 않을 경우 기껏 비용을 들여 프로퍼티를 만..

플러터 JSON 사용 방법 | the way of using json in Flutter

안녕하세요! 개발자 베베입니다. 이번 포스팅에서는 플러터에서 json 데이터를 다루는 가장 확실한 방법에 대해서 알아보도록 하겠습니다. 시작하기 전에 json이 뭔지 간단하게 알아보도록 할게요! JSON이 뭐지? json은 Javascript Object Notation의 축약어이며, 데이터를 저장 및 전송할 때 데이터 형식으로 자주 사용됩니다. 이름에서 알 수 있듯이 json은 자바스크립트의 객체를 표현하는 형식을 기반으로 만들어졌습니다. 다만 자바스크립트에서는 객체를 표현했다면 json에서는 데이터를 표현한다는 거죠. json은 이렇게 생겼습니다. { "users": [ { "name": "lee", "age": 32 }, { "name": "bebe", "age": 26 } ] } Json 디코딩 ..

플러터 앱에 스플래시 화면을 구현해보자

목표 페이지를 통한 스플래쉬 화면이 아닌 네이티브 스플래쉬 화면을 설정한다. 과정 네이티브 스플래쉬 화면을 구성하려면 각 플랫폼의 디렉터리에서 스플래쉬 화면에 관한 설정을 해주어야 하는데, 꽤나 번거로운 일이기 때문에 이 글에서는 패키지를 통해 네이티브 스플래쉬 화면을 두 플랫폼 한 번에 설정하는 방법에 대해 알아본다. 아래 패키지를 사용할 것이다. flutter_native_splash | Dart Package Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image. pub.dev 플러터 프..