모리 기록장

목표 Firebase와 flutter 연결 방법을 알아보자. Firebase가 무엇인지 이해하고 활용할 수 있는 방법이 무엇인지 알아보자. 1. 파이어베이스 (Firebase)? Firebase는 구글이 제공하는 클라우드 기반 모바일 및 웹 어플리케이션 개발 플랫폼. Firebase는 다양한 서비스를 제공하여 개발자들이 간단하고 빠르게 어플리케이션을 개발할 수 있도록 지원한다. Firebase가 제공하는 서비스로는 다음과 같은 것들이 있다: 1. 실시간 데이터베이스: 클라우드 기반의 NoSQL 데이터베이스. 실시간으로 데이터를 동기화하여 여러 플랫폼에서 실시간으로 데이터를 공유 가능. 2. 인증: OAuth 및 기타 인증 방식을 사용하여 사용자 인증 및 보안 관리를 간편하게 처리. 3. 스토리지: 클라우..

목표 flutter_animate 패지키를 활용해보고 추후 활용도가 무엇이 있는지 고민해본다. Flutter 공식 유튜브를 보다가 해당 영상을 확인하였다. flutter_animate (Package of the Week)은 주 마다 Popularity가 높은 패키지를 제공해주는 것처럼 보였는데 워낙 신기해서 기록을 해볼 겸 들고 와보았다. flutter_animate는 쉽게 말하자면 글자 등에 다양한 시각적 효과를 줌으로써 UI적인 측면에서 화려하거나 혹은 정갈한 느낌을 줄 수 있는 Style들을 제작할 수 있는 것으로 보인다. 뭔가 포트폴리오 앱을 만들거나 혹은 디자인 관련 앱을 만들때 좋을 듯 한다. 실제 홈페이지에서도 보여주는 예시들이 다음과 같다. 그 외에도 이러한 기능들을 제공한다고 한다. P..

목표 Rain effect를 만들어 보고 Getx의 역할과 UI구성의 방식들을 이해한다. 이번에도 너무나도 귀여운 UI를 구성하는 코드가 있어서 코드를 따라 쳐보면서 나름대로 코드를 해석해보았다. 해당 코드는 도그풋님의 Youtube 중 [Flutter] ASMR - Rain animation을 참조하였다. 원본 (Github): https://github.com/wownsdl13/flutter-rain-example 변경 (Github): https://github.com/riris01/flutter_rain 그럼 시작! 1. 파일 구성 이번엔 파일이 좀 많다 하지만 천천히 적어보자 lib ㄴ main.dart ㄴscreens ㄴwindow_page ㄴ local_utils ㄴ window_contro..

목표 증기 형태를 만들어 보고 수치를 변형해보면서 내가 원하는 모양의 증기를 만들어본다. 이번 시리즈는 내가 나중에라도 한번쯤은 써보고 싶어서 기록차 적어놓는 포스트가 될 듯 하다. 코드는 도그풋님의 영상 'ASMR-Steam animation'을 참고하였으며, 본인 개인의 창작물임이 아님을 다시 한번 밝힌다 (도그풋님의 영상을 보면서 느끼는거지만 정말 코딩을 잘하신다는 생각을 한다. 연습해야지.) 그럼 코드 시작! 1. Dependency 없음 2. 파일준비 ㄴ main.dart : 만들어진 UI를 보여줄 '그릇'을 생성한다고 보면된다. ㄴ widgets(폴더) ㄴsteam_page.dart : One steam (하나의증기)를 겹겹히 나타내기 위해 SteamPage 위젯을 구성하였다. ㄴone_ste..

목표 supabase가 무엇인지 확인을 하고, firebase와의 차이점은 무엇인지도 확인한다. supbase를 직접 사용해보고 사용상의 이득과 실을 따져본다. Supabase Supabase는 오픈소스로 제공되는 클라우드 데이터베이스 플랫폼이다. 해당 플랫폼은 PostgreSQL 데이터베이스와 함께 제공이 되며, 클라이언트와 서버 어플리케이션등 API와 개발 도구등을 제공하여준다. 확장성이 뛰어나며, 서버리스 아키텍처를 사용하다보니 데이터베이스 관리의 부담을 줄일 수 있다는게 장점이다. 실시간 데이터 스트리밍과 인증 그리고 권한 부여에 뛰어나다 보니 쉽게 웹과 모바일 앱을 빌드하고 배포할 수 있도록 지원해준다. Supabase vs firebase 둘다 클라우드 기반 백엔드 플랫폼이라는 공통점이 있지만..

목표 지뢰찾기 게임을 만들어 보면서 Flutter의 기능과 활용성을 알아본다. 클린코드란 무엇인지 생각해보면서 효율적인 코드를 만들 수 있는 방법을 생각해본다. Flutter에 입문한지 얼마되지 않았지만, 공부를 하면서 느끼는것은 본인이 직접 코드를 짜보면서 라이브러리를 사용해보고 이해하는 것도 중요하거니와, 다른 사람이 작성한 코드를 보고 해석할 줄 아는 것도 중요하다는 생각이 든다. 특히 코드를 해석하는 관점에서 나보다 더 나은 클린코드를 작성하는 개발자의 코드가 있다면 곰곰히 생각하고 곱씹어보면서 어떻게 하면 내것으로 흡수할 수 있을지도 생각을 해보아야 한다. 이렇게 함으로써 최소한의 리소스로 다양한 기능을 구현하면서 쉽게 이해가능한 코드를 언젠간 구현할 수 있기 때문이다. 그래서 이번에는 흥미로운..

목표 Riverpod을 사용하여 E-commerce App을 만든다. 이번 시차에서는 Riverpod을 사용하여 저장된 내용들이 화면에 나타나도록 만드는 형태를 만들고 그 원리를 이해한다. 구성 1. main.dart 일단 main.dart를 만들어서 MaterialApp()을 선언해 준다. 실제적인 화면 구성은 home_page.dart에서 UI를 구성할 것이다. flutter_riverpod과 riverpod의 버전의 경우에는 최신버전 (2.5.3)을 사용하였으며, 필요에 따라 버전을 변경할 수 있다. Riverpod을 사용할 때는 ProviderScope로 MyApp()을 감싸주어야 하는 것을 잊지 말자. import 'package:flutter/material.dart'; import 'pack..

목표 Riverpod을 사용하여서 앱의 상태관리를 하는 법에 대해 예제를 사용하여 확인한다. Quiz App을 만듦으로써 Riverpod 이외에도 다양한 위젯들을 적용하여 확장할 수 있는 방법들을 확인하여 보자 (예시: showSnakBar). Quiz App을 만들어보자. 다음의 순서대로 만들면 된다. 참고로 @ 표시는 file의 이름 앞에 붙여주는 접두사라 생각을 하자. 예를 들어 @ quiz.dart이라고 한다면, quiz.dart 파일을 만든 후 해당 코드들을 입력해주길 바란다. dependencies (@ pubspec.yaml) flutter_riverpod: ^2.3.4 @ quiz.dart 어떤 형태의 자료를 불러올 것인가를 선언하는 곳이다. class Question을 만들어 주고 Str..

목표 Riverpod을 사용하여 WeatherApp을 만들고 Riverpod의 적용원리를 확인한다. Riverpod을 사용하여 WeatherApp을 만들어볼 것이다. 여기서 불러오려고 하는 정보의 경우 도시, 온도, description, icon이며 만들려고 하는 앱의 화면은 다음과 같다. Weather App 1. Dependency riverpod: ^2.1.1 http: ^0.13.3 2. Weather class의 생성 (weather.dart) 여기서는 weather api로 부터 어떤 Data를 받을지 선언해주는 곳이라고 생각을 하면 된다. 도시, 온도, 짧은 설명 그리고 아이콘등을 받아올 예정이다. class Weather { final String city; final double tem..

목표 Riverpod을 통해서 Todo 앱을 만든다. 만드는 과정에 대해서 이해하고 각 provider가 어떤 역할을 하는지 알아본다. Github에 관련된 많은 자료들을 보다보면 상태관리 라이브러리중 가장 많이 보는 것이 GetX와 Riverpod라고 할 수 있다. GetX는 가장 많이 알려져 있긴 하지만, 일단 업데이트가 진행되지 않고 있기도 하고 (2023-04-13 기준), Riverpod은 flutter의 provider를 대체할 수 있을 정도로 꾸준히 발전되고 있다보니 저자는 Riverpod을 더욱 공부해보아야겠다는 생각이 들었다. Riverpod 공식 사이트 (https://riverpod.dev/ko/docs/getting_started)에 있는 에제들을 함께 따라해보고 새롭게 재해석도 해..