개발노트

MySQL에서의 스키마(Schema)란 데이터베이스와 같은 의미입니다. 1. Navigator 창에서 우클릭 > Create Schema를 선택하여 스키마를 생성합니다. 2. 스키마의 Name을 정하고 한글 데이터 호환성을 위해 아래와 같이 설정하고, Apply 를 클릭하여 스키마를 생성합니다. - Charset: utf8mb4 - Collation: utf8mb4_unicode_ci collation CREATE SCHEMA `homebar_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;

지금까지 Flutter에 사용했던 NoSQL, Serverless인 Firebase가 아닌, 관게형 데이터베이스와 백엔드 API Server 를 이용하여 Flutter http 패키지를 통해 서버통신을 구현하려고한다. 이번 Home Bar 앱에는 Mybatis, Mapper 가 아닌 ORM 방식을 사용할 예정이다. ORM 인터페이스를 모아둔 JPA를 사용하여 소스를 통해 쿼리를 자동으로 작성하고 데이터 결과를 Object 형식으로 받아오는 형식을 사용하고, 이를 Flutter Http 패키지로 받아오려고한다. 앱 서비스 전반적인 것을 이해하고 구현하기 위해 Firebase는 소셜로그인과같은 편의 기능정도를 사용할 예정이다. DB로는 MS-SQL이 아닌 MySQL을 사용하려고한다. 구성도 해야할 일 1. ..

- 홈 화면 Lottie 애니메이션을 홈화면의 Page마다 추가해주었음 무료만 사용하다보니 선택할 수 있는 애니메이션이 제한적임 Flutter에서 LottieBuilder.network 위젯 사용을 위해 Lottie 애니메이션의 URL이 필요했는데 정확하게 얻는 방법을 알게 됨 원하는 애니메이션을 클릭, 해당 애니메이션을 나의 프로젝트로 이동시킴 Enable Link 스위치 토글을 활성화 시켜 Lottie 애니메이션 링크를 얻음 *주의사항: 무료버전을 사용하는 사람은 최대 10개까지 프로젝트로 이동할 수 있으며, 내 프로젝트에서 지우면 URL이 사라지기 때문에 더이상 불러올 수 없음 - 로그인 화면(로그인 상태관리 추가) 앱 실행 시, 이전 로그인 상태를 알 수 있도록 로직을 추가함(SharedPrefe..

1차적으로 개발한 전체적인 동작화면(사용된 이미지는 랜덤하게 나오는 사이트를 이용) - 구현된 것들 - GoRoute 를 사용하여 Navigator를 구성하였으며, Web에서 URL로 접근 가능하도록함 1. 홈 화면 게스트, 호스트, 등 page들을 넣고 액체느낌으로 페이지 전환되도록 패키지사용 page가 전환되었을 때 축하하는 애니메이션 Lottie가 동작하게끔 로직 작성해봄 2. 칵테일 화면 Hero 위젯을 사용하여 cocktail 정보를 tag로 설정하여 같은 카드가 이동하는 것처럼 일체감을 줌 칵테일 상세화면을 만들고 클릭 했을 때 칵테일 레시피에 필요한 재료와 위스키들을 Riverpod을 통해 가져옴 칵테일 상세페이지의 배경화면 이미지에 블러 효과를 주도록 블러필터를 사용함 당도,바디감, 스파이..

Merge Into Table에 특정 값이 있을 때 Update하고 없을 때 Insert 즉, Upsert하고 싶을 때 사용하는 쿼리 문법 MERGE INTO 타깃테이블 AS Target USING (매칭값) AS Source (타깃테이블칼럼) ON Target = Source 매칭 WHEN MATCHED THEN(AND 로 조건추가가능) UPDATE SET 업데이트 문구 WHEN NOT MATCHED THEN (AND 로 조건추가가능) INSERT (테이블 칼럼명들) VALUES (인서트할 값들); 예시) DECLARE @Code VARCHAR(8) DECLARE @Name NVARCHAR(255) Set @Code = 12345678 Set @Name =N'TEST' MERGE INTO User AS..

- 날짜 연산 패키지: https://pub.dev/packages/jiffy - 액체같은 Swiper 효과: https://pub.dev/packages/liquid_swipe 사용해보니 생각보다 자연스럽고, 이전 페이지 위에 다음 페이지가 바로 생성되는 부분이 좋았습니다. - 간단한 Card Swiper: https://pub.dev/packages/appinio_swiper - 반응형 Scaffold: https://pub.dev/packages/flutter_adaptive_scaffold - 손쉽게 Sheet를 만들어줌: https://pub.dev/packages/wolt_modal_sheet - 영상에 필터를 걸거나 텍스쳐 효과를 줌(빗물, 3D효과, 파장 등): https://pub.dev..

bottomNavigationBar을 만들 때 GoRoute, Stack, OffStage 조합을 사용하는 이유는 다음과 같습니다. GoRoute: GoRoute는 일반적으로 네비게이션 기능을 제공하는 라우팅 패키지로 이를 사용하여 앱의 다양한 화면 간의 이동을 관리할 수 있습니다. 특히, Web에서의 동작을 path와 같은 URL로 처리할 수 있습니다. Stack: Stack 위젯은 위에서 아래로 겹쳐진 위젯을 나타냅니다. 여러 화면을 겹쳐서 표시하고, 사용자가 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아가게 합니다. 이것은 사용자 경험을 향상시키고, 앱의 내비게이션을 관리하는 데 도움이 됩니다. OffStage: OffStage 위젯은 화면에서 숨겨진 상태로 위젯을 유지합니다. 이를 통해 앱의 여러..

MediaQuery.of(context).size 는 BuildContext 형인 context가 필요합니다. 따라서 위 코드는 BuildContext 를 제공하는 build안에서만 사용이 가능합니다. - 해결방법: BuildContext가 없이 기기의 size를 가져오기 위해서는 MediaQueryData를 사용하면됩니다. import 'package:flutter/material.dart'; class DeviceSize { static final deviceWidth = MediaQueryData.fromView( WidgetsBinding.instance.platformDispatcher.views.single) .size .width; static final deviceHeight = Media..

1. 프로젝트명 정하고 생성하기 2. 깃허브 Repository 생성(Private) 3. 내가 고려했던 사항들을 구현 가능하게 해주는 패키지 설치 4. 앱 Theme, Primary Color, DarkMode 등 고려하여 초기 설정 5. GoRouter 로 Web 확장까지 고려하여 Navigator 설정하기 6. MVVM 패턴과 repository 등 상태관리를 위해 Provider, Riverpod 설치 7. Serverless 를 위해 firebase 패키지 설치, 프로젝트 생성

flutter_animate flutter_animate 패키지는 Flutter 애플리케이션에서 애니메이션을 쉽게 적용할 수 있도록 도와주는 패키지입니다. 이 패키지는 다양한 애니메이션 효과를 제공하며, 간편한 구문을 사용하여 애니메이션을 구현할 수 있습니다. flutter_animate 패키지의 주요 특징은 다음과 같습니다: 다양한 애니메이션 효과: 패키지는 여러 가지 애니메이션 효과를 제공합니다. 이 효과들은 Fade, Scale, Rotate, Flip 등의 기본적인 애니메이션부터 Pulse, Shake, Wiggle과 같은 고급 애니메이션까지 다양합니다. 간편한 구문: 애니메이션을 구현할 때 간편한 구문을 제공하여 개발자가 복잡한 애니메이션 코드를 작성하지 않아도 되도록 합니다. 이로써 애니메이션..