하몬드의 개발블로그

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)가 하는 경우가 많다. 웹 기..

플러터 기본 개념들 위젯 플러터에서 화면 안의 요소들은 모두 위젯이다. 하나의 큰 위젯 안에는 여러 위젯들이 들어가 있고, 그 위젯 안에도 다른 위젯들이 들어가 있는 형태이다. MyWidget( title: "위젯", description: "위젯예제다.", child: AnotherWidget( // 자식 위젯 안에 또 다른 위젯을 선언할 수 있다. ) ) 플러터 내에서 작성되어 있는 클래스로 객체를 생성하며 이 객체가 화면 속 위젯이 된다. 상태관리 상태관리는 setState()를 활용해 할 수 있다. bool isbtnOn; setState() { isbtnOn = !isbtnOn; } 버튼의 상태변경을 간단하게 구현한 코드 Stream 데이터를 불러오는데 시간이 오래 걸리거나, 지속적으로 데이터를..

웹 IDE DartPad dartpad.dev SDK나 IDE 설치 없이도 Dart 및 Flutter 코드를 Web browser 환경에서 실행할 수 있는 무료 오픈 소스 온라인 편집기이다. 객체지향 프로그래밍 Dart는 객체지향 프로그래밍을 사용한다. 여기서 객체지향이란 코드의 단위를 클래스로 나눠 작성하는 기법이다. 객체지향 프로그래밍 관련 용어들 //클래스 예시 class Person{ //속성 String name; int age; //메서드 getName(){ return name; } } 1. 클래스: 객체 생성을 위한 템플릿, 내부에 정의된 변수(멤버)와 함수(메서드)로 구성되어 있다. 2. 객체: 클래스 내의 모든 구성요소 3. 메서드: 클래스 내부에서 선언된 함수 4. 상속: 만들어진 클..