하몬드의 개발블로그

프로젝트 요구사항 화면은 하나만 구현하면 되고 구현할 기능들이 좀 많다.. 프로젝트 데모 폴더 구조 타이머 화면을 구성하는 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..

오리 시뮬레이션 게임  SimUduck이라는 오리 시뮬레이션 게임에는 매우 다양한 오리가 등장한다.이 시스템을 처음 디자인한 사람은 Duck이라는 슈퍼클래스를 만든 다음,그 클래스를 확장해서 서로 다른 종류의 오리를 만들었다.  시뮬레이션 게임 차별화   다른 오리시뮬레이션 게임 회사와의 차별점을 두기 위해객체지향 프로그래머 조는 오리가 날 수 있게 하기로 했다.  문제 발생  조는 duck의 몇몇 서브클래스만 날아야 한다는 사실을 까먹었다.Duck이라는 슈퍼클래스에 fly() 메서드를 추가해일부 서브클래스에 적합하지 않은 행동이 추가되어버렸다. 이는 유지보수면에서 좋지않은 설계이다.  상속 고려 조는 추가할 서브클래스에 fly()메소드를 오버라이드함으로써 문제를 해결하기로 했다. 조는 새로운 클래스인 ..

인프라 엔지니어의 업무 인프라 설계 인프라를 만들 땐 인프라를 만든 목적을 이해하고목적을 달성하는데 필요한 기능이나 성능 등을 조건으로 기준을 정리한다. 조건이 정리되면 조건에 맞는 기획서와 설계서를 작성해 책임자에게 결재를 올린다.  인프라 구축 필요한 기능이나 소프트웨어 등을 발주해 남품을 받으면 인프라 구축을 시작한다. 인프라 구축 작업은 인프라 엔지니어가 직접하라 때도 있고 오퍼레이터나 외부 업체에 맡길 때도 있다. 대기업을 고객으로 둔 SI(System Integration) 업계에선 하드웨어 설치작업은 CE(Customer Engineer)가,서버나 스토리지 설정은 SE(System Engineer)가,긜고 네트워크 장비 설정은 NE(Network Engineer)가 하는 경우가 많다. 웹 기..