728x90

인스타그램클론 9

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 9 (Screens)

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

Flutter 2023.08.06

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 7 (image_picker, widgets)

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

Flutter 2023.08.03

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 6 (resources)

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

Flutter 2023.08.01

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 5 (models, providers)

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

Flutter 2023.08.01

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 4 (Responsive 화면)

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 ..

Flutter 2023.07.31

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 2 (등록화면)

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

Flutter 2023.07.27

[Flutter] Instagram Clone Coding (인스타그램 클론코딩) 1 (준비하기)

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

Flutter 2023.07.23

[리뷰] GetX로 인스타그램 만들기 중단 및 대체 이유

이 글은 GetX를 통해 인스타그램을 만들려고 시도하던 중 알게된 사실들을 기반으로 개인적인 의견에서 왜 GetX가 소형 프로젝트에 알맞으며, 해당 프로젝트와 맞지 않았는지 설명하고자 합니다. 이번에 인스타그램 Clone 코딩을 하면서 GetX를 통해 Management를 진행해보려고 했다. 결과는 중단하고 Provider 및 Riverpod을 이용하여 다시 새롭게 만들 예정이다. 내가 GetX를 사용하면서 느꼈던 문제점은 크게 3가지로 다음과 같다. 1. 단순하다. Context를 고려하지 않는다. 2. GetMaterial로 변경하여 Flutter를 대체한다. 3. Documentation이 부족하다. 해당건에 대해서 상세하게 설명하자면 다음과 같다. Context Flutter를 공부하면서 느낀 것..

Flutter 2023.07.19

[Clone coding] Instagram Clone: 인스타그램 클론 코딩 - 1

요즘 포스팅이 뜸했던 이유는 회사 일이 바쁜 것도 있었지만, 앞으로 어떤 부분을 조금 더 공부를 해야할지 고민을 했기 때문이다. 그래서 이번에 생각을 한 것이 클론 코딩을 하나씩 해보면서 어떤 식으로 앱을 구성하고 구현해 낼 수 있을지를 생각해보면서 클론 코딩을 해볼까 한다. 그 첫번째로 이번에 시작하는 것이 인스타그램 클론 코딩이다. 물론 요즘 인프런이라던지 클래스 101 등에서 인스타그램 클론 코딩을 몇시간 단위로 가르치고 있기는 하지만 이런부분을 무작정 따라 하기에는 아무래도 나의 생각이 반영되지 않을 것 같았다. 그래서 이번에는 내가 관련 수업이라 관련 패키지 등을 직접 찾아보면서 최대한 비슷하게 만들어 볼까 한다. 클론 코딩은 아무래도 시간이 걸리는 작업이다 보니, 자주 포스팅은 하기 힘들 것 ..

Flutter 2023.07.12
728x90