모바일 개발

플러터 3.10이 출시되었으며, 많은 새로운 기능과 개선 사항이 있습니다. 이 포스트에서는 이번 릴리스의 몇 가지 핵심 기능을 살펴보겠습니다. 프레임워크 Material 3 Material 라이브러리가 최신 Material Design 사양과 일치하도록 업데이트되었습니다. 이에는 새로운 구성 요소 및 테마, 업데이트된 시각적 효과 등이 포함됩니다. 개발자는 useMaterial3 테마 플래그를 사용하여 이러한 변경 사항에 대해 선택적으로 수용할 수 있습니다. NavigationBar 및 NavigationDrawer 위젯이 Material 3 디자인과 일치하도록 업데이트되었습니다. SearchBar 및 SearchAnchor 구성 요소는 검색 쿼리에 대한 예측 텍스트를 제공합니다. Material 3에 ..

구글에서 제공하는 오픈소스 프레임워크인 Flutter는 하나의 코드베이스에서 멀티 플랫폼 애플리케이션을 아름답게 네이티브로 컴파일할 수 있습니다. Flutter의 주요 기능 중 하나는 Material Design을 사용하여 아름답고 반응형 사용자 인터페이스를 만드는 능력입니다. Material Design Material Design은 구글 디자이너와 개발자들이 만들고 지원하는 오픈소스 디자인 시스템입니다. 최신 버전인 Material 3은 동적인 색상, 향상된 접근성, 대형 스크린 레이아웃을 위한 기초, 디자인 토큰 등을 통해 개인화 가능하고 표현력 있는 경험을 제공합니다. Material 3은 TextButton.icon, OutlinedButton.icon, ElevatedButton.icon과 같..

현재 프로젝트서 The Composable Architecture를 사용하고 있습니다 라이브러리를 만든 개발자는 함수형 프로그래밍을 고려하며 만들었다고 해서, 함수형 프로그래밍에 대해서 알아보려합니다 워낙에 생소한 개념이다 보니까, 엄청나게 자세한 설명과 예제보다는 함수형 프로그래밍 (Functional Programming)을 이해하는데 필요한 기본 용어와 개념을 중심적으로 정리해봤습니다. 사이드 이펙트(Side Effect)란? 어떤 함수를 호출했을 때, 그 함수의 반환값 이외에 호출된 함수 밖에서 프로그램의 상태변화가 발생하면 이를 Side Effect라합니다. 저렇게 쓰니까 전혀 와닿지 않네요 "내가 어떻게 컨트롤 할 수 없는 외부의 세계에 접근한다"라는 생각이 들면 Side Effect라고 봐도..

먼저 컨테이너 뷰가 뭘까요? Apple 문서를 인용하자면... SwiftUI provides a range of container views that group and repeat views. Use some containers purely for structure and layout, like stack views, lazy stack views, and grid views. Use others, like lists and forms, to also adopt system-standard visuals and interactivity 말 그대로 View를 Contain 하는 View를 컨테이너 뷰라고 하겠습니다. 가장 대표적으로 VStack, HStack 등이 있겠네요. 하지만 애플에서 기본적으로 제공..

이전에 학생일 때는 코드가 내 뜻대로 실행되는 것에만 만족을 했었는데, 팀으로 일을 해야하는 개발자로 생활하다 보니 코드 한 줄 한 줄 추가하는데 더 많은 생각을 하게 되네요 나만의 코딩 철학을 가지고 싶어서 코딩 관련 글들을 읽다가 마음에 드는 명언(?)을 모아봤습니다. "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler 책 리팩토링의 저자인 마틴 파울러가 한 말입니다 몇십 년 전까지는 컴퓨터의 입장에서 "어떻게 하면 조금이라도 더 최적화할 수 있을까?"를 생각하는 게 맞았겠지만. 컴퓨터/스마트폰의 성능이 기하급수적으로 좋아..

컴퓨터 공학 전공 학생이라면, 혹은 매일 코드를 짜는 개발자라면 구글링은 필수입니다. 짧은 시간 내에 원하는 정보를 정확하게 찾아내는게 점점 중요해 진것 같습니다. 그래서 오늘은 구글링을 할때 도움이 되는 팁 몇가지를 공유합니다. 키워드 긴 검색어 중 꼭 포함해야하는 키워드가 있으면 ""로 감싸주세요 how to make shadow "uikit" 그리고 키워드를 제외하고 싶다면 해당 키워드 앞에 - 를 붙여주세요 how to make shadow "uikit" -swiftui 사이트 특정 사이트 내에서 검색하고 싶다면 해당 사이트 URL 앞에 site: 를 붙여주세요PS. 애플의 공식문서를 검색하고 싶을때 site:apple.com 을 자주 사용했습니다 site:apple.com circle swift..

이전 글에서는 TextButton, ElevatedButton, OutlinedButton 즉 하나의 버튼 만을 알아봤습니다. 그런데 하나의 버튼이 아닌 여러 개의 버튼이 필요할 때가 있겠죠? 가장 많이 쓰이는것은 ToggleButtons, DropdownButton, PopupMenuButton입니다 각 버튼들이 어떻게 다른지 그리고 어떤 상황에서 쓰이는지 한번 알아볼게요 역시나 글로 설명하는것 보다는 직접 실험을 할 수 있도록 dartpad를 준비했습니다. ToggleButtons class ToggleButtons는 child 버튼들이 row로 표시됩니다. 각 버튼의 state는 isSelected로 결정이 됩니다. 그래서 버튼들의 개수에 맞게 bool 리스트를 넘겨줘야합니다. ToggleButto..

플러터에서 버튼과 관련된 글을 보면 FlatButton, RaisedButton 등을 사용하는 것을 볼 수 있는데, Flutter (1.22)버젼부터는 FlatButton, RaisedButton, OutlineButton이 각각 TextButton, ElevatedButton, OutlinedButton으로 업데이트 됐습니다.. (2.0이 아니라 그전 1.22부터 바뀐 겁니다) 기본적인 사용 방법은 다음과 같습니다 TextButton or OutlinedButton or ElevatedButton( onPressed: () {}, //@required onLongPress: () {}, focusNode:, autofocus: true, clipBehavior: Clip.none, style: Butt..

이전 글에서는 MediaQuery를 이용해서 기기의 화면 크기를 알아보는 법을 배웠습니다 하지만 기기의 전체 화면이 아니라 위젯의 크기를 알고싶을때는 어떻게 해야 할까요? 물론 MediaQuery를 쓰고, 각 위젯의 height, widght를 구해서 빼줘서 어쩠지해서 구할 수는 있지만 이 모든 것을 한방에 쉽게 해결하는 것이 LayoutBuilder 위젯입니다. 구글 공신 문서에서는 Builds a widget tree that can depend on the parent widget's size. 라고 소개하고 있습니다. 말 그대로 위젯의 크기에 따라 build를 하겠다는 뜻입니다. LayoutBuilder의 builder function은 layout타임에 불리게 되고, constraints이 제공..

MediaQuery 위젯을 쓰는 가장 대표적인 이유는 현재 기기의 화면 크기를 구할때 찾기 위해입니다 화면 크기는 MediaQuery.of(context).size 을 통해서 알 수 있습니다. 그리고 MediaQuery.of 을 이용할때는 media query가 변할때마다 widget이 rebuild됩니다 보통 기기가 회전될때 가장 많이 변합니다 (혹은 웹에서는 창 크기를 조절할때) 사실 mediaquery.of 을 하게되면 반환되는 값을 MediaQueryData인데 size 말고도 기기와 관련된 정보를 많이 담고 있습니다 설명을 도와드리기 위해서 예제 코드를 가져왔습니다. MediaQueryData orientation → Orientation 기기의 방향 (landscape 혹은 portrait) ..