챎발자

더보기진행하고 있는 팀 프로젝트에서 사용했던 컴포넌트에 대해 기록한 포스트입니다.✔️ 들어가며,저번 포스트에서 캘린더 UI 및 일정 추가 기능을 구현한 코드를 포스트 하였습니다.이번에는 캘린더 마지막으로 특정한 날짜로부터 디데이를 설정하여 표시해 보겠습니다! ✔️ 구현해 보기 및 코드 설명! 먼저, 컨트롤러 코드입니다.import 'package:get/get.dart';class YcrCalenderController extends GetxController { var focusedDate = DateTime.now().obs; var daysToChristmas = 0.obs; @override void onInit() { super.onInit(); calculateDaysToCh..

더보기이 포스트는 진행하는 프로젝트에서 사용한 컴포넌트를 기록하였습니다.✔️ 들어가며,저번 플러터 포스트에서 캘린더 UI 를 구현해 보았으니, 일정을 추가하는 기능을 포함된 코드를 업로드해 보겠습니다.저는 먼저 간단하게 바텀 시트에 플러스 아이콘을 추가해 준 뒤, 아이콘을 누르면 일정을 추가할 수 있는 시트가 올라와서 일정을 올릴 수 있도록 코드를 구현해 보았습니다. ✔️ 구현해 보며, 간단한 코드 설명!먼저, 일정을 추가하는 바텀 시트의 UI 전체 코드입니다.class YcrEventBottomSheet extends StatelessWidget { final YcrCalenderController controller = Get.find(); final TextEditingController eve..

✔️ 들어가며,평소 앱 개발을 할 때는 플러터의 Provider 와 MVVM 패턴을 사용하여 개발을 하였는데,다른 상태 관리 프로그램도 궁금해져서 GetX MVC 패턴에 대해서도 알아 보기 위해 이 포스트를 작성하였습니다.두 패턴을 비교해 보며, 각자의 장단점, 어떨 때 사용하면 좋을지에 대해 알아 보겠습니다!✔️ provider 와 MVVM 먼저, 평소에 접해 보았던 Provider 에 대해 알아 보겠습니다.provider 은 코드의 재사용성이 높고, 테스트하기 쉬운 구조를 제공하므로 장기적인 관점에서 바라 볼 때 장점이 큽니다.이는 MVVM 아키텍처 패턴과 주로 사용이 됩니다.몇 번 다룬 적이 있듯이, MVVM 패턴은 Model, View, ViewModel 로 이루어져 있습니다.이 아키텍처는 뷰와 ..

더보기이번 포스트에서는 진행하는 프로젝트 내에서 사용한 컴포넌트를 기록해 보겠습니다. ✔️ 들어가며,프로젝트 내에서 사용할 캘린더 기능을 구현하기 위해서, 간단히 연습으로 캘린더 기능을 혼자 구현해 보았습니다.TableCalendar 라는 좋은 패키지가 있지만, 스스로 구현해 보고 싶은 마음에 없이 진행하였습니다. 기능에는 디데이 기능, 일정 추가 및 삭제, 바텀 시트로 일정 확인하기 세 가지가 있습니다.차근 차근 포스트 해 보며, 공부했던 내용을 기록해 보겠습니다! 이번에는 GetX 와 MVC 패턴을 이용하여 코드를 구성하였는데, 두 개 다 접해 보지 못 한 부분이라 미숙할 수 있지만, 기능과 UI 위주로 작성한 것이니, 위 내용은 나중에 다시 포스팅 해 보겠습니다. 위와 같은 사진처럼 나타낼 예정입니..

더보기활동하는 동아리 내에서 공부한 뒤, 작성한 포스트입니다.Flutter 는 Navtive 어플리케이션과 거의 비슷한 성능을 보여 줍니다.이는 플러터의 렌더링 엔진, Skia (iOS 에서의 Impeller) 엔진 때문이라고 볼 수 있습니다.즉, 이 포스트에서는 다른 크로스플랫폼들과 Flutter 의 렌더링 차이점에 대해 알아 보겠습니다. 먼저, 유명한 프레임워크인 React Native 는 어떻게 랜더링이 될까요?이는 JavaScript Bridge 를 통해서 JavaScript 로 작성된 코드를 각각의 Native OS 의 맞는 프로그래밍 언어로 변환합니다.안드로이드는 Java 또는 Kotlin, iOS 의 경우 Swift 와 Object-C 가 될 수 있겠죠. 그렇다면 플러터의 렌더링 과정은 어떨..

더보기이 포스트는 활동하는 동아리 내에서 공부한 뒤에 작성되었습니다.이번 포스트에서는 상태 관리에 대해 알아보며, 플러터에서의 랜더링에 대해 설명해 보겠습니다.들어가기 전, 먼저 상태 관리가 무엇인지 확인해 보겠습니다.상태 관리는 모든 프론트엔드에서 사용되는 의미입니다.그렇다면 자신이 개발하는 프레임워크의 상태와 상태관리를 이해하고 솔루션에 대해서 제대로 이해하는 것이 중요하겠죠. Flutter 에서 상태와 상태 관리, 랜더링에 대해 알아보겠습니다.플러터에 위젯은 몇 개가 있을까요? 정답은 세 개 입니다.흔히 Stateless Widget, Stateful Widget 두 가지 위젯에 대해서 논합니다.Stateless Widget 은 상태가 없는 위젯입니다.Stateful Widget 은 상태가 있는 위..

더보기이번 포스트에서는 진행하고 있는 프로젝트에서 사용했던 컴포넌트에 대해 설명해 보겠습니다.이번 포스트에서는 빈 화면에 버튼을 누르면 숫자를 랜덤으로 받아 볼 수 있는 작업을 진행해 보겠습니다.간단하게 설명해 보자면, 버튼을 누르면 로또 번호가 뽑히 듯이 숫자가 하나씩 노출되는 것입니다.이제 코드로 구현해 보겠습니다. # UI 먼저 "숫자를 생성하세요잉!" 이라는 텍스트 밑에 랜덤 숫자 생성이라는 동그란 버튼을 누르게 되면,텍스트가 생성된 숫자: XX 이렇게 바뀌도록 UI 를 구성해 보았습니다. # 코드저는 숫자는 0 부터 100 사이에 랜덤한 정수로 조건을 지정하였습니다.class RandomNumberScreen extends StatefulWidget { @override _RandomNumb..

더보기이번 포스트에서 사용했던 코드는 5 월에 진행한 스터디 활동을 통해 공부하고 작성하였습니다.이번 포스트에서는 계산기 UI 를 만들어 보겠습니다. # UI 구성먼저, 코드를 구현해 보기 전에 계산기 형태를 한 번 확인해 보겠습니다.저는 제 노트북 안에 있는 계산기 화면을 보며, 어떠한 것들이 들어가면 좋을지 생각해 보았습니다. 좌측 계산기는 제 맥 속에 있는 기본 계산기이고, 우측 계산기는 제가 코드를 통해 만든 계산기입니다.숫자 아홉 개, 점, 부호들, AC, BackSpace 정도로 구성하면 될 것 같다는 생각이 들어 참고하여 우측 UI 를 만들었습니다.그럼 이제 코드를 통해 자세히 알아 보겠습니다. # 코드class _AppState extends State { final List _key =..

더보기이번 포스트는 진행하고 있는 팀 프로젝트에서 사용했던 컴포넌트에 대해 포스팅 해 보겠습니다. # BottomSheet먼저 들어가기 전에, 바텀 시트에 대해 간단히 설명드리겠습니다.바텀 시트는 우리가 앱에 접속하여 화면을 터치하였을 때 아래에서 올라오는 시트를 의미합니다.이는 임시 정보, 메뉴, 추가 작업 옵션 등을 제공하기에 적합하게 사용할 수 있습니다. 한 화면에 모두 구현할 수도 있지만 앱의 사용자들의 편의를 위해서 showModalBottomSheet 를 이용하여시트를 띄워 화면을 구성하게 된다면 보다 편리하겠죠? 우선 이 위젯을 구현하기 전에 기본 화면을 사진으로 보여 드리겠습니다.저는 먼저 이런 식으로 빈 화면 창 위에 Elevated Button 을 추가하여 준 뒤,버튼을 클릭하게 되면 ..