[WIL] Day 15 세 번째 주를 마무리 하며

현서·2025년 12월 12일

[TIL] Flutter 9기

목록 보기
27/102
post-thumbnail

WIL

1️⃣ 이번 주에 배운 것

flutter 위젯

모닝 아카이브를 하면서 플러터 위젯들을 살표보는 수업을 진행했는데 진짜 이딴 게 왜 있지? 이런 위젯도 있었고 와우 엄청 편리하다라고 생각한 위젯도 있었다. 앞으로 배울 위젯이 더 많이 남았으니 배웠던 위젯들을 잘 정리하고 넘어가야겠다.

사용자 입력값 받기

지금까지는 코드 안에 값을 정해두고 실행만 했는데 이번 주는 dart:io 라이브러리를 통해 사용자의 입력을 직접 받는 방법(stdin)을 배웠다. 사용자가 입력한 값은 기본적으로 문자열(String)로 들어오기 때문에, 이를 내가 원하는 숫자나 다른 형태로 변환하는 과정이 중요하다는 것을 익혔다.

파일 읽고 쓰기

변수에 담긴 데이터는 앱을 끄면 사라지지만 파일 읽기/쓰기를 통해 데이터를 저장하고 불러오는 방법을 배웠다. 텍스트 파일을 생성해서 내용을 적고, 다시 불러와서 출력해보며 익혀봤다.

2️⃣ 적용한 것 / 해본 것

파일을 잘 읽어오자

지난주 계획이었던 '상황에 맞는 에러 메시지 반환'을 이번 주 입출력 실습에 적용해봤다.
사용자 입력: 맞는 이름을 입력해야하는데 없는 이름을 입력할 때 (FormatException)
파일 읽기: 불러오려는 파일 경로가 잘못되었거나 파일이 없을 때 (FileSystemException)
이런 상황에서 프로그램이 죽지 않고 "올바른 이름을 입력해주세요"나 "파일을 찾을 수 없습니다"라고 친절하게 안내하도록 코드를 짰다.

공식 문서로 메서드 찾아보기

파일을 읽을 때 readAsString 외에도 한 줄씩 읽는 readAsLines 등 다양한 메서드가 있다는 것을 공식 문서를 통해 확인하고 상황에 맞춰 써봤다. 그리고 읽어온 파일은 Split 문서를 찾아보며 객체로 저장하는 법을 사용했다.

3️⃣ 어려웠던 점

목표 달성 후의 페이스 조절

이번 주는 Dart 심화 과제 부분이 계획했던 목표를 주 초반에 다 끝내버렸다. 목표를 달성한 건 기쁜 일이지만, 그 뒤에 바로 이어서 할 추가 목표를 세워두지 않아 붕 뜨는 시간이 생겼다. 시간이 남았을 때 멍하니 있기보다, 튜터님께 과제를 받거나 공식 문서를 본다거나 알고리즘 문제를 한 단계 높이는 식의 플랜 B가 필요함을 느꼈다.

4️⃣ 다음 주 계획

  • 목표를 100% 달성했을 때를 대비한 '추가 목표'
  • 기능 구현이 빨리 끝나면 내 코드를 더 짧게 줄여보는 리팩토링 시간 갖기

5️⃣ 이번 주를 정리하며..

요일요약
월요일List, Split, File 뜯어보기
화요일알고리즘 문제 풀기 & 위젯 공부
수요일Table, SliverAppBar & Set 뜯어보기
목요일SliverGrid & SliverList & FadeInImage

📍 튜터님과 Widget 공부

StreamBuilder

StreamBuilder란?

비동기 데이터 흐름(Stream)을 구독해서 데이터가 들어올 때마다 UI를 자동으로 다시 그리는 위젯

왜 쓸까?

실시간 값 변화 반영해야 할 때 사용
예: 채팅 메시지, 센서 데이터, Firestore 실시간 데이터

StreamBuilder<T>(
  stream: someStream,          // 구독할 스트림
  initialData: T,              // 초기값(선택)
  builder: (context, snapshot) {
    // snapshot = 현재 스트림 상태 + 데이터
    return 위젯;
  },
)

snapshot 에 들어있는 것

snapshot.data → 최신 데이터
snapshot.hasData → 데이터 유무
snapshot.error → 오류 있을 때
snapshot.connectionState → 스트림 상태
waiting : 데이터 대기 중
active : 데이터 들어오는 중
done : 스트림 종료
none : 스트림 없음

사용 예시

StreamBuilder<int>(
  stream: numberStream,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }

    if (snapshot.hasError) {
      return Text('에러: ${snapshot.error}');
    }

    if (!snapshot.hasData) {
      return Text('데이터 없음');
    }

    return Text('값: ${snapshot.data}');
  },
)
  • 1초마다 숫자 증가
Stream<int> counterStream() async* {
  int i = 0;
  while (true) {
    await Future.delayed(Duration(seconds: 1));
    yield i++;
  }
}
StreamBuilder<int>(
  stream: counterStream(),
  builder: (context, snapshot) {
    return Text('${snapshot.data}');
  },
);

FutureBuilder vs StreamBuilder

항목StreamBuilderFutureBuilder
목적여러 번 데이터 변경 처리한 번만 데이터 받아올 때
실시간 갱신OX
채팅, 센서로그인, 초기 데이터 로드

0개의 댓글