모리 기록장

근황 최근 블로그 포스팅이 매우 늦었다. 그 이유는 약 58,000가지가 있을 수 있으나 가장 큰 이유는 그냥 내가 게을러서 인듯하다. 회사 일도 많고, 놀 것도 많고 게다가 집안에 새로운 식구가 늘어날 예정이기도 하다보니 뭔가 여러가지에 집중하는 것이 힘들었었다. 여튼 여담은 그만두고 오늘 공부할 것은 FCM이다. 플러터를 좀 다뤄본 사람이라면 혹은 서버로 부터 개별 사용자에게 메시지를 보내는 시스템을 구축해본 사람이라면 한번 쯤을 들어봤을 것이다. 아무래도 요즘에 앱을 통해서 다양한 소통이 주를 이루다 보니 서버를 관리하거나 앱을 관리하는 차원에서 연락을 취할 방식이 필요하다. 그러한 개념에서 FCM을 많이 사용하고 있다. 나도 추후에 사용할 일이 있다 싶어서 한번 이번 기회에 개념을 잡고 코드까지 ..

오늘 플러터를 공부하던 중 매우 흥미로운 사실을 발견하였다. "Textfield 클릭시 키보드가 나타났다가 다시 사라진다!" 이걸 다른 말로 하자면, Textfield를 futurebuilder로 감싸게 된다면, Textfield를 탭하고 focus가 된 즉시 다시 unfocus가 되어 나타났던 키보드가 바로 사라지는 현상이 발견이 된다. 잠시 예제문을 하나 만들어보자. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Fut..

ㄹ이제 사진을 올린다던가 로그인 혹은 로그아웃 또는 댓글을 다는 형식의 백엔드적인 (백엔드라고 할 수 있을까...) 형태의 작업은 모두 끝났다. 이제 스크린을 구성해보자. 사실 스크린은 너무나도 간단한 부분이라서 어떠한 스크린들이 있고 이게 어떻게 연결이 되어 있는지 정도만 적어주고 넘어가도록 하겠다. (나중에 내가 다시 보고 이해를 해야하니까...) lib/screens/ 내에 생성되어야할 파일은 다음과 같다. - add_post_screen.dart - comment_card.dart - comments_screen.dart - feed_screen.dart - profile_screen.dart - search_screen.dart - login_screen.dart - signup_screen.d..

언제나 글을 길게 쓸수는 없고, 오늘은 일단 간단하게 자 그럼 우리가 계속 Hello world를 150여개국으로 적을만큼 계속 괴롭혀 왔던 main.dart를 어떻게 변경할 것인지 보도록 하자. - 근데 main.dart가 무엇이길래 이름도 바꾸지 않고 그대로 사용하는 걸까? main.dart는 애플리케이션의 시작점이다. 시작점을 정의하면서 애플리케이션의 위젯트리를 생성하는 코드를 포함하고 있기 때문에, 어디서 앱일 시작할지 알려줄 수 있는 출발선인 것이다. 그럼 일단 코드를 보자. 파일: main.dart * 개인번호를 입력하세요 라고 적혀있는 부분은 각자가 본인의 firebase라던가 firestore 혹은 vscode등에서 확인한 key들을 입력하면된다. 개인적인 부분이므로 비공개 처리하였다. i..

오늘도 어김없는 복습타임. 현재 작성하고 인스타그램 클론코딩의 경우에는 본인이 어느정도 수정한 부분이 있을 수도 있지만, 대부분이 기존의 코드를 참고하거나 혹은 변경을 함으로써 작성한 코드들이다. 그러다 보니 미숙한 부분도 있고 아직 덜 완성된 부분도 있을 수 있다. 이 점 양해 부탁한다. 계속해서 코드와 기능은 보수를 하면서 기초적인 기능까지는 마무리를 해보려고 한다. 자 그럼 우리가 가장 먼저 인스타그램 클론코딩을 준비하면서, utils를 만들어 colors asset 그리고 global_variables asset 등을 미리 지정해주었다. 이렇게 함으로써 primary, secondary와 같은 색감이라던지 혹은 responsive reactive web 혹은 app에 기준이 될 수 있는 수치들을 ..

파이어베이스 혹은 파이어스토어를 다뤄본 사람들이라면 알겠지만 단순히 우리가 파이어베이스를 initialization하거나 코드 내 심어놓기만 했다고 해서 바로 연결이 되는것은 아니다. 우리가 어떤식으로 데이터를 전달할지 혹은 받아올지들을 상세하게 적어놓아야지 파이어베이스와 같은 모바일 어플리케이션 플랫폼과 소통이 가능한 것이다. 여기에서 또 빠질 수 없이 등장하는것이 저번 포스팅에서도 이야기를 하였던, MVC, MVP, MVVM 패턴이다. https://riris01.tistory.com/41 [이론] MVC, MVP 패턴 + MVVM 패턴과 비교 목표 MVC와 MVP의 개념을 이해하고 그 차이점을 확인할 수 있다. 자신의 프로젝트에 따라 MVC, MVP, MVVM 등을 어떻게 적용할지 확인할 수 있으며..

자, 지금까지 우리가 만든것은 로그인, 로그아웃, 그리고 반응형 화면 레이아웃이다. 그렇다면 오늘 해야할 것은 models 부분이다. 오늘 만든 models부분이라고 하는 것은 각각의 화면에서 정보를 처리할때 어떠한 처리를 얻고 다룰지를 결정하는 부분이라고 보면 되겠다. 클린코드를 공부한 사람들이 있다면 무조건 알게되는 세가지의 버전이 있을 것이다. 그것은 바로 MVC, MVP, MVVM이라는 것이다. 여기서 이 내용을 모두 다 소개하자면 조금 길듯하니, 아래의 이전 포스트를 보고 오기를 바란다 (만약 관심이 있다면?) https://riris01.tistory.com/41 [이론] MVC, MVP 패턴 + MVVM 패턴과 비교 목표 MVC와 MVP의 개념을 이해하고 그 차이점을 확인할 수 있다. 자신의..

Clone coding 2,3에서 보면 이런 부분이 있다. Navigator.of(context).pushReplacement( MaterialPageRoute( builder: (context) => const ResponsiveLayout( mobileScreenLayout: MobileScreenLayout(), webScreenLayout: WebScreenLayout(), ), ), ); (...) 혹시라도 Clone coding 2, 3번을 보시지 않은 분은 다음의 링크를 통해 확인 가능하다. [Flutter] Instagram Clone Coding (인스타그램 클론코딩) 2: https://riris01.tistory.com/76 [Flutter] Instagram Clone Coding ..

장마가 있다보니 날이 좀 시원할 줄 알았는데, 날이 더더욱 더워지고 있다. 매년 더욱 더운 여름을 갱신할꺼라고 하는데 이 정도일 줄이야. 여튼 다들 열사병 조심하고 공부는 무리하지 않는 선에서 하도록 하자. 오늘은 지난번에 이은 로그인 화면을 만들어보고자 한다. 자 그럼 한국인 답게 처음부터 전체 코드를 보여드리겠다. 자, 일단 복붙을 하실 분은 lib/screens/login_screen.dart를 생성한다음에 이 내용을 붙여넣자. import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:instagram_f..

지난 포스팅을 작서 완료하고 주말간 극심한 위염에 걸려서 계속 앓아 누웠다. 이게 위염인지 아니면 식중독인지 잘은 모르는 상황이긴 하지만 금일 조금씩 무언가를 섭취하면서 소화를 할 수 있는거 보면 일단 위장기관이 확실히 문제였던 것은 맞는것 같다. 여러분들도 건강 항상 조심하고 너무 아프다 싶으면 빠르게 병원을 찾도록 하자. 몇일간 배앓이가 너무 심해서 정말 정신을 놓을 정도였다. 여튼 지난번까지의 내용을 보면 일단 준비를 하고, 그 다음에 pubspec.yaml에 들어갈 내용 그리고 추가적인 Asset등을 등록 해두었다. 만약 이번 포스팅을 보는 것이 처음이라면 이전 포스팅을 한번 보고 오기를 바란다. https://riris01.tistory.com/75 [Flutter] Instagram Clone..