모리 기록장

ㄹ이제 사진을 올린다던가 로그인 혹은 로그아웃 또는 댓글을 다는 형식의 백엔드적인 (백엔드라고 할 수 있을까...) 형태의 작업은 모두 끝났다. 이제 스크린을 구성해보자. 사실 스크린은 너무나도 간단한 부분이라서 어떠한 스크린들이 있고 이게 어떻게 연결이 되어 있는지 정도만 적어주고 넘어가도록 하겠다. (나중에 내가 다시 보고 이해를 해야하니까...) 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 ..

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

지난번에 포스팅 했던 바와 같이 인스타그램 클론 코딩을 GetX로 시도를 해보려고 하다가 여러가지 단점들을 발견하여 중간에 중단했던적이 있었다. 물론 본인의 실력이 낮았기에 이러한 결론이 나올 수도 있었겠지만, 생각보다 앱을 견고하게 만들 수 있을 것이라 생각이 들지 않아서 중간에 그만 두었다. 이유에 대해서 알고 싶다면 다음의 포스트를 참고 하자. https://riris01.tistory.com/74 [리뷰] GetX로 인스타그램 만들기 중단 및 대체 이유 이 글은 GetX를 통해 인스타그램을 만들려고 시도하던 중 알게된 사실들을 기반으로 개인적인 의견에서 왜 GetX가 소형 프로젝트에 알맞으며, 해당 프로젝트와 맞지 않았는지 설명하고자 합니다. riris01.tistory.com 해당 포스트를 올리..

장장 3일동안의 플러터를 사용하여 예제 게임을 만들어보는 시간을 완료하였다. 적혀 있는 시간으로는 2시간이라고 적혀있는데 막상하고 나니까. 코드를 천천히 읽으면서 분석하다 보니 약 3일이라는 시간이 지났다. 다 만들고 나서, 만들어진 게임이 다음과 같다. 사실 예제랑 완전히 똑같다. 디자인도 바꾼것 없고, 약간의 반응성과 조이스틱 크기를 바꾼정도이다. 이렇게 만들고 나니 생각 보다 게임이 귀엽다. 나처럼 3D 게임을 오랫동안 하지 못하거나 혹은 인디게임을 좋아하는 사람들은 한번쯤은 자신만의 게임을 만들어보고 싶다는 생각을 했을건데, 이걸로 충분히 만들 수 있겠다는 생각이 든다. 아 물론 엄청나게 머리를 싸매면서 움직이는 방법을 연구해야겠지만... 플레임으로 게임을 만들면서 느낀점은 다음과 같다. 플레임 ..

회사일과 집안일이라는 핑계로 요즘 너무 바쁘게 돌아가는 바람에 Flutter 공부를 예전처럼 하루 3-4시간씩 하지는 못한다 (사실 내가 더 부지런하면 되는데, 요즘 잠이 늘어서 조금 핑계를 대본다). 그러는 와중에도 회사 점심시간에 짬짬히 Flutter에 대해서 새롭게 알게된 사실들을 적어보고 읽어보고 고민해보는 시간을 가져본다. 일전에도 말했던 것 처럼 Flutter에서 Flame 이라는 Engine을 사용하여 간단한 게임을 만들 수 있게 그걸 해보는 중이다. 여기서 Flame 이라는 걸 처음 들어본 사람은 다음과 같다. Flame 이란? 더보기 About Flame Flame is a modular Flutter game engine that provides a complete set of out-..