본문 바로가기
How to make money format flutter 돈 포맷 3자리 콤마 만들기 앱을 개발하다보면 원화 표시를 위해 3자리마다 콤마를 넣어야 하는 일이 자주 있는데요. 예전에는 아래 패키지를 사용했었습니다만. money_formatter | Flutter Package MoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization. pub.dev 원화만 표시할 때에는 소수점도 필요없고 다른 통화들의 심볼도 필요없기 때문에 패키지가 기본적으로 다른 연산을 하는 일을 방지하고자 오로지 원화 표시를 위한 하나의 메소드를 만들었습니다. String mon.. 2022. 7. 4.
How to build Flutter BLoC Pattern Folder Structure 디자인 패턴 폴더 구조 알아보기 BLoC이란? BLoC(Business Logic of Component)는 구글에서 비즈니스 로직을 화면 레이어와 분리하여 개발자가 코드를 더 효율적으로 재사용할 수 있게 하기 위해 만든 디자인 패턴입니다. Flutter 앱개발에서 유지보수를 위해 가장 많이 쓰이는 디자인 패턴이죠. BLoC의 핵심 컨셉 상태관리 라이브러리로 불리우는 Bloc의 핵심 컨셉은 Stream입니다. Stream은 반복가능한 비동기 이벤트들의 정렬인데요. 여러분이 다음 이벤트 정보를 요청하기 전에,다음 이벤트가 준비되면 Stream이 알아서 알려주게끔 되어있습니다. Stream은 이벤트 시퀀스를 받아 제공합니다. 각각의 이벤트는 데이터 이벤트, 에러 이벤트로 이루어져 있습니다. Stream이 모든 이벤트를 송출하면, 하나의 ".. 2022. 6. 28.
Flutter 실시간 채팅앱 만들기 (feat. dart_amqp Docker RabbitMQ) 오늘은 실시간 채팅앱을 만들어 보겠습니다. 직접 TCP에 연결하거나 웹소켓을 이용하는 것 외에 MQ(메시지 큐)에 연결해서 채팅을 구현해본 건 처음이었습니다. 1. Docker 실행 2. RabbitMQ 컨테이너 실행 3. Flutter에서 MQ 연결 4. MQ에 메시지 보내고 받기 1. Docker 실행 도커는 쉽게 말하면 이미 다른 사람이 만들어 둔 환경을 복사 붙여넣기 한 것처럼 그대로 이용할 수 있는 툴입니다. 이미 누군가 RabbitMQ를 통해 채팅을 할 수 있도록 만들어둔 서버가 있어서 우리는 그걸 그대로 사용할 겁니다. 먼저 Docker를 설치해볼까요? 아래 링크에 접속하면 도커 프로그램을 다운로드할 수 있습니다. Developers - Docker Developer productivity .. 2022. 5. 20.
Flutter How to use each button 플러터 상황별 버튼 사용법 버튼을 사용할 때 주의해야할 점은 바로 버튼의 내용이 1줄을 넘어서는 안 된다는 점입니다. 버튼은 사용자로 하여금 행동을 유도하기 위해 사용하는데요. 말은 길게 할 수록 전달력이 떨어지게 됩니다. 짧고 직관적인 멘트를 고안해봅시다. 또 한 가지, 버튼은 많을 수록 인지과부하 때문에 오히려 선택을 못하는 '선택의 역설'을 불러일으키게 됩니다. 한 화면에 너무 많은 버튼이 있는 것은 좋지 않습니다. 예를 들어 여러분이 여러 상급자에게 동시에 업무를 지시받았을 때 도대체 뭐부터 해야할지, 그때 기분이 어떨지를 생각해보시면 됩니다. Flutter에서도 구현할 수 있는 아래 4가지 버튼을 알아보겠습니다. 1. 배경색이 그려진 텍스트 버튼 2. 배경색 없이 외곽선이 그려진 텍스트 버튼 3. 텍스트만 있는 버튼 4... 2022. 5. 15.
Flutter How to add high quality BoxShadow 고퀄리티 그림자 넣는 법 오늘은 디자인 퀄리티를 높여주는 카드 디자인의 그림자 구현 방법에 대해 알아보겠습니다. 과도한 그림자 효과는 앱을 버벅이게 할 수 있으니, 앱 내 콘텐츠가 많지 않은 경우에 사용하면 좋습니다. 직접 예제 코드를 작성해서 보여드리겠습니다. Card 위젯의 이해 플러터 프레임워크가 매터리얼 디자인을 제공하기에 Card위젯으로 카드 디자인을 쉽게 구현할 수 있습니다. Card 위젯을 타고 들어가서 elevation과 shadowColor 프로퍼티가 어떤 위젯으로 변하는지 보겠습니다. Semantics( container: semanticContainer, child: Container( margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0), chil.. 2022. 5. 13.
Flutter How to use Key When, Where, Which key? 언제 어디에 무슨 키를 쓸까? 플러터 개발을 하다보면 StatelessWidget, StatefulWidget에서는 초기화 단계에서 항상 key를 받습니다. 하지만 실제로 그 key를 매개변수로 전달한 적은 많이 없었죠. 이전 강의에서 위젯 그대로 트리 안에서 이동만 하는 경우 다시 빌드하는 일을 방지하기 위해 key를 사용하라고 했었죠? 그외에 또 언제, 어디에, 무슨 key를 사용해야 하는지 알아봅시다. 아래는 key에 대해 설명하는 플러터 팀의 동영상입니다. [자동자막 > 한글] 설정하고 보세요! Key의 종류 Local Keys: 1. ValueKey 2. ObjectKey 3. UniqueKey 4. PageStorageKey Global Keys: 1. GlobalKey() 설명드리면 로컬키는 위젯 scope안에서 사용하는.. 2022. 5. 9.
Flutter How to optimize? 속도 10배 상승시킨 앱 최적화 하는 법 공유 플러터로 앱을 개발하다보면 처음에는 모르지만 점점 앱이 느려지는 jank를 맞이하게 됩니다.(앱이 버벅이는 현상을 jank라고 합니다.) '최적화가 시급하다!!'라고 선언하고 복잡도를 줄이는 작업에만 몰두했었습니다. 하지만 jank를 유발하는 원인은 더 기본적인 계층에 있었죠. 앱 퍼포먼스를 10배 향상시켰던 시행착오를 공유합니다. 직접 해결했던 jank를 유발하는 원인은 아래와 같습니다. 1. 그라데이션 효과 2. 그림자 효과 3. Opacity 위젯 사용 4. Clip를 이용한 위젯 다듬기 5. const 미사용 6. 잘못된 위젯 사용 7. 애니메이션 또는 State 변경시 광범위한 리빌드 하나씩 살펴보죠. 원인1. 그라데이션 효과 그라데이션 효과는 시작점과 중간점, 끝점까지 지정한 컬러가 나오도록 .. 2022. 5. 8.
Flutter State 생명주기? 코드 뜯어보기 지금까지 StatelessWidget과 StatefulWidget이 어떤 상황에 따라 쓰이는지 알아봤는데요. 오늘은 StatefulWidget이 리빌드 하기 위해 정보를 담는 State에 대해 알아보겠습니다. 아래는 플러터 팀에서 2021년에 소개한 State에 대한 설명 동영상입니다. [자동자막 > 한글] 설정하고 보세요! 영상에서는 State를 제 시간에 특정 지점에서 UI 생성에 필요한 모든 데이터라고 정의하는군요! State의 생명주기는 enum 타입의 4가지로 분류합니다. - created : [State] 객체가 생성될때 입니다. 이 때 [State.initState]가 호출됩니다. - initialized : [State.initState] 메소드가 호출되지만 [State]는 아직 빌드할 준.. 2022. 5. 7.
Flutter InheritedWidget 란? 코드 뜯어보기 (주석 한글 번역) 지난 시간에 StatefulWidget을 통해 상태를 관리하는 것까지 알아봤는데요. 성능을 위해 StatelessWidget을 더 잘게 쪼개서 사용해야 한다는 것도 아셨죠? 그렇다면 불가피하게 위젯 트리의 계층이 깊어질 수 밖에 없는데요. 이때 상위에 있는 State 정보를 매개변수로 자식 위젯으로 계속해서 전달하는 일은 산 꼭대기에서 출발지점까지 한 명씩 줄지어서 돌을 전달하는 것과 같죠. 만약 100명 중 50번째 쯤에서 잘못 서 있던 바람에 돌을 다시 전달해야 한다면...? 생각만 해도 어지럽습니다. 이런 귀찮고 비효율적인 일을 해결해줄 InheritedWidget이 있습니다! 이 위젯의 자식 위젯들은 해당 위젯의 데이터에 바로 접근할 수 있는 기능이 있습니다. 산 꼭대기에서 출발지점까지 돌을 그냥.. 2022. 5. 5.
Flutter Tree 트리 구조 및 화면 렌더링 과정 알아보기 플러터에는 UI 렌더링을 위한 3개의 트리가 있는데요. 왜 3개의 트리를 만들게 됐는지, 각각의 트리는 어떤 역할을 하는지 알아보겠습니다. 요약하면 [위젯 트리 > 엘리먼트 트리 > 렌더 트리] 의 순서로 UI를 렌더링 하네요. 이 포스팅은 Flutter docs의 원문을 참고하여 만들었으니, 너무 요약되어 이해가 안 되는 내용은 포스팅 아래 docs 링크를 눌러 확인해보시길 바랍니다! 2016년 플러터 레이아웃 설명 동영상 Flutter architectural overview A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design. docs.flu.. 2022. 5. 4.
Flutter StatefulWidget 란? 코드 뜯어보기 (한글 주석 번역) Flutter에 있는 2가지 위젯 중 오늘은 StatefulWidget에 대해 알아보겠습니다. 한 줄로 요약하자면 화면에 계속 변화를 줘야 할 때 쓰는 위젯입니다. 아래 동영상은 2018년에 나온 StatefulWidget을 설명하는 동영상이니 한 번 시청해보시죠. [설정 > 자동번역 > 한국어]로 설정하면 자막을 볼 수 있어요. Widget은 element를 화면에 그리기 위한 청사진입니다. Widget 트리에 1:1 매칭된 Element 트리의 element들이 바로 우리의 휴대폰 화면에 보이는 UI입니다. StatefulWidget을 만드는 건 화면에 변화가 계속 일어나는 UI 설계도를 만드는 작업이라고 생각하시면 됩니다. 앞서 StatelessWidget이라는 변하지 않는 위젯에 대해 알아봤습니다.. 2022. 5. 2.
Flutter Helper Method vs Widgets 헬퍼 메소드와 위젯 중에 뭐가 더 좋을까? 플러터 프레임워크로 앱을 만들다 보면 중복되는 위젯들이 많을 때가 있습니다. 대표적인 예로 '리스트'가 있죠. 리스트의 각 아이템마다 카드 디자인이 적용되어야 하는 경우, 우리는 카드 디자인이 적용된 위젯을 하나 만들고 재사용하는 객체지향 방법을 쓰죠. 이렇게 임의로 만든 위젯을 사용하는 방법은 크게 두 가지가 있습니다. 1. Class 안에 헬퍼 메소드로 위젯을 새로 정의해서 사용하는 방법 2. StatelessWidget 또는 StatefulWidget의 서브클래스를 만들어서 사용하는 방법 첫 번째 방법은 가장 편한 방법이죠. 하지만, 한 파일에 헬퍼 메소드가 많아지면 코드의 가독성이 떨어지니, 헬퍼 메소드로 만든 위젯만을 모아둔 extension 파일을 만들어 따로 관리하기도 합니다. 두 번째 방법.. 2022. 5. 1.
Flutter StatelessWidget 란? 코드 뜯어보기 (주석 한글 번역) Flutter에 있는 2가지 위젯 중 오늘은 StatelessWidget에 대해 알아보겠습니다. 한 줄로 요약하자면 시간이 지나도 변하지 않는 위젯입니다. 아래 동영상은 2018년에 나온 StatelessWidget을 설명하는 동영상이니 한 번 시청해보시죠. [설정 > 자동번역 > 한국어]로 설정하면 자막을 볼 수 있어요. Widget은 element를 화면에 그리기 위한 청사진입니다. Widget 트리에 1:1 매칭된 Element 트리의 element들이 바로 우리의 휴대폰 화면에 보이는 UI입니다. StatelessWidget을 만드는 건 위젯트리에 상태변화가 없는 UI 설계도를 만드는 작업이라고 생각하시면 됩니다. StatelessWidget의 build 메소드는 세 가지 상황에서만 호출됩니다. .. 2022. 4. 30.
구글에서 사용하는 Flutter 코딩 컨벤션 flutter_lints 알아보기 코딩 컨벤션이란 무엇인가요? 사람들과 함께 협업을 할 때 코딩의 규칙이 없으면 각자가 편한대로 코딩하게 됩니다. 그렇게 방치한 상태로 시간이 많이 흐르게 되면, 나중에 그 코드를 짠 당사자가 없으면 해석하기 어려운 지경에 이르게 되죠. 이런 일을 줄이기 위해 탄생한 게 코딩 컨벤션입니다. 코딩 컨벤션이란 누가 봐도 읽기 쉽고, 관리하기 편하도록 만든 코딩 스타일 규칙입니다. 아무도 사투리를 쓰지 않고, 표준어만 사용한다면 의사소통에 큰 지장이 없겠죠? 플러터에서는 어떤 코딩 컨벤션을 쓰나요? 플러터는 다트라는 언어를 사용합니다. Effective Dart라는 코딩 가이드라인이 있죠. 보통 여기서 제공하는 가이드라인을 회사나 팀에 따라 필요한 부분을 채택하여 사용합니다. 그러다보니 회사나 팀마다 코딩 스타.. 2022. 4. 19.
Flutter DateTime 요일 구하기 개발을 하다보면 날짜 변환 외에 무슨 요일인지 필요할 때가 있다. 해당 기능은 intl이라는 라이브러리를 이용하면 구현할 수 있다. 우선 아래 링크를 눌러 패키지를 확인하고 pubspec.yaml에 추가하자. intl | Dart Package Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization issues. pub.dev 여기까지 했다면 DateFormat이라는 클래스를 이용해서 요일을 구할 수 있다. DateFormat('E', 'ko_KR').format(dateTime) .. 2022. 4. 19.
[에러해결] Flutter - Locale data has not been initialized 달력과 같이 번역 기능이 포함된 라이브러리를 사용하다 보면 아래와 같은 에러를 만날 때가 있다. Locale data has not been initialized 원인 에러 그대로 기본 locale이 초기화되지 않아서 발생했다. 해결방법 main.dart의 main함수에 기본 locale을 초기화하면 된다. 한국어를 기본 언어로 사용한다면 첫번째 파라미터에 'ko_KR'를 쓴다. void main() async { ... // 기본 언어 초기화 initializeDateFormatting('ko_KR', null); runApp( ... } 2022. 4. 18.
[에러해결] iOS GoogleService-Info.plist Not found - Firebase, flutter Firebase 애널리틱스를 이용하기 위해 GoogleService-info.plist 파일을 다운로드 받았다. 이 파일을 Runner 폴더에 옮기고 빌드하면 not found 에러를 볼 수 있다. 원인 ios/Runner.xcodeproj/project.pbxproj에서 GoogleService-info.plist의 경로를 추가해줘야 한다. 해결방법 XCode > Runner > Runner 폴더 우클릭 > Add files to "Runner" 위 방법은 자동으로 경로가 추가되어 문제를 해결할 수 있다. 2022. 2. 5.
[에러해결] the constructor being called isn't a const constructor - flutter 원인 const를 잘못된 타이밍에 쓴 것 결론 함수 또는 변수에 const가 잘못 선언되어 있는지 확인하면 된다. 설명 const는 컴파일 타임에 결정되는데, 함수는 컴파일 타임에 결정되지 않기 때문에 에러가 발생한다. 수치, 색상, 텍스트 등 변하지 않는 데이터에 const를 사용하면 된다. const 사용하면 jank도 예방할 수 있다. 2022. 1. 9.

티스토리툴바