네비게이션과 라우팅 - 화면 전환과 데이터 전달 방법복잡한 앱 페이지 간 이동, 여러분은 지금 최선의 방법을 사용하고 계신가요? 개발 시간을 절반으로 줄여주는 기법이 있다면?안녕하세요, 플러터 개발자 여러분! 오늘은 제가 실무에서 앱을 개발하면서 정말 많이 고민했던 부분인 네비게이션과 라우팅에 대해 이야기해볼게요. 지난달 회사 프로젝트에서 복잡한 화면 전환 로직 때문에 밤샘 작업을 했는데, 그때 알게 된 꿀팁들을 모두 정리했습니다. 처음 플러터를 시작했을 때 가장 헷갈렸던 부분이기도 해서, 여러분의 개발 여정이 좀 더 수월해지길 바라는 마음에 이 글을 쓰게 됐어요.목차Flutter 네비게이션 기본 개념 Navigator 1.0 vs Navigator 2.0 화면 전환하기: push와 pop 화면 간 데이..
안녕하세요, 오늘은 최근에 제가 Flutter 웹앱으로부터 설문 기능을 분리하여 Preact와 Vite, TypeScript를 활용해 개발한 경험을 공유하려고 합니다.문제! 문제! Flutter 웹앱의 한계와 트래픽 급증으로 인한 성능 이슈저희 회사는 Flutter를 사용하여 CSR(Client-Side Rendering) 방식으로 개발된 웹앱을 운영하고 있었습니다.Flutter는 멀티플랫폼 지원이라는 큰 장점이 있지만, 웹 환경에서는 몇 가지 심각한 한계점을 지니고 있습니다. 특히 웹 배포 방식에 관련된 문제가 저희 프로젝트에서 큰 도전으로 다가왔습니다. Flutter 웹앱의 가장 큰 단점 중 하나는 배포 아키텍처입니다. Flutter 웹은 새로운 버전이 배포될 때마다 사용자가 전체 애플리케이션을 다시..
Flutter 개발에서 가장 매력적인 기능 중 하나인 디버깅 도구와 Hot Reload에 대해 알아보겠습니다.이 기능들을 제대로 활용하면 개발 속도와 효율성이 크게 향상되고, 버그를 빠르게 발견하고 수정할 수 있습니다.Hot Reload와 Hot RestartFlutter가 다른 모바일 개발 프레임워크와 차별화되는 가장 큰 특징 중 하나는 바로 Hot Reload와 Hot Restart 기능입니다.이 기능들은 개발 과정에서 코드 변경사항을 빠르게 그리고 바로바로 확인할 수 있게 해주어 효율적인 개발이 가능하게 해줍니다.Hot Reload란?Hot Reload는 앱을 완전히 다시 시작하지 않고도 코드의 변경사항을 즉시 앱에 반영하는 기능입니다.코드를 수정한 후 저장하고 Hot Reload 버튼을 클릭하거나..
멋진 앱을 만들기 위해서는 이미지, 폰트, JSON 파일 등 다양한 리소스가 필요한데요.이러한 외부 자원들을 효율적으로 관리하고 활용하는 방법을 자세히 살펴보겠습니다.Assets은?Flutter에서 Assets은 앱에 포함되는 정적 파일들을 의미합니다. 보통 이미지(PNG, JPG, GIF, WebP, SVG 등), 폰트 파일(TTF, OTF), 텍스트 파일, JSON 데이터 파일, 오디오 파일, 비디오 파일, 기타 정적 리소스들 등이 이에 포함됩니다.그럼 이제 Flutter에서 Assets를 설정하고 사용하는 방법을 단계별로 알아보겠습니다.1. pubspec.yaml 파일에 Assets 등록하기Flutter 앱에서 Assets를 사용하기 위한 첫 번째 단계는 pubspec.yaml 파일에 등록하는 것입..
팀 쿡 애플 CEO가 "공기 중에 무언가가 있다(there's something in the Air)"라는 짧은 영상을 공유하며 신제품 발표를 예고했습니다.'Air'라는 단어 사용과 시기를 고려할 때, 이번 주 신형 M4 맥북 에어가 출시될 것으로 전망됩니다.외관과 디스플레이맥북 에어는 13인치와 15인치 두 가지 크기를 유지하며 외관상 큰 변화는 없을 전망입니다. 2022년에 마지막 디자인 리프레시가 이루어진 점을 고려하면 애플의 디자인 주기상 아직 대대적인 변경 시점은 아닌 것 같습니다. 또한 M4 맥북프로도 디자인 변화없이 공개되었기 때문에 에어 역시 그럴 것으로 보입니다. 디스플레이 역시 현재와 동일한 리퀴드 레티나 패널을 사용하며, 맥북 프로에 적용된 미니 LED는 여전히 프리미엄 라인의 전용 ..
Flutter에서 사용자 입력을 처리하는 방식은 자바의 리스너 패턴이나 자바스크립트의 이벤트 핸들러와 비슷하면서도 다릅니다. Flutter는 위젯 중심의 선언적 UI 패러다임을 따르기 때문에, 입력 처리도 위젯의 속성으로 정의하는 경우가 많습니다.자바스크립트에서는 보통 addEventListener를 사용하거나 React에서 onClick={handleClick} 같은 방식으로 이벤트를 처리합니다. 그러나, Flutter에서도 비슷한 개념으로 onPressed, onTap 같은 콜백 함수를 위젯 생성자에 전달합니다. 하지만 Flutter는 모든 것이 위젯으로 구성되어 있어서, 입력 처리를 위한 위젯들이 따로 준비되어 있습니다.TextField - 텍스트 입력 처리하기TextField는 Flutter에서 ..
이번에는 Flutter 앱 개발에서 가장 중요한 개념 중 하나인 '상태 관리'에 대해 살펴보겠습니다.특히 Flutter의 기본 상태 관리 방식인 StatelessWidget과 StatefulWidget의 차이점과 각각의 사용법에 대해 자세히 알아보겠습니다.상태(State)란?Flutter에서 '상태'는 앱이 실행되는 동안 변할 수 있는 데이터를 의미합니다. 예를 들어 사용자가 체크박스를 클릭하면 체크 여부가 변경되고, 버튼을 누르면 화면의 데이터가 업데이트되며, 텍스트 필드에 글자를 입력하면 그 내용이 저장됩니다. 이런 모든 변화하는 데이터가 앱의 '상태'입니다.자바나 자바스크립트에 비유하자면, 상태는 변수나 객체의 현재 값이라고 생각할 수 있습니다. 자바스크립트의 React에 익숙하신 분들은 state..
Flutter 개발에서 가장 핵심이 되는 개념은 바로 '위젯(Widget)'인 것 같습니다.Flutter에서는 UI를 구성하는 모든 요소가 위젯으로 이루어져 있으며, 이러한 위젯들의 조합을 통해 복잡한 사용자 인터페이스를 구현할 수 있습니다.Flutter 위젯이란?위젯은 Flutter 애플리케이션의 UI를 구성하는 기본 빌딩 블록이에요. 버튼, 텍스트, 이미지와 같은 시각적 요소뿐만 아니라 레이아웃, 애니메이션, 상호작용을 관리하는 비시각적 요소까지 모두 위젯으로 구현돼요. Flutter의 "Everything is a Widget" 철학은 UI 개발 방식을 일관되고 직관적으로 만들어줍니다.Flutter 위젯의 특징은 다음과 같아요.선언적 UI - 위젯은 현재 상태를 기반으로 어떻게 UI가 보여야 하는지..
이제 Flutter 개발 환경을 모두 설치하였다면, Flutter를 처음 접하는 개발자들이 가장 먼저 해보게 되는 것은 바로 첫 번째 Flutter 앱을 만드는 것입니다. 한번 같이 해볼까요.프로젝트 생성하기Flutter 앱 개발의 첫 단계는 프로젝트를 생성하는 것입니다.터미널 또는 명령 프롬프트를 열고 다음 명령어를 입력하여 새로운 Flutter 프로젝트를 생성할 수 있습니다.flutter create my_first_app 이 명령어를 실행하면 'my_first_app'이라는 이름의 폴더가 생성되고, 그 안에 Flutter 프로젝트에 필요한 모든 파일과 폴더가 자동으로 만들어집니다. 프로젝트가 생성되면 해당 디렉토리로 이동해 봅시다.cd my_first_app프로젝트 구조 살펴보기Flutter 프로..
이번에는 Flutter 앱의 핵심이라고 할 수 있는 사용자 입력 처리 방법에 대해 알아보겠습니다. 모바일 앱에서 사용자 입력은 앱과 사용자 간의 상호작용을 위한 필수적인 요소입니다. Flutter에서는 다양한 입력 위젯을 제공하여 사용자의 터치, 텍스트 입력, 제스처 등을 쉽게 처리할 수 있습니다.TextField: 텍스트 입력 처리하기TextField는 Flutter에서 사용자의 텍스트 입력을 받기 위한 기본 위젯입니다. 이메일 주소, 패스워드, 검색어 등 다양한 텍스트 입력에 활용할 수 있습니다.기본 TextField 사용하기가장 간단한 형태의 TextField는 다음과 같이 사용할 수 있습니다.TextField( decoration: InputDecoration( hintText: '여기에 ..
지난 시간까지 Flutter의 개념과 Dart 언어 기초에 대해 알아보았는데요. 이번에는 Flutter 개발을 시작하기 위한 환경 설정 방법을 알아보겠습니다. 운영체제별로 설치 과정이 다르므로, Windows, macOS, Linux 각각의 환경에 맞는 설정 방법을 자세히 설명해 드리겠습니다.Windows에서 Flutter 설정하기1. 시스템 요구사항 확인운영체제: Windows 7 SP1 이상디스크 공간: 최소 1.64GB (Flutter SDK만)도구: Windows PowerShell 5.0 이상, Git for Windows2. Flutter SDK 설치Flutter 공식 사이트에서 최신 버전의 Flutter SDK를 다운로드합니다.zip 파일을 다운로드 받은 후, 원하는 위치에 압축을 풀어줍니다..
Dart는 Google이 2011년에 개발한 객체지향 프로그래밍 언어로, Flutter의 공식 언어입니다. 처음에는 JavaScript를 대체하기 위한 웹 프로그래밍 언어로 출발했지만, 현재는 Flutter를 통한 크로스 플랫폼 애플리케이션 개발에 주로 사용되고 있습니다.Dart의 특징1. C 스타일 문법Dart는 C 언어 계열의 문법을 가지고 있어서 Java, JavaScript, C# 등에 익숙한 개발자들이 쉽게 배울 수 있습니다.그건 제가 보증하는 것 같습니다. 저는 요새 Flutter 프로젝트와 Next.js 프로젝트를 많이 만들고 있는데, 둘을 왔다갔다 혼용하면서 개발해도 크게 어려움이 없을 정도로 유사성이 있습니다. (물론, 완전히 같은건 아니지만. 언어 자체는 익숙한 점이 많습니다.)void..
