본문 바로가기

전체 글

Dart 프로그래밍에서의 애노테이션(Annotations) Annotation.. 최근까지는 어노테이션이라고 많이 읽었는데 영문으로 된 유튜브를 볼 때 거의 애노테이션으로 발음하는 것 같아 애노테이션으로 명기하기로 했다. Annotation이란?애노테이션은 클래스, 함수, 변수 등 다양한 코드 요소에 추가적인 정보를 제공하는 메타데이터이다. Dart에서는 @ 기호를 사용하여 애노테이션을 표시하며, 이는 컴파일타임 상수(const)로 정의된 값이어야 한다.class Parent { void doSomething() { print('Doing something in Parent'); }}class Child extends Parent { @override void doSomething() { print('Doing something in Child.. 더보기
Flutter에서 Key의 역할과 중요성 Flutter에서 Key는 위젯, 요소(Element), 그리고 시맨틱 노드(Semantic Node)를 식별하는 데 사용되는 고유 식별자이다. Key는 위젯 트리가 재구성될 때 기존 상태와 연결 관계를 유지하는 데 중요한 역할을 한다. 이번 블로그에서는 Key의 개념, 사용 시점, 작동 원리, 그리고 다양한 Key 유형에 대해 정리해보도록 한다. Key란 무엇인가?Key의 역할: Key는 위젯이 트리에서 이동할 때 상태를 유지하도록 돕는다. 동일한 부모 아래에 있는 위젯들 간에 고유해야 하며, Key가 동일한 경우에만 기존 요소(Element)가 업데이트된다.필요성: 동일한 유형의 여러 위젯이 있는 경우, Flutter는 어떤 위젯이 어떤 데이터와 상태를 가지는지 구분할 수 있어야 하는데, 이 때 Ke.. 더보기
Flutter MVVM 구조 (Officially recommended by Google) 구글이 Flutter 앱 개발을 위한 MVVM(Model-View-ViewModel) 아키텍처를 공식적으로 권장한다고 발표했다. 이 발표는 현대적이고 유지보수가 용이하며 확장 가능한 애플리케이션을 구축하는 데 있어 MVVM의 중요성을 다시 한번 확인시켜주는 중요한 순간으로 평가되고 있다. 구글의 MVVM 아키텍처 공식 권장은 2024년 7월 11일, Flutter 3.27 버전 출시와 함께 발표되었습니다. 이번 블로그에서는 MVVM이 인기를 얻고 있는 이유를 알아보고, 기본 사항을 분석하며, Flutter 프로젝트에서 이 아키텍처를 구현하는 데 도움이 되는 자세한 폴더 구조의 예시를 제공해 보도록 한다. 왜 구글의 권장이 중요한가?당연히 구글꺼니까 이번 구글의 MVVM 지원은 Flutter 개발자들에게 .. 더보기
Flutter에서의 메모리릭 Flutter 애플리케이션에서 메모리 누수란?메모리 누수는 프로그램이 더 이상 필요하지 않은 메모리를 계속 점유하는 현상으로, 애플리케이션이 불필요하게 많은 메모리를 사용하게 만들어 성능 저하, 충돌, 그리고 나쁜 사용자 경험을 초래할 수 있다. 1. 메모리 누수 (Memory Leak) 이란?메모리 누수는 프로그램이 특정 메모리 공간을 더 이상 참조하지 않으면서도, 가비지 컬렉터가 이를 회수하지 못하는 상황을 의미합니다. Flutter에서 메모리 누수는 아래와 같은 상황에서 발생할 수 있다.캐싱된 객체: 사용되지 않는 객체가 메모리에 남아 있는 경우리스너 제거 실패: 리스너를 적절히 제거하지 않아 객체가 계속 참조되는 경우스트림(Stream) 관리 실: 스트림 구독을 제대로 취소하지 않아서 백그라운드에.. 더보기
Flutter 스피드 다이얼 구현 단일 버튼에서 다양한 동작이나 선택 사항을 제공해주는 Speed Dial은 Flutter에서 일반적으로 잘 알려진 FAB(Floatin Action Button) 중 하나이다. 버튼을 탭하면 빠르게 확장되어 더 작은 버튼이나 동작 목록을 발견하여 사용자가 관련 작업을 수행할 수 있도록 한다. 오늘은 flutter_speed_dial 패키지를 소개하는 블로그를 읽고 정리해 보기로 한다. 시작하기Flutter의 Speed ​​Dial은 단일 플로팅 액션 버튼에서 다양한 액션을 처리할 때 사용하기 좋은 방법이다. 아래의 데모를 통해 Flutter에서 Speed ​​Dial을 사용하는 방법과 Flutter 애플리케이션에서 flutter_speed_dial 패키지를 사용하여 Speed ​​Dial이 작동하는 방식.. 더보기
Flutter 웹 로딩 속도 최적화 Flutter로 관리자페이지나 관제페이지와 같은 웹 개발을 하면서 느꼈던 점은 기존에 사용했었던 ReactJS와 비교해서 특별히 아쉬웠던 점은 없지만 초기 로딩 속도가 좀 불만족스러웠다는 것이다. 둘 다 사용했던 입장에서 각각 자신들만의 장단점은 존재하나 이 부분은 확실히 ReactJS쪽의 우세라고 생각한다. (물론 상대적으로 느린 것이지 실제 사용에는 불편함이 없었다.) 오늘은 Flutter에서 웹 로딩 속도 퍼포먼스를 최적화하는데 도움이 되는 블로그를 찾게 되어 정리해 보았다. 1. CanvasKit과 Wasm 렌더링  1) CanvasKit    - Flutter 웹에서 기본 렌더러 중 하나로 사용되며 WebGL을 활용해 고성능과 픽셀 일관성을 제공한다.    - 복잡한 그래픽 애니메이션이 필요한 .. 더보기
Flutter에서 Hooks 사용하기 Flutter에서 Hooks는 UI 로직을 관리하는 새로운 방식으로, 기존의 StatefulWidget을 대체하거나 보완하여 코드의 가독성을 높이고 로직을 간결하게 만들어준다. React에서 처음 도입된 Hooks는 Flutter에서도 비슷한 개념으로 사용되며, 특히 반복적인 초기화 및 해제 작업을 줄이고 재사용성을 높이는 데 유용하다.(단, React Hooks 처럼 공식 지원이 아니고 flutter_hooks 라는 서드파티 패키지 설치를 통해 사용이 가능하다.) Hooks란 무엇인가?1. React에서의 Hooks - 클래스 없이 상태를 관리할 수 있도록 도와주는 기능 - https://honken.tistory.com/140 (예전 React Hooks 정리글)2. Flutter에서의 Hooks -.. 더보기
Dart/Flutter 프로토타입 디자인 패턴 프로토타입 디자인 패턴이란?프로토타입 디자인 패턴은 생성(Creational) 디자인 패턴 중 하나로, 기존 객체를 복제(clone) 하여 새로운 객체를 생성하는 방식이다. 이 패턴은 다음과 같은 상황에서 주로 사용된다.객체 생성 비용이 높은 경우네트워크 호출이나 복잡한 초기화 과정이 필요한 객체를 새로 생성하는 대신 복제하여 효율성을 높일 수 있다.객체의 내부 구조를 보호해야 하는 경우외부 코드가 객체의 내부 구현에 의존하지 않고 복제를 수행할 수 있다.불변 객체(Immutable Object)속성이 변경되지 않는 객체를 복제하여 새로운 값을 가진 객체를 생성할 때 유용하다.프로토타입 디자인 패턴의 장점런타임 시 객체 추가 및 제거새로운 객체 클래스를 시스템에 추가하려면 프로토타입을 등록하면 된다. 이.. 더보기