Flutter의 핵심, Element Tree
·
Flutter
0️⃣ 오랜만에 Flutter 이론 공부다... 마지막으로 Flutter 이론 공부한 게 2년 전 쯤 같은데, 아무래도 좀 더 심화 버전으로 공부를 더 해야할 것 같아서 복습 겸 적어본다. 우선, 내가 처음 Flutter를 공부하면서 처음 깨달음을 얻고 흥미를 느꼈던 부분이 바로 context다. 이때부터 Flutter를 아주 재미있게 공부하며 실무에 적용한 것 같다. Flutter에서 context란 도대체 무엇일까?Flutter의 context란 도대체 무엇일까?context의 개념을 이해하기 위해선 먼저 Widget Tree에 대해 알아야한다.1️⃣ Widget Tree Widget은 Flutter의 모든 것이라고 해도 과언이 아닐 정도로 위젯으로 시작해서kkevido.tistory.com 위 포스..
Dart는 Single Thread 언어! 비동기는 어떻게?
·
Dart
0️⃣ Single Thread Dart는 싱글 스레드 언어라는 말, 많이 들어보았을 것이다. Javscript도 싱글 스레드 언어이기 때문에 두 언어가 비슷하게 동작할 것이라고 보통 예상하지만 실상은 전혀 다르다. 우선 싱글 스레드가 무엇인지에 대해서부터 알아보자. (프로세스와 스레드의 개념에 대해서도 이해하고 있어야 하므로 아래 글을 먼저 읽고 와서 다시 보자!) [얼레벌레 공부하는 CS] 프로세스와 스레드0️⃣ 프로세스란?프로세스는 현재 실행중인 프로그램을 의미한다. 프로그램 그 자체는 보조기억장치에 보존되어있는 데이터지만 이 프로그램을 RAM에 적재하여 실행하는 순간 프로세스라고 부kkevido.tistory.com 위 글을 다시 읽고 와서 스레드가 무엇인지 다시 정의해보자면,프로세스가 할당 받..
Dart가 효율적으로 메모리를 관리하는 방법, DartVM
·
Dart
0️⃣ DartVM을 이해하기 전에 먼저 알아야 할 지식들 DartVM, 즉 Dart Virtual Machine에 대해서 제대로 알기 위해선 약간의 사전지식들이 필요하다. 기본적인 OS의 메모리 관리 개념과, Flutter의 release모드, debug모드를 관리하는 JIT,AOT 엔진에 대해 알아야 한다. 우선 Heap과 Stack Heap과 Stack에 대해서 알아야한다. 모르면 처음부터 이해가 안 된다. 작년에 CS 공부를 열심히 할 때 보다 이해하기 쉽게 정리해놓은 내용이 있으니 꼭 읽어보자. 특히 4번의 Heap영역이 지나치게 크다면? 이라는 항목은 DartVM을 이해하기 위해선 빼놓을 수 없다. 결국 핵심은 Heap 영역에서 이루어지는 GC이기 때문이다. [얼레벌레 공부하는 CS] Heap..
Flutter는 컴파일 언어? 인터프리터 언어? JIT와 AOT의 원리
·
Flutter
0️⃣ Flutter는 컴파일 언어인가요 인터프리터 언어인가요? 어느날 갑자기 동료가 물어보았다! "Flutter는 컴파일 언어인가요, 인터프리터 언어인가요?" 컴파일 언어와 인터프리터 언어에 대해 구분하여 공부해본 적은 있어도 정작 내가 주로 사용하는 언어가 어떤 유형의 언어인지는 궁금해 한 적이 없다. 그래서 얼렁뚱땅 컴파일 언어인 걸로 알고 있었어요... 라고 대답했지만 정작 이 부분에 깊게 공부해보니 JIT와 AOT의 개념이 등장하기 시작했다. 하지만 JIT와 AOT를 제대로 알기 위해선 컴파일 언어와 인터프리터 언어에 대해서 알고 있어야 한다. 컴파일 언어와 인터프리터 언어에 대한 구체적인 차이점은 이전 블로그 포스팅을 통해 확인할 수 있다. 대충 이런 내용이니 아래 내용을 통해 확인해보자. [..
Dart의 final과 const의 차이, 네트워크 관점에서 바라보기
·
Dart
0️⃣ Prefer const with constant constructors Flutter 개발을 하다 보면 IDE에서 정말 지겹게 보는 경고문이 있다. 사실 이제는 자주 안 보지만, 어쩌다 한 번씩 까먹게 되면 파란 밑줄이 생기면서 아래와 같은 경고문이 나온다.Prefer const with constant constructors. 이 경고는 사실 무시하고 넘어가도 되는 부분이지만 굳이 안 고칠 이유도 없고 방법도 간단해서 무조건 고치고 넘어간다. 그냥 선언한 위젯, 변수 앞에 const를 붙여주기만 하면 된다. 그리고 이 과정에서 필연적으로 생기는 의문이 있다.도대체 왜! Dart는 const와 final을 굳이 나눴을까? 그리고 왜 const를 붙여야 할까? 둘 다 한 번 선언하면 값을 바꿀 수..
[얼레벌레 공부하는 네트워크] OSI 7계층과 TCP/IP 4계층, 그리고 모바일 네트워크
·
CS/Network
0️⃣ OSI 7계층? 내가 서버개발자는 아니지만, 클라이언트 개발자여도 네트워크는 알아둬야 협업할 때 더 수월하겠다, 싶어서 본격적으로 네트워크 공부를 시작했다. 아침에 출퇴근하며 조금씩 읽어본 결과 네트워크... 상당히 어렵다. 우선 네트워크에 대해서 알기 위해선 기본적인 네트워크 개념이 필요하다. 바로 OSI 7계층. 아래는 일반적으로 OSI 7계층을 검색하면 나오는 구조 이미지다.OSI 7 Layers (Open System Interconnection)OSI 7계층은, 서로 다른 컴퓨터간의 통신을 네트워크 구조에 상관없이 통신을 할 수 있도록 국제표준화기구 (ISO)에서 정의한 네트워크 통신 표준이다. 네트워크를 이루는 구성요소들을 계층적 방법으로 나누고, 각 계층의 표준을 정한 것이다.하지만..
Flutter의 아이콘, Symbol 적용하기
·
Flutter
0️⃣ Material Icons! Flutter의 가장 큰 장점은 Icons를 직접 제공해주기 때문이지 않을까 싶다. 물론 디자이너가 예쁘게 만들어준 Icon을 사용하는 것도 좋지만 개발하는 데에 있어 시간은 금이기 때문에 디자이너의 시간을 줄여주고 개발자와의 협업하는 데에 있어 쉽게 소통할 수 있는 리소스 제공이라니! 쓰지 않을 이유가 없다. 심지어 Material Symbols and Icons는 피그마에서 플러그인으로도 제공하니 말이다.https://fonts.google.com/icons Material Symbols and Icons - Google FontsMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a s..
Flutter 프로젝트 생성하기
·
Flutter
오랜만에 Flutter를 다시 시작해보려고 하는데 어떻게 하는 건지 다 까먹어버렸다~차근차근 다시 시작해보며 플러터 세팅법을 기록해본다. 나는 이미 Flutter 자체는 설치가 되어있으며 환경변수 설정까지 마쳤으므로 초기 세팅부터 시작해야한다면 아래 게시물을 참고하길 바란다. Flutter M1에서 세팅하기간단하게 macOS(애플실리콘)에서 세팅하는 방법을 알아보자. 플러터는 비교적 세팅 방법이 쉬워서 간단하게 할 수 있다. 0️⃣ 플러터 SDK 설치 https://docs.flutter.dev/get-started/install/macos macOS install Howkkevido.tistory.com0️⃣ flutter doctor & flutter upgrade우선 flutter doctor 명령..
Android와 선언형 UI : Jetpack Compose
·
Android
0️⃣ 드디어, Jetpack Compose다! Jetpack Compose를 공부하기만을 얼마나 고대해왔는지, 드디어 공부를 시작했다. 대부분의 선언형 UI가 비슷하듯이 Jetpack Compose도 예외는 아니다. 구글 공식 유튜브 강의를 들어 선언형 UI의 개요에 대해서 자세히 공부하고 Jetpack Compose에 대해서도 차차 알아가보겠다. 한글 자막도 잘 되어있으므로 꼭 한 번 시청하면 많은 도움이 될 것이다. 내가 앞으로 쓸 내용은 위 영상을 내가 이해한대로 정리한 요약본이다. 1️⃣ 선언형 UI에 대해서 선언형 UI가 정말로 대세다. Jetpack Compose를 대표해서, Swift UI, React(React Native), Flutter 등 모두 선언형 UI를 사용하고 있다. 기존 ..
Flutter로 WebView 만들어보기
·
Flutter
0️⃣ WebView?어플리케이션을 쓰다보면 앱 내에서 웹페이지가 동작 할 때가 있다. 예를 들어, 네이버나 유튜브 화면을 띄울 필요가 있을 때 말이다. Flutter 내부에서도 그렇게 웹 페이지를 띄울 수가 있는데, 이때 사용하는 라이브러리가 바로 webview_flutter 이다.https://pub.dev/packages/webview_flutter webview_flutter | Flutter packageA Flutter plugin that provides a WebView widget on Android and iOS.pub.dev 1️⃣ webview_flutter 설치 $flutter pub add webview_flutter명령어를 통해 webview_flutter를 설치한다.2️⃣ ..
문제해결 : Downloaded executables cannot execute on host.
·
Flutter/문제해결
⛔ 문제사항 맥북을 새로 구매하며 M3로 업그레이드 하고, Flutter를 처음부터 다시 세팅 해주는 중에 새로운 문제가 발생했다. Downloaded executables cannot execute on host. 라는 에러였는데, 친절하게도 아래 명령어를 입력하면 해결 가능하다고도 나와있다. ✅ 해결방안 $sudo softwareupdate --install-rosetta --agree-to-license 이 명령어를 통해 손쉽게 해결가능하다. 다만, 나 같은 경우엔 지속적으로 sudo: softwareupdate: command not found 이런 식으로 명령어를 찾을 수 없다고 나왔었는데 띄어쓰기를 잘 못 한 것으로 파악된다. 띄어쓰기만 신경 써서 명령어를 그대로 ctrl c+v 한 뒤, 다시..
문제해결 : Android Studio에서 Dart SDK is not found in the specified location 에러가 나타날 때
·
Flutter/문제해결
⛔ 문제사항VSC에서 Android Studio로 바꾸어 빌드하려고 보니 main.dart를 빌드할 수 없다고 나와있었고,Android Studio 의 Settings > Languages & Frameworks > Dart 에서 보면 아래와 같은 오류 문구가 있었다.✅ 해결방안문제는 바로 내 Dart SDK path가 지정되어 있지 않아서인데, 이를 지정해주면 된다.flutter 다운로드 경로/flutter/bin/cache/dart-sdk 를 경로로 지정해주고 아래 체크박스를 클릭하면 해결 완료다.❗출처참고 사이트 : https://masswhale.tistory.com/54 안드로이드 스튜디오에서 Dart SDK is not configured 메세지가 나타날때.안드로이드 스튜디오에서 Flutter..