전체 글72 [Flutter] IOS Update to recommended settings 경고 끄기 Xcode에서 프로젝트 항상 경고 문구가 뜨는데 바로 Update to recommended settings라고 뜹니다. 이 경고를 끄기 위해서는 Podfile에 코드 한 줄을 넣어주면 무시할 수 있습니다. 경고 무시하기 `ios/Podfile` 하단에 inhibit_all_warnings! 추가 후 빌드와 Xcode 재시작 해주면 사라집니다. target 'Runner' do use_frameworks! use_modular_headers! inhibit_all_warnings! flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__)) end 2023. 2. 9. [Nginx] nginx.conf 설정 튜닝하기 user nginx; #gzip on; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; multi_accept on; use epoll; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_.. 2023. 2. 6. [Flutter] "Fatal signal 11 (SIGSEGV)" 오류 해결하기 `Fatal signal 11 (SIGSEGV)`오류는 프로그래밍에서 흔히 발생하는 오류이며 분할 위반이라고도 하는 분할 결함을 나타냅니다. 위치가 존재하지 않거나(NULL 포인터 역참조) 프로그램이 액세스 할 수 없도록 보호되어 있기 때문에 프로그램이 액세스가 허용되지 않은 메모리 위치에 액세스 하려고 시도할 때 발생합니다. 오류 메시지의 'in tid 18280 (1.io), pid 18247 (ital.parkinsons)' 부분은 오류가 발생한 스레드 ID(tid) 및 프로세스 ID(pid)를 나타냅니다. 이 오류는 다음과 같은 여러 요인으로 인해 발생할 수 있습니다. 오류 발생요인 초기화되지 않은 포인터에 액세스 (Accessing an uninitialized pointer) 이미 해제된 포인.. 2023. 2. 5. [Flutter] Android "Unable to find bundled Java version" 오류 해결하기 위 문제는 이번 안드로이드 `Electric Eel` 버전의 프로그램 버그로 보입니다. 우선 해당 안드로이드 폴더인 `C:\Program Files\Android\Android Studio`로 이동하여 `jbr` 폴더의 내용을 `jre`에 덮어쓰기 해주세요. 만약, 위 문제가 해결되지 않는다면 `jre` 폴더 자체를 삭제해 보시면 될 것 같습니다 2023. 2. 4. [Flutter] 임펠러(Impeller) 사용해보기 Kaleidoscopia는 임펠러로 그래픽 성능을 개선한 예를 보여주는 데모 임펠러는 Flutter의 새로운 렌더링 런타임으로 Flutter 3.7 Impeller는 Flutter 프레임워크의 최신 버전에서 추가된 기술입니다. Impeller는 성능, 그래픽 품질, 호환성, 개발 효율 등을 개선하는 기술로, 플러터 개발자가 더 높은 효율성으로 애플리케이션을 개발할 수 있도록 돕습니다. 사전 컴파일된 셰이더를 사용하여 보다 예측 가능한 성능을 제공하며, 실행 시 셰이더 컴파일로 인한 프레임 손실을 완화합니다. iOS와 Android의 최신 로우 레벨 API인 Metal과 Vulkan의 프리미티브를 활용합니다. 또한 동시성을 효과적으로 활용하여 스레드에 단일 프레임 워크로드를 분산합니다. 셰이더 활용 2023. 1. 31. [Javascript] 자바스크립트 `console`를 활용한 더 나은 디버깅 하기(`console.log`만 사용하지 말자) 자바스크립트에서 디버그를 한다고 하면, 대부분은 `console.log`를 많이 생각할 것입니다. 하지만, `console.log`만 로그를 호출하고 보여줄 수 있는 것이 아니기 때문에, 아래와 같이 다른 디버깅 형태로도 호출하여 활용하면 좋을 것 같습니다. console.table 표 형식의 데이터를 읽기 쉽고 한눈에 파악하기 좋습니다. const users = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' } ]; console.table(users); console.group `console.group`, `console.groupEnd` 방법을 사용하면 중첩된 축소 가능한 그룹을 만들 수 있습니다. console.group('User Deta.. 2023. 1. 6. [NextJS] Isotope-layout `window is not define` 오류 해결하기 `NextJS`에서 `isotope-layout`를 사용하려고 하면, `SSR` 환경에서는 `window is not define` 오류가 발생할 수 있습니다. 그래서 `Isotope`를 사용하는 곳을 `SSR을 풀어주고 다이내믹 링크를 통하여 해결`해볼 수 있습니다. 예제 `Home.tsx` const DynamicPortfolio = dynamic( () => import('src/components/Portfolio/portfolio'), { ssr: false, }, ) export default function Home() { return ( {/* */} {/* ... 등등 */} ) } `Portfolio.tsx` declare module Portfolio { interface Data {.. 2023. 1. 1. [Flutter] 플러터 GetX에서 Hero 위젯 사용하기 플러터에서 GetX에서 Hero를 사용하려면, 제대로 작동이 안 되는 것을 볼 수 있습니다. 해당 이미지가 Init 시점보다 먼저와 야하기 때문인데요. GetX 패턴을 사용하다 보면 사실상 사용하기가 까다롭다고 볼 수 있습니다. 그래서 GetX에서 사용할 수 있는 방법을 소개합니다. 예시 class ListWidget extends GetView { const ListWidget({super.key}); @override Widget build(BuildContext context) { return Column( children: List.generate( controller.data.length, (index) { return CardWidget(index: index); }, ), ); } } cla.. 2022. 12. 30. [Android] 에뮬레이터(Emulator) AVD 램 사이즈 조정 메모리가 크게 필요한 혹은 리소스가 많이 들어가는 개발이 필요한 경우 에뮬레이터에서도 램과 같은 성능에 직결되는 옵션들의 풀을 늘려주거나 설정해줘야 할 때가 있습니다. 안드로이드 스튜디오에서 설정 가능합니다. 안드로이드 스튜디오에서 `Device Manager`로 들어가서 각 에뮬레이터에 팬 아이콘 모양에 수정으로 들어갑니다. 왼쪽 하단에 `Show Advanced Settings`를 누르면 메모리 및 스토리지 관련 옵션이 나오는데 보통은 여기서 설정해 주면 됩니다. 만약, 여기서 설정한 게 적용이 안된다면 `config.ini` 파일을 직접 수정하는 방법이 있습니다. 위에서 오른쪽 점 3개 아이콘을 누른 후 `Show on Disk`를 눌러 `config.ini` 파일을 열어줍니다. 하단에 `hw.ra.. 2022. 12. 29. [Flutter] 플러터 개발속도 향상을 위한 VSCODE 가이드 라인 설정하기 플러터로 개발하다 보면, 선언형 때문에 코드 위치 및 구조를 파악하기 어려울 때가 있습니다. 물론, 코드량이 많아지기 전에 별도로 클래스로 나눠주면 문제가 없겠지만, 명시적으로 도트라인이 보이면 더 좋을 것입니다. 설정방법 우선, `VSCODE 설정`으로 들어갑니다. `Preview Flutter Ui Guides` 항목을 활성화시켜 주세요. 그리고, 오른쪽 상단에 아이콘 클릭하여 `OpenSetting JSON` 형태로 열어주세요. 위에 2가지 항목을 추가해 주시고, `VSCODE를 완전히 종료`했다가 다시 열어주세요. 저 같은 경우 재부팅하고 바로 적용이 안되고 조금 있다가 적용이 되더라고요. 2022. 12. 26. [Flutter] 플러터 앱 버전 체크(App Version Check) 만들어 사용하기 앱의 버전을 체크하여, 업데이트 모달 및 팝업을 띄우는 형태 거나 별도로 체크용으로 필요한 경우 아래에 예제와 같이 만들어 사용하시면 됩니다. 예제 `lib\app\utils\app_version_check.dart` import 'dart:convert'; import 'dart:io'; import 'dart:math' as math; import 'package:http/http.dart' as http; import 'package:package_info_plus/package_info_plus.dart'; /// 마켓 스토어 타입 enum StoreMarket { GooglePlayStore, ApkPure } /// 앱 버전 체크 /// /// [currentVersion] : 현재 앱 버전 .. 2022. 12. 25. [Flutter] 플러터 `RegExp 정규표현식(정규식)` 전체 모음 개발을 하다 보면, 항상 정규표현식(RegExp) 형태를 사용하게 되는데 매번 검색하는 것도 귀찮기도 하고 정규식하고 친해지지도 않는 것 같아서 최대한 사용할만한 정규표현식 전체를 모음으로 배포합니다. 중간에 틀리거나, 추가할 사항은 알려주시면 주기적으로 업데이트하겠습니다. 예제 `lib/app/utils/regular_expression.dart` /// 정규표현식 class RegularExpression { /// 한글만 형식 검사 /// /// [value] String : 한글 static bool isKorean(String value) { RegExp regExp = RegExp( r'^[가-힣]+$', caseSensitive: true, multiLine: false, ); return .. 2022. 12. 25. [Flutter] 플러터 파이어베이스(Firebase)를 통한 애플(Apple) 소셜 로그인 설정하기 파이어베이스(Firebase)를 활용하면, 구글 로그인을 포함한 애플 로그인도 소셜 로그인을 구현할 수 있습니다. `Authentication`에서 `Sign-in-method 탭`으로 이동하여 하단 애플을 선택하고 사용설정을 진행해 줍니다. 하단에 콜백 URL은 별도로 복사하거나 메모해 주시면 됩니다. 파이어베이스에서 앱 추가에서 IOS 추가하기 `앱 번들 ID`, `App Store ID`, `팀 ID` 추가 [Apple] 애플 로그인 설정하기 (Sign In with Apple) 애플 로그인 설정하기 (Sign In with Apple) 앱 및 웹에서 애플 계정으로 로그인 할 수 있는 기능인 "Sign In with Apple"을 설정해보자. 내 iOS 앱에 애플 로그인 기능을 넣어야 하는 이유 애.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `flutter_flags` 명령줄 도구 추가하기 Flutter 앱의 성능을 개선하려면 `flutter_flags` 명령줄 도구를 사용하여 다양한 성능 관련 플래그를 활성화할 수 있습니다. 이러한 플래그를 사용하면 특정 앱의 요구 사항에 더 잘 맞도록 Flutter 프레임워크 및 Dart 가상 머신의 동작을 미세 조정할 수 있습니다. 명령줄 설명 --dart-define=flutter.inspector.debugDescription=false 앱을 빌드하고 렌더링할 때 성능을 향상시킬 수 있는 위젯에 대한 디버그 설명 생성을 비활성화합니다. --enable-software-rendering=false 하드웨어 가속 렌더링을 비활성화하고 대신 소프트웨어 렌더링을 사용하려면 --enable-software-rendering=false 플래그를 사용할 수 있.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `GPU enableSoftwareRendering` 가속하기 플러터에서 하드웨어 가속을 활성화하려면 `WidgetsFlutterBinding` 객체의 `enableSoftwareRendering` 속성을 false로 설정해야 합니다. 이렇게 하면 Flutter가 `CPU 대신 GPU를 렌더링에 사용`하도록 지시할 것입니다. 아래 예제에서는 `RendererBinding` 개체의 `addPostFrameCallback` 메서드를 사용하여 첫 번째 프레임이 렌더링 된 후 하드웨어 가속을 활성화합니다. 이렇게 하면 하드웨어 가속이 활성화되기 전에 앱이 완전히 초기화됩니다. 하드웨어 가속이 활성화되면 Flutter는 렌더링에 `CPU 대신 GPU를 사용하여 앱의 성능을 향상`할 수 있습니다. 예제 import 'package:flutter/widgets.dart'; vo.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 지연로딩 하기 아래에 예제에서는 `MyLazyLoadedWidget`은 필요할 때까지 `MyHeavyWidget`의 로딩을 지연하는 위젯입니다. 앱이 시작되면 `MyLazyLoadedWidget`은 `MyHeavyWidget`이 `비동기식으로 로드되는 동안 로딩 표시기를 표시`합니다. 무거운 위젯이 로드되면 화면에 표시됩니다. 이렇게 하면 무거운 위젯이 필요할 때까지 로드를 지연시켜 앱의 초기 시작 시간을 개선하고 메모리 사용량을 줄이는 데 도움이 될 수 있습니다. 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildC.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `AutomaticKeepAliveClientMixin` 위젯 캐싱하기 복잡한 레이아웃과 그래픽이 많이 포함되어 빌드 비용이 많이 드는 위젯의 경우 `AutomaticKeepAliveClientMixin`를 사용하여 `wantKeepAlive` 속성을 `true`로 설정하면 이 위젯의 상태를 캐시하고 화면에 표시되지 않을 때 다시 빌드되는 것을 방지할 수 있습니다. 추가로 탭바에서 탭을 할 때마다 재렌더링 되는 것을 볼 수 있는데, 스크롤 위치를 기억한 화면을 표시하기 위해서 사용할 수도 있습니다. 이렇게 하면 위젯을 다시 빌드해야 하는 횟수를 줄여 앱의 성능을 개선하는 데 도움이 될 수 있습니다. 예제 import 'package:flutter/material.dart'; class MyExpensiveToBuildWidget extends StatefulWidget .. 2022. 12. 24. [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. 이전 1 2 3 4 다음
