투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

위젯 실습용 템플릿 작성 [ 기본코드 ] import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: // 1 여기에 예제 코드 작성하기 ), ), ); } } 텍스트 관련 위젯 화면에 글자를 보여주려면 글자를 렌더링할 수 잇는 위젯을 사용해야 한다. [ Text 위젯 ] Text 위젯은 글자를 적고 스타일링 하는 위젯이다. 첫번째 포지셔널 파라미터에 원하는 문자열을 작성하고 style..

‘Hello Code Factory’ 출력하기 import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: Text( 'Hello Uri', ), ), ), ) ); } MaterialApp : 머터리얼 디자인 기반의 위젯들을 사용하게 해주는 위젯 Scaffold : MaterialApp 위젯 다음으로 위치하며 화면 전체를 차지하며 레이아웃을 도와주고 UI관련 특수 기능을 제공 알림과 같은 스낵바를 실행한다던가, 화면의 위에 앱바를 추가하거나 아래에 탭바를 추가하는 기능을 제공한다. 플러터는 마지막 매개변수의 끝에 ' , '기호를 추가하는 코딩 스탠다그가 있다. 기호..

Future List나 Set처럼 제네릭으로 어떤 미래의 값을 받아올지를 정할 수 있다. Future name; // 미래에 받을 String값 Future number; // 미래에 받을 int값 Future isOpened; // 미래에 받을 boolean값 비동기 프로그래밍은 서버 요청과 같이 오래 걸리는 작업을 기다린 후 값을 받아와야 하기 떄문에 미래값을 표현하는 Future클래스가 필요하다. void main() { addNumbers(1, 1); } void addNumbers(int number1, int number2){ print('$number1 + $number2 계산 시작!'); // 1 Future.delayed()를 사용하면 일정 시간 후에 콜백 함수를 실행할 수 있음 Futu..

객체지향 프로그래밍의 필요성 수천 줄에서 수만 줄의 코드를 작성할 떄 모든 코드를 main()함수에 작성하면 코드 정리가 안 돼 유지보수 및 협업에 상당히 큰 장애물이 된다. 객체지향 프로그래밍을 하면 변수와 메서드를 특정 클래스에 종속되게 코딩할 수 있다. 클래스를 사용해서 밀접한 관계가 있는 함수와 변수를 묶어두면 코드관리가 용이해진다. 클래스를 만들어서 사용하면 필요한 값들만 입력하도록 제한하고 클래스에 특화된 함수들을 선언할 수 있다. 클래스는 일종의 설계도로서 데이터가 보유할 속성과 기능을 정의하는 자료구조이다. 아파트 설계도와 실물 아파트의 관계가 클래스와 인스턴스의 관계이다. 클래스를 설계도, 인스턴스화를 실물 아파트라고 생각하면 된다. 인스턴스화되어야 실제 사용할 수 있는 데이터가 생성된다..

Map 타입 맵 타입은 키와 값의 짝을 저장한다. 순서대로 값을 저장하는데 중점을 두는 리스트와 달리 키를 이용해서 원하는 값을 빠르게 찾는데 중점을 둔다. Map 맵이름 형식으로 생성한다. void main() { Map dictionary = { 'Harry Potter':'해리 포터', 'Ron Weasley':'론 위즐리', 'Hermione Granger':'헤르미온느 그레인저', }; print(dictionary['Harry Potter']); // 해리 포터 print(dictionary['Hermione Granger']); // 헤르미온느 그레인저 } 키와 값 반환받기 void main() { Map dictionary = { 'Harry Potter':'해리 포터', 'Ron Weas..

다트 입문 1. 다트는 UI를 제작하는 데 최적화되어 있다. (완전한 비동기 언어이며 이벤트 기반) 2. 핫 리로딩을 통해 코드의 변경 사항을 즉시 화면에 반영 가능 3. 멀티 플랫폼에서 로깅하고 디버깅하고, 실행할 수 있다. 4. 자바스크립트로의 완전한 컴파일을 지원한다. 컴파일이란? 다트(Dart) 언어가 자바스크립트로의 완전한 컴파일을 지원한다는 것은 다트 코드를 자바스크립트 코드로 변환할 때 완전한 변환을 지원한다는 의미 5. 백엔드 프로그래밍을 지원한다. void main() { print('hello world'); } 이걸 출력하려면 터미널에서 dart lib/main.dart 명령어를 실행하면 'hello world'가 출력된다. 다트는 프로그램 시작점인 엔트리 함수 기호로 main()을 ..

css-in-js는 성능에 민감하기 때문에 외부로 분리해주는게 중요하다. 외부로 분리했을 경우 스타일 렌더링 될때마다 직렬화 되지 않는다, 또한 스타일 관련 코드를 분리해서 로직에 집중하고 jsx를 볼때 조금 더 간결하게 볼 수 있다. 객체 Props 지양하기 두 객체 모두 그냥 눈으로 봤을때는 같지만 실행을 시켰을때는 false로 나오게된다. 리액트는 다른점을 찾아내서 리렌더링을 시키는데 두개가 같지 않다고 나오면 불필요한 리렌더링이 일어나게 된다. 해결방법 1. 변하지 않는 값이라면 외부로 드러내기 2. 필요한 값만 객체를 분해해서 Props로 내려준다. const [propArr, setPropArr] = useState(['hello''hello']) return( ) 결국 props를 특정값이 ..

useReducer useState와 같이 상태를 get할수도 있고 set할수도 있다. 초기값으로는 첫번째 인자 : reducer, 두번째 인자 : 초기상태를 줘야한다. reducer에는 redux의 reducer와 비슷하다 const [state, dispatch] = useReducer(reducer, INUT_STATE) // dispatch는 액션을 트리거한다. [ reducer 정의 ] 사용할땐 dispatch를 사용해서 type을 바꿔줌으로써 상태를 변경할 수 있다. 상태를 숨겨서 추상화를 시킬 수 있다. --- 상태 로직 Custom Hooks으로 useprefix를 지키면서 해야한다! jsx 문법을 제외한 로직을 따로 커스텀훅으로 빼서 사용할 수 있다. 이렇게 하면 로직이 간단해보이고 재사..