API 문서를 확인해보 응답코드와 데이터로 네스팅되어있는 구조로 되어었는 동일한 response dto 구조를 파악할 수 있었다. 따라서 매번 같은 구조를 반복해서 코드로 DTO를 선언하기보다 BaseResponse 모델을 만들어 선언해보기로 했다. 1. BaseResponseDto먼저 대부분의 API 응답은 아래와 같은 공통적인 구조를 가진 상황이다{ "code": 200, "data": { "id": 1, "phone": "1234567890", "email": "test@example.com", "name": "John Doe" }}이를 Flutter에서 BaseResponseDto 형태로 관리하면 모든 API 응답을 재사용할 수 있다 . 위와같이 공통구조를 짜주어 dto..
😭 인디케이터와 버튼 사이 간격이 조정되지 않는 이슈 Flutter의 PageView와 SmoothPageIndicator를 사용하여 온보딩 화면을 구현하던 중, 인디케이터와 버튼 사이의 간격을 줄이려고 해도 변경되지 않는 문제가 발생했다.Padding.only(bottom: 2)로 설정해도 간격이 줄어들지 않음.SafeArea를 감싸는 방식 변경에도 변화 없음.Column 내부 여백이 자동으로 추가되는 것으로 보임.🔍 원인 분석: Flutter의 Column 배치 방식과 SafeArea의 영향1. Column의 기본적인 배치 방식Column( children: [ Expanded(child: PageView(...)), // ✅ PageView가 확장됨 _buildPageIndicat..
특정 작업이 5초 이내에 완료되지 않으면 예외 처리하기예를 들어, 서버에서 데이터를 가져오는 작업이나, UI의 특정 이벤트가 발생할 때까지 기다리는 작업을 수행할 때 최대 대기 시간을 설정하고 싶을 수 있다. 이때 바로 Future.timeout을 사용해보자기본 사용법Future fetchDataWithTimeout() async { try { await Future.delayed(const Duration(seconds: 6)) // 6초 후에 완료 .timeout(const Duration(seconds: 5)); // 타임아웃 5초 설정 print('✅ 작업 성공'); } catch (e) { print('⏳ 작업이 5초 안에 완료되지 않음: $e'); }}위 코드..
Theme.of(context)의 내부 탐색 과정Flutter에서 Theme.of(context)는 BuildContext를 이용해 InheritedWidget을 검색하는해쉬테이블 방식으로 동작한다. Theme 위젯은 InheritedWidget을 확장한 형태로 존재한다. 📌 실제 내부 구현 방식 (Theme.of)static ThemeData of(BuildContext context) { final Theme? theme = context.dependOnInheritedWidgetOfExactType(); return theme?.data ?? ThemeData.fallback();}context.dependOnInheritedWidgetOfExactType() 메서드는 현재 BuildConte..
현재 백엔드 스프링부트의 테스트 서버를 배포중이다. 테스트용이기 때문에 일단 EC2에 띄워두긴 했는데 어쨋든 iOS와 통신을 위해선 HTTPS를 셋팅해둬야했다. HTTPS 설정방법은 크게 두가지이다. 1. Spring Boot 에서 SSL 인증서 사용 (Self-signed 또는 Let's Encrypt 인증서 사용)2. AWS ALB (Application Load Balancer) + ACM (AWS Certificate Manager) 사용 이번 프로젝트에서는 두번째 방법을 선택했다. 이유는 아래와 같다1. Spring Boot 에서 SSL 인증서 사용 (Self-signed 또는 Let's Encrypt 인증서 사용)01. Let's Encrypt 인증서 발급 (certbot certonly --..
😭 문제 발생MySQL 8.0 Community Server를 설치하는 과정에서 다음과 같은 오류가 발생했다. 에러로그를 읽어보니 GPG check failed 라고 나오는 것을 확인할 수 있었다.😆 문제 해결 GPG키란?GPG( GNU Privacy Guard ) 키는 소프트웨어 패키지의 무결성과 출처를 확인하는 데 사용되는 디지털 서명 및 암호화 시스템이다. 주로 리눅스에서 패키지를 설치할 때, 해당 패키지가 신뢰할 수 있는 소스에서 제공되었는지 검증하는 역할을 한다. GPG키 사용방법GPG키는 기본적으로 비대칭키 방식으로 동작한다. 01. 저장소(예: MySQL, PostgreSQL, Docker 등)에서 제공하는 공식 GPG 공개 키를 가져온다.sudo rpm --import https://r..
이전까지 State, Event, Entity, Dto 등의 모델을 선언할 때 모두 Freezed 패키지를 사용했다. 이유는 이곳에 정리해두었는데 요약하자면 아래와 같다. 1. 동등성 비교 (값을 기반으로 비교)2. 불변객체 모델링3. 패턴매칭4. Json 직렬화/역직렬화 기능5. copywith 기능 하지만 Freezed를 사용할 때마다 너무 치명적인 단점은 CodeGen이었다. 매번 사소한 변경이더라도 매번 codegen을 해주어 기다려야했고, 깃허브에도 코드젠 파일이 올라가면 나중에 컨플리트 나기도 해서 깃이그노어에도 등록해주는등 은근 귀찮게했다. 이러던 와중 2023년 5월 10일 Dart 3.0이 발표되면서 Sealed Class 가 추가되었다. Sealed 클래스란 네이밍 그대로 클래스들을..
🎨 What I Designed직접 구현안 버튼 바운싱 효과와 토스앱에 구현된 버튼 효과 비교 https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/10.dart flutter_ui_lab/lib/2025/02/10.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎 How I Made ItBoxShadow를 이용한 Shadow 효과이전 게시글에서 Bouncing 효과를 ShadowBox로 구현했었다. 하지만 이 방식은 마치 그림을 덧칠하듯이 Material 시스템..
🎨 What I Designedhttps://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/09.dart flutter_ui_lab/lib/2025/02/09.dart at main · suojae/flutter_ui_labContribute to suojae/flutter_ui_lab development by creating an account on GitHub.github.com🔎 How I Made It1. ValueNotifier를 통해 사용자의 탭을 감지하여 페이지를 이동하고 있다.2. FloatingActionButton은 위치를 따로 지정해주고 있다.3. BottomNavigationBar는 Stack을 활용해 상단 곡선을 그리고 덮..
