Flutter에서 버튼은 앱의 주요 상호작용 요소 중 하나입니다. 하지만 기본 버튼 스타일을 그대로 사용하는 경우 디자인이 다소 밋밋할 수 있습니다. 이번 글에서는 Flutter의 ButtonStyle을 활용해 다양한 스타일을 적용하는 방법을 정리해보겠습니다.Flutter의 버튼 스타일링을 다룰 때 ButtonStyle을 이해하는 것이 핵심입니다. 이를 통해 색상, 크기, 패딩, 테두리, 그림자 등의 다양한 속성을 커스터마이징할 수 있습니다.ButtonStyle 기본 개념Flutter의 ButtonStyle은 ElevatedButton, TextButton, OutlinedButton 등에 공통적으로 적용할 수 있는 스타일 속성을 정의하는 클래스입니다. 즉, 버튼을 꾸밀 때 하나의 스타일을 여러 버튼에 ..

Flutter는 강력한 UI 프레임워크로서 빠른 렌더링을 제공하기 위해 GPU(Graphics Processing Unit)를 적극 활용합니다. 특히, Skia 엔진을 사용하여 다양한 플랫폼에서 일관된 그래픽 성능을 보장해왔습니다. 하지만 성능 향상과 최적화를 위해 Flutter 팀은 새로운 렌더링 엔진인 Impeller를 도입했습니다. 이번 글에서는 Flutter의 GPU 렌더링 과정과 Impeller 엔진의 등장 배경 및 특징을 자세히 살펴보겠습니다.1. Flutter의 렌더링 엔진: Skia와 ImpellerSkia: 기존의 렌더링 엔진Flutter는 기본적으로 Skia라는 2D 그래픽 엔진을 사용하여 UI를 렌더링합니다. Skia는 Chrome, Android 등에서도 사용되는 강력한 오픈소스 그..

React를 학습하면서 가장 중요한 개념 중 하나는 상태(state) 관리다. 특히 사용자 입력에 반응하는 방식과 상태를 다루는 방법을 이해하는 것이 중요하다. 이번 글에서는 React 공식 문서와 Reacting to Input with State를 기반으로, 상태 관리와 입력 반응에 대해 정리해보겠다.1. React의 상태(state)란?상태(state) 는 React 컴포넌트에서 값이 변경될 때 UI를 다시 렌더링하는 중요한 데이터다. 컴포넌트의 내부 상태를 나타내며, 예를 들어 사용자 입력, 체크박스 상태, 카운터 값 등이 상태가 될 수 있다.React에서는 useState 훅을 사용해 상태를 관리한다.useState를 이용한 상태 선언import { useState } from "react";f..

Flutter 앱을 개발할 때, 사용자 인증 정보, API 키, 토큰과 같은 민감한 데이터를 안전하게 저장하는 것은 필수적입니다. flutter_secure_storage 패키지는 iOS에서는 Keychain, Android에서는 EncryptedSharedPreferences를 활용하여 보안성이 뛰어난 데이터 저장소를 제공합니다.이 글에서는 flutter_secure_storage의 필요성, 설정 방법, 사용법 및 추가 기능에 대해 알아보겠습니다.왜 flutter_secure_storage를 사용해야 할까?보안이 중요한 이유는 데이터가 노출되면 사용자 정보 유출, API 남용 등의 위험이 발생할 수 있기 때문입니다. flutter_secure_storage를 사용하면 다음과 같은 이점이 있습니다.민감한..

1. Cursor 설정으로 이동Cursor 앱을 열고 상단 메뉴에서 Cursor 클릭기본 설정 → Cursor Settings → Features 메뉴로 이동2. 코드베이스 인덱싱 설정하기Codebase Indexing 섹션을 찾기Hide Settings를 클릭해서 추가 설정 표시Configure ignored files 클릭3. .cursorignore 파일 생성 및 편집Configure ignored files를 클릭하면 .cursorignore 파일이 프로젝트 폴더 내에 생성됨.cursorignore 파일을 열고 제외할 파일 및 폴더를 추가 README.mdfirebase_options.dartfirebase.json.gitignore.cursorignore.idea.vscode.DS_Store.e..

살다 보면 작은 팁 하나로 시간이 절약되거나 불편함을 덜 수 있는 순간들이 있다.일상생활에서 알아두면 유용한 꿀팁들을 모아봤다.1. 핸드폰 배터리 오래 쓰는 법스마트폰 배터리가 너무 빨리 닳는다면, 다음 설정을 체크해보자.화면 밝기를 자동 조절로 변경위치 서비스(특히 백그라운드에서 실행되는 앱) 최소화필요 없는 알림 끄기다크모드 활성화 (OLED 화면에서는 특히 효과적)이렇게만 해도 배터리 사용 시간이 확연히 늘어난다.2. 구글 검색을 더 스마트하게 하는 방법구글을 잘 활용하면 원하는 정보를 훨씬 빠르게 찾을 수 있다."검색어 site:사이트주소" → 특정 사이트 내에서 검색예: 난 개발자라 .. Flutter site:pub.dev (Flutter 관련 라이브러리만 검색)"-검색어" → 특정 단어 제외..

Flutter는 강력하고 유연한 애니메이션 기능을 제공하여, 개발자가 매력적이고 직관적인 사용자 경험을 만들 수 있도록 돕습니다. 애니메이션은 앱의 인터페이스를 보다 자연스럽고 역동적으로 만들기 때문에, 효과적으로 활용하면 더욱 멋진 애플리케이션을 개발할 수 있습니다.이번 글에서는 Flutter에서 제공하는 암시적 애니메이션(Implicit Animations) 과 명시적 애니메이션(Explicit Animations) 의 차이점과 활용 방법을 소개하겠습니다. -> 나름 공부하면서 적은거라 미흡한 부분이 있습니다 Flutter 애니메이션의 종류Flutter의 애니메이션은 크게 암시적 애니메이션(Implicit Animation) 과 명시적 애니메이션(Explicit Animation) 으로 나눌 수 있습..

Flutter에서 상태 관리는 항상 고민되는 부분입니다. 여러 가지 방법이 있지만, 규모가 커질수록 명확한 구조가 필요한데, 그중 하나가 BLoC(Business Logic Component) 패턴입니다. 이번 글에서는 BLoC 패턴이 무엇인지, 왜 사용하는지, 그리고 실제 코드 예제를 통해 적용하는 방법을 정리해보겠습니다.BLoC 패턴이란?BLoC 패턴은 비즈니스 로직과 UI를 분리하는 아키텍처 패턴입니다. 즉, UI와 상태 관리 로직을 독립적으로 유지하여 유지보수성과 테스트 가능성을 높이는 방식입니다.BLoC 패턴을 사용하는 이유UI와 로직 분리 → UI 코드와 비즈니스 로직을 명확히 구분하여 가독성을 높입니다.일관된 상태 관리 → 이벤트와 상태를 사용해 관리할 수 있어 예측 가능한 코드 작성이 가능..

React에서 상태를 다룰 때, 단순한 숫자나 문자열이 아니라 객체(object)나 배열(array) 을 다루는 경우가 많다. 하지만 상태 업데이트를 할 때 직접 수정하면 예상과 다르게 동작할 수 있다.이번 글에서는 React 공식 문서의 "Updating Objects in State" 및 "Updating Arrays in State" 내용을 기반으로, 객체와 배열 상태를 안전하게 업데이트하는 방법을 정리해본다. -> https://ko.react.dev/learn/managing-state객체 상태를 직접 수정하면 안 되는 이유React의 상태는 불변성(immutability) 을 유지해야 한다. 만약 기존 상태 객체를 직접 수정하면, React가 변경을 감지하지 못해 UI가 업데이트되지 않을 수 ..

React를 사용하다 보면 상태(state) 라는 개념을 자주 접하게 된다. 상태는 UI의 특정 시점(snapshot)의 데이터를 의미하며, 이를 기반으로 컴포넌트가 렌더링된다. 하지만 상태가 어떻게 작동하는지 정확히 이해하지 못하면, 의도한 대로 동작하지 않거나 예상치 못한 버그가 발생할 수도 있다.이번 글에서는 React 공식 문서에서 설명하는 'State as a Snapshot' 개념을 중심으로, 상태가 어떻게 동작하는지 알아보고자 한다.상태(State)는 스냅샷이다React에서 상태는 '시간에 따른 변화'를 표현하지만, 사실 개별적인 스냅샷(snapshot) 으로 동작한다. 즉, 한 번의 렌더링에서 특정 상태 값을 가지면, 그 렌더링 동안은 해당 값이 고정 된다.예제 코드import { useS..