🎯 오늘은 2주차 기능성 위젯과 3주차 상태관리에 대해 복습하고자 강의를 다시 들었다.
그리고 상태관리와 레이아웃에 대해 추가 학습을 했는데, 상태관리는 내용이 어려워서 여전히 이해하긴 힘들었다.
레이아웃은 헷갈리는 비슷한 기능이 있어서 비교하는 시간을 가졌다.

---

오후에는 팀 소개 프로젝트 발표회가 있었고, 팀원들과 KPT 회고를 작성했다.
그리고, 만족도 평가, 다면 평가, 개인 과제 - 학습 일지 제출도 완료하였다.

---

✏️ 강의 복습

📋 위젯
📋 상태관리
📋 상태관리

위젯은 레이아웃을 구성하는 거라 직관적이고, 무언가 쉽게 기능을 찾는 느낌인 반면에 상태관리는 어렵다. 왜 사용해야 되는지, 어떤 이점이 있는지는 알겠으나, 코드에서 이를 활용해서 작성한다는게 쉽지 않아 보인다.

---

🔍 Git

✔ Git을 사용하기 위해 도와주는 프로그램인 fork가 설치되어 있는데, 예전에 파일 만들어서 얘를 활용해 Git에 업로드하는 것을 해봤었다.

✔ 어제 들었던 Git 특강이 조금 어렵고, 실제 사용해본지 좀 된 것 같아서, 계정도 다시 로그인하고 이것저것 눌러보기도 하고 살펴보았다.

---

🎓 개인 학습

🔥 Lifecycle

Widget Lifecycle

🎯 왜 생명주기를 알아야 할까?
✔ StatefulWidget은 상태 변화에 따라 화면을 계속 다시 그리는데, 그 과정에서 정해진 순서대로 함수들이 호출된다.

🕐 언제 초기값을 설정해야 하는지
🧼 언제 리소스를 정리해야 하는지
🔄 상태 변경 시 어떤 함수가 몇 번 불리는지 알수있다.

---

💫 생명주기 흐름

createState()
↓
initState()
↓
didChangeDependencies()
↓
build()
↓
didUpdateWidget() ← (widget 변경될 때만)
↓
setState() → build() 반복
↓
deactivate()
↓
dispose()

---

메서드	언제 호출됨?	설명
createState()	위젯이 만들어질 때 한 번	StatefulWidget이 어떤 상태(State)를 사용할지 연결
initState()	상태(State)가 생성될 때 한 번	초기 데이터 설정, API 호출 등 여기서! (super.initState() 꼭 호출!)
didChangeDependencies()	initState() 직후 + 의존성 바뀔 때	context.dependOnInheritedWidgetOfExactType() 호출 시
build()	상태 변경마다	화면 그릴 때마다 호출됨. setState() 하면 다시 실행됨
didUpdateWidget()	부모 위젯이 새로운 인자를 보낼 때	oldWidget과 비교 가능
deactivate()	위젯이 제거될 때 직전	화면에서 사라질 준비 중
dispose()	위젯이 완전히 제거될 때	컨트롤러, 스트림 등 메모리 해제 작업 (필수)

---

💡 실제 개발 시 언제 쓰나?

작업 종류	어디서?	왜?
애니메이션 컨트롤러 선언	initState()	한 번만 초기화해야 하니까
API 첫 호출	initState() or didChangeDependencies()	context 쓸 수 있는 곳에서
메모리 해제	dispose()	스트림, 컨트롤러 꼭 정리
상태 갱신	setState() + build()	UI 다시 그릴 때

---

🔥 상태관리

🎯 왜 상태 관리를 알아야 할까?
Flutter는 UI = 함수(상태)라고 생각해.
즉, “데이터가 바뀌면 UI도 바뀐다” 는 것이다.

그럼 이 데이터를 어디서, 어떻게 바꿀까?

---

💡 Getx, Key

🚀 Getx vs key

✔ getx와 같은 라이브러리는 상태를 변경하고 싶은 위젯을 중앙 관리 라이브러리를 통해 전달 받고, 직접 전달해준다.

✔ 반면에 key 같은 경우, key를 가진 위젯에 직접적으로 접근하기 위해서 쓴다.
예를 들어 위젯의 사이즈 값을 구하기 위해 key를 등록해서 key를 호출하는 방식인데, 해당 방법은 코드가 매우 복잡하기 때문에 getx나 provider 같은 라이브러리를 사용한다고 한다.

---

✏️ setState

class Counter extends StatefulWidget {
  const Counter({super.key});
//
  @override
  State<Counter> createState() => _CounterState();
}
//
class _CounterState extends State<Counter> {
  int count = 0;
//
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++; // ✅ 이 안에서 상태를 바꾸면
            });        // 👉 build()가 다시 호출돼서 UI가 갱신됨!
          },
          child: const Text('증가'),
        ),
      ],
    );
  }
}

---

🔍 핵심 흐름

✔ count 상태를 정의
✔ 버튼을 누르면 setState() 실행
✔ 내부 변수 값 변경
✔ build() 를 다시 실행해서 UI 갱신 💡

---

💫 상태를 위젯 간에 주고받기
위계 구조Tree로, 부모 → 자식 으로 값을 전달하고, 자식 → 부모 로 이벤트를 전달하는 구조가 기본이다. 이게 깊어질수록 절차가 길고, 복잡해서 getx와 같은 라이브러리를 사용하는 것인데...

---

✅ 정리

• setState() 👉 Stateful 위젯 내부에서 상태 바꾸고 UI 다시 그림
• props 전달 👉 부모 → 자식에게 데이터 주기
• callback 전달 👉 자식 → 부모에게 이벤트 알리기
  
  

---

🔥 레이아웃

위젯	핵심 역할	자주 쓰이는 상황
Row, Column	가로/세로로 위젯 나열	기본 UI 정렬
Expanded	남은 공간을 균등하게 차지	버튼, 리스트 등 자동 채움 레이아웃
Flexible	남은 공간을 비율로 차지 (더 유연)	공간 나누기, 크기 제한이 필요할 때
Spacer	빈 공간 넣기 (보통 Expanded로도 가능)	양쪽 띄우기, 간격 조절 등
Stack	위젯을 겹치게 배치	아이콘 위에 뱃지, 카드 배경 등

💬 강의에서는 spacer 대신에 sized box를 쓴 것 같다.

---

✏️ Row, Column

Column(
  children: [
    Text('위'),
    Text('아래'),
  ],
)

Row(
  children: [
    Icon(Icons.star),
    Text('가로 나열'),
  ],
)

✔ 어제 학습했던 children은 이렇게 위젯이 여러개일 때 사용한다.

---

✏️ Expanded

Row(
  children: [
    Expanded(child: Container(color: Colors.red)), // ← 남은 공간 다 차지
    Container(width: 100, color: Colors.blue),
  ],
)

Expanded(flex: 2, child: ...)

✔ 남은 공간을 자동으로 꽉 채우며, 보통 flex 속성도 같이 쓴다.

---

✏️ Flexible

Flexible(
  flex: 1,
  child: Container(color: Colors.green),
)

✔ Expanded랑 비슷하지만 Expanded는 무조건 꽉 채우는 반면에, 조금 더 유연하며, 공간이 부족하면 그에 맞춰 줄어든다.

---

🥽 Expanded vs Flexible

항목	Expanded 📦	Flexible 🧘
📌 목적	남은 공간을 무조건 꽉 채움	공간을 필요한 만큼만 사용
📏 기본 동작	항상 최대 공간 차지함	자식 위젯이 원하는 만큼만 차지
⚙️ 내부 옵션	fit: FlexFit.tight 고정	fit: FlexFit.tight or loose 선택 가능
🔧 child 필요	✅ 있음	✅ 있음
🎯 주 용도	버튼 등 꽉 채우는 레이아웃	텍스트나 작은 위젯 유연하게 넣을 때

---

📦 Expanded

Row(
  children: [
    Expanded(
      child: Container(
        height: 50,
        color: Colors.red,
      ),
    ),
    Container(
      width: 100,
      height: 50,
      color: Colors.blue,
    ),
  ],
)

✔ 빨간 박스가 남은 공간 전부 차지한다.

---

📦 Flexible

Row(
  children: [
    Flexible(
      fit: FlexFit.loose, // 💡 원하는 만큼만 차지
      child: Container(
        width: 80,
        height: 50,
        color: Colors.red,
      ),
    ),
    Container(
      width: 100,
      height: 50,
      color: Colors.blue,
    ),
  ],
)

✔ 빨간 박스는 80만큼만 차지한다. → 💡 유연함!

---

✅ 핵심 한 줄 요약
👉 Expanded = 반드시 공간 다 차지 ❗강제
👉 Flexible = 필요하면 공간 줄일 수 있음 ✅ 선택

---

🔍 예시

예시 상황	추천 위젯
버튼 두 개를 나란히, 똑같은 크기로	Expanded
텍스트가 너무 커지면 줄이게 하고 싶음	Flexible
일부는 꽉 채우고, 일부는 간격만 주기	Expanded + Spacer

---

✏️ Spacer

Row(
  children: [
    Icon(Icons.arrow_back),
    Spacer(), // ← 중간에 빈 공간
    Icon(Icons.menu),
  ],
)

---

🥽 Spacer vs Flexible

항목	Spacer 🧱	Flexible 🧘
📌 목적	빈 공간 만들기 (간격 벌리기)	위젯을 유연하게 배치
🧩 child 필요	❌ 없음	✅ 필수 (Flexible(child: ...))
⚙️ 내부 구현	Flexible(child: SizedBox()) 로 되어 있음	직접 유연한 위젯 넣기 가능
📏 크기 설정	flex 비율로 공간만 차지	fit 옵션으로 줄어들거나 늘어남
🎯 주 용도	위젯 사이 간격을 자동 조절	위젯 크기를 유연하게 조절

---

🥽 Spacer vs SizedBox

항목	Spacer 🧱	SizedBox 📦
📌 목적	남은 공간을 차지하는 빈 위젯	고정된 크기의 빈 공간 만들기
🚀 사용 위치	Row, Column 내부 (Flex 계열만)	어디든 사용 가능 (Stack, Center 등 포함)
📏 크기 지정	직접 크기 지정 ❌ → 자동으로 늘어남	width, height 직접 설정 가능
🔧 flex 가능	flex: 1 등으로 비율 설정 가능	비율 지정 ❌, 무조건 고정 크기
💬 예시 용도	위젯 사이에 비율 간격 띄우고 싶을 때	위젯 사이에 딱 8px 간격 넣고 싶을 때

---

📦 SizedBox 예제

Column(
  children: [
    Text('위'),
    SizedBox(height: 20), // ✅ 위아래로 20px 간격
    Text('아래'),
  ],
)

✔ 딱 떨어지는 간격이 필요할 때 좋으며, 크기 없는 SizedBox()는 그냥 빈 위젯이다.

---

🧱 Spacer 예제

Row(
  children: [
    Icon(Icons.menu),
    Spacer(), // ✅ 남은 공간 다 차지해서 오른쪽 밀어냄
    Icon(Icons.search),
  ],
)

✔ Spacer()는 남은 공간을 자동으로 채워주며, flex 설정 가능하다. Spacer(flex: 2) 등

---

✏️ Stack

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.blue),
    Positioned(
      right: 0,
      bottom: 0,
      child: Icon(Icons.star, color: Colors.yellow),
    ),
  ],
)

✔ 저번에 배웠던 Stack, 사용자 아이콘에 +버튼을 겹쳐 만드는 것 처럼 활용 가능하다.

---

위젯	설명
Center	가운데 정렬
Align	위치를 좌측/우측/하단 등으로 설정 가능
SizedBox	고정 크기 or 간격 만들기

---

🎓 학습 방향

💭 알고리즘

• 다음 주차부터 매일 아침 1시간씩 진행하게 되는데, 만약 어렵거나, 문제 개수가 부족할 경우 추가적으로 학습을 진행하는게 좋을 것 같다.
  아직 코드가 익숙하지 않고, 뇌가 딱딱하게 굳어있는 것 같아서... 말랑말랑하게 만드려면 필요할 것 같은데, 다른 반의 알고리즘 문제를 하나씩 풀어보는 것도 나쁘지 않을 것 같다.

---

🕐 강의

• Dart 기초 문법으로 강의도 지급되어 수강을 진행해야 될 것인데, 아직 강의 수준을 모르니 공부 시간이 얼마나 걸릴지 모른다.
  기존에는 쭉 듣거나, 중간중간 멈춰서 궁금한 점을 해결하고 이어 듣거나 했었는데... 만약, 분량과 내용이 적절해서 기간 안에 촉박하지 않게 여유롭게 수강할 수 있다면, 해당 강의에 대해 추가 학습을 진행 할 예정이다.

---

🥽 모작

• 코드와 익숙해지는게 좋고, 무엇보다 실전으로 직접 작성해보는게 좋다고 해서, 내가 원하는 앱 하나를 선택해서 모작하고자 한다.
• 우선 내가 사용해본적 있는 하루콩을 모작해보면 어떨까 싶은데, 강의에서 실습으로 나왔던 메모 관련해서도 활용할 수 있을 것 같다.
  하루 일기 어플로, 화면 UI/UX 구성과 레이아웃, 텍스트를 입력하고 저장하고, 수정하고, 삭제하는 기능까지 해보려고 한다.
• 그치만 이걸 언제까지 어느 분량으로 완료할지는 아직 모르겠다. 틈 날때 조금씩 하는 방향으로 가지 않을까 싶다.

---

💻 Git

• 위에 모작이나, 학습하면서 개인, 팀 프로젝트를 진행할 때 Git을 쓰는 연습을 계속해서 익숙해지기가 필요하다.

또 어떤 학습이 필요할까..💦

---

🌷 마무리

---

🚀 제출

📘 KDT

Keep - 의견을 제시하고 설득하고 받아들이는 팀원과의 의사소통과 열려있는 자세, 역할 분담

Problem - 팀원과 데일리 스크럼 공유가 잘 안되어서 학습 현황도 잘 공유가 안된 점

Try - 서로 학습 진도를 공유하고, 문제점이 발생한다면 도움을 주는 등 프로젝트 외에 추가적인 소통이나 잡담도 있으면 좋지 않을까

---

💭 개인 피드백(느낀점) - 처음에는 바로 팀 프로젝트도 있다고 해서 어떻게 진행될 지 걱정이 많았는데, 다들 적극적으로 의견 나누시고, 서로 조율하시면서 소통하는 모습에 다행이라고 생각했습니다.

먼저 “~내용 어떻게 할까요” 하시면서 다같이 참여할 수 있도록 이야기 꺼내시기도 하고, 열심히 이탈하는 분 없이 이번 주차 마칠 수 있어서 좋았던 것 같습니다.

내향적이다 보니 프로젝트 같은 거나, 제출해야 되는 것에 대해서만 이야기를 나누고 있지만 조금 더 학습이나 다른 이야기들도 나눌 수 있으면 좋겠습니다!

다들 고생하셨습니당🎉

---

📅 주차

📜 온보딩 주차 마무리

🕐 시간표

---

---

• 12시간 집중!
• [앱개발 종합반] 강의로 커리큘럼 흐름 파악
• 슬랙, 노션, zep 등 학습 공간에 익숙해지기
• 특강 시간에 zoom 접속하기
• 입실/퇴실 체크하는 습관!
• 튜터님께 질문하기, 매니저와 소통하기, 팀원들과 스크럼하기 등등..

---

🕐 2주차 시간표

---

---

🔥 Dart 문법 주차에는 팀 프로젝트 없이 개인 과제만 있다고 한다..! 🔥
🔥 그래서 기초 및 심화 진행할 때는 개인 학습에 좀 더 집중할 수 있어서 능력을 끌어올리기에 좋은 것 같다. 🔥

---

🚀 Dart 프로그래밍 Chapter 발제

📋 키워드

✔ 조건문과 반복문
✔ 함수와 컬렉션
✔ 함수형 프로그래밍
✔ 클래스와 메서드
✔ 객체지향과 상속

---

🌱 이번 주차에는 캠프 생활에 익숙해지기, 공부 습관 익히기를 잘 적응한 것 같다.
학습량이나 그 밀도는 높지 않은 것 같지만 갑자기 12시간 학습하기란 쉽지 않으니까 나름 만족한다.

---

🌱 다음 주차에는 본격적으로 Dart 문법 기초에 대해 진행될 것 같아서 기대된다!
뭔가 수학 공식 같이 개념은 알겠고, 수식도 알겠지만 그걸 활용하거나 심화한 문제가 있다면 해결이 어렵달까 적응하는게 조금 어려운 것 같다.