미카 프로젝트

안녕하세요.

git을 사용하다보면, .gitignore 를 이용하여 파일을 무시하도록 하는 경우가 많은데요.

간혹 git에는 파일을 올려 놓아야하는데, 내용은 로컬에서 변경해서 사용해야 하는 경우들이 있습니다.

대표적으로, .env 같은 파일이죠.

보통은 .env는 .gitignore에 추가해서 git에는 파일 자체를 올려놓지 않습니다.

그러나 flutter의 dotenv 같은 package를 사용한다거나 하는 경우,

.env를 asset으로 올려놓고 사용해야 합니다. 물론 보안상 문제가 있습니다.

그래서 .env를 사용하지 말아야 하나 어쩔수 없는 경우들이 있겠죠?

이걸 논하고자 하는것이 아니라 넘어가도록 하고요.

이런경우, git에 더미파일로 .env파일을 만들어서 올려놔야 git action같은 자동화 빌드를 할때 에러 없이 무사히 통화 하게 됩니다.

.env 파일에 아래와 같이 더미로 내용을 채워서 올려놓게 되죠.

SUPABASE_URL = "my url"
SUPABASE_ANON = " my key"

하지만 이미 git에 파일이 올라가 있기 때문에, 로컬에서 수정하게되면 항상 changed로 표시가 되게 됩니다.

만약 실수해서 commit을 하게 되면, 실제로 사용하는 url과 key가 git에 노출되어버리게 되죠.

git update-index --skip-worktree

이럴때 사용할 수 있는 것이 git update-index --skip-worktree 입니다.

$ git update-index --skip-worktree <file path>
즉,
$ git update-index --skip-worktree .env

이렇게 해놓으면 git에서 해당 파일에 대한 수정 사항을 추적하지 않습니다.

이를 되돌리려면 --no-skip-worktree 옵션을 사용하면 됩니다.

그럼

해피코딩!!!

스타필드 노티드 다녀왔어요.

도넛 좀 사고~~
맛있게 먹겠습니당.

소프트웨어 설계를 하다보면 디자인툴이 필요할때가 있습니다.

저도 설계를 진행하거나 아이디어 도출 단계, 그리고 시나리오 분석할때 UML을 자주 사용하는 편인데요.

UML 툴중에 GUI를 이용한 툴을 많이들 사용할겁니다.

저는 Plant UML을 자주 사용하는 편입니다.

텍스트로 입력해서 UML을 그려주니까 uml 을 그릴떄 선이나 위치 모양 등에 대해서 좀 신경을 안쓰고 타이핑(텍스트) 되어있는 이름과 플로우를 보면서 코딩되면 어떤 모양일지 생각해보게 되어서 좋은것 같습니다.

물론 단점도 있죠.. 텍스트로 입력하다보니 PlantUML 문법을 좀 알아야 하고, 마음에 드는 모양을 만들기가 좀 힘들긴 합니다.

그래서 보고용으로는 좀 별로인듯 한데,  근데 또 이것이 보고용 자료 만들때도 마음은 편해요.

Plant UML로 작성하겠다고 하고 진행하면, 나중에 아웃풋(결과물)에 대해서 "왜 이거 이렇게 그렸어? 모양이 맘에 안드네" 이런 말을 않고 넘어가게 되는 것 같아요... Plant UML은 원래 안되... 지가(프로그램이) 알아서 해줘.. 라는 인식? 때문에 그런듯 합니다.

아무튼 제가 자주 사용하고 있던 opensource로 운영되는Plant UML 에디터 사이트를 알려드겠습니다.

그리고 간단히 서버를 로컬에서 실행하는 것도 적어보겠습니다.

이 사이트가 열악한것인지 네트워크 연결이 안좋은것인지는 모르겠으나 uml을 작성하다 보면 종종 랙이 걸리거나 반응이 느릴때가 있어서 불편해서 로컬에서 사용하기 시작했습니다.

PlantUML 

PlantUML 에 대한 문법과 사용 가이드가 있는 사이트 입니다.

https://plantuml.com/ko/

Plant UML 에디터

제가 자주 사용하는 Plant UML 에디터는 여기에 있습니다.

history도 저장이 되어서 간단한 UML을 작성할때 사용합니다.

https://plantuml-editor.kkeisuke.dev/

github

https://github.com/kkeisuke/plantuml-editor2

github에도 소스코드 받아서 실행하는 법과 docker 이용하는 법이 잘 적혀있습니다.

저는 소스를 받아서 실행해 보려고 했는데 실패 했습니다. 그리고 docker를 이용해서 성공 했고요.

그래서 plantuml editor를 사용하는 것이 목적이라면 docker를 이용하는 방법을 추천 드립니다.

로컬에서 실행하는 방법 *** 핵심 ***

제가 테스트한 환경과 절차를 정리하면 다음과 같습니다.

PC: Macbook Air M1 

OS: MacOS

절차 : Docker 설치 -> colima 설치 -> colima 실행 -> docker image download -> docker image 실행

~/github $ brew install docker
~/github $ brew install colima


$colima start 

~/github $ colima start
INFO[0001] starting colima                              
INFO[0001] runtime: docker                              
INFO[0002] creating and starting ...                     context=vm
> Terminal is not available, proceeding without opening an editor
> Starting the instance "colima" with VM driver "qemu"
> QEMU binary "/opt/homebrew/bin/qemu-system-aarch64" seems properly signed with the "com.apple.security.hypervisor" entitlement
INFO[0097] provisioning ...                              context=docker
INFO[0097] starting ...                                  context=docker
INFO[0099] done                  


~/github $ Docker ps -a

///// plant uml 서버 image download
~/github $ docker pull plantuml/plantuml-server:jetty

///// plant uml 서버 실행
~/github $ docker run -d -p 4000:8080 plantuml/plantuml-server:jetty

docker desktop 말고 colima로 docker 실행 환경을 만들었고 그리고 나서 plantuml 서버 이미지를 다운로드 하고 실행 했습니다.

다들 설계도 잘하는 개발자가 되어 봐요~~

## 해피 코딩

 
 
안녕하세요. 2024년 용띠해가 되었네요.
많은 일들이 잘 되길 빕니다.~
 

 
스터디는 원래 실전이 가장 좋은 방법이라고 하죠?, 저도 Flutter 스터디를 위해서 2가지 프로젝트를 예전부터 진행했었습니다.
하나는 게임을 한번 만들어보는 것이고, 하나는 집에서 가족들과 사용할 수 있는 애플리케이션을 만들어보는 거였는데요.
 
그중 하나인 Pocket A 라는 애플리케이션입니다.
https://play.google.com/store/apps/details?id=com.rjlife.pocketa

 
 
 
 
이 애플리케이션은 "아내가 집에서 입는 옷을 어떻게 하면 쉽게 관리하고 매칭해서 입을까?"라는 질문에서 시작했습니다.

처음 아이디어가 나왔을때는, "사진찍어서 바로 올리고", "계절별 매칭도 해주고", "집에 있는 옷장이 한눈에 보이고" 듣기에 그럴듯해보이는 것 같았습니다. 프로젝트를 구상하기 시작한지 몇일 지나자 초기의 옷 정리를 위한 앱의 정체성과 니즈에 대해서 복잡한 고민을 하기 시작했습니다. "사진을 찍어봤는데 별로 안이쁜데?", "옷 매칭을 하려면 옷을 잘 찍어놔야하고 또 배경도 없애고, 모델도 필요한거 아닌가?", "옷을 종류별 계절별로 나눠보니 몇벌 안나오네?" 등등등... 뭔가 상상과 현실이 안맞는 그런 상황에서의 고민이었죠.

그러다 그 시점에 Chat GPT가 뜨면서 Chat GPT 앱이 되어버렸습니다. (^^;;  역시 제대로 된 기획이 없으니 산으로 가는.. 쿨럭)

그래서 이런 애플리케이션이 되었습니다. 
 

 
Dali-E 같은 경우는 원래 영어로 입력해야 이미지를 만들어주는데, 좀 불편해서 한글을 영어로 자동 번역해서 처리되도록 해봤습니다.
 
그리고 2024년을 기념하여, 새해 계획들을 많이 세우는데 사실 실천이 어렵죠... 
와이프의 생활패턴을 보니 계획 실천하는데 매일 Todo를 적고 하나씩 해나가는 것이 좀 인상적이었습니다.
(본인은 잊어먹지 않고 하려고 적는다고 한다고 하는데, 나이가 들고 보니 무척 좋은 습관인 것 같네요.)
 
 

한동안 따로 개선하지 않다가 드디어 할 일?? 이 생겼습니다. ^^
아무튼 저는 개발자이니 이것을 개발자스럽게 해결해 보고자 앱에 TODO 기능을 넣었습니다.
 
짜잔.
 

 
날짜 별로 할 일을 추가할 수 있습니다.
운동이나 약 먹기 같은 매일 하고자 하는 루틴의 경우에는 매일 할 일을 체크 해두면 매일 해야 할 일로 나옵니다.
그리고 할 일을 일정시간 동안 투자 해야 하는 경우라면 간혹 타이머가 필요한데, 그래서 타이머를 이렇게 만들어 놨습니다.
 
 
이렇게 해서 간단한 할 일 기능이 추가되었답니다.
+ 사용하다 보니, 이전할 일들 중에서 아직 완료하지 못한 것들을 어떻게 표현하면 좋을까? 고민하고 있는데 했는데 무작정 이전에 완료 안된 일들을 남겨 놓는 것도 아닌 것 같고, 이 부분은 좀 아이디어를 찾아봐야 할 것 같습니다.
 
 
 
 
#개발 이야기
 
Framework :  Flutter 3.16.0
주요 pub:

 
 
animated_text_kit : intro(splash) 쪽이 너무 밋밋하여 뭔가 포인트를 주기 위해서 이용했습니다.
 - 생각보다 이쁘게 나와서 chat에서 waiting시에... 에 대한 animation에도 사용했는데요. 높이 조절이 잘 안 되고 너무 튀어서 customizing을 따로 했습니다.
 
objectbox: todo를 추가하다 보니 database가 필요해져서 nosql로 간단하게 사용할 것을 찾다가 이를 이용했습니다.
 - 설명에는 경량이고 추후 cloud sync 연동도 가능하다고 되어있어서 사용해 보게 되었습니다.
 
package_info_plus: package version 정보를 보여주기 위해서 사용
flex_color_scheme: 유튜브에서 theme을 쉽게 사용할 수 있다고 하여 한번 사용해 봤습니다.
 - 생각보다 이쁘게 안 나와서 실망 ㅠ_ㅠ , 역시 디자이너의 손길이 필요합니다.
upgrader: 스토어에 최신 버전이 있는지를 확인할 수 있는 기능이 필요해서 사용하였습니다.
 -  기능상으로 보면, google play store가 아니라 개인 서버에 package 정보를 올려서 사용할 수 도 있다고 되어있습니다.
 -  나중에 store에 올리지 않고 webstite에서 관리를 하려면 이를 이용하는 것도 좋은 방법일 것 같더군요.
 
 
 
해피코딩!!

안녕하세요.

SingleChildScrollView 를 이용해서 아이템들을 스크롤 하도록 ui를 구성하려고 할때 간혹 ListView 나 grid view 같은 항목을 추가 해야 할 때가 있습니다.

ListView나 GridView 같은 경우에는 크기를 지정해야 하는데, 이렇게 되면 2중으로 scroll되게 됩니다.

(물론 이런 UI를 원하는 경우도 있지만, 때로는 전체가 하나의 view 처럼 scroll되기를 기대하는 경우도 있습니다.)

하나의 View 처럼 스크롤 되게 하려면 ListView의 속성을 변경해줘야 합니다.

[Widget layout] Scaffold  - SingleChildScrollView      - Column          - CalendarTimeline          - ListView   - BottomNavigationBar

ListView를 container로 감싸고, size를 width만 적용했습니다.

Container(
    width: double.maxFinite,
    child: ListView(
      primary: false,
      shrinkWrap: true,
        children:todoItems(controller.todos)
    ),
  ),

그리고 나서 ListView에 primary 를 false 로 적용합니다.

shrinkWrap을 true로 적용합니다.

shrinkWrap은 item 개수만큼 크기를 적용해주는 기능입니다.

그래서 item 개수가 작은때는 좁게, 많은때는 넓게 적용됩니다.

SingleChildScrollView(
        child: Column(
          children: [
            Gap(W(30)),
            Stack(
              children: [
                CalendarTimeline(
                  initialDate: selectedDay,
                  firstDate: DateTime(2022, 1, 15),
                  lastDate: DateTime(today.year,today.month,today.day+15),
                  onDateSelected: (date){
                    dprint(date);
                    setState(() {
                      selectedDay = date;
                      controller.setDate(date);
                    });

                  },
                  leftMargin: 20,
                  monthColor: Colors.blueGrey,
                  dayColor: Colors.teal[600],
                  activeDayColor: Colors.white,
                  activeBackgroundDayColor: Colors.redAccent[100],
                  dotsColor: ResColors.functionalRed,
                  selectableDayPredicate: (date) => !date.isAfter(today),
                  locale: Get.locale?.languageCode??AppConfig.DEFAULT_LOCALE.languageCode, //CHECK: Must use language code not locale
                  //showYears: true,
                  //shrink: true,
                ),
                  AnimatedOpacity(
                      opacity: (selectedDay != today)?1.0:0.0,
                      duration: 200.milliseconds,
                      child: renderTodayButton())
              ],
            ),
            Obx(()=> DefaultTextStyle(
              style:TextStyle(fontFamily: "꽃내음"),
              child: Container(
                width: double.maxFinite,
                child: ListView(
                  primary: false,
                  shrinkWrap: true,
                    children:todoItems(controller.todos)
                ),
              ),
            )),
          ],
        ),),

해피코딩 !!!

안녕하세요.

플러터로 android 용 앱을 개발하다가 앱이 좀 괜찮으면 iOS로 확장하고 싶은 욕구가 생기겠죠?

그런데 처음부터 iOS를 염두해두고 프로젝트를 만들지 않았다면, 확장을 어떻게 해야 하나 할겁니다.

간단하게 확장하는 방법 정리 해봤습니다.

먼저 빌드할 플랫폼을 선택합니다.

terminal에서 다음과 같이 입력하면 되는데요.

 $ flutter config --enable-<platform>

ios 의 경우에는  flutter config --enable-ios 라고 입력 합니다.

그리고 나서 프로젝트를 재 생성 합니다.

$ flutter create .

을 입력하면 다시 프로젝트가 재 생성됩니다.

사용 예 )

~/$ flutter config --enable-ios
Setting "enable-ios" value to "true".

You may need to restart any open editors for them to read new settings.


~/github/arbot_care (karzia)$ flutter create .
⣟

Recreating project ....
  windows/runner/flutter_window.cpp (created)
  windows/runner/utils.h (created)
  windows/runner/utils.cpp (created)
  windows/runner/runner.exe.manifest (created)
  windows/runner/CMakeLists.txt (created)
  windows/runner/win32_window.h (created)
  windows/runner/Runner.rc (created)
  windows/runner/win32_window.cpp (created)
  windows/runner/resources/app_icon.ico (created)
  windows/runner/main.cpp (created)
  windows/runner/resource.h (created)
  windows/runner/flutter_window.h (created)
  windows/flutter/CMakeLists.txt (created)
  windows/.gitignore (created)
  windows/CMakeLists.txt (created)
  arbot_care.iml (created)
  web/favicon.png (created)
  web/index.html (created)
  web/manifest.json (created)
  web/icons/Icon-maskable-512.png (created)
  web/icons/Icon-192.png (created)
  web/icons/Icon-maskable-192.png (created)
  web/icons/Icon-512.png (created)
  android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  android/app/src/main/kotlin/io/netplant/arbot_care/MainActivity.kt (created)
  android/arbot_care_android.iml (created)
  ios/RunnerTests/RunnerTests.swift (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
  linux/main.cc (created)
  linux/my_application.h (created)
  linux/my_application.cc (created)
  linux/flutter/CMakeLists.txt (created)
  linux/.gitignore (created)
  linux/CMakeLists.txt (created)
Resolving dependencies... 
Got dependencies.
Wrote 42 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

참고로 지원 되는 플랫폼 목록은 다음과 같습니다.

enable 시킬때는 --enable-<platform> 을 사용하고 disable 시킬때는 --no-enable-<platform> 을 이용합니다.

(disable이 아니네요 ^^;;;)

해피코딩 !!

안녕하세요.

코딩을 하다보면 종종 print를 이용해서 실행(run)창에 로그를 출력하는 경우들이 종종 발생하게 되는데요.

이럴때 file 정보와 line 정보가 안보여서 불편할때가 있습니다.

요럴때 사용할 수 있는 팁입니다.!!

import 'package:flutter/foundation.dart';

dprint(message,{int level=1}){

  if(kDebugMode || level >1) {
    var a = StackTrace.current;
    final regexCodeLine = RegExp(r" (\(.*\))$");
      print("$message${regexCodeLine.stringMatch(a.toString().split("\n")[level])}");
  }
}

<사용 예제>

  @override
  Widget build(BuildContext context) {

    DatabaseProvider().initMemoryDb();

    dprint("context:width:${context.width} , height:${context.height}");
    
    :

android studio의 실행창(run) 에 다음과 같이 출력이 됩니다.

그리고 클릭하면 해당 위치로 이동이 되고요.

<출력 결과>

!!! 해피 코딩