앱의 폴더구조란, 앱이 어떤 아키텍쳐 혹은 디자인 패턴을 표방하고 있는지 가장 잘 볼 수 있는 곳이라고 생각한다. 처음에 내 폴더 구조는 이랬다.앱 폴더 구조lib/│├── core/ # 비즈니스 로직, 데이터 관리│ ├── models/ # 데이터 모델 클래스들│ ├── services/ # 외부 API, 데이터베이스 서비스│├── ui/ # 화면 관련 코드│ ├── view/ # 화면 UI 구성│ ├── widgets/ # 공통으로 사용하는 위젯│ ├── viewModel/ # UI와 비즈니스..

이번 프로젝트(리를 가디언) 에서는 DI(Dependency Injection)를 사용해 더 효율적으로 프로젝트를 관리하려고 한다. Firebase가 시그널링 서버로서 작동하지 않을 경우를 대비하고, 앱이 커질 때도 유연하게 대처하기 위해서다. 먼저 간단한 용어설명을 하겠다DI란?DI는 객체들이 서로 의존하지 않고, 외부에서 필요한 객체를 주입하는 방식이다.이를 통해 코드의 결합도를 낮추고, 변경이나 확장이 용이해진다.DI를 사용하는 이유확장성: 앱이 커지거나 다른 서비스로 교체될 때, 코드를 쉽게 수정할 수 있다.테스트 용이성: 의존성 주입으로 Mock 객체를 사용해 테스트를 독립적으로 진행할 수 있다.유지보수성: 객체 간의 강한 결합을 피하고, 코드를 모듈화하여 관리하기 쉽다.흠... 다음과 같은 설..

내가 쓰는 모델 중에 fromMap 이라는 코드가 있다. Map 데이터를 객체로 변환하는데, 이게 무슨말일까? fromMap은 Map형식의 데이터를 객체로 바꿔주는 함수다. Map은 key와 value로 데이터를 저장하는 방식인데, fromMap은 이 데이터를 클래스에 맞게 변환해준다.예를 들어, 서버에서 받은 아이의 정보가 아래처럼 있다면:{ 'id': '123', 'name': '아이 이름', 'photoUrl': 'https://photo.com' }fromMap을 사용해 이 데이터를 Child라는 객체로 변환하고, 그 후에는 child.name, child.id 로 접근해 데이터를 쉽게 사용할 수 있게 된다. 코드를 보며 사용해보자.- models/child.dart class Child { f..

WebRTC의 주요 개념을 쉽게 설명하자면Peer-to-Peer 연결: 두 디바이스가 서버 없이 직접 통신할 수 있게 해준다. 음성, 영상, 데이터 등을 주고받을 수 있다.ICE (Interactive Connectivity Establishment): 최적의 경로를 찾기 위한 프로토콜이다. 디바이스가 서로 연결될 수 있도록 공유 가능한 네트워크 경로를 탐색한다.SDP (Session Description Protocol): 두 디바이스가 어떤 미디어를 주고받을지 약속하는 정보다. 연결 세부 정보(코덱, 포트 등)를 담고 있다.Signaling (시그널링): 서로 연결하기 전에 SDP와 ICE 정보를 교환하는 단계다. WebRTC는 시그널링 서버를 통해 이 데이터를 주고받는다.STUN/TURN 서버: 네..

Provider란?Provider는 상태 관리를 쉽게 하게 해준다. 여러 화면에서 같은 상태를 공유할 수 있고, 상태가 변경되면 UI를 자동으로 업데이트한다.class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); // 상태 변경 알림 }}ChangeNotifier상태가 변경될 때 UI에 알림을 보내 다시 그리도록 한다.class MyModel extends ChangeNotifier { int value = 0; void increment() { value++; notifyListeners(); // U..

Flutter에서 AnimatedContainer 사용법: 애니메이션을 쉽게 구현하는 방법Flutter에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 그러나 복잡한 애니메이션 코드를 작성하는 것은 때로 부담스러울 수 있습니다. 이때, AnimatedContainer는 애니메이션을 간편하게 구현할 수 있는 매우 강력한 위젯입니다. 이번 글에서는 AnimatedContainer를 사용해 상태 변화를 부드럽게 처리하는 방법을 알아보겠습니다.AnimatedContainer란?AnimatedContainer는 Flutter에서 상태 변화에 따라 Container의 속성들을 자동으로 애니메이션화해주는 위젯입니다. 일반적인 Container와 비슷하지만, 속성 값이 변경될 때마다 그 변화가 애..

버튼을 클릭하고 해당 버튼이 동작함으로써 나 동작하고 있다 ! 라고 유저한테 알려줄 수 있는 방법이 무엇일까 고민해보니 애니메이션! 이 있었습니다. 이 경우 뿐만이 아니라 앱 내에서 애니메이션을 잘 사용하면 사용자 경험을 좋게 만들어 줄 수 있죠~ 애니메이션을 가장 쉽게 구현할 수 있는 방법 중 하나는 Lottie를 이용하는 것인데요. 한 번 천천히 알아보도록 합시다  제가 Lottie로 구현한 화면은 이렇습니다 로띠에는 굉장히 다양한 애니메이션이 있습니다. (+무료로 사용 가능하죠)https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공..

Colors.pink[100]을 mainColor로 설정해주려고하다가 다음과 같은 문구를 발견했다.엥 왜지? 이미 있는 값을 상수값으로 넣어주는건데 왜.라고 생각했지만  MaterialColor 객체에서 인덱싱[]을 통해 색상을 가져오는 과정은 런타임에 하는 것이었다. 왜냐면 일반적으로 인덱싱은 해당 데이터의 구조나 상태에 따라 달라지기 때문에 런타임에 결정이 되는 것이라고.... 이미 const로 정의된 List가 아닌 이상,, 런타임에 정의된다고 한다....  그래서 해결방법은, 런타임 상수인 final로 값을 결정해주거나 const로 쓸거면 이렇게 지정해주기이다.

스유를 UIkit 보다 좋아하는 이유는 딱 하나였다.내가 만든 화면이 옆에 시뮬레이터로 바로 로드돼서 떴다반대로 UIkit으로 만들 때면 항상 run버튼을 누르고 시뮬레이터를 돌려줘야했다. 앱을 만들면 만들수록 기다리는 시간도 길어지고, 컴포넌트 하나 만들때마다 시뮬레이터 돌리기가 매우 불편하고 괴로웠던 기억이 있다. 🤢 그런데 플러터는 핫 리로드라는 기능 덕에 일단 시뮬레이터를 켜놓고 컨트롤 + s 만 누르면 바로바로 반영이 된다. 흐흐흐 나는 코드만 우다다닥 치는 것 보다 화면이 그려지는게 눈에 보여야 더 집중이 잘 된다.내 코드가 반영되는게 눈에 바로 보이니까 그런듯 하다. 아주아주 특별한 기능 아닌가? 내 코드로 화면 구성이 변화되는걸 바로바로 볼 수 있다니! ~.~(심지어 스유 프리뷰보다 빠르..