Flutter의 컴파일 과정 [Flutter] Dart의 컴파일 과정개요의문의 시작 Flutter를 통해 개발을 하면, '한 번에 두 가지, 필요에 의하면 여섯 가지의 플랫폼까지도 동시에 개발을 할 수 있다니 굉장히 편리하잖아?' 라는 생각과 '근데 웹으로 대체하던데noguen.com  Dart 언어의 장단점 [Flutter] 코드가 어떻게 화면이 되나요(2) — Dart Virtual Machine중간언어(기계어)로 프로그램을 실행하기 위해서는, 가상의 머신이 필요하다.medium.com  Dart는 싱글 스레드 언어 [Flutter] Dart는 싱글 스레드 언어개요싱글 스레드인데 어떻게? 처음 Dart가 싱글 스레드 언어라는 말을 들었을 때는 별 생각이 없었다. 그냥 그런가보다... 했었는데 Futu..

개요싱글 스레드인데 어떻게? 처음 Dart가 싱글 스레드 언어라는 말을 들었을 때는 별 생각이 없었다. 그냥 그런가보다... 했었는데 Future와 Stream을 사용하다가 문득 Dart는 싱글 스레드 언어라는 것이 떠오르며 이런 생각이 들었다. '싱글 스레드인데 비동기는 어떻게 하는거지?'  싱글 스레드는 이름 그대로 Single, 하나의 스레드라는 것으로 한 번에 하나의 명령을 수행할 수 있다. 그런데 비동기를 처리하기 위해서는 스레드가 하나만 있어서는 안된다. 명령을 처리하는 스택이 하나이기에 5초를 대기하라는 명령, 혹은 1시간을 대기하라는 명령은 다른 명령들을 막아버린다. 이렇게 지연 시키는 행동을 Block이라고 하는데, 싱글 스레드라면 구조적으로 이렇게 될 수 밖에 없다는 것이다. 시간을 재..

개요의문의 시작 Flutter를 통해 개발을 하면, '한 번에 두 가지, 필요에 의하면 여섯 가지의 플랫폼까지도 동시에 개발을 할 수 있다니 굉장히 편리하잖아?' 라는 생각과 '근데 웹으로 대체하던데...' 라는 생각 등등 여러가지 생각이 들곤 한다. 그런데 생각이 좀 더 진행이 되고 나니 '이걸 어떤 방식으로 수행하는 거지?' 라는 의문이 들기 시작했다. 빌드는 정해진 결과 "여섯 가지의 플랫폼으로 빌드가 가능"이라는 말은 결과지 과정이 아니다. 그리고 우리가 Dart 코드를 짜서 Flutter앱을 만드는 것도 어떻게 보면 결과에 해당되는 부분이고 과정에 해당되는 부분은 아니다. 우리는 Dart코드를 작성할 때 당연하게도 여섯가지의 플랫폼으로 빌드가 된다는 것을 상정하고 있으니 말이다. 여러가지 플랫폼..

개요 Flutter에서는 상당히 많은 기본 위젯들을 제공해준다. Container, Column, Row, Stack, ListView 등등... 많은 기본 위젯들을 제공해준다. 기본 위젯들을 잘 조합하여 새로운 위젯을 만들 수 있지만, 때로는 기본 위젯의 조합으로도 만들 수 없는 위젯들을 만들어야할 때가 있다. ▼ 이럴 때는 우리가 따로 정의하여 사용을 해야하는데, 이를 도와주는 것이 `CustomPaint`다. CustomPaint를 통해 직접 위젯의 모양을 정의하여 새로운 형태의 위젯을 만들 수 있다. 들어가기 앞서 : 기본적인 좌표계에 대해서 들어가기 앞서 좌표계에 대해 알아야 한다. 이는 `CustomPaint`에서만 사용되는 것은 아니고 앱 전반적으로 다 사용되는 내용이다. 우리가 배웠던 좌표..

개요 개발을 하다보면 기본적으로 제공하는 함수나 기능들 외의 기능들이 필요할 때가 많다. 스스로, 혹은 개발 팀에서 이를 직접 구현할 수 있고, 그러기로 결정이 났다면 다행이지만, 그럴 여유가 없어서 그 기능을 구현할 수 없을 때가 있다. 그럴 때는 보통 라이브러리를 받아와서 해결한다. ▼ Flutter는 이를 패키지라고 부르며, 빠른 개발을 위해서라면 패키지를 사용하는 것은 필수다. 패키지 혹은 플러그인이라고도 부르는데 엄연히 따지자면 패키지가 조금 더 큰 개념이다. 굳이 구별을 하자면 Dart코드로만 이루어진 것을 패키지라고 하고, JAVA, Swift, Kotlin과 같은 다른 언어를 포함하고 있는 것을 플러그인이라고 한다. 어쨌든 이번 포스트에서는 패키지 사용법에 대해 알아볼 것이다. 패키지 검색..

개요 Flutter에서 하나의 위젯을 배치하는 것은 굉장히 쉽다. 오버라이드된 `build` 메소드의 `return`에 위젯 클래스를 반환해주면 위젯을 쉽게 렌더링할 수 있다. (물론 그 과정은 굉장히 추상적이고 복잡하겠지만...) "그렇다면 여러 개의 위젯을 배치하고 싶을 때는 어떻게 해야하지?" `return` 에는 하나의 위젯만 반환시킬 수 있고, 반환 타입마저도 `List`이 아니라서 여러 개의 위젯을 반환하는 것은 사실상 불가능하다. "그럼 뭐 불가능하다는거야 뭐야?" 불가능했다면 Flutter는 이 세상에 나오지 못햇을 것이다... 당연히 가능하며, 이를 도와주는 것은 Multichild-Layout Widget들이다. Multichild-Layout Widget에는 `Row`, `Column..

개요 특정 영역에 위젯을 배치할 때 그냥 위젯을 배치하는 것이 아니라 어느 영역을 설정한 후 위젯을 배치한다. 그럴 때 Flutter에서는 단일 위젯을 배치할 때 `Container` 위젯과 `SizedBox` 위젯을 사용하여 그 영역을 설정하곤 한다. 이번 포스트에서는 `Container` 위젯에 대해 알아볼 것이다. Container Container란? `Container`의 의미는 용기, 담을 수 있는 무언가라는 의미로 정석적인 의미와 상당히 사용하는게 비슷한 위젯이다. UI요소를 감싸고, 다양한 형태를 취할 수 있는 위젯이다. 위의 설명은 `SizedBox`와 굉장히 비슷한데, `SizedBox`와의 결정적인 차이점은 `Container`위젯은 그 자체를 꾸밀 수 있다는 것이다. 사용예시 Con..

개요 글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다. Flutter에서는 Text 라는 위젯을 통해 이를 보여준다. Text 외의 다른 위젯도 있지만, 이번 포스트에서는 가장 기초적인 위젯인 Text위젯을 볼 것이다. Text란? `Text`는 이름 그대로 문자를 보여주는 위젯으로 원하는 문자열을 화면에 그려준다. Text 사용예시 Text("안녕하세요 노근입니다.") `Text` 위젯은 위와 같이 간단하게 사용할 수 있다. `Text("원하는 문자열")`의 형태로 가볍게 사용할 수 있다. ▼ style 프로퍼티 (TextStyle) "근데 폰트 크기가 더 크거나, 색이 달랐으면 좋겠는데?" 그럴 때는 `style` 프로퍼티에 `TextStyle` 에 필요한 프로퍼티들을 채운뒤 넣어주면 된다...

Flutter란?Flutter는 구글에서 개발한 모바일 어플리케이션 개발용 오픈소스 프레임워크다. Dart언어로 작성되었으며 안드로이드 및 iOS 모바일 앱 개발 뿐만 아니라 웹, 데스크톱 및 IoT 기기 등 다양한 플랫폼에서도 실행이 가능하다. Flutter는 빠른 개발 및 확장성을 지원하고, 다양한 애니메이션 및 사용자 인터페이스 요소를 포함하고 있다.  Flutter와 타 모바일 개발 플랫폼들과의 차이점React Native와의 차이점Flutter의 높은 성능Flutter의 Dart언어는 네이티브 코드로 컴파일 될 수 있다. 허나 React Native는 네이티브 모듈과 통신하기 위해 JavaScript 브리지를 사용하기 때문에 성능이 Flutter에 비해 약간 낮을 수 있다. 응용 프로그램 크기F..

개요 : Step Slider가 있는데 왜 구현한거지? 만들게 된 계기 프로그램에서 예약 페이지를 개발할 때, 디자이너의 의도가 아래와 같았다. ▼ 인디케이터가 5분 단위로 이동해야하며, 아래 선택된 시간만큼 인디케이터 뒷부분의 공간을 색칠해줘야한다. 여기서 가장 중요한 것은 5분 단위로 끊어서 이동해야한다는 것이다. 예약은 5분 단위로 진행되기 때문에 끊어서 이동하지 않으면 매 분, 매 초단위로 예약할 수 있다고 유저가 혼동할 수 있기 때문이다. 그렇기에 5분이라는 Step을 두어 구현을 해야하는 상황이 발생한 것이다. 근데 왜 slider를 수정하지 않은것? Flutter에서 기본적으로 Slider 위젯을 제공해준다. ▼ Slider class - material library - Dart API A..