이미지 최적화를 직접 구현하는 이유지금까지 나는 구현에 집중해왔다. Flutter로 프로젝트를 진행하며 이미지 캐싱이나 압축이 필요할 때면 자연스럽게 검증된 외부 패키지를 가져다 썼다. 하지만 문득 이런 의문이 들었다."패키지 안에서는 어떤 일이 일어나고 있을까? 내 앱은 정말 최적화되어 있는 걸까?"라이브러리는 편리하지만, 내부 동작 원리를 모른 채 사용하면 lag이 발생했을 때 대응하기 어렵다. 특히 이미지는 모바일 앱 리소스 중 가장 큰 비중을 차지하며 비용(Firebase Storage)과 직관적으로 연결되는 부분이다. 그래서 나는 이번에 이미지 관련 모든 패키지를 걷어내고, 직접 최적화 엔진을 구축해보기로 했다.혹자는 이렇게 물을지도 모른다."패키지의 내부 로직을 잘 이해하고 사용하면 되는 거 ..

Memory Profiling이미지 최적화 기능을 직접 구축하기로 마음먹은 후, 가장 먼저 해야 할 일은 역설적으로 기능을 구현하는 것이 아니라 현재 상태를 측정하는 것이었다. 막연히 "패키지를 쓰지 않으니까 가벼워질 거야"라는 추측은 엔지니어로서 위험한 접근이기 때문이다. 이미지 압축 및 캐싱에 관련된 이야기는 다음에 작성해보겠다.프로파일링이 필요한 이유어떤 기술적 의사결정을 내렸을 때, 그 결과가 성공적이었음을 증명하려면 객관적인 지표가 필요하다. 특히 이번 이미지 최적화 작업은 다음 두 가지 지표를 개선하는 것이 핵심 목표다.메모리 점유율(Memory Footprint): 최적화 전, 무거운 패키지와 단순 메모리 캐시를 사용할 때의 RAM 사용량을 기록한다. 이후 직접 만든 LRU 기반 엔진이 이를..

플러터 엔지니어링 책을 읽게된 계기지금까지 모바일 개발을 진행하면서 책을 읽으면 개발을 진행한 경험이 많이 없다.공식문서와 블로그, AI 등 인터넷에서 개발 관련 자료들을 찾아 학습하였고 그것을 개발에 대입하였다.하지만 플러터라는 프레임워크에 대해서 깊게 들어가본 경험이 없다고 생각한다.이런 부분의 아쉬움을 달래기 위해 플러터 엔지니어링이라는 책을 구매하였다.중급자를 위한 책이며, 아키텍처와 엔지니어링에 초점을 맞춰져 있는 책이다.또한, 애플리케이션 개발 생명주기(LIfe-Cycle), 아키텍처, 설계, 보안 테스트, CI/CD, Native 연동 방식, 위젯 구성 원리등 초급자가 어려울만한 내용들을 주제로 다루고 있다.이 책의 대상 독자는책의 첫부분을 보면 작가와 번역가들의 말이 나온다.그 내용은 플러..

Repository Pattern 학습학습하려는 이유현재 Flutter로 개발 중인 프로젝트 ‘풀밭’은 현재 Firebase의 Cloud Firestore를 활용해 클라이언트와 서버 간 데이터 송수신 및 저장을 담당하고 있다.위 이미지는 플러터 공식 문서에 있는 MVVM 아키텍처이고 아래는 풀밭의 아키텍처이다.[View] [ViewModel] [Repository] [Service (Firebase)]풀밭에서는 User, Notice, Recruit, Post, Campus 등 다양한 데이터베이스 컬렉션을 사용하며, 이에 따라 여러 개의 store를 다루는 코드가 구현되어 있다.하지만 만약 추후에 Firebase가 아닌 AWS, Supabase 등 다른 백엔드 서비스로 데이터 소스를 변경해야 하는 ..

Progress 사용 이유프로젝트(풀밭)에서 네트워크 통신을 하거나 혹은 시간이 걸리는 기능을 실행할 때 언제 기능이 종료되는지 모르기 때문에 만약 아무런 반응도 보여주지 않으면 사용자는 애플리케이션이 렉이 걸렸거나 혹은 기능 실행이 안되고 있다고 판단할 것이다. 그러면 유저의 입장에서는 좋지 않은 경험을 받기에 어플에 대한 안좋은 감정을 갖게 된다.그렇다면 시간이 소요되는 작업을 할 때 어떠한 반응을 보여줘야 하냐면 우리가 흔히 볼 수 있는 로딩창 즉, progress를 보여주면 된다.Progress 화면Fluttter에는 CircularProgressIndicator가 존재한다.이것을 사용하여 Data가 Loading 상황일때 CircularProgressIndicator를 보여주면 유저에게 현재 기..

Onboarding 화면지난 번에는 Riverpod의 공식문서를 보며 Riverpod 예제에 대해서 공부했다.이번에는 직접 구현하면서 개인 프로젝트에 적용했다.프로젝트의 OnboardingView를 보면 아래와 같이 기획을 하였다.왼쪽은 화면(UI)이고 오른쪽은 화면은 각 위젯(widget)에 대한 기능 설명이다.시작하기 버튼은 course와 campus에 초기값이 아닌 다른 값이 들어가면 활성화되면서 색이 변경된다.Data State Management(campus)그러면 나는 저번에 배운 Data State management Tool인 Riverpod을 사용하여 Data 상태관리를 해보겠다.final campusProvider = StateNotifierProvider( (ref) => Campu..

Performing side effects이전 글에서는 provider로 네트워크 요청 하는 방법을 학습하였다.GET HTTP 요청만 사용해서 개발을 하였는데 POST 요청과 같은 side-effect가 발생하는 경우는 어떻게 처리할지 학습해보겠습니다.일반적으로 업데이트 요청은 로컬 캐시를 업데이트 해야 한다.로컬 캐시도 업데이트하여 UI에 새 상태가 반영되도록 하는 것이 일반적이다.conusmer내에서 provider의 상태(state)를 어떻게 업데이트 할 수 있는지 알아보자.Notifier 정의하기간단한 GET API 요청을 통해 알아보자.아래 코드는 할일 목록을 가져오는 코드이다.@riverpodFuture> todoList(Ref ref) async { // 네트워크 요청을 시뮬레이션합니다. ..

[Flutter] RiverPod 학습지난 시간에 데이터 상태관리(Data State Management)에 대해 학습을 해봤다.선언형 UI와 명령형 UI의 차이점, Flutter에서 데이터 상태관리하는 방법, 데이터 상태 관리 도구(Data State management Tool)를 사용하는 이유 등그러면 이제 RiverPod에 대해 학습해보자.RiverPod의 공식문서를 보면 필수 사항등이 있다.첫 번째 provider/네트워크 요청 만들기부가 작업 수행(Performing side effects)요청에 인자 전달하기웹소켓 및 동기 실행요청 결합하기캐시 지우기 및 상태 폐기(disposal)에 반응하기providers의 빠른 초기화(Eager initialization)providers 테스트하기로깅..

RiverPod 학습 이유오늘은 개인 프로젝트에서 RiverPod을 사용하여 데이터 상태관리하는 방법을 학습하려고 한다.왜 많은 데이터 상태 관리하는 방법 중 RiverPod인가? 거창한 이유는 없다.나는 프레임워크(SwiftUI , Flutter) 개발을 하였지만 데이터 상태관리에 대한 식견이 부족하다.그래서 솔직히 다른 개발자분들이 말씀하시는 “어떤 상태관리 패키지(혹은 라이브러리)는 무엇이 좋다.” 혹은 “무엇이 별로다” 이야기는 내가 경험해봐야 이해할 수 있다고 생각한다.그리고 회사마다 자격요건에 상태관리 툴도 모두 다르다. 하지만 데이터 상태관리 툴 하나를 깊게 공부하였다면 다른 상태관리를 쉽게 학습할 수 있을 것이다.데이터 상태관리 툴RiverPod을 바로 학습하기전에 Data State To..

[Flutter] Result Pattern 적용하기오늘은 저번에 학습하였던 Result Pattern을 실제로 내 프로젝트에 적용시켜서 카카오 로그인과 애플 로그인의 Error Handling을 진행해보겠다.우선 어떻게 동작하는지 흐름을 정리해봤다위에 Flow를 보면 View → ViewModel → Repository → Service의 패턴을 따르는 것을 확인할 수 있다.LoginView에서 간편 로그인 버튼을 누르게 되면 LoginViewModel에 있는 Result 타입을 반환하는 함수가 실행이 된다.성공시 Router가 변경이 되고 Home으로 이동된다.실패시 Result안에 ErrorMessage가 담기게 되고 그것을 출력하거나 화면에 표시할 수 있다.LoginViewModel에 있는 함수가..

개인 프로젝트에서 모든 로그인 인증 방법은 구현이 완료되었다~! 😁그렇다면 바로 CRUD 기능을 개발하고 데이터 상태관리를 하면 될까?물론 해도 되지만 프로젝트에서 외부와 통신을 하는 경우에는 빠질 수 없는 작업이 있다.바로 Error Handling(예외 처리)이다.Application을 실행하여 외부와 통신을 하면 사용자가 잘못된 입력을 할 수도 있고, 네트워크 요청이 실패할 수도 있으며, 어딘가에서 문제가 발생할 수도 있다.그럴때 예외처리는 코드에서 발생할 수 있는 잠재적 오류를 처리하여 앱이 문제없이 작동되도록 해주는 것..!그러면 Flutter에서는 어떻게 예외 처리를 할 수 있는지 알아보겠다.Exception Handling with try/catch in Dart and Flutter예를 ..

간편 로그인 구현하기(Apple🍎)저번 시간에는 Flutter에서 카카오 간편 로그인을 구현하는 방법과 Firebase Auth에 카카오를 연동하는 방법을 학습해봤습니다. 이번에는 Apple 로그인을 구현해보고 Firebase Auth에 등록해주겠습니다.Firebase 인증 제공업체 추가하기제일 먼저 파이어베이스 프로젝트에 들어가서 인증 제공업체를 추가하겠습니다.아래 이미지를 보시면 저번에 했던 kakao, Apple, 익명이 등록된 것을 볼 수 있다.그리고 Apple 로그인 방법을 등록할 때 아래 처럼 사용 설정 버튼을 활성화 해주고 맨 아래 승인 콜백 URL을 복사하면 됩니다.이러면 파이어베이스에서 필요한 작업은 끝났습니다.Apple Identifier 등록아쉽게도 애플 로그인을 사용하려면 애플 개..

개인 프로젝트의 기획에는 간편 로그인 기능이 있다.일단 Firebase 프로젝트는 생성하였다고 가정하에 진행한다.카카오 로그인과 애플 로그인 기능이 있는데 Firebase를 이용하여 간편 로그인을 구현할 것 이기에 오늘은 Firebase와 kakao 설정부터 알아보자.Kakao 프로젝트 생성일단 카카오 간편 로그인을 하려면 Kakao developers에서 애플리케이션을 추가해야 한다.들어가서 추가해주자. 나는 “풀밭”이란 프로젝트를 추가했다.내 애플리케이션 > 앱 설정 > 플랫폼에서 안드로이드는 패키지명과 키 해시를 추가해주고 iOS는 번들ID를 지정해주면 된다.키 해시는 인증서값으로 악성앱인지 판별하는데 사용 된다. 그리고 패키지명과 번들 ID는 프로젝트내에서 같은 값을 지정해줘야 한다.안드로이드 플..

안녕하세요 오늘은 이전 디자인 시스템 개발 작업에서 적용했던 부분 중에 잘못된 부분이 있어 리팩토링 하였습니다.이 트러블 슈팅을 어떻게 해결하였는지 작성해보겠습니다.이전에는 AppColorsTheme().gfBlackColor를 사용하여 색을 정해주었는데 이 객체가 같은 주소를 참조하는 객체가 아니 다른 주소를 참조하는 객체를 계속 생성하여 사용했던 문제였습니다.객체를 복사하여 사용리팩토링 되기 전 코드에서는 AppColorsTheme()를 사용하여 AppColorsTheme()안에 있는 색을 사용했습니다.HomeView UI와 NoticeView UI가 그려질 때 마다 주소값을 출력해보겠습니다. final appColor = AppColorsTheme(); final appColor2 = A..

플러터로 개인 프로젝트를 개발 중에 있는 상황입니다.추후 채팅 작업이 들어갈 화면 이외의 모든 화면의 UI 작업을 완료한 상황입니다.그래서 Navigation을 연결하는 작업을 진행하였습니다!Go_router를 사용하여 URL Router 연결 작업을 정리 하고 한 번 더 학습하기 위해서 글을 작성합니다! 👍기존 UI Design 작업을 진행하면서 간단한 push 방식과 List를 활용하여 Navigation 연결을 진행하였습니다. 하지만 push 방식은 multi platform 지원이 완벽하지 않는 상황이고 다양한 상황에 대처할 수 있고 딥링크에도 URL path형식이 더 알맞다고 생각하여 GoRouter를 사용하였습니다..Push & PopGo 방식을 알아보기전에 기존에 사용했던 Push 와 Po..