목록Flutter (33)
다재다능 개발자 성장기 🚀

개인적인 감상 및 회고 이번 팀프로젝트의 과제는 클린 아키텍처를 사용한 SNS 어플 만들기와 실제로 안드로이드 배포해보는 것이었다. 저번 개인 프로젝트를 진행하면서 클린아키텍처가 어렵다고 생각했는데, 이번 팀 프로젝트를 진행하면서 클린 아키텍처 구조로 개발하는 방식에 좀 더 익숙해질 수 있어서 유익한 시간이었다. 여하튼 개발은 일단 하면 할 수록 느는 것 같다. 이번 프로젝트에서는 글 작성 페이지를 맡았다. 진짜 배포되는 앱이라는 생각이 드니까 사용자가 보았을 때 UI적으로 편리하고 예쁘게 만들고 싶다는 욕심이 생겨서 공을 들였는데 결과적으로 좋은 결과물이 나온 것 같아 뿌듯했다 : ) 그리고 이번에 우리 팀은 3명으로 가장 수가 적은 팀이었는데, 감사하게도 다들 좋은 분들이셨고 소통도 잘 되어서 답..
(저와 같은 방법을 고민하신 분들이 있을까 봐 글 남깁니다.) 이번에 팀 프로젝트 배포를 위해 구글 개발자 계정을 만들려고 했는데, 인증을 해야 한다고 해서 인터넷 글을 많이 찾아봤다.이런 저런 얘기들이 많아서 고민하다가, 가장 빠른 방식인 주민등록 등본 초본(주민번호 뒷자리 가려야 함)을 PDF로 다운받아 업로드했더니, 신청한지 12시간 만인 당일 밤 10시 좀 넘어서 인증이 완료되었다는 메일이 도착했다(글로벌 회사라서 가능한 시간인듯?) 며칠 걸린다는 말도 있고, 등본도 안 됐다는 말도 있었는데, 생각보다 빠르게 한 번에 통과되어서 다행이라는 생각이 들었다. + 빠르게 등본 발급받을 수 있는 정부24 사이트 링크 걸어둡니다.https://www.gov.kr/portal/main/nologin 정부서비..
스로틀링특정 시간 간격 내에서 이벤트가 여러 번 발생하더라도, 그 중 한 번만 실행되도록 하는 기능상황 예제 - TextField로 검색을 단기간에 여러번 요청해도 한번만 요청디바운싱이벤트가 여러 번 발생할 때 마지막 이벤트만 처리하도록 하는 기법상황 예제 - TextField의 onChanged 에서 값이 변할 때마다 아이디 자동 중복 체크할 때 사용 이유 성능 최적화 - 불필요한 요청을 방지해서 성능 향상 자원 절약- 불필요한 요청을 방지해서 트래픽 감소모바일 => 데이터 사용량 절약서버 => 서버 데이터 사용량, 리소스(메모리, cpu) 사용량 절약

프로젝트 미리보기 개인적인 감상 및 회고이번 과제는 클린 아키텍처 구조로 영화 정보를 themoviedb라는 사이트에서 제공하는 오픈 api에서 불러와서 영화 정보 앱을 만들어보는 과제였다. 저번 과제에서 이제 좀 MVVM 패턴에 익숙해지나 했는데, 그 다음 바로 더 세부적으로 나뉘는 클린 아키텍처 구조로 만들다 보니 어려웠다.. 😣 그래도 개인 프로젝트를 진행하면서 약간 감을 잡게 되었다. 이번 주부터 시작하는 팀프로젝트를 진행하게 되면 좀 더 적응이 될 것 같다. 화이팅 !! > 깃허브 README https://github.com/hyewonShin/flutter-movie-app 트러블 슈팅문제API를 통해 데이터를 가져오는 과정에서, 일부 변수 값이 Thunder Client에서는 정상적..

1. 전체 구조의 큰 그림클린 아키텍처는 애플리케이션을 데이터(Data), 도메인(Domain), 프레젠테이션(Presentation) 계층으로 나눕니다.Data 계층: 데이터 소스(API, 로컬 DB 등)와의 상호작용을 담당.Domain 계층: 애플리케이션의 핵심 비즈니스 로직과 규칙을 처리.Presentation 계층: 사용자 인터페이스(UI)를 처리하고 데이터를 화면에 보여줌. 2. 디렉토리 구조 및 세부 설명dataData 계층은 외부 데이터 소스(API, DB 등)와의 상호작용을 관리하고, 데이터를 Domain 계층에서 사용할 수 있도록 가공합니다.하위 디렉토리 설명data_source데이터 소스와 직접 연결되는 코드를 작성하는 디렉토리입니다.API 호출, 로컬 파일 접근, 데이터베이스 쿼리 등..
암시적 애니메이션 vs 명시적 애니메이션애니메이션은 개발자가 직접 애니메이션의 세부 동작을 구현하지 않아도, 위젯의 특성 속성이 변경되면 자동으로 애니메이션 효과가 적용되는 암시적 애니메이션(Implict Animations)과, 개발자가 애니메이션의 모든 세부 동작을 직접 구현하는 방식의 명시적 애니메이션(Explicit Animations)으로 나뉜다. 암시적 애니메이션 공통 속성Curve애니메이션은 기본적으로 0부터 1까지 진행되는 값을 기반으로 작동.여기에서 Curve는 애니메이션이 0에서 1로 진행되는 동안의 속도 변화를 제어.쉽게 말해, Curve는 애니메이션이 효과가 어떻게 할지 정의하는 속성.종류Curves: 클래스에 구현된 Curve 인스턴스들이 정의되어 있음Curves.linear: 일..

개인적인 감상 및 회고어느새 두 번째 팀 프로젝트를 완료했다.일주일간 [기획-디자인-개발-발표] 순으로 굵고 짧게 진행된 세션이었다.아쉬운 점도 많았지만, 그래도 개인적으로나 팀적으로나 성장 할 수 있었던 좋은 기회였다고 생각한다 : ) 이번 개발에서 채팅을 맡았는데, 가장 난이도 있어 보이는 부분을 맡아야지(좀 고통스럽더라도) 부담감으로 인해 내가 할 수밖에 없는 환경에 밀어넣으면 결국엔 더 배우고 성장할 수 있을거라고 생각해서 한 결정이었다. 그리고 역시 예상 했던데로 힘들고 재미있었던 시간이었다. firebase의 스냅샷을 사용하여 실시간 채팅을 만드는 과정에서 어려움도 겪고 해결하는 과정을 반복하며, firebase 사용이나 MVVM 패턴 관련해서 직접 사용해보면서 많은 공부가 되어 값진 시간..

개발 중 우선 대충 컬럼 형식의 데이터를 배치하는 형식을 만들어 두려고 이런식으로 바로 build 아래에 return으로 Column을 반환하도록 코드를 짰다. 그런데 그 결과... 나는 이런 멋들어진 디자인을 넣은 적이 1도 없는데 아주 화려하게 에뮬레이터에 표시되는 것을 보게 되었다. 왜 이렇게 자동으로 디자인이 되어서 나오는지 이유를 찾아보니... 플러터에서는 기본적으로 화면을 구성할 때 MaterialApp과 Scaffold를 사용해야 되는데, 내가 짠 코드처럼 사용하지 않고 바로 위젯을 배치해버리면 앱이 Material 테마를 제대로 적용받지 못해서 이러한 디자인들이 강제로 표시되게 된다고 한다. 그리고 강렬한 디자인으로 느끼고 있었지만, 이건 플러터에서 텍스트 위젯이 MaterialApp/..

깃허브 ReadMehttps://github.com/hyewonShin/flutter-train-app 네이버 지도 API 추가 기능 구현 (TIL)이번 과제에서 기본/도전 기능을 완료한 이후, 이후, 네이버 지도 API를 사용해 특정 주소의 위도와 경도를 기준으로 위치를 찾아 마커로 표시하는 기능을 추가해 보았다. 이를 통해 Flutter에서 네이버 지도를 활용하는 방법을 익힐 수 있었다. 플러터에서 네이버 지도 api를 사용하기 위하여 flutter_naver_map 라이브러리를 설치하였다. 해당 라이브러리의 문서가 잘 정리되어 있어 참고하기 좋았다.https://note11.dev/flutter_naver_map/ flutter_naver_map docs | flutter_naver_mapflut..
MVVM 이란?Model + View + ViewModel 의 약자로써, 계층을 나누어 개발하는 패턴을 의미한다. Model: 데이터를 서버 등에서 가지고 오는 계층, 데이터 클래스 그 자체도 포함한다.: Model은 U와 독립적이며, ViewModel을 통해 데이터를 제공한다. View: 화면을 구현하는 계층으로써 UI 구성 요소이다. : 사용자가 상호작용하는 화면 부분으로, ViewModel로부터 데이터를 받아 UI를 렌더링한다.: 사용자의 입력 이벤트를 ViewModel로 전달한다.ViewModel: View와 Model 간의 중간 역할을 한다.: Model계층(Repository)에서 데이터(Model 클래스)를 가지고 와서 가공하는 계층이다.: View에서 발생한 이벤트를 처리하고, 필요 시 M..