하몬드의 개발블로그

비동기 처리란?  일반적인 프로그래밍은 단일 스레드 환경에서 순차적(동기적)으로 수행이 이루어진다.애플리케이션에서 파일 읽기, 데이터베이스 접근, 웹 페이지 가져오기 등의상대적으로 긴 시간이 필요한 작업들을 처리할 때 비동기 처리를 쓰게 된다. (애플리케이션의 렌더링 시간을 줄이기 위해 하는 처리라고 볼 수 있다.)  Future란? Future는 비동기 작업의 결과를 나타내는 객체로, 비동기 작업이 완료되면 해당 결과가 Future 객체에 저장된다. Future는 "Future" 이런식으로 타입을 명시해야 한다.   Future는 2가지 상태를 가지며, (미완료/완료)2가지의 결괏값을 얻을 수 있다. (data/error)   예제 코드 then, catchError로 반환값이 data일 때와, err..

프로젝트 요구사항 프로젝트 기본 구조 - models 폴더엔 Todo 모델과 News 모델이 들어갈 것이다. - providers 폴더엔 데이터 관련 기능을 따로 빼서 작성한 파일이 들어갈 것이다. 자동로그인 구현 SharedPreferences란? SharedPreferences(shared_prefs)는 저장해야할 데이터 양이 적거나 아주 간단한 경우 사용할 수 있는 기법이다. shared_prefs는 키-값 방식으로 데이터를 저장하는 방법이다. 기기 내 xml 파일을 통해 앱의 데이터를 저장하는 방식인데 파일에 데이터를 쓰는 방식이기 때문에 앱을 껐다 켜도 데이터가 유지된다. 많은 양의 데이터를 관리하기 어려우며, 키-값 방식 외의 구조 설계가 불가능하므로 자동 로그인이나 도움말 스킵 여부 등 간단..

프로젝트 요구사항 화면은 하나만 구현하면 되고 구현할 기능들이 좀 많다.. 프로젝트 데모 폴더 구조 타이머 화면을 구성하는 dart파일을 하나 생성 후, main.dart에서 타이머 화면을 띄우도록 하면 된다. 타이머 UI 구현 import 'package:flutter/material.dart'; class TimerScreen extends StatefulWidget { const TimerScreen({super.key}); @override State createState() => _TimerScreenState(); } class _TimerScreenState extends State { @override Widget build(BuildContext context) { final List r..

알아볼 것들 1. DOM과 VDOM 2. Flutter LifeCycle DOM이란? DOM은 Document Object Model의 약자로 문서 객체 모델을 의미한다. 웹 페이지(HTML, XML)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. DOM의 비효율성 웹페이지에서 동적으로 할 일(list)을 추가하는 기능을 구현하려면 JS를 사용해 DOM을 조작해야 한다. 항목 1 항목 2 항목 3 항목 추가 위 코드에선 "항목 추가" 버튼을 클릭할 때마다 새로운 요소를 생성하고, 그 요소를 목록에 추가한다. 위 코드가 비효율적인 점 2가지 1. 요소를 실제 DOM에 반복적으로 생성하고 ..

2번째 미팅에서 담당자님이 숙제를 하나 주셨다. 브라우저에서 화면을 렌더링 하는 순서를 조사해오세요. 바로 알아보도록 하자. 사전지식 1. 브라우저란? 브라우저(Browser)는 인터넷을 통해 웹 페이지와 웹 애플리케이션을 출력하고 사용자가 웹을 탐색하는데에 도움을 주는 소프트웨어이다. ex) chrome, firefox 등... 2. 렌더링이란? 브라우저는 웹 페이지를 요청하고 서버로부터 받은 HTML, CSS, JS 등의 웹 문서와 자원들을 해석해 사용자들에게 시각적으로 보여주는 것을 뜻한다. 3. 파싱이란? 특정 형식의 데이터나 문서를 분석하여 그 구조를 이해하고 원하는 정보를 추출하는 과정을 의미한다. 렌더링 순서 1. HTML 문서 파싱 웹 브라우저가 웹 페이지의 구조와 내용을 설명하는 HTML..

프로젝트 요구사항 위처럼 크게 3가지 요소로 요구사항을 정리할 수 있다. 전체 목록 화면 구현 폴더구조 list_screen: 이미지와 책제목이 나열된 도서목록을 출력하는 화면 detail_screen: 책을 클릭하면 나오는 해당 책에 관한 세부정보를 출력하는 화면 화면 확인 import 'package:flutter/material.dart'; import 'package:flutter_application_1/screens/list_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your applica..

상태(State)란? '상태'는 변할 수 있는 데이터이다. 이 데이터가 변할 때 화면 자체가 다시 빌드되는 것이 아닌, 데이터와 관련있는 위젯만 다시 빌드된다. 상태관리를 통해 유저는 화면이 다시 로드될 때까지 기다리지 않아도 즉시 데이터의 변화를 확인할 수 있다. 카운터 구현 카운터 UI import 'package:flutter/material.dart'; class FirstScreen extends StatefulWidget { const FirstScreen({super.key}); @override State createState() => _FirstScreenState(); } class _FirstScreenState extends State { @override Widget build(B..

화면전환구현 파일생성 화면전환을 구현하기 위해 화면 1,2 생성 main.dart import 'package:flutter/material.dart'; import './screens/screen1.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors..