[TIL] Flutter 9기

배워본 걸 내 방식대로 정리하는 걸 말하는 듯웹 개발 살짝 찍먹해봤으니 비교하면서 들을 예정XCode 설치Git 설치 확인Android Studio 설치Flutter SDK 설치HomeBrew & Cocoapods 설치VSCode 설치Flutter 프로젝트 생성 후 실

📝 기본 문법 어제 강의에서 다 못 들었던 부분 정리 변수 final 한 번만 할당 가능 (= const) import 다른 Dart 파일이나 패키지를 불러올 때 반드시 최상단에 위치 | 자료형 | 설명 | 예제 | |

📝 컬렉션 컬렉션이란? 여러 개의 데이터를 묶어서 다루는 구조 Dart의 대표적인 컬렉션 List (리스트) Set (셋) Map (맵) List 선언 방법 특징 순서 있음 중복 허용 인덱스로 접근 가능: fruits[0] → 'apple' 주요 메서드 반복

📝 flutter 프로젝트 프로젝트 구조 ⭐️ 중요한 파일 📁 lib/ 앱 만들기 위한 Dart 코드 작성하는곳 기본적으로 main.dart가 진입점 📁 pubspec.yaml 프로젝트의 정보 기록 플러터 공식 패키지 저장소인 pub.dev 의 패키지를 사용하기

📝 텍스트, 이미지, 아이콘 위젯 Text Text란? 화면에 글자를 표시할 때 사용하는 기본 위젯 간단한 문자열부터 다양한 스타일, 정렬, 줄 수 조절까지 지원 기본 생성자 주요 속성 style: 텍스트 스타일 설정 (크기, 색상, 굵기 등) textAlign:

UI에 반영되는 변경되는 데이터버튼을 눌러 숫자가 증가 → 숫자가 상태토글스위치 on/off → on off 여부가 상태상태를 가질 수 있는 위젯변수를 업데이트 후 setState 함수를 통해 다시 그려달라고(build) 요청 가능StatefulWidget 상속받은 클

화면 하단에 고정된 탭 메뉴를 만드는 데 사용앱에서 여러 페이지(예: 홈, 설정, 프로필 등)를 전환할 수 있게 함일반적으로 StatefulWidget과 함께 사용하여 선택된 탭 인덱스를 상태로 관리함Scaffold 의 bottomNavigationBar 속성에 사용i

바텀 시트(Bottom Sheet): 화면 위로 슬라이드되며 나타나는 임시 패널.바텀 네비게이션(Bottom Navigation): 화면 하단 고정 네비게이션 바.바텀 네비게이션은 키보드가 올라오면 가려짐입력 필드 포커스 해제해 키보드 닫기 필요화면 빈 공간을 탭하면

개강 3일 전 팀 프로젝트가 시작되었다선배 기수의 앱을 직접 체험하며 기획 → 디자인 → 기능 흐름의 완성도를 이해하고, “나라면 어떻게 만들었을까?”를 고민해보는 것이 이번 과제의 목표다그런데 개발반은 인원이 적어서 나랑 팀원 단 둘밖에 없다..ㅋㅋ아무튼 어플을 직접

오늘은 발표 자료를 준비했다.어플에 대한 피드백을 이렇게 바꾸면 더 좋을 것 같다는 내용으로 정리해보고정리한 내용을 토대로 발표 자료를 만들어봤다.미니 프로젝트 준비하느라 강의는 하나도 못 들었다..내일 발표 끝나고 to do 어플 기능 만드는 것까지는 구현해봐야겠다.

오늘은 미니 프로젝트 발표날~강당에 모여서 (온라인) 발표를 진행했다다른 조들의 발표도 보면서 새로운 인사이트를 얻는 시간이었다암튼 처음 진행한 미니 프로젝트였는데 잘 마무리해서 다행~다음주에는 본 캠프 시작되는데 열심히 해야제우리 조원들의 소감문

📝 StatefulWidget CRUD CRUD란? CRUD는 데이터 처리의 기본적인 4가지 동작을 의미하는 약어 데이터를 다루는 대부분의 앱에서 CRUD는 핵심 개념입니다. |약어|의미|설명| |-|-|-| |C|Create|새로운 데이터를 생성 (예: 할 일 추

본 캠프 개강 오늘 11월 24일부터 드디어 본 캠프가 시작된다 그래도 오늘부터 강의 듣는 것보다 사전 캠프하면서 강의 들었던 게 도움은 된 것 같다 TIL 작성법 특강 til이 뭔지에 대해 실시간 특강을 들었다 작성 방법 화려하고 완벽하게 작성 필요 x 적은 내용

Git은 소스 코드 버전 관리 도구코드의 변경 이력을 저장과거 버전으로 되돌릴 수 있음여러 사람이 동시에 작업해도 충돌 없이 병합할 수 있음브랜치를 만들어 독립적으로 개발하고 나중에 합칠 수 있음협업과 코드 관리에 필수인 도구Repository 생성로컬 또는 GitHu

flutter 📝 브랜치 동기화 브랜치 동기화란? 보통 main을 기준으로 새로운 기능을 만들려고 feature 브랜치를 만든다. 그런데 시간이 지나면 A가 main에 새로운 기능을 merge함 B도 merge함

예전에 몰랐던 개념들도 조금씩 감이 잡히고다른 티원들한테 알려주는 정도까지는 왔다..!앞으로 협업하면 좀 더 잘 사용할 수 있을 것 같뚬fetch → 원격 최신 커밋 정보 가져오기reset --hard origin/main → 로컬 main을 원격 main 상태로 완전

WIL(Week I Learn) 우리 조의 KPT 회고 한 주 동안 배운 것만 정리하는 회고 형식 매일 기록하는 TIL과 다르게 일주일치 내용을 묶어서 정리 주간 학습 흐름을 한눈에 볼 수 있어서 성장 추적하기 좋음 1️⃣ 이번 주에 배운 것 Git 병합 브랜치

앱 배포하기 앱 이름 바꾸기 플러터에서 앱 이름은 만들었던 프로젝트의 이름을 기본 앱 이름으로 만들어줘서 바꿔줘야 함 안드로이드 android/app/src/main/AndroidManifest.xml AndroidManifest 를 수정해준 뒤 안드로이드 에뮬레이터

📝 알고리즘 문제 (전)팀원이 알고리즘 문제를 재밌게 풀고 있는 걸 보고 나도 자극받아서 해봤다. 목표는 ai 도움 없이 푸는 것..! 🤨 가장 많은 사탕을 가지고 있는 아이들 문제 링크 Dart 문법이 있지만 영어로 되어 있어서 번역이 필요한 게 단점.. 일

📝 알고리즘 문제 풀기 🤔 가장 높은 고도 찾기 문제 링크 누적 고도 변화를 알아야 하고 그 누적된 값 중 가장 큰 값을 찾으면 되는 문제 그래서 내가 배운 걸 단순하게 적용해서 풀어봤다. 고도의 처음 높이는 0이니깐 height에 처음에 0 값을 저장하고

📍 Map Dart 공식 문서 - Map Dart Programming Tutorial 개인 과제를 진행하다가 Map이랑 List 부분 맵핑하는 법에 대해 자세히 알고 싶어서 뜯어봤다. 키/값 쌍의 컬렉션 | 속성 | 설명

KPT 회고2번째 주는 dart 기초 문법부터 탄탄히 잡고 가는 주라 새로운 강의를 받고 수강을 했다. 확실히 앱 개발 종합 강의 보다 예제도 많고 내용도 많았지만 이번 주를 잘 보내야지 flutter 개발을 할 때 어려움 없이 진행할 것 같아서 나름 정리도 열심히 해

📍 알고리즘 문제 🕵️‍♂️ Digitville의 장난꾸러기 두 숫자 문제 링크 일단 2숫자만 중복이 되므로 리스트에서 중복되는 숫자 2개만 찾으면 코드가 끝나게 만들면 될 것 같다. 숫자들을 오름차순으로 정렬해서 현재 nums[i]과 바로 뒤에 있는 nums[

📍 알고리즘 문제 풀기 🙋 가장 가까운 사람 찾기 문제 링크 이 문제는 절댓값 구하는 방법을 알면 비교해서 0,1,2 중에 반환하면 된다. 절댓값 구하는 방법은 abs()를 사용해서 int a = -10일 경우 a.abs()) //10이 된다. 즉 음수는 양수,

📍 알고리즘 문제 풀기 🤑 가장 부유한 고객의 재산 문제 링크 리스트 안에 리스트를 반복해서 돌면서 모두 합산한 다음에 total 값을 만들어서 저장한 후에 큰 값을 reduce로 구한 후 반환하는 식으로 만들었다. 일단 생각나는대로 작성해보고 제출했더니 한 번에

알고리즘 문제 풀기 ☕️ Two Sum 문제 링크 반복문으로 nums 리스트를 돌면서 더해주고 더한 값이 target 값이라면 해당 인덱스를 기록하는 식으로 생각을 했다. 그래서 만든 게 요친구 그런데 nums = [-1,-2,-3,-4,-5] target = -8

WIL KPT 회고

알고리즘 문제 풀기 🪞 Palindrome Number 처음에는 문자열로 리스트에 담은 다음에 정방향 리스트와 역방향 리스트를 비교하면 되겠다! 해서 비교를 했다 그런데 같은 값이라도 false가 나와서 무슨 일인가 찾아봤더니 저 상태에서는 리스트 그 자체를 비교

InheritedWidget / InheritedModel & ThemeData & Slider & RichText & TextSpan

Navigator.push / pop으로 페이지가 전환될 때같은 tag를 가진 위젯끼리 자동으로 애니메이션 연결주로 이미지, 카드, 리스트 아이템 → 상세 화면에 사용A 화면에 Hero(tag: 'x') 존재B 화면에도 Hero(tag: 'x') 존재화면 전환 시A의

Tooltip은 길게 누르거나(모바일)마우스를 올렸을 때(웹/데스크톱) 짧은 설명을 보여주는 위젯아이콘 의미 설명, 버튼 보조 설명에 사용message : 표시할 텍스트 (필수)child : 감쌀 위젯waitDuration : 표시되기 전 대기 시간showDuratio

'모닝 아카이브'를 통해 다양한 위젯들을 탐색했는데 InheritedWidget과 InheritedModel을 배우며 위젯 트리 아래로 데이터를 전달하는 상태 관리'의 기초를 맛보았다. 왜 이런 구조가 필요한지 고민하며 플러터의 데이터 흐름을 이해하는 시간을 가졌다.

📍 튜터님과 Widget 공부 📝 AbsorbPointer AbsorbPointer란? AbsorbPointer는 터치 / 클릭 / 제스처 이벤트를 가로채서 자식 위젯에 전달하지 않는 위젯 UI는 그대로 보이지만 사용자 입력만 차단 특징 화면에 보이지만 눌리지 않

📍 상태 관리 뜯어보기 📝 Provider 공식 문서 Provider란? Flutter의 상태 관리 / 의존성 주입(Dependency Injection) 라이브러리 InheritedWidget을 래핑(wrap)해 더 쉽게 상태를 공유·관리할 수 있게 함 전역 상태

# 📍 튜터님과 Widget 공부 ## BackdropFilter ### BackdropFilter란? 자기 자신이 아니라 뒤에 그려진 위젯에 필터(블러 등)를 적용 글래스모피즘, 반투명 모달, 배경 흐림 효과 ### 포인트 - ImageFilter.blur()로

Flutter 팀 과제 - 쇼핑몰 플랫폼 오늘부터 팀 프로젝트인 '쇼핑몰 플랫폼'을 시작했다. 프로젝트의 첫 단추를 끼우는 날이라 그런지 팀원들과의 열정 가득한 회의로 하루를 꽉 채웠다. 튼튼한 집을 짓기 위해 설계도(S/A)를 짜고 주어진 과제의 UI를 시각화하는

AnimatedBuilder는 애니메이션 값이 변할 때마다특정 UI만 다시 그리도록 도와주는 위젯이다.AnimationController / Animation<T>를 감시값이 바뀔 때마다 builder만 rebuild성능 최적화용 애니메이션 위젯애니메이션 중 UI

고정된 크기를 가진 박스 위젯을 만들 때 사용주로 공간 조절, 위젯 크기 제한, 위젯 간 간격 등 다양한 목적으로 사용됨기본적으로 크기(width, height)를 지정할 수 있음width: 박스의 가로 크기height: 박스의 세로 크기child: 박스 안에 들어갈

장바구니 기능을 구현하면서상품 목록, 수량, 선택/해제 상태를 함께 관리해야 했다.처음에는 단순히 “상품을 담는다”는 개념으로 시작했지만기능이 추가될수록 기존 자료구조의 한계가 드러났다.상품 목록을 단순히 나열하면 될 것이라 판단구현이 가장 직관적이라고 생각함동일한 상

오늘은 그간 있던 과제의 발표회 날 ...이었지만 개인 사정때문에 결석을 하게 되어 줌으로 진행된 발표회만 참여했다이 자세로 차에서 들음 ㅋㅋ처음하는 팀플이라서 서툰 면도 많았고 부족한 점도 있었지만 잘 마무리해서 다행이다. 재사용 가능한 컴포넌트 설계: CommonE

AnimatedList는 리스트 아이템이 추가·삭제될 때 애니메이션을 자동으로 적용해주는 위젯이다.ListView → 아이템 변경 시 바로 갱신AnimatedList → 아이템 삽입 / 제거 시 애니메이션 가능📍 중요 포인트상태(State)를 직접 관리해야 함내부 데

📍 튜터님과 Widget 공부 ✏️ Flexible Flexible란? Row, Column, Flex 안에서 사용 남은 공간을 유연하게 분배하는 위젯 자식 위젯의 크기를 강제하지 않음 기본 사용법 주요 속성 flex 남은 공간 분배 비율 기본값: 1 fit 공

📝 블로그 앱 만들기 ✏️ WriteViewModel 구현 1️⃣ 상태 클래스 (WriteState) 글 작성/수정 중인지 여부 true → 로딩 상태 false → 입력 가능 상태 2️⃣ ViewModel (WriteViewModel) Riverpod Noti

📝 마켓 앱 만들기 - VWORLD 연동 ✏️ VWORLD 국토교통부에서 운영하는 공간정보 API 위도·경도 → 행정주소(읍·면·동) 검색어 → 행정구역 주소 목록 API 키 발급 흐름 www.vworld.kr 회원가입 & 로그인 오픈API → 인증키 발급 발급된

📍 튜터님과 Widget 공부 ✏️ Placeholder UI 레이아웃에서 임시 자리 표시용 위젯 주로 개발 중 디자인 확인이나 공간 확보용으로 사용 사각형 모양에 X 표시가 그려짐 주요 속성 | 속성 | 설명

📝 Riverpod Consumer Widgets 개념 정리 ✏️ Consumer Widgets란? Provider가 제공하는 상태를 “구독(consume)”해서 UI로 그리는 위젯 Provider ↔ UI를 연결하는 접점 역할을 하는 위젯 ✏️ 왜 Consumer

리스트 아이템을 드래그해서 순서를 변경할 수 있는 Flutter 기본 위젯Long press → 드래그 → 드롭별도의 외부 패키지 없이 사용 가능내부적으로 Drag & Drop + 애니메이션을 처리해줌ReorderableListView는 Key가 없으면 제대로 동작하지

Positioned 위젯의 애니메이션 버전top / left / right / bottom / width / height 값이 변경되면Flutter가 자동으로 부드러운 위치 이동 애니메이션을 만들어 줌반드시 Stack 안에서만 사용 가능Positioned 계열 위젯은

마켓 앱 만들기 상품 상세페이지 구현 ProductDetailViewModel 📁lib/ui/pages/productdetail/productdetailviewmodel.dart Product Model copyWith 함수 추가 Riverpod 상태는 immut

📍 튜터님과 Widget 공부 ✏️ Stack Stack의 개념 Stack은 여러 위젯을 겹쳐서 배치할 수 있는 레이아웃 위젯 디자인 툴의 레이어(Layer) 개념과 비슷 기본적으로 자식 위젯들이 겹쳐짐 나중에 선언된 위젯이 위에 표시됨 위치를 지정하지 않으면 왼쪽

부모 위젯의 크기를 기준으로 자식의 가로/세로 비율을 정하는 레이아웃 위젯픽셀(px)이 아니라 비율(0.0 ~ 1.0) 로 크기 지정부모가 주는 최대 사이즈를 기준으로 계산됨widthFactor, heightFactor는 부모 대비 비율둘 중 하나만 써도 됨ListVi

📍 튜터님과 Widget 공부 ✏️ Container Container란? Container는 박스 모델(Box Model) 개념 기반으로 만들어진 위젯 내부에 위젯을 담고 크기, 패딩, 마진, 장식 등을 지정할 수 있는 다목적 박스 역할을 함 주로 레이아웃, 스타일

표 형태로 데이터를 보여주는 위젯Table과 달리 행(Row)과 열(Column) 구조, 정렬 기능, 선택 기능 등이 내장되어 있어 데이터 표시용 UI로 자주 사용

사용자가 연속적 값을 선택할 수 있는 UI예: 볼륨 조절, 밝기 조절, 가격 범위 등divisions가 없으면 연속 값divisions가 있으면 단계별 값 선택 가능

GPS 기반 야구장 실시간 채팅 앱 'Inning' 개발 회고관심사 기반의 높은 몰입도: 평소 좋아하는 야구를 주제로 삼아 5일간의 짧은 개발 기간에도 지치지 않고 즐겁게 몰입할 수 있었다아키텍처 설계 및 상태 관리: Riverpod과 MVVM 패턴을 활용해 UI와 비

사용자에게 알림 / 확인 / 선택을 요청하는 모달 다이얼로그화면 중앙에 표시AlertDialog는 showDialog() 안에서 사용Navigator.pop()에는 builder 안에서 받은 dialogContext 사용 권장async 이후 호출 시 mounted 여부

서버 없이, 디바이스 내부에서 직접 알림을 보내는 기능푸시(Firebase 등) ❌앱 내부 로직으로 알림 ⭕️사용 예시알람 / 리마인더일정 시간 후 알림버튼 클릭 → 즉시 알림백그라운드 작업 완료 알림Flutter 프레임워크 자체는 알림 기능 미지원각 플랫폼 네이티브

📝 효율성을 위한 Const Class ✏️ const class란? Dart/Flutter에서 컴파일 타임 상수 객체를 만들기 위한 클래스 생성자 앞에 const를 붙이고, 해당 클래스로 만든 객체도 const로 생성해야 함 대표적으로 Text, Icon 같은

ChatBot App 만들기 - 크래시리틱스 ✏️ 크래시리틱스란? Crashlytics Firebase에서 제공하는 실시간 오류/크래시 리포팅 도구 앱에서 발생하는 치명적인 오류(crash) 및 비정상 종료를 자동 수집 에러 발생 시점의 스택 트레이스, 디바이스 정보

사용자가 드래그해서 크기를 조절할 수 있는 스크롤 가능한 시트를 만들 때 사용하는 위젯 주로 하단 시트(bottom sheet) 형태로 많이 쓰임ScrollController를 반드시 builder에서 사용해야 함내부 스크롤과 시트 드래그가 충돌하지 않도록 함ListV

Flutter 공식 라우팅 패키지선언형(Declarative) + URL 기반 라우팅을 지원모바일 / 웹 공통딥링크 지원인증·권한 분기 쉬움Navigator의 복잡함 해결화면 이동 코드가 분산됨뒤로 가기 / 분기 처리 복잡웹 URL 대응 어려움라우트 중앙 관리URL =

💥 TODO 앱 트러블 슈팅 과제를 진행하면서 만난 문제들과 어려웠던 부분을 정리해봤습니다. 1️⃣ 클린 아키텍처 기반의 계층 분리 및 의존성 설계 🔍 상황 인지 과제 요구사항에 '클린 아키텍처'를 적용하라는 내용이 있어서 기존의 MVVM 구조로 설계한 코드들을

오늘은 Flutter Web 기반 Todo App 프로젝트를 설계하고,Agent CLI 도구, 클린 아키텍처, GitHub Pages 배포, CI/CD 설정까지 전반적인 흐름을 학습터미널 환경에서 자연어나 명령어를 통해코드 작성, 디버깅, 문서화 등을 자동화하는 개발

Provider위젯 트리에 의존Provider는 반드시 상위 위젯에 선언되어 있어야 함BuildContext를 통해 트리를 거슬러 올라가며 상태 탐색👉 구조가 깊어질수록 관리가 어려워짐Riverpod위젯 트리와 완전히 독립Provider를 전역 변수처럼 선언 가능트리

서비스 구조 정리데이터 흐름 및 기능 역할 분담프론트/백엔드 연동 방식 정리주요 화면 구성 설계사용자 플로우 정리버튼/레이아웃 배치 초안 제작개발 전에 구조를 먼저 정리하니→ 이후 구현 방향이 훨씬 명확해짐팀원 간 역할과 책임이 정리되어→ 커뮤니케이션 비용이 줄어듦디자