FE(36)
-
[Redux] Redux 기본
리덕스를 사용하려면 리덕스를 우선 설치해야 한다. npm install redux 웹 브라우저에서 앱 상태를 관찰하고 디버깅할 수 있도록 redux-devtools-extension 툴을 설치한다. npm install -D @redux-devtools/extension 앱 상태를 저장할 전역 스토어를 초기화 하기 위한 store 파일을 만든다. createStore 앱 상태를 보관하는 redux 저장소를 반환하는 함수다. 세 개의 인자를 전달받는다. reducer 현재 상태와 액션을 전달받아 다음 상태를 반환하는 함수다. 전달 받은 액션에 대응되는 작업을 하여 상태를 변경한다. preloadedState 초기 상태이다. enhancer 미들웨어나 서드파티 기능을 저장소에 추가하기 위해 지정한다. Red..
2023.05.11 -
[React] Context API 기본
리액트에 내장된 상태 관리 라이브러리인 Context API는 특정 컨텍스트 내의 모든 컴포넌트 간에 데이터를 공유할 수 있다. 명시적으로 다른 컴포넌트에 속성값 형태로 데이터를 전달할 필요가 없다. createContext 컴포넌트에 제공하고 읽을 수 있는 컨텍스트를 생성하는 함수다. 인자로 기본값을 전달할 수 있다. context.Provider Provider 하위에 있는 모든 컴포넌트들은 context 값을 공유한다. Provider의 value 속성값에 context 값을 대입할 수 있다. useContext 컨텍스트를 구독하고 읽을 수 있는 리액트 훅이다. 구독하고자 하는 컨텍스트 인스턴스를 전달하면 컨텍스트의 값을 반환한다.
2023.05.10 -
[Dart] 믹스인
Mixin mixin 예약어로 믹스인을 선언한다. mixin MyMixin{ int data = 10; void func() { print("mixin"); } } 믹스인에는 변수와 함수를 선언할 수 있지만 클래스가 아니라 생성자는 선언할 수 없다. 생성자가 없으니 객체를 생성할 수 없다. 믹스인 활용 다트를 비롯하여 대부분의 객체지향 언어에서 다중 상속을 지원하지 않는다. 여러 클래스에서 선언된 멤버를 상속한 것처럼 사용하고 싶을 때 믹스인을 사용한다. 이 때 with 예약어를 사용한다. mixin MyMixin { int data = 10; void func() { print("mixin"); } } class MyClass with MyMixin { void func() { print("$data"..
2023.04.28 -
[Dart] 다트에서 제공하는 연산자
기초 연산자들은 다른 프로그래밍 언어와 비슷하다. 나누기 연산 / 나누기 결과를 실수로 반환한다. ~/ 나누기 결과를 소수점을 버리고 정수로 반환한다. 타입 확인 is 피연산 객체가 특정 타입이라면 true, 아니면 false를 반환한다. class User { } main() { Object obj = User(); print(obj is User); } 타입 변환 as 상위 클래스에서 하위 클래스로 자동 형변환이 안되므로 명시적으로 형변환 하는 연산자다. class User { func() {} } main() { Object obj = User(); (obj as User).func(); } 반복 접근 같은 객체에서 반복해서 접근할 때 사용할 수 있는 연산자이다. class User { String..
2023.04.28 -
[Dart] 다트란 무엇인가
다트는 크로스 플랫폼에 기반을 둔 프로그래밍 언어이다. 플러터를 개발하는데 다트가 쓰인다. 다트 파일 실행 main 함수가 프로그램의 엔트리 포인트이다. 다트 엔진이 다트 언어로 작성된 파일을 실행하면 main 함수가 호출되는 것! 다트 파일 구성 요소 다트 파일은 top level에 변수, 함수, 클래스를 선언할 수 있다. Java는 top level에 작성할 수 있는 구성 요소가 클래스뿐이지만 다트 언어는 변수, 함수도 선언할 수 있다는 차이점이 있다. int num=10; // 변수 선언 void sayHello(){ // 함수 선언 print("Hello World!"); } class Hello { // 클래스 선언 int num=20; void sayHello() { print("Hello, ..
2023.04.27 -
[Flutter] flutter 프로젝트 만들기
vscode에서 Dart, Flutter 플러그인 설치를 한다. 팔레트에서 flutter 프로젝트를 생성한다. lib : 주 작업 폴더 pubspec.yaml : 라이브러리 및 설정을 하는 폴더 android : Android 프로젝트 폴더 ios : IOS 프로젝트 폴더 web : Web 프로젝트 폴더 Main.dart 파일 작성하기 import "package:flutter/material.dart"; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { re..
2023.04.26