<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: sidcode</title>
    <description>The latest articles on Forem by sidcode (@sidcodeme).</description>
    <link>https://forem.com/sidcodeme</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F685543%2F6c43a9f3-67cc-40d1-ba6c-21a3bfc87350.png</url>
      <title>Forem: sidcode</title>
      <link>https://forem.com/sidcodeme</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sidcodeme"/>
    <language>en</language>
    <item>
      <title>Firebase Crashlytics</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Sat, 03 Aug 2024 02:05:06 +0000</pubDate>
      <link>https://forem.com/sidcodeme/firebase-crashlytics-4d9</link>
      <guid>https://forem.com/sidcodeme/firebase-crashlytics-4d9</guid>
      <description>&lt;p&gt;Flutter를 사용하여 Firebase를 이용한 앱 충돌 관리를 설정하는 방법을 순서대로 정리해 보겠습니다.&lt;/p&gt;

&lt;h3&gt;
  
  
  0. Firebase 프로젝트 설정 순서
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Firebase 프로젝트 생성&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://console.firebase.google.com/" rel="noopener noreferrer"&gt;Firebase 콘솔&lt;/a&gt;에서 새 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;앱 등록&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Firebase 콘솔에서 "프로젝트 설정"으로 이동하여 "앱 추가"를 클릭합니다.&lt;/li&gt;
&lt;li&gt;Flutter 앱의 패키지 이름(&lt;code&gt;applicationId&lt;/code&gt;)을 입력합니다.&lt;/li&gt;
&lt;li&gt;Flutter 앱의 패키지 이름(SHA1 지문받기)을 입력합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;SHA-1 인증서 지문 얻기&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;안드로이드 스튜디오에서 콘솔창에
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;./gradlew signingReport
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;google-services.json&lt;/code&gt; 다운로드&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;google-services.json&lt;/code&gt; 파일을 다운로드 받습니다.&lt;/li&gt;
&lt;li&gt;파일을 Flutter 프로젝트의 &lt;code&gt;android/app&lt;/code&gt; 디렉토리에 복사합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  1*&lt;em&gt;. firebase cli 설치 및 설정&lt;/em&gt;*
&lt;/h2&gt;

&lt;p&gt;firebase_options.dart 만들어줍니다. 나중에 aipkey 관련및 여러 initializeApp 오류가 해결됩니다.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;curl &lt;span class="nt"&gt;-sL&lt;/span&gt; https://firebase.tools | bash 

&lt;span class="nv"&gt;$ &lt;/span&gt;firebase login

&lt;span class="nv"&gt;$ &lt;/span&gt;firebase projects:list

&lt;span class="nv"&gt;$ &lt;/span&gt;dart pub global activate flutterfire_cli 

&lt;span class="o"&gt;=================================================================&lt;/span&gt;
.zshrc or .bashrc 추가 후 flutterfire 실행
&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;PATH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$PATH&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;:&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/.pub-cache/bin"&lt;/span&gt;
&lt;span class="o"&gt;==================================================================&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;flutterfire configure

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Flutter 프로젝트 설정
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;pubspec.yaml&lt;/code&gt; 파일 수정&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Firebase 관련 패키지들을 &lt;code&gt;pubspec.yaml&lt;/code&gt; 파일에 추가합니다.
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;dependencies&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;flutter&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;sdk&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;flutter&lt;/span&gt;
  &lt;span class="na"&gt;firebase_core&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;^3.1.1&lt;/span&gt;  &lt;span class="c1"&gt;# Firebase 초기화 패키지&lt;/span&gt;
  &lt;span class="na"&gt;firebase_crashlytics&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;^4.0.2&lt;/span&gt;  &lt;span class="c1"&gt;# Crashlytics 패키지&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- `firebase_core`는 Firebase 서비스 초기화를 담당하고, 
`firebase_crashlytics`는 앱 충돌 관리를 위해 필요합니다.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Android 프로젝트 설정&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Flutter 프로젝트의 &lt;code&gt;android/build.gradle&lt;/code&gt; 파일을 열고, 
&lt;code&gt;buildscript&lt;/code&gt; 블록과 Firebase와 관련된 플러그인의 클래스 패스를 추가합니다.
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.google.gms:google-services:4.4.2'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

rootProject.buildDir = "../build"
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(":app")
}

tasks.register("clean", Delete) {
    delete rootProject.buildDir
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- Google Services 플러그인의 버전(`com.google.gms:google-services`)
- Firebase Crashlytics 플러그인의 버전
(`com.google.firebase:firebase-crashlytics-gradle`)을 설정합니다.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;앱 레벨 &lt;code&gt;build.gradle&lt;/code&gt; 수정&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Flutter 프로젝트의 &lt;code&gt;android/app/build.gradle&lt;/code&gt; 파일을 열고, 
Firebase Crashlytics 플러그인을 추가합니다.
&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;plugins {
    id "com.android.application"
    id "kotlin-android"
    // The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
    id "dev.flutter.flutter-gradle-plugin"
    // firbase Crashlytics
    id "'com.google.gms.google-services'"
    id "com.google.firebase.crashlytics"
}

dependencies { // Firbase Crashlytics
    implementation(platform("com.google.firebase:firebase-bom:33.1.1"))
    // implementation 'com.google.firebase:firebase-analytics-ktx'
    implementation 'com.google.firebase:firebase-crashlytics-ktx'
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;"com.google.gms.google-services"&lt;/code&gt;와 &lt;code&gt;"com.google.firebase.crashlytics"&lt;/code&gt;그리고 
&lt;code&gt;"com.google.firebase:firebase-bom:33.1.1"&lt;/code&gt; (종속성 관리)
추가하여 Firebase 서비스와 Crashlytics를 활성화합니다.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  마무리(테스트)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;“&lt;strong&gt;크래시 발생”&lt;/strong&gt; 버튼 눌러서 실시간으로 잘 들어가는지 확인
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'dart:async'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:firebase_core/firebase_core.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:firebase_crashlytics/firebase_crashlytics.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:flutter/foundation.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:flutter/material.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:flutter/foundation.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// The entry point of the application&lt;/span&gt;
&lt;span class="n"&gt;Future&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;//-----------------------&lt;/span&gt;
  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;Firebase&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;initializeApp&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="n"&gt;FlutterError&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onError&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;errorDetails&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;FirebaseCrashlytics&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;recordFlutterFatalError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;errorDetails&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="c1"&gt;// Pass all uncaught asynchronous errors that aren't handled by the Flutter framework to Crashlytics&lt;/span&gt;
  &lt;span class="n"&gt;PlatformDispatcher&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onError&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;FirebaseCrashlytics&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;recordError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;fatal:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;//------------------------&lt;/span&gt;

  &lt;span class="c1"&gt;// Runs the main application widget&lt;/span&gt;
  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;WhereIsKaaba&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Main application widget&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;WhereIsKaaba&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;StatelessWidget&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;WhereIsKaaba&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="c1"&gt;// This widget is the root of your application.&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Define the light text theme based on Material3&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;TextTheme&lt;/span&gt; &lt;span class="n"&gt;lightTextTheme&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
        &lt;span class="n"&gt;ThemeData&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;light&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;useMaterial3:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;textTheme&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="c1"&gt;// Define the dark text theme based on Material3&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;TextTheme&lt;/span&gt; &lt;span class="n"&gt;darkTextTheme&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
        &lt;span class="n"&gt;ThemeData&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;useMaterial3:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;textTheme&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// Create a custom material theme for the light theme&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;CustomMaterialTheme&lt;/span&gt; &lt;span class="n"&gt;lightCustomMaterialTheme&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
        &lt;span class="n"&gt;CustomMaterialTheme&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;lightTextTheme&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// Create a custom material theme for the dark theme&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;CustomMaterialTheme&lt;/span&gt; &lt;span class="n"&gt;darkCustomMaterialTheme&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
        &lt;span class="n"&gt;CustomMaterialTheme&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;darkTextTheme&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;MaterialApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;debugShowCheckedModeBanner:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="c1"&gt;// Localization delegates for internationalization support&lt;/span&gt;
      &lt;span class="nl"&gt;localizationsDelegates:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="n"&gt;S&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;delegate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;GlobalMaterialLocalizations&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;delegate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;GlobalWidgetsLocalizations&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;delegate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;GlobalCupertinoLocalizations&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;delegate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;],&lt;/span&gt;
      &lt;span class="c1"&gt;// Supported locales for the application&lt;/span&gt;
      &lt;span class="nl"&gt;supportedLocales:&lt;/span&gt; &lt;span class="n"&gt;S&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;delegate&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;supportedLocales&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="c1"&gt;//////////////////////////////////////////////////&lt;/span&gt;
      &lt;span class="c1"&gt;// Title of the application&lt;/span&gt;
      &lt;span class="nl"&gt;title:&lt;/span&gt; &lt;span class="s"&gt;'Where is Kaaba.?'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="c1"&gt;// Light theme configuration&lt;/span&gt;
      &lt;span class="nl"&gt;theme:&lt;/span&gt; &lt;span class="n"&gt;lightCustomMaterialTheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;light&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
      &lt;span class="c1"&gt;// Dark theme configuration&lt;/span&gt;
      &lt;span class="nl"&gt;darkTheme:&lt;/span&gt; &lt;span class="n"&gt;darkCustomMaterialTheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
      &lt;span class="c1"&gt;// Home widget of the application&lt;/span&gt;
      &lt;span class="nl"&gt;home:&lt;/span&gt; &lt;span class="n"&gt;Semantics&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;label:&lt;/span&gt; &lt;span class="s"&gt;'Main Screen with navigation tabs'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="n"&gt;Center&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="n"&gt;ElevatedButton&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="nl"&gt;onPressed:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
             &lt;span class="c1"&gt;// 강제로 예외를 발생시켜 Crashlytics 로그를 테스트합니다.&lt;/span&gt;
              &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="n"&gt;Exception&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"테스트 예외"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;},&lt;/span&gt;
            &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"크래시 발생"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
          &lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5jehww03u4dbr391l0ga.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5jehww03u4dbr391l0ga.png" width="800" height="577"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>crashlytics</category>
      <category>firebase</category>
      <category>flutter</category>
    </item>
    <item>
      <title>Gradle upgrade</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Fri, 02 Aug 2024 07:50:56 +0000</pubDate>
      <link>https://forem.com/sidcodeme/gradle-upgrade-n3h</link>
      <guid>https://forem.com/sidcodeme/gradle-upgrade-n3h</guid>
      <description>&lt;p&gt;1- android/gradle/warpper/gradle-warpapper.peroperies(2024/08/02 or 02/08/2024)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;distributionUrl&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;https&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//services.gradle.org/distributions/gradle-8.7-bin.zip&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2- android/build.gradle (AGP Upgrade : *add buildscript{ })&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;buildscript&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt; 
&lt;span class="c1"&gt;// 목적: buildscript 블록은 빌드 스크립트 자체에 필요한 의존성 및 플러그인을 정의합니다.&lt;/span&gt;
&lt;span class="c1"&gt;// Purpose: The buildscript block defines the dependencies and plugins required for the build script itself.&lt;/span&gt;
    &lt;span class="n"&gt;repositories&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;google&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt;
        &lt;span class="n"&gt;mavenCentral&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
    &lt;span class="n"&gt;dependencies&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;classpath&lt;/span&gt; &lt;span class="s1"&gt;'com.android.tools.build:gradle:8.5.1'&lt;/span&gt; &lt;span class="c1"&gt;// 최신 버전으로 업데이트&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="n"&gt;allprojects&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// 목적: allprojects 블록은 루트 프로젝트와 모든 하위 프로젝트에 공통적으로 적용할 설정을 정의합&lt;/span&gt;
&lt;span class="c1"&gt;// Purpose: The allprojects block defines settings that apply to the root project and all subprojects.&lt;/span&gt;
    &lt;span class="n"&gt;repositories&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;google&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt;
        &lt;span class="n"&gt;mavenCentral&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="n"&gt;rootProject&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;buildDir&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"../build"&lt;/span&gt;
&lt;span class="n"&gt;subprojects&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;project&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;buildDir&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"${rootProject.buildDir}/${project.name}"&lt;/span&gt;
    &lt;span class="n"&gt;project&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;evaluationDependsOn&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;":app"&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;span class="n"&gt;tasks&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;register&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"clean"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Delete&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;delete&lt;/span&gt; &lt;span class="n"&gt;rootProject&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;buildDir&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3- android/settings.gradle ( id "com.android.application" version "8.5.1" apply false)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;plugins&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="s2"&gt;"dev.flutter.flutter-plugin-loader"&lt;/span&gt; &lt;span class="n"&gt;version&lt;/span&gt; &lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;
    &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="s2"&gt;"com.android.application"&lt;/span&gt; &lt;span class="n"&gt;version&lt;/span&gt; &lt;span class="s2"&gt;"8.5.1"&lt;/span&gt; &lt;span class="n"&gt;apply&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
    &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="s2"&gt;"org.jetbrains.kotlin.android"&lt;/span&gt; &lt;span class="n"&gt;version&lt;/span&gt; &lt;span class="s2"&gt;"1.7.10"&lt;/span&gt; &lt;span class="n"&gt;apply&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4- rebuild Gradle&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; /mypackage/android
&lt;span class="nv"&gt;$ &lt;/span&gt;./gradlew clean build     
                                                                                                         ─╯
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Task :app:stripDebugDebugSymbols
Unable to strip the following libraries, packaging them as they are: libVkLayer_khronos_validation.so, libflutter.so.

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Task :app:stripProfileDebugSymbols
Unable to strip the following libraries, packaging them as they are: libapp.so, libflutter.so, libvmservice_snapshot.so.

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Task :app:stripReleaseDebugSymbols
Unable to strip the following libraries, packaging them as they are: libapp.so, libflutter.so.

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Task :app:lintReportDebug
Wrote HTML report to file:///Users/sidcode/Developer/flutter_workspace/jiyulsadventure/build/app/reports/lint-results-debug.html

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Task :app:minifyReleaseWithR8
Supplied proguard configuration does not exist: /Users/sidcode/Developer/flutter_workspace/jiyulsadventure/android/app/proguard-rules.pro

Deprecated Gradle features were used &lt;span class="k"&gt;in &lt;/span&gt;this build, making it incompatible with Gradle 9.0.

You can use &lt;span class="s1"&gt;'--warning-mode all'&lt;/span&gt; to show the individual deprecation warnings and determine &lt;span class="k"&gt;if &lt;/span&gt;they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.7/userguide/command_line_interface.html#sec:command_line_warnings &lt;span class="k"&gt;in &lt;/span&gt;the Gradle documentation.

BUILD SUCCESSFUL &lt;span class="k"&gt;in &lt;/span&gt;37s
159 actionable tasks: 146 executed, 13 up-to-date
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>gradle</category>
      <category>upgrade</category>
      <category>android</category>
      <category>agp</category>
    </item>
    <item>
      <title>Don't use 'BuildContext's across async gaps.</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Sat, 20 Jul 2024 09:49:36 +0000</pubDate>
      <link>https://forem.com/sidcodeme/dont-use-buildcontexts-across-async-gaps-pe</link>
      <guid>https://forem.com/sidcodeme/dont-use-buildcontexts-across-async-gaps-pe</guid>
      <description>&lt;p&gt;Don't use 'BuildContext's across async gaps.&lt;br&gt;
Try rewriting the code to not use the 'BuildContext', or guard the use with a 'mounted' check.dartuse_build_context_synchronously&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;context.mounted
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Just wrap the error part with the following. We will process it after confirming the mount.&lt;/p&gt;

&lt;p&gt;if (context. mounted) {&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;mounted&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;isPrayedToday&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;_modalSalatFaithWrite&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;salatWrite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_controller&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;_getShowModalAlreadyToday&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="n"&gt;S&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;modal_today_prayer_already&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>flutter</category>
      <category>async</category>
      <category>context</category>
    </item>
    <item>
      <title>no AdMob account input AdMob 계좌 입력란이 없고</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Tue, 16 Jul 2024 23:29:23 +0000</pubDate>
      <link>https://forem.com/sidcodeme/no-admob-account-input-admob-gyejwa-ibryeograni-eobsgo-103i</link>
      <guid>https://forem.com/sidcodeme/no-admob-account-input-admob-gyejwa-ibryeograni-eobsgo-103i</guid>
      <description>&lt;p&gt;**&lt;br&gt;
I was confused because there was no AdMob account input field and only a part asking for identity verification appeared.&lt;/p&gt;

&lt;p&gt;AdMob 계좌 입력란이 없고, 본인인증 하라는 부분만 나와서 당황했다. &lt;/p&gt;

&lt;h2&gt;
  
  
  AdMob sends a mail letter with a PIN number to the user when the first $10 is reached and after entering the PIN number and verifying identity, the account information field to receive the deposit opens.
&lt;/h2&gt;

&lt;h2&gt;
  
  
  AdMob은 최초 $10 가 되는 시점에 사용자에게 pin번호가 있는 우편 편지을 보내고, 이 후에 pin번호 입력과 본인확인 후 입금받을 계좌 정보란이 열린다.
&lt;/h2&gt;

&lt;p&gt;**&lt;/p&gt;

</description>
      <category>admob</category>
      <category>애드몹</category>
    </item>
    <item>
      <title>[Flutter] AdMob ad type.</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Mon, 15 Jul 2024 03:05:20 +0000</pubDate>
      <link>https://forem.com/sidcodeme/flutter-admob-ad-type-3nkp</link>
      <guid>https://forem.com/sidcodeme/flutter-admob-ad-type-3nkp</guid>
      <description>&lt;p&gt;Language: flutter&lt;br&gt;
The calling function used is different for each AdMob ad type.&lt;br&gt;
AdMob 광고 형태마다 사용하는 호출 함수 가 다르다.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Rewarded Interstitial Ad: &lt;strong&gt;RewardedInterstitialAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rewarded Ad: &lt;strong&gt;RewardedAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Banner Advertisement: &lt;strong&gt;BannerView&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Interstitial Ad: &lt;strong&gt;InterstitialAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;보상형 전면 광고 : &lt;strong&gt;RewardedInterstitialAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;보상형 광고 : &lt;strong&gt;RewardedAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;배너 광고 : &lt;strong&gt;BannerView&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;전면 광고 : &lt;strong&gt;InterstitialAd&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>flutter</category>
      <category>admob</category>
      <category>type</category>
      <category>rewarded</category>
    </item>
    <item>
      <title>React + Next.js + tailwind Github pages</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Sun, 07 Jul 2024 03:50:19 +0000</pubDate>
      <link>https://forem.com/sidcodeme/react-nextjs-tailwind-github-pages-4hek</link>
      <guid>https://forem.com/sidcodeme/react-nextjs-tailwind-github-pages-4hek</guid>
      <description>&lt;h3&gt;
  
  
  Step 1. Set Up Your Next.js Project
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1-0. Initialize Your Next.js Project:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npx create-next-app@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1-1. had domain&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;my_project_directory
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'sidcode.me'&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; public/CNAME
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;public/CNAME         
sidcode.me
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1-2. Update &lt;code&gt;next.config.js&lt;/code&gt; or &lt;code&gt;next.config.mjs&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="cm"&gt;/** @type {import('next').NextConfig} */&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nextConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;export&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;images&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;unoptimized&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;reactStrictMode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;assetPrefix&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;nextConfig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1-3. Update &lt;code&gt;postcss.config.js&lt;/code&gt; or &lt;code&gt;postcss.config.mjs&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="cm"&gt;/** @type {import('postcss-load-config').Config} */&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;tailwindcss&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
    &lt;span class="na"&gt;autoprefixer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1-3-1&lt;/strong&gt;. autoprefixer install&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;autoprefixer &lt;span class="nt"&gt;--save-dev&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1-4.&lt;/strong&gt; &lt;strong&gt;Github&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git init
git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Initial commit"&lt;/span&gt;
git remote add origin https://&amp;lt;&lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;:&amp;lt;token&amp;gt;@github.com/&amp;lt;username&amp;gt;/&amp;lt;repo&amp;gt;.git
git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin master
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2: Deploy to GitHub Pages
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;2-1. Install &lt;code&gt;gh-pages&lt;/code&gt;:&lt;/strong&gt; Install the &lt;code&gt;gh-pages&lt;/code&gt; package to help deploy your app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;gh-pages &lt;span class="nt"&gt;--save-dev&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2-2. Update &lt;code&gt;package.json&lt;/code&gt;:&lt;/strong&gt; Add the following scripts to your &lt;code&gt;package.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"next dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"start"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"next start"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"lint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"next lint"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"next build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"touch out/.nojekyll &amp;amp;&amp;amp; gh-pages -d out -t true"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy-npm"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build &amp;amp;&amp;amp; npm run deploy"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gh-pages -d out -f"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;one&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;time&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;force&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;안될때&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="err"&gt;회성&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2-3. Deploy Your Pages:&lt;/strong&gt; Run the following command to deploy your Pages to GitHub Pages:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm run deploy-npm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Like this!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ywoth5baotcn7isgb9l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ywoth5baotcn7isgb9l.png" alt=" " width="800" height="630"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>nextjs</category>
      <category>github</category>
      <category>tailwindcss</category>
    </item>
    <item>
      <title>[Flutter] Web Github pages</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Thu, 20 Jun 2024 07:34:39 +0000</pubDate>
      <link>https://forem.com/sidcodeme/flutter-web-github-pages-141e</link>
      <guid>https://forem.com/sidcodeme/flutter-web-github-pages-141e</guid>
      <description>&lt;ul&gt;
&lt;li&gt;already create your repository "your_id.gihub.io"&lt;/li&gt;
&lt;li&gt;"your_id.github.io" 로 repository가 생성되었다는 기준임&lt;/li&gt;
&lt;li&gt;already create your flutter web project
&lt;/li&gt;
&lt;li&gt;flutter web 프로젝트를 생성했다는 기준임&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;if you have to domain, go to the flutter project directory
만약 당신이 도메인을 소유하고있다면, flutter 프로젝트 생성 한 디렉토리로 이동
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;my_flutter_directory
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'sidcode.me'&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; web/CNAME
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;web/CNAME         
sidcode.me
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;flutter web build
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;flutter build web &lt;span class="nt"&gt;--release&lt;/span&gt;
&lt;span class="nt"&gt;------------------------------&lt;/span&gt;  
Font asset &lt;span class="s2"&gt;"CupertinoIcons.ttf"&lt;/span&gt; was tree-shaken, reducing it from 257628 to 1172 bytes &lt;span class="o"&gt;(&lt;/span&gt;99.5% reduction&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt; Tree-shaking can be disabled by providing
the &lt;span class="nt"&gt;--no-tree-shake-icons&lt;/span&gt; flag when building your app.
Font asset &lt;span class="s2"&gt;"MaterialIcons-Regular.otf"&lt;/span&gt; was tree-shaken, reducing it from 1645184 to 7760 bytes &lt;span class="o"&gt;(&lt;/span&gt;99.5% reduction&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt; Tree-shaking can be disabled by
providing the &lt;span class="nt"&gt;--no-tree-shake-icons&lt;/span&gt; flag when building your app.
Compiling lib/main.dart &lt;span class="k"&gt;for &lt;/span&gt;the Web...                           1,407ms
✓ Built build/web
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;flutter build web page move
flutter build된 web페이지로 이동
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;build/web/
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-all&lt;/span&gt;                                                   
drwxr-xr-x sidcode staff 480 B  Thu Jun 20 15:56:49 2024  &lt;span class="nb"&gt;.&lt;/span&gt;
drwxr-xr-x sidcode staff  96 B  Thu Jun 20 15:56:47 2024  ..
.rw-r--r-- sidcode staff  32 B  Thu Jun 20 15:56:49 2024  .last_build_id
drwxr-xr-x sidcode staff 320 B  Thu Jun 20 15:56:48 2024  assets
drwxr-xr-x sidcode staff 320 B  Thu Jun 20 15:56:47 2024  canvaskit
.rw-r--r-- sidcode staff  13 B  Thu Jun 20 15:51:32 2024  CNAME
.rw-r--r-- sidcode staff 917 B  Wed Feb  1 13:05:06 2023  favicon.png
.rw-r--r-- sidcode staff 7.6 KB Tue Jun  4 21:05:58 2024  flutter.js
.rw-r--r-- sidcode staff 7.9 KB Thu Jun 20 15:56:48 2024  flutter_bootstrap.js
.rw-r--r-- sidcode staff 8.0 KB Thu Jun 20 15:56:49 2024  flutter_service_worker.js
drwxr-xr-x sidcode staff 192 B  Thu Jun 20 15:56:48 2024  icons
.rw-r--r-- sidcode staff 1.2 KB Thu Jun 20 15:56:48 2024  index.html
.rw-r--r-- sidcode staff 1.5 MB Thu Jun 20 15:47:11 2024  main.dart.js
.rw-r--r-- sidcode staff 928 B  Thu Jun 20 15:35:13 2024  manifest.json
.rw-r--r-- sidcode staff 102 B  Thu Jun 20 15:56:48 2024  version.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;git push
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git init &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; git add &lt;span class="nb"&gt;.&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; git commit &lt;span class="nt"&gt;-m&lt;/span&gt;  &lt;span class="s2"&gt;"init"&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; git branch &lt;span class="nt"&gt;-M&lt;/span&gt; gh-pages
&lt;span class="o"&gt;===============================================&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git remote add origin https://github.com/[your_id]/[repo_name].git
 &lt;span class="k"&gt;********&lt;/span&gt; choice not token or token github 
 &lt;span class="k"&gt;********&lt;/span&gt; 깃허브 토큰없거나 토큰 있는 경우 선택 
&lt;span class="nv"&gt;$ &lt;/span&gt;git remote add origin https://[your_id]:[your_token]@github.io/&lt;span class="o"&gt;{&lt;/span&gt;your_id&lt;span class="o"&gt;}&lt;/span&gt;/&lt;span class="o"&gt;{&lt;/span&gt;repo_name&lt;span class="o"&gt;}&lt;/span&gt;.git
&lt;span class="o"&gt;===============================================&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin gh-pages
&lt;span class="nt"&gt;------------------------------------------------&lt;/span&gt;
오브젝트 나열하는 중: 43, 완료.
오브젝트 개수 세는 중: 100% &lt;span class="o"&gt;(&lt;/span&gt;43/43&lt;span class="o"&gt;)&lt;/span&gt;, 완료.
Delta compression using up to 10 threads
오브젝트 압축하는 중: 100% &lt;span class="o"&gt;(&lt;/span&gt;37/37&lt;span class="o"&gt;)&lt;/span&gt;, 완료.
오브젝트 쓰는 중: 100% &lt;span class="o"&gt;(&lt;/span&gt;43/43&lt;span class="o"&gt;)&lt;/span&gt;, 5.50 MiB | 5.07 MiB/s, 완료.
Total 43 &lt;span class="o"&gt;(&lt;/span&gt;delta 6&lt;span class="o"&gt;)&lt;/span&gt;, reused 0 &lt;span class="o"&gt;(&lt;/span&gt;delta 0&lt;span class="o"&gt;)&lt;/span&gt;, pack-reused 0 &lt;span class="o"&gt;(&lt;/span&gt;from 0&lt;span class="o"&gt;)&lt;/span&gt;
remote: Resolving deltas: 100% &lt;span class="o"&gt;(&lt;/span&gt;6/6&lt;span class="o"&gt;)&lt;/span&gt;, &lt;span class="k"&gt;done&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;
To https://github.com/sidcodeme/sidcodeme.github.io.git
 &lt;span class="k"&gt;*&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;new branch]      gh-pages -&amp;gt; gh-pages
branch &lt;span class="s1"&gt;'gh-pages'&lt;/span&gt; &lt;span class="nb"&gt;set &lt;/span&gt;up to track &lt;span class="s1"&gt;'origin/gh-pages'&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;github pages setting 
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fygdybulee0fm1oe978ev.png" width="800" height="535"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;OK FINISHED, LET`S GO TO HOMEPAGE!!!!!&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgzqqx0q15hvyobmbs3gc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgzqqx0q15hvyobmbs3gc.png" width="800" height="639"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>web</category>
      <category>github</category>
      <category>pages</category>
    </item>
    <item>
      <title>[React]Vite Github pages</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Wed, 19 Jun 2024 13:22:40 +0000</pubDate>
      <link>https://forem.com/sidcodeme/reactvite-github-pages-10nm</link>
      <guid>https://forem.com/sidcodeme/reactvite-github-pages-10nm</guid>
      <description>&lt;p&gt;Create Vite react typescript(or javascript)&lt;br&gt;
Vite React TypeScript(또는 javascript) 만들기&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm create vite@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;write your choice name and framework and variant.&lt;br&gt;
원하시는 프로젝트명 이랑 플레임웍 선택 그리고 형식 을 작성하세요.&lt;br&gt;
*(not important project_name, 프로젝트명 중요하지않음)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;&amp;gt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;npx
&lt;span class="gp"&gt;&amp;gt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;create-vite
&lt;span class="go"&gt;
✔ Project name: … [your_github_id].github.io
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/sidcode/Developer/flutter_workspace/HomePage/sidcodeme.github.io...

Done. Now run:

  cd [your_github_id].github.io
  npm install
  npm run dev
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;if finished create and then you command line and do it change directory and run "npm install"&lt;br&gt;
생성이 완료되면 명령줄에서 디렉터리를 변경하고 "npm install"을 실행합니다.&lt;/p&gt;
&lt;h3&gt;
  
  
  git
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git init
&lt;span class="nv"&gt;$ &lt;/span&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"init"&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git branch &lt;span class="nt"&gt;-M&lt;/span&gt; gh-pages
&lt;span class="o"&gt;===============================================&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git remote add origin https://github.com/[your_id]/[repo_name].git
 &lt;span class="k"&gt;********&lt;/span&gt; choice not token or token github 
 &lt;span class="k"&gt;********&lt;/span&gt; 깃허브 토큰없거나 토큰 있는 경우 선택 
&lt;span class="nv"&gt;$ &lt;/span&gt;git remote add origin https://[your_id]:[your_token]@github.io/&lt;span class="o"&gt;{&lt;/span&gt;your_id&lt;span class="o"&gt;}&lt;/span&gt;/&lt;span class="o"&gt;{&lt;/span&gt;repo_name&lt;span class="o"&gt;}&lt;/span&gt;.git
&lt;span class="o"&gt;===============================================&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin gh-pages
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;&lt;p&gt;you can ready to start now.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;install gh-pages&lt;br&gt;
gh-pages 설치&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;gh-pages &lt;span class="nt"&gt;--save-dev&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;
&lt;li&gt;package.json {setup, 설정}
if you dont have domain or had domain
도메인이 없거나 또는 도메인이 있는 경우
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nl"&gt;"homepage"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://sidcodeme.github.io/"&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="err"&gt;or&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"homepage"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://sidcod.me/"&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;==========================================&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;scripts command values is use vscode or not&lt;/li&gt;
&lt;li&gt;스크립트 명령 값은 vscode 사용 여부입니다.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"depoly"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run deploy"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"predeploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gh-pages -d dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
              &lt;/span&gt;&lt;span class="err"&gt;or&lt;/span&gt;&lt;span class="w"&gt; 
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"predeploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gh-pages -d dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;anyway finished my package.json&lt;br&gt;
여하튼 완성된 제 package.json 입니다.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sidcodeme.github.io"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"private"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"module"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"homepage"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://sidcod.me/"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"depoly"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run deploy"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"predeploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"gh-pages -d dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"vite"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"vite build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"lint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"preview"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"vite preview"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"react"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^18.2.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"react-dom"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^18.2.0"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"devDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"@types/react"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^18.2.66"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"@types/react-dom"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^18.2.22"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"@vitejs/plugin-react"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.2.1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^8.57.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint-plugin-react"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^7.34.1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint-plugin-react-hooks"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.6.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"eslint-plugin-react-refresh"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^0.4.6"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"gh-pages"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^6.1.1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"vite"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^5.2.0"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Those using a domain can place the CNAME file in the public directory.&lt;br&gt;
CNAME file contents&lt;br&gt;
도메인을 사용하시는 분들은 CNAME파일을 public 디렉토리에 넣으시면됩니다.&lt;br&gt;
CNAME 파일 내용&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  sidcode.me
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  last!! 마지막!!
&lt;/h3&gt;

&lt;p&gt;커멘드 직접 입력하거나 vscode - npm에서 deploy 실행&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;npm run deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;=--------------------=&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; &lt;span class="k"&gt;*&lt;/span&gt;  Executing task: yarn run depoly 

yarn run v1.22.22
&lt;span class="nv"&gt;$ &lt;/span&gt;npm run deploy

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; sidcode.github.io@1.0.0 predeploy
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; npm run build


&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; sidcode.github.io@1.0.0 build
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; vite build

vite v5.3.1 building &lt;span class="k"&gt;for &lt;/span&gt;production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB │ &lt;span class="nb"&gt;gzip&lt;/span&gt;:  0.30 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ &lt;span class="nb"&gt;gzip&lt;/span&gt;:  2.14 kB
dist/assets/index-DiwrgTda.css    1.39 kB │ &lt;span class="nb"&gt;gzip&lt;/span&gt;:  0.72 kB
dist/assets/index-DVoHNO1Y.js   143.36 kB │ &lt;span class="nb"&gt;gzip&lt;/span&gt;: 46.07 kB
✓ built &lt;span class="k"&gt;in &lt;/span&gt;394ms

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; sidcode.github.io@1.0.0 deploy
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; gh-pages &lt;span class="nt"&gt;-d&lt;/span&gt; dist

Published
✨  Done &lt;span class="k"&gt;in &lt;/span&gt;5.28s.
 &lt;span class="k"&gt;*&lt;/span&gt;  Terminal will be reused by tasks, press any key to close it. 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;check homepage!! &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe52pctayhm0x1sici8sh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe52pctayhm0x1sici8sh.png" width="416" height="528"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you for reading and sorry, im not well English.&lt;/p&gt;

</description>
      <category>react</category>
      <category>vite</category>
      <category>github</category>
      <category>pages</category>
    </item>
    <item>
      <title>[Flutter] 앱 시작 로딩화면 App loading page</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Tue, 18 Jun 2024 04:12:52 +0000</pubDate>
      <link>https://forem.com/sidcodeme/flutter-aeb-sijag-rodinghwamyeon-app-loading-page-kbf</link>
      <guid>https://forem.com/sidcodeme/flutter-aeb-sijag-rodinghwamyeon-app-loading-page-kbf</guid>
      <description>&lt;ol&gt;
&lt;li&gt;&lt;p&gt;flutter_native_splash&lt;br&gt;
&lt;a href="https://pub.dev/packages/flutter_native_splash" rel="noopener noreferrer"&gt;https://pub.dev/packages/flutter_native_splash&lt;/a&gt;. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;패키지 다운로드(&lt;a href="https://pub.dev" rel="noopener noreferrer"&gt;https://pub.dev&lt;/a&gt;) &lt;br&gt;
Package download from (&lt;a href="https://pub.dev" rel="noopener noreferrer"&gt;https://pub.dev&lt;/a&gt;)&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;flutter_native_splash
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;    flutter pub add flutter_native_splash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;flutter_native_splash.yaml

&lt;ul&gt;
&lt;li&gt;pubspec.yaml과 동일 경로에 파일 생성&lt;/li&gt;
&lt;li&gt;smae path to pubspec.yaml&lt;/li&gt;
&lt;li&gt;vi또는 메모장등으로 원하는 색상 이미지를 원하는대로 수정&lt;/li&gt;
&lt;li&gt;"vi" or "notepad" edit what you want color and image whatever.
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;fflutter_native_splash&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;#009000"&lt;/span&gt;
  &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;assets/Kaaba.png&lt;/span&gt;
  &lt;span class="na"&gt;branding&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;assets/Kaaba.png&lt;/span&gt;
  &lt;span class="c1"&gt;# color_dark: "#121212"&lt;/span&gt;
  &lt;span class="c1"&gt;# image_dark: assets/Kaaba.png&lt;/span&gt;
  &lt;span class="c1"&gt;# branding_dark: assets/Kaaba.png&lt;/span&gt;

  &lt;span class="na"&gt;android_12&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;assets/Kaaba.png&lt;/span&gt;
    &lt;span class="na"&gt;icon_background_color&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;#009000"&lt;/span&gt;
    &lt;span class="c1"&gt;# image_dark: assets/Kaaba.png&lt;/span&gt;
    &lt;span class="c1"&gt;# icon_background_color_dark: "#121212"&lt;/span&gt;

  &lt;span class="na"&gt;web&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;command on prompt
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dart run flutter_native_splash:remove &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; dart run flutter_native_splash:create
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;main.dart
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;Future&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;WhereIsKaaba&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

  &lt;span class="ss"&gt;#&lt;/span&gt; &lt;span class="n"&gt;close&lt;/span&gt; &lt;span class="n"&gt;splash&lt;/span&gt; &lt;span class="n"&gt;screen&lt;/span&gt;
  &lt;span class="n"&gt;FlutterNativeSplash&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;finished!!&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>developer</category>
      <category>app</category>
      <category>loadingpage</category>
    </item>
    <item>
      <title>[Flutter] Future 대신 void 를 사용하는 이유</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Sun, 09 Jun 2024 05:40:11 +0000</pubDate>
      <link>https://forem.com/sidcodeme/flutter-future-daesin-void-reul-sayonghaneun-iyu-3ckh</link>
      <guid>https://forem.com/sidcodeme/flutter-future-daesin-void-reul-sayonghaneun-iyu-3ckh</guid>
      <description>&lt;h3&gt;
  
  
  void를 사용하는 경우:
&lt;/h3&gt;

&lt;p&gt;메서드가 의미있는 데이터를 반환하지 않거나 주요 목적이 작업을 수행하거나 앱 상태를 업데이트하는 경우 void를 사용합니다.&lt;br&gt;
예를 들어, 사용자 상호 작용을 처리하거나, 환경 설정을 설정하거나, 특정 결과를 반환하지 않고 시간이 걸리는 복잡한 계산을 수행하는 메서드 등이 있습니다.  &lt;/p&gt;

&lt;h3&gt;
  
  
  Future를 사용하는 경우:
&lt;/h3&gt;

&lt;p&gt;메서드가 비동기 작업을 수행하고 미래에 값 또는 결과를 반환하는 경우 Future를 사용합니다.&lt;br&gt;
예를 들어, 네트워크에서 데이터를 가져오거나, 저장소에서 파일을 로드하거나, 시간이 걸리는 복잡한 계산을 수행하는 메서드 등이 있습니다.&lt;/p&gt;

&lt;h3&gt;
  
  
  추가 고려 사항:
&lt;/h3&gt;

&lt;p&gt;값을 반환하지 않는 메서드에 void를 사용하면 코드가 더 간결하고 읽기 쉽습니다.&lt;br&gt;
진정으로 값 또는 결과를 반환하는 메서드에 Future를 사용하면 비동기 작업 및 결과 처리를 구조적으로 처리할 수 있는 방법을 제공합니다.&lt;/p&gt;

&lt;h3&gt;
  
  
  정리
&lt;/h3&gt;

&lt;p&gt;void와 Future의 선택은 메서드의 특정 목적과 값을 반환하거나 작업을 수행하는지에 따라 다릅니다.&lt;br&gt;
값을 반환하지 않고 작업 수행 또는 상태 업데이트에 중점을 둔 메서드에는 void를 사용합니다.&lt;br&gt;
비동기 작업을 수행하고 미래에 값 또는 결과를 반환하는 메서드에는 Future를 사용합니다.  &lt;/p&gt;

&lt;h3&gt;
  
  
  목적성
&lt;/h3&gt;

&lt;p&gt;일반적으로 void 대신 Future를 비동기 함수에 사용하는 것이 좋습니다.&lt;br&gt;
Future는 작업 연결 또는 오류 처리가 필요한 경우 특히 더 많은 유연성과 제어 기능을 제공합니다.&lt;br&gt;
void는 이러한 기능이 필요하지 않은 간단한 비동기 작업에 적합합니다.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>developer</category>
      <category>void</category>
      <category>future</category>
    </item>
    <item>
      <title>First</title>
      <dc:creator>sidcode</dc:creator>
      <pubDate>Sun, 09 Jun 2024 03:02:57 +0000</pubDate>
      <link>https://forem.com/sidcodeme/first-129n</link>
      <guid>https://forem.com/sidcodeme/first-129n</guid>
      <description>&lt;p&gt;I lost my nick... &lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
