조준장 개발자 생존기

이번에는 앱 개발에 많이 쓰이는 Bottom Navigation Bar를 구현해보자. Bottom Navigation Bar는 동적으로 화면이 변화하므로 Stateful Widget을 통해 구현해야한다. main.dart import 'package:flutter/material.dart'; import 'package:flutter_application_1/home.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends StatelessWidget ..

Flutter를 처음 시작할 때 나오는 Stateless Widget과 Stateful Widget에 대해서 알아보자. Stateless Widget Stateless Widget이란 말 그대로 상태가 없는 위젯이다. Stateless Widget은 한 번만 bulid() 메서드가 실행되며 화면에 표시된 후에 화면을 변경할 수 없다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends St..

플러터 기본 틀과 메커니즘에 대해서 코드 분석을 통해 알아보자. 우리가 이번에 만든 기본 틀은 다음 사진과 같다. 코드 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends StatelessWidget { // MaterialApp = 앱으로서 기능을 할 수 있도록 도와주는 뼈대 @override Widget build(BuildContext context) { // return Materi..

VS Code에서 플러터 개발환경을 구축해보자. Flutter SDK 설치 Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. flutter.dev Flutter 공식 사이트의 접속한다. 자신의 환경에 맞춰 Flutter를 설치할 운영 체제를 선택한다. Windows를 예시로 설치하겠다. 운영체제를 선택 후 Flutter SDK를 다운로드한다. 다운로드한 후에는 적당한 위치에 압축을 풀어준다. 압축을 푼 후에 bin 폴더에 들어가 주소를 복사해준다. (환경 변수 편집을 위해서 복사해주는 것이다.) 이후 PC 검색 창에 "시스템 환경 변수 편집..

이전에 Room DB를 통해 텍스트를 입력하면 텍스트가 저장되어 UI에 뿌려지는 방식을 구현해봤다. 이번에는 MVVM 패턴에 대해서 알아보자. MVVM 패턴이란 Model, View, ViewModel을 가리키며 ViewModel을 사용하여 Model과 View를 분리하는 것이 특징이다. View는 xml, Activity, Fragment 등이 되고, Model은 내부/ 외부 DB가 된다. Repository로 Room이나 다른 웹 서비스에 접근하고 ViewModel에 collback 해주면, ViewModel이 observer에 response해준다. (LiveData를 통해 View를 관찰) 그럼 LiveData와 이전에 만들었던 Room을 통해 MVVM 패턴을 구현해보자. Room DB에 대한 내..

아이콘 무료 벡터 아이콘 및 스티커 - 다운로드할 수 있는 수천 개의 리소스 프로젝트를 위한 무료 벡터 아이콘과 스티커를 다운로드하세요. 디자이너가 만든, 디자이너를 위한 리소스. PNG, SVG, EPS, PSD, CSS 형식 www.flaticon.com 무료 아이콘을 주로 위 사이트에서 사용하고 아이콘도 사용하고 있다. Android/iOS 앱 아이콘을 자동으로 만들어주는 사이트 모바일 앱 개발 시 플랫폼 별로 다양한 크기의 아이콘을 준비해야 하는데 일일이 작업하기는 귀찮겠죠? 이런 귀찮은 작업을 한번에 해결해주는 자동으로 아이콘들을 만들어주는 사이트들입니 smok95.tistory.com 그래픽 이미지 Online Graphic Generator The Online Graphic Generator..

이번에는 안드로이드 앱을 개발하면서 DB를 사용할 때 활용할 수 있는 Room DB에 대해서 알아보자. Room DB(DataBase) - AAC(Android Architecture Component) 중 하나이다. - ACC는 앱을 견고하고, 실험 가능하고, 유지보수성이 뛰어나도록 만들어주는 라이브러리 모음이다. - Room은 SQLite DB를 모두 사용할 수 있고 더 쉽게 사용할 수 있도록 하는 라이브러리이다. - ACC중 하나이기 때문에 다른 구성요소인 LiveData, ViewModel 등의 Component을 함께 사용하여 아주 간편하게 DB를 관리하고 UI를 갱신할 수 있다. Room DB 구성요소 - Entity: 데이터베이스 안의 테이블을 클래스로 나타낸 것이다. - DAO(Databa..

안드로이드 개발을 하다 보면 위치를 이용해서 구현해야 하는 기능이 있다. 그럴 때 우리는 GPS 좌표를 통해 수행하게 된다. 이번에는 현재 위치를 GPS 좌표를 통해 구해보자. Gradle 설정 우선 build.gradle(project) 파일에 Android SDK 레파지토리(Repository)를 설정한다. 구글 플레이 서비스 API를 통해 위치 값을 가져오기 위해 라이브러리를 빌드한다. implementation 'com.google.android.gms:play-services-location:18.0.0' 위 코드를 작성하고 우측 상단에 있는 'Sync Now'를 누른다. AndroidManifest.xml 사용자의 위치를 받아오기 위해 권한을 추가한다. MainActivity 이제부터는 코드적..

안드로이드를 개발하다 보면 설명이 필요한 기능이나 권한의 용도를 설명해야 할 때가 있다. 이러한 경우에는 튜토리얼 페이지를 통해 사용자가 쉽게 이해할 수 있도록 도울 수 있다. 그럼 이제 튜토리얼 페이지를 구현해보자. res -> strings.xml 우선 튜토리얼 페이지에서 사용할 글자를 정의한다. TutorialActivity 다음 건너띄기 시작 여기서 정의된 글자는 버튼의 글자이며 조건에 따라 글자를 띄울 것이다. res -> values.xml 다음으로 색을 정의할 것이다. #FFBB86FC #FF6200EE #FF3700B3 #FF03DAC5 #FF018786 #FF000000 #FFFFFFFF #07E940 #FFAD03 #FF3385 #25C8E4 #1C7C34 #A5662D #A54B6A ..

이전에 XML 형식으로 오픈 API를 요청하여 데이터를 확인해 보았다. [kotlin] 코틀린 Android 공공데이터 오픈 API 활용(XML) 이번에는 다양한 데이터가 있는 공공데이터 포털을 통해 오픈 API를 활용해려고한다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법 fre2-dom.tistory.com 이번에는 JSON 형식으로 오픈 API를 요청하여 데이터를 확인해보자. 공공데이터 오픈 API를 신청하는 방법은 위 링크를 통해 알아보고 오면 좋을 것 같다. 그럼 공공데이터 오픈 API 신청까지 끝났다고 가정하고 진행하겠다. 우선 기본 정보 목록 조회 미리 보기 과정에서 JSON으로 요청하기 위해 “&_type=json”을 추가하여 요청한다..