라티의 작은 일기장

오늘은 주식 탭의 나머지 화면을 구현하고, Flutter에서의 상태 관리의 의미와 그 상태 관리를 쉽게 할 수 있도록 도와주는 패키지들에 어떤 것들이 있고, 어떤 것을 공부하면 좋은지에 대해 알아보았다. 지난번에는 여기까지 만들었다. 그래서 주식 탭 하단의 아코디언 아이템을 마저 완성해주었다. 여기서 중요하게 느껴졌던 개념은 각 종목의 개별 데이터를 그대로 보여주거나 가공해서 특정한 형식으로 유저에게 보여줘야할 때, 항상 재사용성에 관해 리팩터링을 수행해야한다는 것이다. 예를 들면 아래와 같은 상황이 있을 수 있다. 종목의 현재 가격이 전일 종가를 기준으로 얼마나 증가하거나 감소했는지 퍼센트 형식으로 보여지고 있고, 이는 계산(calculate)되어야하는 값이어서 별도의 getter가 필요한 상황이다. ..

오늘은 혜택 탭과 주식 탭의 일부를 완성했다. 혜택 탭의 경우 일반적인 수직 스크롤뷰 형태의 단순한 레이아웃 구조였지만, 주식 탭의 경우는 탭뷰와 아코디언이 포함된 새로운 형태의 레이아웃이었다. 새삼 토스 앱의 UI를 클론해보는 것만으로도 많은 공부가 되는 것 같다고 느꼈다. 위젯을 만드는 것은 웹 FE 개발에서 컴포넌트를 개발하는 방법과 거의 동일하다. 다른 점이 있다면 객체에 대한 필드 정보를 정의하기 위해 vo를 따로 만들어주는 정도? 그렇지만 TypeScript에서 타입을 정의하는 것도 같은 맥락의 작업이라서 뭔가 크게 어색하지는 않았다. 뷰(View) 스케일에서의 위젯을 나누고, 세부 위젯을 이루는 요소를 파악하고, 요소를 구현하기 위한 위젯과 vo를 작성하고, 각 요소를 적절한 위치에 배치하기..

오늘은 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능과 알림 화면을 구현해보았다. 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능을 줄여서 Pull to Refresh라고 한다. 이 기능을 구현하기 위해 RefreshIndicator라는 위젯을 활용할 것이다. // ... children: [ RefreshIndicator( onRefresh: () async {}, child: SingleChildScrollView( // ... RefreshIndicator 위젯은 child로 ScrollView 위젯을 받을 수 있고, 필수적으로 onRefresh라는 인자를 요구한다. onRefresh의 원형은 이렇게 Future 타입으로 선언되어있으며, 반환값이 Future 타입이라는 것은 ..

오늘은 Home 화면을 구현해보았다. 토스 앱의 홈 화면은 이렇게 헤더 영역과 콘텐츠 영역이 수직으로 나열된 레이아웃을 가지고 있고, 스크롤을 내려도 헤더의 모습이 보이는 이른바 고정 헤더(Sticky Header)가 적용돼있다. 그럼 헤더와 스크롤 영역은 겹쳐지는 관계라고 생각할 수 있고, 이럴 때 활용할 수 있는 적절한 위젯은 Stack이 된다. @override Widget build(BuildContext context) { return Container( color: Colors.black, child: Container( child: Stack(children: [ SingleChildScrollView(child: Column(),), TossAppBar() ],), ), ); } 이렇게 S..

오늘은 하단 네비게이션 바의 모습을 수정하고, 더미데이터를 만들어보는 실습을 진행했다. 원래 Fast App Base의 하단 네비게이션 탭 아이템은 홈과 즐겨찾기 두 개였는데, 토스 앱의 경우 5개이니, 이를 늘려주는 작업을 해야한다. // ... enum TabItem { home(Icons.home, '홈', HomeFragment()), benefit(Icons.star, '혜택', BenefitFragment()), tosspay(Icons.payment, '토스페이', TossPayFragment()), stock(Icons.candlestick_chart, '주식', StockFragment()), all(Icons.menu, '전체', AllFragment()); // ... 그리고 각 화면..

오늘은 토스 앱 클론 파트로 들어가는 첫번째 날이다. 시작에 앞서 강사님이 빠른 플러터 앱 개발을 위한 Fast App Base 프로젝트에 대해 간단하게 소개를 해주셨다. 일종의 스타터 프로젝트로, 앱 구성에 필수적인 위젯들이 이미 구현돼있고, 국제화와 다크모드 등의 설정 또한 편리하게 변경 또는 추가할 수 있도록 되어있는 친절한 프로젝트라고 할 수 있다. 일단 준비해주신 아이콘을 활용해 간단하게 스플래시 화면부터 구현해보았다. flutter_native_splash 패키지가 이미 적용돼있어서 그냥 설정값만 바꿔주면 되었다. 손쉽게 적용되었다! 그런데 이걸로 끝은 아닌게, 앱 내부에서 만약 로그인 처리를 위해 별도의 스플래시 화면을 보여줄 필요가 있거나 하는 상황이면 flutter 엔진 내부에서도 이 스..

오늘은 Flutter 앱의 스플래시 화면에 대해 알아보려 한다. 스플래시 화면은, 앱을 처음 실행했을 때 첫 번째 뷰를 보여주기 전 로딩 상황에서 흰색 빈 화면 대신 앱과 관련된 어떤 대체 화면을 보여주는데, 그 대체 화면을 스플래시 화면이라고 한다. 로그인이 필요한 경우는 세션 검증을 하는 시간을 벌어준다고 한다. 즉 Flutter의 Native Splash Screen은 Flutter 프레임워크가 각 플랫폼에서 구동되기 위해 로딩하는 데 필요한 시간동안 보여줄 수 있는 대체 화면을 지칭하는 것이다. 위 예시는 그냥 스플래시 화면의 예시로서 보이기 위해 캡쳐한 것이고, 실제로는 아주 짧은 시간동안 흰 화면 또는 앱의 로고가 중앙에 보이는 화면이 1초 정도 스쳐지나간다. 그럼 어차피 이렇게 짧은 시간동안..

Flutter 앱도 생명주기가 있다. 크게 화면에 노출 / 유저 Input 가능 / OS View에 붙어있는가? 3가지 기준으로 4개의 생명주기를 갖는다고 할 수 있다. - inactive: 화면에 노출 O / 유저 Input 가능? X / OS View에 붙어있는가? O - paused: 화면에 노출 X / 유저 Input 가능? X / OS View에 붙어있는가? O - resumed: 화면에 노출 O / 유저 Input 가능? O / OS View에 붙어있는가? O - detatched: 화면에 노출 X / 유저 Input 가능? X / OS View에 붙어있는가? X 보통 일반적으로 유저가 앱을 사용할 때는 resumed, 앱을 종료할 때는 detatched 상태가 된다. 문자를 받거나 해서 앱의..