20일차 과제 링크 👉 20일차 과제

로컬에 데이터 저장

• 중요하지 않은 가벼운 데이터는 서버에 저장할 필요가 없다.
  • 로컬 기반 어플
    • 모든 데이터를 앱에 저장
  • 자동 로그인
    • 로그인 후 받은 JWT 토큰을 내부에 저장해놓는다.
    • 그리고 어플이 켜지면 불러와서 적용
  • 장바구니
    • 서버에 굳이 넣을 필요가 없음
    • 만약 사업적인 부분에서 기획자나 마케터가 장바구니 정보가 필요하다면 집계를 해야하므로 서버에서 처리해야 함
  • 동영상 시청을 어디까지 했는지 확인
    • 유튜브의 경우 멀티 디바이스 체계를 가지고 있기에 서버에서 관리한다. 모든 디바이스에서 일관성을 유지하기 위함

앱 데이터

• 앱 내에 저장하는 데이터, 언제든 불러와서 사용할 수 있다

기본 순서

• 앱 데이터 접근 ‘객체’ 초기화
• 내용 저장
• 내용 불러오기

Shared Preferences

• https://pub.dev/packages/shared_preferences

사용법

• 초기화

  SharedPreferences? prefs;
  
  @override
  void initState() {
    super.initState();
    initPreferences();
  }
  
  initPreferences() async {
    prefs = await SharedPreferences.getInstance();

• 데이터 저장

  .set(맞는 type).('이름', 값);
  
  prefs.setInt('number', 123);

• 데이터 가져오기

  .get(맞는 type).('이름');
  
  prefs.getInt('number');

• 버튼을 누르면 카운트 값이 올라가고, 그 카운트 수를 앱 데이터로 저장해서 사용해보기

  import 'package:flutter/material.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatefulWidget {
    const MyApp({super.key});
  
    @override
    State<MyApp> createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
    var _counter = 0;
    SharedPreferences? prefs;
  
    @override
    void initState() {
      super.initState();
      initPreferences();
    }
  
    // 초기화
    void initPreferences() async {
      prefs = await SharedPreferences.getInstance();
      if (prefs != null) {
        _counter = prefs!.getInt('counter') ?? 0;
        setState(() {});
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('플러터 굉장하다'),
            backgroundColor: Colors.transparent,
            foregroundColor: Colors.black,
            elevation: 0,
          ),
          body: Center(
            child: Text('$_counter', style: TextStyle(fontSize: 48),),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                _counter ++;
              });
              print(_counter);
              print(prefs);
              if (prefs != null) {
                prefs!.setInt('counter', _counter);
  
              }
            },
            child: Icon(Icons.add),
          ),
        ),
      );
    }
  }

---

20일차 끝!