본문 바로가기

분류 전체보기75

[Flutter] 플러터 성능향상을 위한 `RepaintBoundary` 위젯 사용하기 플러터에서 작동할 때에 다른 변경되지 않은 위젯까지 재렌더링을 하는 경우가 생길 수 있습니다. 예로 들면, 여러 위젯 안에 하나의 위젯에 데이터만 변경(렌더링)되기만 하면 되는데 그 위젯을 변경하기 위해 관련된 부모, 친구 위젯까지 모두 재렌더링이 발생할 수 있는 것이죠. 플러터로 개발을 하다 보면, const를 붙이게 되면 암묵적으로 렌더링에서 다시 그리지 않습니다. 비슷한 유형이라고 보시면 될 것 같습니다. 언제 사용해야할까? 해당 위젯이 복잡한 레이아웃과 그래픽(애니메이션)등이 포함되어 있어 렌더링 비용이 많이 들것이라고 예상이 된다면, `RepaintBoundary`를 사용하여 렌더링 성능을 최적화할 수 있습니다. `RepaintBoundary`를 사용하게 되면, 수치는 낮지만 일부분의 CPU와 .. 2022. 12. 24.
[Flutter] 플러터 파이어베이스(Firebase)를 통한 구글(Google) 소셜 로그인 설정하기 플러터로 소셜 로그인을 하게 되면서, 파이어베이스(Firebase)를 통한 구글, 애플 소셜 로그인을 구현할 수 있습니다. 구글(Google) 소셜 로그인 Firebase 생성 및 설정 먼저, 파이어베이스를 생성 및 설정으로 들어가서 `Authentication`을 설정해줘야 합니다. `Authentication`에서 하위 탭 `Sign-in-method` 클릭하여 `Google 선택` 만약, Google을 인증 제공업체로 사용하려면 하단 외부 프로젝트의 클라이언트 ID 허용 목록에 추가 부분에 구글 클라우드에서 아래 이미지와 같이 사용자 인증 정보 정보를 넣어주면 됩니다. (선택사항) OAuth2.0 클라이언트 ID에서 계정을 클릭하면 클라이언트 ID와 클라이언트 보안 비밀 키를 확인할 수 있습니다. .. 2022. 12. 24.
[Flutter] 플러터 `Rive` 적용하기 `Rive`를 활용하여 배경이 움직이고 블러 처리하여 뉴모피즘 느낌을 줄 수 있습니다. rive 사이트에서 예제를 받을 수 있습니다. Rive - The new standard for interactive graphics Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics for your products, apps, sites, and games. rive.app 아래의 패키지를 설치하여 사용합니다. rive | Flutter Package Rive 2 Flutter Runtime. This package provides runtime fun.. 2022. 12. 23.
[Flutter] `TextField`, `TextFormField` 특정 포커스(Focus) 위치하기 플러터에서 `TextField`, `TextFormField`에서 맨 앞 혹은 맨뒤, 입력 텍스트에 특정 위치로 포커스가 커서가 이동되어야 한다면, 아래에 예제와 같이 텍스트필드에 컨트롤러를 지정하고 `selection`으로 `TextSelection 옵션`을 주면 됩니다. 예제 /// Controller Rx textEditingController = TextEditingController().obs; /// View class MyApp extends GetView { @override Widget build(BuildContext context) { return MaterialApp( home: TextField( controller: controller.textEditingController.va.. 2022. 12. 23.
[Flutter] 탭바(Tabbar) 스크롤 위치 기억하기 `Render Visible` 플러터에서 탭바를 이용하다 보면, 다른 탭에 갔다가 오게 되면 스크롤 위치가 초기화되는 현상이 있습니다. 스크롤을 유지하기 위해서는 별도의 옵션을 주고 처리해야 합니다. 다만, 각 탭 이동시 렌더링은 이후 계속 유지하고 있습니다. `StatefulWidget`에서 오버라이드(override)를 활용하여 `wantKeepAlive` 옵션을 `true` 값을 주면 됩니다. 예제 /// 탭바 위젯 class TabbarWidget extends GetView { const TabbarWidget({super.key}); @override Widget build(BuildContext context) { return Obx( () => TabBar( controller: controller.tabControll.. 2022. 12. 23.
[Flutter] Location `Attempt to invoke interface method 'void'` 오류 해결하기 `Attempt to invoke interface method 'void'` 오류의 경우에는 실제로 `Location`을 가져오는 과정에서 윈도 PC 등 특정 권한 문제로 가져오지 못하는 문제가 있습니다. 따라서, 실제 디바이스에서 릴리즈 모드로 진행하게 되면 오류가 해결될 가능성이 높습니다. 2022. 12. 21.
[Flutter] `Location` 위치 정보 가져오기 Flutter용 플러그인은 Android 및 iOS에서 위치 가져오기를 처리합니다. 또한 위치가 변경될 때 콜백을 제공합니다. pub.dev location | Flutter PackageA Flutter plugin to easily handle realtime location in iOS and Android. Provides settings for optimizing performance or battery.pub.dev  device_info_plus | Flutter PackageFlutter plugin providing detailed information about the device (make, model, etc.), and Android or iOS version the app is .. 2022. 12. 19.
[NextJS] Swiper `swiper.params.navigation undefined` 해결하기 스와이퍼(Swiper)를 쓰다 보면, Init 과정에서 문제가 생기는 경우 간혹 발생이 됩니다. 인입되는 시점을 변경해 준다면, swiper를 쓰는데 크게 문제는 발생되지 않을 겁니다. 아래의 예제를 통해서 확인하여 수정하면 정상적으로 작동될 겁니다. 원래는 타입스크립트(Typescript)로 사용하지만, 예제는 자바스크립트(Javascript)이니 타입만 추가로 넣어주시면 될 것 같습니다. 변경 전 현재 스와이퍼(Swiper) 기준으로 최신 버전이 8.4.5입니다. 참고하여 수정하시면 될 것 같습니다. import { Swiper, SwiperSlide } from "swiper/react"; import SwiperCore, { Autoplay, Pagination, Navigation } from .. 2022. 12. 17.
[Flutter] 플러터 `notification.metrics.axis == widget.axis: is not true` 해결하기 스크롤 형태의 위젯에서 너비 값이 지정되지 않은 스크롤 뷰는 `notification.metrics.axis == widget.axis: is not true` 오류가 발생할 수 있습니다. 따라서, 스크롤 형태의 위젯에서 너비를 알 수 있도록 `physics`를 `BouncingScrollPhysics()` 옵션으로 변경하여 너비를 알 수 있도록 해야 합니다. 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold.. 2022. 12. 15.
[FastAPI] 스웨거(Swagger) `OAuth2 인증 Authorize 적용`하기 스웨거에서 `OAuth2` 방식으로 인증 방식을 사용할 수 있습니다. `OAuth2` 인증을 달게 되면, 스웨거에서 `Authorize`라는 버튼이 생기게 되며, 해당 버튼을 통해서 `OAuth2 인증`을 할 수 있습니다. 인증이 필요한 API가 있기 때문에, 작업을 미리 해두면 편합니다. Oauth2 적용하기 `home.py` 아래와 같이 `APIRouter`에서 `dependencies`를 추가해주고, `tokenUrl`을 넣어주면 된다. 참고로 `tokenUrl`은 `root_path`가 먹히지 않기 때문에 앞에 들어가는 경로를 모두 넣어주어야 한다. router = APIRouter( prefix="/home", tags=["home"], dependencies=[ Depends( OAuth2Pa.. 2022. 12. 12.

티스토리툴바