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계층, 그리고 모바일 네트워크
·
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..
Flutter의 Widget 종류 : Stateless와 Stateful
·
Flutter
0️⃣ State, 상태란? State, 상태는 사실상 개발을 하다 보면 필연적으로 마주하게 되는 단어이다. 그렇다면 상태는 대체 무엇일까? 앱의 정보 또는 데이터 를 통칭하여 상태라고 이야기한다. 따라서 유저가 어플리케이션을 사용하며 동작하는 모든 데이터, 예를 들어 로그인 할 때 Input 값에 입력하는 아이디와 비밀번호부터 라이트/다크 모드를 선택하는 등의 단순히 화면을 바꿔주는 값 등등 모든 데이터를 상태라고 부른다. 공식문서에서는 아래와 같이 명명하고 있다. 1. 위젯이 빌드될 때 동기적으로 읽을 수 있는 정보 2. 위젯의 생명주기가 끝나기 전까지 변경될 수 있는 정보 그렇다면, Flutter에서 State를 사용할 수 있는 방법은 무엇이 있을까? 그러기 위해서는 Stateless Widget과..
문제해결 : Unable to boot the simulator
·
Flutter/문제해결
⛔ 문제사항 어느날 갑자기 Unable to boot the simulator 이라는 문구와 함께 iOS 시뮬레이터가 실행되지 않는 일이 발생한다. 이 일을 종종 겪을 정도로 생각보다 자주 일어나는 현상 같다. Xcode 자체에서 실행하면 시뮬레이터가 켜지지만 그 외의 다른 IDE로 키면 안 되는 것처럼 보인다. ✅ 해결방안 이 Mac에 관하여 > 저장공간 > 개발자 탭으로 들어가서 Xcode와 관련된 빌드 데이터와 캐시를 삭제 해주면 된다. 이렇게 깔끔한 상태로 만들어주고 나는 Xcode 내에서 Clean Build Folder도 한 번 해주었다. 그래도 되지 않는다면 Xcode 내에서 실행해서 시뮬레이터를 켜주면 된다.
상태관리 라이브러리 GetX 사용하기
·
Flutter/문제해결
Flutter에서 기본적으로 상태를 관리하는 방법은 Stateful Widget 내에서 관리하는 것이다. 하지만 화면이 복잡하고 프로젝트의 규모가 커질 수록 부모 위젯에서 자식 위젯간으로 상태를 전달하는 방법 만으로는 제한적일 때가 자주 일어나고 Stateful Widget은 상태가 바뀔 때마다 화면을 재렌더링 하면서 불필요한 Widget까지 렌더링 하며 성능을 떨어뜨릴 수 있다. 때문에 보통은 상태를 관리해주는 라이브러리를 이용하게 되는데 (Flutter가 아닌 다른 언어에서조차) 이 중에서 GetX를 사용하게 되었다. 처음 Flutter를 접할 때에는 라이브러리 없이 상태관리를 했었으나 추후에는 React Native에서 사용하던 context api와 유사하다고 판단한 provider를 이용했었으며..
문제해결 : 안드로이드 사진 첨부 되지 않는 현상 (권한)
·
Flutter/문제해결
2023년 7월 12일 기준임을 꼭 참고 바란다. ⛔ 문제사항 멀쩡하게 잘 첨부 되던 사진이 어느날부터 되지 않았다. 해당 이슈는 Android에서만 발생하여 iOS 시뮬레이터나 실물기기에서는 문제 없이 작동하였다. PlatformException(read_external_storage_denied, User did not allow reading external storage, null, null) 이런 에러가 발생했는데, 말 그대로 권한이 거부된 상태였다. 내가 선언했던 것은 이렇게 3가지로 아래 두 개의 STORAGE 관련 권한이 사진 및 미디어에 접근할 수 있는 권한이다. 그러나 설정에서 본 앱의 권한에는 사진 및 미디어가 포함되어있지 않는 현상이 발생하여 해결하는 데에 꽤나 애를 먹었다. ✅ 해..