나만의 개발노트

[문제]https://webtoon-crawler.nomadcoders.workers.dev프로그램을 실행하면, 위 링크의 API 정보를 불러와 WebtoonModel 클래스로 만들기-> 확인을 위해 정보의 title 출력[정답]1. http 설치 *설치 방법 :https://pub.dev/packages/http/install 2. home_screen.dart 작성 3. api_service.dart 작성Uri.parse()로 Uri 변수 생성get()으로 정보 불러오기  - 반환타입이 Future이므로, await/async 키워드 사용get()의 리턴값.statusCode == 200 (정상) 이면, String 타입으로 저장되어 있는 response.body를 클래스화4. WebtoonModel..

[API]: Application Programming Interface - 소프트웨어 응용 프로그램들이 서로 상호작용할 수 있게 해주는 인터페이스 1. 데이터 교환 : 두 시스템 간에 데이터 주고 받기   ex) 날씨 앱 - 날씨 데이터를 제공하는 서버로부터 데이터를 가져오는 경우 2. 기능 호출 : 다른 시스템의 기능을 호출   ex) 결제시스템 API를 사용하여 결제 처리 3. 추상화 : 복잡한 구현 세부 사항을 숨기고, 단순화된 인터페이스를 제공 1. REST API : HTTP를 기반으로 하는 API, 자원을 URL로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 작업을 수행 * REST API는 주로 JSON 형식으로 데이터 주고 받음2. SOAP..

[flexible]: UI를 비율에 기반해서 더 유연하게 조절할 수 있게 해주는 위젯비율은 속성 flex의 값에 지정framework와 flutter엔진이 알아서 크기 계산... Flexible( flex: 1, child: Container( color: Colors.red, ), ), Flexible( flex: 3, child: Container( color: Colors.blue, ), ),... (실행 시 화면)    [Alignment]: Container위젯의 속성으로, Container내부에서의 위치를 지정하는 속성Container( alignment: Alignment.center, ...),[expanded]: 페이지를 확장..

모든 widgetd은 lifecycle(생명주기)가 존재한다.statefulWidget에는 생명주기와 관련된 3가지 메소드가 존재한다.initState() : 속성 초기화하는 메소드build() :위젯의 UI를 만드는 메소드dispose() : 위젯이 스크린에서 제거될 때 호출되는 메소드 [ initState() ]: 속성을 초기화하는 메소드  보통 클래스 상단에서 할 수 있기 때문에 필요하지 않다 (아래 코드)class MyLargeTitle extends StatefulWidget{ int counter = 0; ...} -> 부모 요소에 의존하는 데이터를 초기화 해야할 때 사용ex) API 업데이트 구독 등단 한번만 호출된다build보다 먼저 호출된다[ dispose() ]: 위젯이 스크린에서..

[ BuildContext context 간단 정리 ]: context는 위젯 트리에서 해당 위치의 위치 정보와 부모 요소들의 모든 정보를 담고 있다-> 부모의 데이터에 접근할 수 있게 해준다. (A handle to the location of a widget in the widget tree)  즉, widget tree에 가장 마지막 자식인 Text(My Large Title)에서 부모인 MaterialApp의 데이터에 접근 할 수 있게 해준다* MyLargeTitle이라는 분리된 Class로 정의되어 있더라도, 정보를 가져옴. [ Theme - 스타일시트 저장 ]: flutter에서는 위젯의 스타일을 한 곳에 저장할 수 있는 기능을 제공한다.-> color, style등을 모두 저장해 둘 수 있..

[문제] - 왼쪽 이미지와 같은 형태로 UI 구성해보기*참고 페이지 : https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App 사용한 것들- Scaffold- Padding- EdgeInsets- Column, Row- CrossAxisAlignment, mainAxisAllignment- SizeBox- Text- Icons- withOpacity- clipBehavior : 테두리 자르기- Transform.translate : 위치 변경- Transform.scale : 크기 변경- 나만의 Button 위젯- 나만의 CurrencyCard 위젯      [정답 코드]#main.dart 코드import 'package:flutter/materia..

화면에 나타나는 모든 요소는 widget이다. -> 블록처럼 widget을 쌓아 앱을 만드는 것Flutter는 수백개의 widget을 제공한다 -> 외우지 말고, 찾아보며 사용https://docs.flutter.dev/ui/widgetsclass 는 3가지 core Widget 중 하나를 상속받으면, widget이 될 수 있다.가장 기초적인 cord widget : StatelessWidget -  화면에 그려주기만 함widget이 되려면, build method도 꼭 구현해야 한다.build method는 widget의 UI를 만드는 메소드 이다 즉, build()가 return 한 것을 화면에 띄우게 된다.main함수에서 runApp()안에 들어가는 widget은 root위젯이다materialApp..

[Flutter]- 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. -> 하나의 코드 베이스로 Android/Linux/Windows/macOS/iOS 및 웹 브라우저에 모두 작동되는 앱을 만들 수 있다. - 구글에서 출시(2017년)되었으며, 사용하는 언어 역시 구글에 의해 제창된 Dart를 사용한다  기존 FrameworkFlutter버튼, 애니메이션 등의 요소OS(운영체제)에게 요청 -> 직접적인 소통C/C++로 짜여진 엔진을 통해 UI를 그려낸다.-> OS에 대한 어떠한 제약 사항이 없다.차이OS가 직접 그린 widget들엔진이 픽셀을 그린다상황별 사용native widget을 사용할 때 좋음나만의 커스터마이즈 요소를 만들 때 좋음바다 : 코드가 실행되는 운영체제 -> embedder : I..