모리 기록장

들어가면서 이전 포스트와 다른 포스트 등에서도 언급한바가 있지만 나는 진단기기 회사에서 학술 그리고 UIUX관련 기획 및 제작을 담당하고 있는 사람이다. 그러다보니, 이번 신제품 기획을 하면서 있었던 내용을 공유하려고 한다. 라인 및 다른 곳에서 Flutter의 도입에 대한 성공과 실패에 대한 포스팅을 많이 하는 것을 보았으나, 진단기기 관련해서는 그렇게 많은 정보를 찾을 수가 없어서, 적용하지 못했던 이유에 대해 한번 짧게 나마 짚고 넘어 가보려고 한다. 이 글이 크로스플랫폼을 사용하여, 다양한 채널에 사용하고자 하는 사람들에게 조금이 나마 도움이 되면 한다. Flutter 플러터라고 하는 오픈 소스 프레임워크에 대해서 모르는 사람도 있고 아는 사람도 있을것이다. 이에 대해서 조금 짧게 설명을 해보자면..

근황 최근 블로그 포스팅이 매우 늦었다. 그 이유는 약 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..