20231101 TIL

Today 요약 

[✅] 프로그래머스 코딩테스트 3문제 

[✅] flutter 강의 2개

[✅] React 기초 강의 4개

[✅] flutter 코드챌린지 dark 모드

---

배운 점

1. javaScript

1-1 진수 변환

# 2진수>10진수 변환 
var num = "1111011"; 
var c = parselnt(num, 2);  //"123"

# 10진수>2진수 변환
var num = 123;
var c = num.toString(2); //"1111011"

1-2 문자열 replace()

# 0인 텍스트를 모두 제거하고 싶을 때 
문자열.replace(/0/g,"");

 

1-3 reduce 복습

javaScript reduce 알아보기

2. flutter

2-1 ChangeNotifier

• 상태관리패턴 중 하나인 Provider 패턴을 구현하는데 도움을 주는 클래스 중 하나

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    // 상태 변경을 알리기 위해 notifyListeners() 메서드를 호출합니다.
    notifyListeners();
  }
}

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ChangeNotifier Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Counter:',
              ),
              Text(
                // CounterModel의 count 속성을 사용합니다.
                '${context.watch<CounterModel>().count}',
                style: TextStyle(fontSize: 24),
              ),
              ElevatedButton(
                onPressed: () {
                  // CounterModel의 increment 메서드를 호출하여 상태를 변경합니다.
                  context.read<CounterModel>().increment();
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ChangeNotifier class - foundation library - Dart API

2-2 valueNotifier

• 이 클래스는 value 속성을 가지고 있으며, 이 속성을 변경 가능한 값을 나타낸다 
• 값 변경 탐지 
  • ValueNotifier는 값이 변경될 때 리스너에 알림을 보낸다. 이를 통해 위젯이 상태 변경을 감지하고 화면을 업데이트 할 수 있다

(new) ValueNotifier<bool> ValueNotifier(bool _value)
package:flutter/src/foundation/change_notifier.dart

Creates a [ChangeNotifier] that wraps this value.

import 'package:flutter/foundation.dart';

void main() {
  final count = ValueNotifier<int>(0);

  count.addListener(() {
    print('Count changed: ${count.value}');
  });

  count.value = 5; // 값 변경

  count.dispose(); // ValueNotifier 사용 후 메모리 해제
}

 

ValueNotifier class - foundation library - Dart API

 

2-3 ValueListenableBuilder

• 앱에 사용하는 데이터가 있을 때 데이터가 바뀔 때마다 앱을 업데이트 해야한다 데이터가 어디에서 바뀌는지도 알아야하고 여러 곳에서 ui를 수동으로 업데이트를 해야하기 떄문에 복잡
• 이때 ValueNotifter와 ValueListenabelBuilder 위젯을 사용한다
• 콘텐츠가 ValueListenable과 동기화된 상태로 유지되는 위젯
• 값이 바뀔 때마다 값 상태를 처리하고 리스너에게 알려줄 ValueNotifier를 사용한다

ValueNotifier(45); 

ValueListenableBuilder<int> (
	valueListenable : value,
    builder: (context, value, _) {
    	return Text("Value is $value');
    }
)

ValueListenableBuilder class - widgets library - Dart API

 

 

 

3. React

3-1 babel 

• jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 변경해줌

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

3-2 JSX 

• React 와 같은 JS 라이브러리 및 프레임워크에서 사용되는 확장된 javascript 문법이다. jsx는 javaScript 코드 내에서 XML 또는 HTML과 유사한 문법을 사용하여 컴포넌트를 정의하고 렌더링하는데 도움이 된다