Onboarding 화면지난 번에는 Riverpod의 공식문서를 보며 Riverpod 예제에 대해서 공부했다.이번에는 직접 구현하면서 개인 프로젝트에 적용했다.프로젝트의 OnboardingView를 보면 아래와 같이 기획을 하였다.왼쪽은 화면(UI)이고 오른쪽은 화면은 각 위젯(widget)에 대한 기능 설명이다.시작하기 버튼은 course와 campus에 초기값이 아닌 다른 값이 들어가면 활성화되면서 색이 변경된다.Data State Management(campus)그러면 나는 저번에 배운 Data State management Tool인 Riverpod을 사용하여 Data 상태관리를 해보겠다.final campusProvider = StateNotifierProvider( (ref) => Campu..

[Flutter] RiverPod 학습지난 시간에 데이터 상태관리(Data State Management)에 대해 학습을 해봤다.선언형 UI와 명령형 UI의 차이점, Flutter에서 데이터 상태관리하는 방법, 데이터 상태 관리 도구(Data State management Tool)를 사용하는 이유 등그러면 이제 RiverPod에 대해 학습해보자.RiverPod의 공식문서를 보면 필수 사항등이 있다.첫 번째 provider/네트워크 요청 만들기부가 작업 수행(Performing side effects)요청에 인자 전달하기웹소켓 및 동기 실행요청 결합하기캐시 지우기 및 상태 폐기(disposal)에 반응하기providers의 빠른 초기화(Eager initialization)providers 테스트하기로깅..

RiverPod 학습 이유오늘은 개인 프로젝트에서 RiverPod을 사용하여 데이터 상태관리하는 방법을 학습하려고 한다.왜 많은 데이터 상태 관리하는 방법 중 RiverPod인가? 거창한 이유는 없다.나는 프레임워크(SwiftUI , Flutter) 개발을 하였지만 데이터 상태관리에 대한 식견이 부족하다.그래서 솔직히 다른 개발자분들이 말씀하시는 “어떤 상태관리 패키지(혹은 라이브러리)는 무엇이 좋다.” 혹은 “무엇이 별로다” 이야기는 내가 경험해봐야 이해할 수 있다고 생각한다.그리고 회사마다 자격요건에 상태관리 툴도 모두 다르다. 하지만 데이터 상태관리 툴 하나를 깊게 공부하였다면 다른 상태관리를 쉽게 학습할 수 있을 것이다.데이터 상태관리 툴RiverPod을 바로 학습하기전에 Data State To..

[Flutter] Result Pattern 적용하기오늘은 저번에 학습하였던 Result Pattern을 실제로 내 프로젝트에 적용시켜서 카카오 로그인과 애플 로그인의 Error Handling을 진행해보겠다.우선 어떻게 동작하는지 흐름을 정리해봤다위에 Flow를 보면 View → ViewModel → Repository → Service의 패턴을 따르는 것을 확인할 수 있다.LoginView에서 간편 로그인 버튼을 누르게 되면 LoginViewModel에 있는 Result 타입을 반환하는 함수가 실행이 된다.성공시 Router가 변경이 되고 Home으로 이동된다.실패시 Result안에 ErrorMessage가 담기게 되고 그것을 출력하거나 화면에 표시할 수 있다.LoginViewModel에 있는 함수가..

개인 프로젝트에서 모든 로그인 인증 방법은 구현이 완료되었다~! 😁그렇다면 바로 CRUD 기능을 개발하고 데이터 상태관리를 하면 될까?물론 해도 되지만 프로젝트에서 외부와 통신을 하는 경우에는 빠질 수 없는 작업이 있다.바로 Error Handling(예외 처리)이다.Application을 실행하여 외부와 통신을 하면 사용자가 잘못된 입력을 할 수도 있고, 네트워크 요청이 실패할 수도 있으며, 어딘가에서 문제가 발생할 수도 있다.그럴때 예외처리는 코드에서 발생할 수 있는 잠재적 오류를 처리하여 앱이 문제없이 작동되도록 해주는 것..!그러면 Flutter에서는 어떻게 예외 처리를 할 수 있는지 알아보겠다.Exception Handling with try/catch in Dart and Flutter예를 ..

간편 로그인 구현하기(Apple🍎)저번 시간에는 Flutter에서 카카오 간편 로그인을 구현하는 방법과 Firebase Auth에 카카오를 연동하는 방법을 학습해봤습니다. 이번에는 Apple 로그인을 구현해보고 Firebase Auth에 등록해주겠습니다.Firebase 인증 제공업체 추가하기제일 먼저 파이어베이스 프로젝트에 들어가서 인증 제공업체를 추가하겠습니다.아래 이미지를 보시면 저번에 했던 kakao, Apple, 익명이 등록된 것을 볼 수 있다.그리고 Apple 로그인 방법을 등록할 때 아래 처럼 사용 설정 버튼을 활성화 해주고 맨 아래 승인 콜백 URL을 복사하면 됩니다.이러면 파이어베이스에서 필요한 작업은 끝났습니다.Apple Identifier 등록아쉽게도 애플 로그인을 사용하려면 애플 개..

안녕하세요 오늘은 이전 디자인 시스템 개발 작업에서 적용했던 부분 중에 잘못된 부분이 있어 리팩토링 하였습니다.이 트러블 슈팅을 어떻게 해결하였는지 작성해보겠습니다.이전에는 AppColorsTheme().gfBlackColor를 사용하여 색을 정해주었는데 이 객체가 같은 주소를 참조하는 객체가 아니 다른 주소를 참조하는 객체를 계속 생성하여 사용했던 문제였습니다.객체를 복사하여 사용리팩토링 되기 전 코드에서는 AppColorsTheme()를 사용하여 AppColorsTheme()안에 있는 색을 사용했습니다.HomeView UI와 NoticeView UI가 그려질 때 마다 주소값을 출력해보겠습니다. final appColor = AppColorsTheme(); final appColor2 = A..

플러터로 개인 프로젝트를 개발 중에 있는 상황입니다.추후 채팅 작업이 들어갈 화면 이외의 모든 화면의 UI 작업을 완료한 상황입니다.그래서 Navigation을 연결하는 작업을 진행하였습니다!Go_router를 사용하여 URL Router 연결 작업을 정리 하고 한 번 더 학습하기 위해서 글을 작성합니다! 👍기존 UI Design 작업을 진행하면서 간단한 push 방식과 List를 활용하여 Navigation 연결을 진행하였습니다. 하지만 push 방식은 multi platform 지원이 완벽하지 않는 상황이고 다양한 상황에 대처할 수 있고 딥링크에도 URL path형식이 더 알맞다고 생각하여 GoRouter를 사용하였습니다..Push & PopGo 방식을 알아보기전에 기존에 사용했던 Push 와 Po..

트러블 등장개인 프로젝트 풀밭을 개발하며 CampusView의 UI와 기능을 개발하였는데 문제가 생겼다. 자세한 개발 내용은 위의 링크를 누르면 볼 수 있다.CampusView는 DynamicTabBar on Scroll으로 Scroll과 TabBar를 서로 연동하여 Tab을 눌렀을 때 자동으로 스크롤이 되거나 혹은 스크롤을 하였을때 Tab이 자동으로 변경되는 기능이 있다.이 때 발생한 문제는 Tab을 눌러 스크롤이 자동으로 설정된 값을 스크롤 될 때 다른 Tab을 누르게 되면 scrollToIndex함수가 중복 실행이 되어 코드가 꼬이는 문제가 발생하였다. 한 번 어떤 상황인지 화면을 봐보자.예시 화면스크롤 이동이 끝난 후 Tab을 눌러 잘 작동 되는 모습 , 스크롤 이동이 끝나기 전 Tab을 눌러 오..

CampusView 기획Flutter를 사용해서 SESAC 커뮤니티 어플을 개발 진행중인데 캠퍼스의 정보들을 볼 수 있는 CampusView를 아래 이미지와 같이 기획하였다.CampusView는 DynamicTabBar로 구성되어 있어 기능을 개발 하였다.DynamicTabBar의 기능사용자가 스크롤을 할 때 감지하여 Tab이 자동으로 이동사용자가 Tab을 눌렀을 때 설정한 곳을 자동 Scroll DynamicTabBar 개발일단 Tab을 눌렀을때 해당 위치로 이동하려면 Tab을 관리하는 위젯과 클래스를 찾아야한다.그렇게 해서 나온 것이 ScrollController 와 DefaultTabController!https://flutter.github.io/assets-for-api-docs/assets/m..

Flutter 로딩 시퀀스를 알아보게 된 계기Flutter 개인 프로젝트를 진행하면서 무선 실기기 빌드를 종종 사용하였는데 AndroidStudio로 무선 빌드를 하면 XCode가 켜지고 XCode에서 Run이 실행된다. 이 때 실기기에서 하얀 화면만 나오는 문제가 있었다. XCode로만 무선 빌드를 하면 문제없이 내가 만든 뷰를 테스트 할 수 있었다..!그래서 왜 XCode로 빌드하면 문제없이 빌드가 되고 AndroidStudio로 빌드를 하면 하얀 화면이 나오는지 찾아보게 되었다!처음에든 생각은 플러터로 코드를 작성한 후 iOS나 Android로 어떻게 화면이 그려지는 것일까 생각이 들었다.그래서 공식 문서를 찾아 플러터가 어떻게 UI를 표시하는지 플러터 Load sequence를 찾아보았다.플러터 ..

안녕하세요 불망입니다~! 오늘은 피플에서 피플사연UI 변경을 해서 개발을 하였습니다. 테스트플라이 앱을 테스트 해보니 디자이너분께서 디자인 QA를 하셨습니다. QA라는것을 저는 처음알았습니다. 디자인 QA는 디자인 작업물이나 디자인 시스템의 품질을 검토하고 확인하는 과정입니다. 디자인 QA 디자인 가이드라인 및 표준 검토: 디자인 팀이 작성한 가이드라인과 표준을 따르고 있는지 확인합니다. 디자인 시스템 테스트: 디자인 시스템의 구성 요소와 패턴을 검토하고, 일관성과 재사용성을 확인합니다. 레이아웃 및 그리드 검토: 레이아웃과 그리드가 적절한지, UI 요소 간의 간격이 일관되게 적용되는지 확인합니다. UI 요소 검토: 버튼, 아이콘, 텍스트 등 UI 요소가 일관되게 디자인되어 있는지, 사용성이 높은지 확인..

안녕하세요 불망입니다! 피플에서 메인 기능으로 지도 커뮤니티를 기획하게 되어서 지도 개발을 시작 하였습니다. 간단한 아키텍처 구성을 해봤습니다. - 모든 헌혈의 집 위치를 가져와서 마커 표시 - 마커 눌렀을 때 - 바텀 시트 조금 보여주기 - 바텀 시트 눌렀을 때 - 센터 상세페이지로 이동 - 지도 탭을 눌렀을 때 현재 위치 가져와서 보여주기 - 검색창은 기존 검색창 사용 - 검색 했을 때 검색 결과를 누르면 좌표이동해서 보여주기 - 검색 결과 필터링(지도 완성후 기능추가 & 백엔드) - 헌혈의 집 버튼 : 헌혈의 집만 마커 표시 - 헌혈의 카페 버튼 : 헌혈의 카페만 마커 표시 - 가까운 헌혈의 집 보여주기(지도 완성 후 기능 추가) - 내 위치표시 : 내 현재 위치 표시 - 아이콘 커스텀마이징 위 기..

안녕하세요 오늘은 제가 피플내에서 했던 일 중 하나를 소개하려고 가져왔습니다. 저희는 플로우 업무툴을 사용하는데 아래처럼 요청사항이 들어왔습니다! 1번 이슈 로그인 없이 댓글 작성,대댓글 작성, 채팅을 누를때 팝업창이 나오게 했습니다.(피플생활, 사연) 피플은 로그인 없이 이용할 수 있는데 사용할 수 있는 기능이 제한적입니다. 이번 이슈는 로그인을 안한 상태에서 글에 댓글을 달거나 채팅을 하려는 경우 아무런 팝업, 알람이 나오지 않았기 때문에 유저에게 어떠한 정보도 알려주지 않는 상태였습니다. 그래서 로그인을 안한 상태에서 로그인을 해야만 사용할 수 있는 기능을 이용하려고 할 때 팝업창을 띄워 유저가 로그인을 해야만 이용을 할 수 있다고 알려주는 기능을 만들었습니다. 2번 이슈 로그인 없이 설정 눌렀을 ..

Flutter에는 StatelessWidget 이랑 StatefulWidget이 있다. Stateless 이둘의 차이점으로 간단하게 설명하자면 화면이 렌더링 될 때 변경이 되지 않는 것을 Stateless로 한다. 이벤트, 상호작용에 동작하지 않는 위젯들을 사용한다. Stateful Stateful은 less와 다르게 동적인 위젯을 다룰때 사용한다 사용자가 버튼을 눌러서 실행이 된다거나 이벤트가 일어난다 등 화면을 랜더링 하면서 움직임을 가져오고 상호작용이 되는 위젯들을 사용한다. Stateful parameter 사용법 여기서 오늘 기억해야 할 부분은 Stateful을 사용할 때 매개변수를 가져오려면 widget.파라미터이름으로 가져와 사용할 수 있다. 밑에 예시 class Home extends St..