TIL

https://ashen99.tistory.com/836

https://ashen99.tistory.com/838

https://ashen99.tistory.com/835

https://ashen99.tistory.com/834

https://ashen99.tistory.com/840

 

 

 

 

 

TIL (Today I Learned) – 2025.05.19

 

1. Flutter 다이어리 위젯 (Diary Screen)

📖 공부 내용 정리

• StatefulWidget + FutureBuilder
  • 일기 데이터를 _diaryListFuture에 저장하여 build() 시 불필요한 재요청 방지
  • FutureBuilder로 로딩·오류·데이터 상태별 UI 분기
• 스와이프 삭제 (Dismissible)
  • 리스트 항목을 좌→우 스와이프로 삭제
  • 커스텀 배경·아이콘 제공
• 목록 렌더링 & 내비게이션
  • ListView.builder + ListTile로 제목·미리보기 표시
  • 탭 시 Navigator.push로 상세 화면 이동, pop(context, result)로 결과 반환
  • FloatingActionButton으로 새 일기 작성 후 화면 갱신
• 검색·페이징·캘린더
  • TableCalendar 연동
  • 검색창 + 페이지 번호(Row) → currentPage, pageSize, getPageNumbers() 로직 구현

🔑 핵심 개념

• Future 캐싱: initState()에서만 Future를 생성해 재빌드 시 재호출 방지
• Dismissible: 제스처 기반 삭제 + 배경 피드백
• Navigator 결과 수신: push → pop 간 데이터 전달 패턴
• 커스텀 페이징: 동적으로 계산된 페이지 버튼

💡 개인 인사이트

FutureBuilder를 활용해 UI가 부드럽게 처리되는 걸 체감했어요.
페이지 이동 후 결과를 반환받아 리스트를 즉시 갱신하니 사용자 경험이 훨씬 좋아집니다.

---

2. Flutter에서 JSON 파일을 .dart 변수로 가져오기

📖 공부 내용 정리

1. 애셋 등록
2. flutter: assets: - assets/data/schedule.json
3. 로드 & 디코드
4. final jsonStr = await rootBundle.loadString('assets/data/schedule.json'); final items = List<Map<String, dynamic>>.from(json.decode(jsonStr));
5. 비동기 UI 바인딩
   • loadScheduleItems() → FutureBuilder
   • ListView.builder에서 item['emoji'], item['name'] 등 사용

🔑 핵심 개념

• rootBundle: Flutter 애셋 로딩 표준 API
• json.decode: 문자열 → Dart 객체
• FutureBuilder 패턴: 로딩, 성공, 오류에 따른 UI 처리

💡 개인 인사이트

JSON 처리 로직을 한 군데에 모아두면 로컬/원격 데이터 소스가 바뀌어도 코드 수정이 적어서 편리합니다.
경로 오타 방지를 위해 CI 테스트에 애셋 로드 검증을 추가해야겠습니다.

---

3. Flutter 위젯 레이아웃 정렬

📖 공부 내용 정리

• 전체 확장 방법
  • SizedBox.expand(), Container(width: double.infinity, height: double.infinity)
  • Expanded / Flexible, CrossAxisAlignment.stretch
• 좌측 상단 정렬
  • Align(alignment: Alignment.topLeft)
  • Container(alignment: Alignment.topLeft)
  • Stack + Positioned(top:0,left:0)
• 조합 팁
  • LayoutBuilder로 부모 크기 활용
  • Spacer, SizedBox로 정밀 조정

🔑 핵심 개념

• Expanded vs. Flexible: 전자(무조건 채우기) vs. 후자(여유 공간만)
• Align vs. Container(alignment): 역할 분리로 가독성 ↑
• Stack + Positioned: 절대 위치 컨트롤

💡 개인 인사이트

CrossAxisAlignment.stretch를 적극 활용하니 불필요한 double.infinity 지정이 줄어들어 코드가 더 간결해졌습니다.
반응형 레이아웃이 필요할 때 LayoutBuilder가 정말 강력하다는 걸 새삼 느꼈어요.

---

4. MariaDB 설치 및 기초 접속

📖 공부 내용 정리

1. 설치 & 설정
   • 문자셋 UTF‑8, 스토리지 엔진 InnoDB 기본
   • Windows 서비스 자동 실행, 포트 3306
2. 접속 확인
   • CLI: mysql -u root -p
   • GUI: MariaDB 전용 클라이언트
3. 주요 단축 명령어
   • \?, \c, \G, \s 등
4. 실습 예시
5. CREATE DATABASE test_db; USE test_db; DESCRIBE users\G; SOURCE ./init_data.sql;
6. 추가 학습 자료
   • 공식 문서, 생활코딩, Docker 이미지, SQL Fiddle

🔑 핵심 개념

• 인코딩 & 엔진 설정: 다국어 지원·트랜잭션 안정성 확보
• CLI vs. GUI: 작업 효율과 자동화 스크립트 활용

💡 개인 인사이트

처음엔 GUI로 환경을 익히고, CLI로 넘어오면 자동화·스크립트 작성이 훨씬 쉬워집니다.
Docker 기반 테스트 환경을 구성해두면 여러 버전 간 차이를 빠르게 실험할 수 있겠어요.

---