nomaruhan

목록

* carbon

https://carbon-components-svelte.onrender.com/

* material

https://sveltematerialui.com/

* headlessUI

https://svelte-headlessui.goss.io/docs

* flowbite

https://flowbite-svelte.com/

svelte 관련 block들은 아직 incomplete 상태가 좀 있음 

* skeleton

https://www.skeleton.dev/

선택 

* tailwind 기반으로 최대한 날먹이 가능해야 함

1. tailwind 기반: headlessUI, flowbite, skeleton

2. 날먹 가능한 컴포넌트들이 많은가?: flowbite, skeleton

* flowbite

react, vue, django 등등 지원하고, 유료 템플릿도 저렴함

최근 svelte 쪽으로 힘 주는 모습: flowbite-svelte 홈페이지도 새로 개편하고, 트위터에서 svelte 인력도 구인

* skeleton

skeleton도 곧 block, template 같은 작업 진행하려나 봄. 무료/유료? 구독/구매? 같은 것들 선호도 조사하는 중

언제가 될 지는 모르겠지만, headless component 형태도 고려 중 인 듯 함 (https://github.com/skeletonlabs/skeleton/discussions/1367)

skeleton은 그냥 svelte/sveltekit에 집중하는 프로젝트라 조금 더 빠른 업데이트가 가능하지 않으까....? 하는 느낌만 있음

국내

* 코딩셀러 codingSeller

https://www.youtube.com/@codingSeller

* Hollo Coding

https://www.youtube.com/@hollocoding4189

해외

* this.stephie

https://www.youtube.com/@this.stephie9927

vercel sveltekit 공식 강좌 (https://vercel.com/docs/beginner-sveltekit)

* Joy Of Code

https://www.youtube.com/@JoyofCodeDev

블로그도 있어서 둘 다 활용하기 좋음

* Huntabyte

https://www.youtube.com/@Huntabyte

"10X Your SvelteKit Developer Experience in VSCode" 는 무조건 볼만함!

* LevelUpTuts

https://www.youtube.com/@LevelUpTuts

* hartenfellerdev

https://www.youtube.com/@hartenfellerdev

* Codevolution

https://www.youtube.com/@Codevolution

* lihautan

https://www.youtube.com/@lihautan

* Coding Garden

https://www.youtube.com/@CodingGarden

* Svelte Society

https://www.youtube.com/@SvelteSociety

* Svelte Mastery

https://www.youtube.com/@SvelteMastery

추천

* 기본

https://learn.svelte.dev 한 바퀴 둘러보고

this.stephie 는 선택 사항 (완전 초보인 경우 빠르게 훑어보면 좋음)

* 추천: 기본 + 확장

요놈들은 구독해놓고 꿀팁 및 최신 정보들 챙기기 

Joy Of Code

Huntabyte

Svelte Society

https://madewithsvelte.com/ 

손목이 아파와서, 마우스 좀 가깝게 쓰려고 텐키리스 키보드로 변경!!

* 특이사항

절대적인 키알못

여태까지 2만원 이하의 멤브레인만 사용했던 유저

(지금도 2만원 이하의 삼성 키보드를 사용 중)

* 구매 판단 기준 (중요도)

배열: 5 (87 텐키리스만 해당. 문서 작업할 때 은근 6key 많이 사용해서 미니배열은 패스)

소음: 5 (회사 + 집 몰컴용)

가격: 4 (처음에는 10만원 언더로 생각했는데, 이거저거 사다보니 15만원까지 올라감 ㅠㅠ)

키압: 3 (힘이 덜 들면 좋겠음)

높이: 1 (팜레스트 따로 필요없었으면 좋겠음)

블루투스: 1 (있으면 좋고 없으면 말고)

디자인: 0 (아무거나 다 좋음)

LED: 0 (아무거나 다 좋음)

사용 후기

* 앱코 HACKER K150 텐키리스 레인보우 LED 게이밍 멤브레인 (블랙)

일단 가격이 아주 착해서, 텐키리스 적응할 수 있을까? 하는 의도로 구매해 봄

<장점>

무조건 가격. 소음도 굿.

<단점>

방향키랑 6key가 너무 가까워서 처음에 적응하는 데 살짝 시간이 걸렸음

키압은 처음에는 몰랐는데 이후 다른 키보드 쓰다가 돌아와보니 조금 무거운 감이 듬 

(기존 삼성 키보드도 무겁게 느껴지는 거 보니, 멤브레인이라 그런 듯)

* Keychron C1 Retro 텐키리스 기계식 유선 키보드 (적축)

10만원 언더의 적축(소음때문) 키보드 중에 디자인만 보고 고름

<장점>

무난함

<단점>

적축이 조용한 편이라고 하던대, 사무실에서 쓰기에는 무리가 있음.

장패드 깔고 윤활까지하면 괜찮다고는 하던 대, 나에게 그런 의지는 없음 (아예 저소음 적축으로 가는 게...) 

키 반발력이 은근히 좀 돼서 요것도 살짝 힘이 들어감

내가 은근 왼손 손목을 많이 내려서 타이핑 하는 지, 팜레스트 없이 사용했더니 왼쪽 손바닥이 ctrl/win/alt쪽을 가끔 누름

* COX CK87 SLIM LP PBT (블랙, 적축)

팜레스트 쓰기는 귀찮고 로우 프로파일이 더 조용하다는 이야기를 듣고 구매해 봄

더 저렴한 앱코 모델도 있었는데, 이게 더 신상이라서 무지성으로 고름

<장점>

팜레스트 필요 없음. 확실히 "Keychron C1 Retro" 보다는 조용함

<단점>

생각보다 키가 예민하다고 해야하나... 가끔 코딩하다가 손 올려놓고 멍잡을때가 있는 데, 키가 가끔 눌림

* 한성컴퓨터 GK893B SPORTS 한글 (투톤 블랙, 50g)

일단 위 "COX CK87 SLIM LP PBT" 모델 1주일 정도 쓰다가,

이왕 지름신 온 거 무접점도 써보자고 해서 지름

<장점>

조용함 (약간 저음(?)이라고 해야하나, 듣기에 거북함이 좀 덜 함)

<단점>

3일정도 사용했는데, 아직까지 딱히 불만은 없음

최종 결정은요...?

일단 저는 "한성컴퓨터 GK893B SPORTS" 메인으로 가려고 합니다

근데 회사/집 2개 구매하고 나니, 35g 모델도 있네......ㅠㅠ

손목이 아파와요 그래서 이상해보이지만 vscodevim 플러그인을 쓰기로 했어요

* 모든 키 바인딩을 vim 기반으로 변경

손목이 아파와서, 키바인딩 vim 기준으로 통일!!! 키보드도 텐키리스로 변경!!! (키보드 이야기는 다음편에...)

에디터들 너무 쓰는 게 많아서 헷갈리기도 하고 (vscode, vs2022, intellij, android studio, ...)

요즘에는 코드 에디팅은 vim 위주로 쓰고, 빌드/디버깅 같은거는 vscode 단축키 이용하는 형태로 쓰고 있어요

* 평가? 후기?

vim 기능 영끌해서 사용하시는 분들은 조금 불편하실 수 도 있어요. 적절히 타협은 하셔야 합니다

* 그냥 vim(nvim) 쓰시죠?

플러그인 세팅이 이제 너무 귀찮아요.. 나이를 너무 먹...

윈도우에서는 리눅스만큼 뭔가 느낌이 매끄럽질 않아요... (맥은 회사에서 안 사줘요)

* vscode 기본 단축키 엄청 좋은대요? 님 연식이 너무 오래돼서 그런거아님?

네 님말맞

vim 사용자를 위한 유용한 설정

* workbench.editor.revealIfOpen: true

코드 따라갈 때 새 탭 계속 열리는 거 어느정도 완충해 줌

* workbench.editor.showTabs: false

현재 탭에서 다 열림!!

vim 사용자를 위한 유용한 단축키

* gb

Add selection to next Find match (vscode 단축키: Ctrl + D)

* gcc

Toggle Line Comment (vscode: Ctrl + /)

* gc

visual 모드로 선택 한 라인들 코멘트 처리

Toggle Line Comment (vscode: Ctrl + /)

* gC

Toggle Block Comment (vscode: Shift + Alt +A)

* gd

Go to Definition (vscode 단축키: F12 또는 Ctrl + Click)

여러 개 나올 경우, j/k로 선택 가능

* gh

Show Hover (vscode 단축키: Ctrl+K Ctrl+I 또는 Mouse Hover)

링크

vscodevim 플러그인

[드림코딩엘리] Vim 제대로 가르쳐 줌

[BenAwad] Why I'm a Better Developer than You

프로그램을 go embed로 묶어서 배포해보려고 해요

* 왜 그런짓을? 그냥 원래있는 installer나 packaging 이용하면 안 되나요? zip 파일로 압축하거나..

1. 사용하시는 분들이 컴퓨터를 잘 모르실 경우 아주 유용합니다.. 보통 윗 어르신들...ㅠㅠ

(예: install 어찌 뭐 어쩌라는거야? zip 파일 실행해도 아무것도 안 되는데? 등등)

2. 여러 프로그램 또는 에셋들을 한 번에 배포하는 경우에도 행복합니다

런타임에 다운로드 받아서 처리하는 것도 방법이겠으나 버전관리 등의 구찮음이 없습니다

3. 배포 방식을 하나로 가져갈 수 있어서,  관리 포인트가 적어지는 이점도 있습니다

4. 물론 위와 같은 상황이 아니라면 과한 선택입니다

nodejs 만 이용한다면

- https://github.com/vercel/pkg 를 이용하거나

- https://github.com/vercel/ncc 또는 https://github.com/rollup/rollup 같은걸로 번들링 후 + node.exe 파일 같이 배포

python은 뭐 워낙 유명한 pyinstaller 같은 것을 이용하시는 게 더 좋습니다

- https://github.com/pyinstaller/pyinstaller 

* 그래서 어떻게 하나요?

//go:embed myProgram.zip
var appZip []byte

끝!!!

1. 모든 에셋들을 zip으로 묶음

    -- zip으로 묶는 건 파일 크기를 줄이고, 관리 편의를 위함이지 필수는 아님

2. go embed로 포함

3. go 프로그램 실행 시 압축 해제 또는 파일 쓰기

4. 실제 메인 프로그램 실행

(대략 go 바이너리로 인해, 2MB 정도의 용량이 추가됩니다)

참고 사이트

https://pkg.go.dev/embed

일정

우여곡절 끝에 flutter 사이드 프로젝트 완료!

도중에 프로젝트 방향 자체가 바뀌어서 예상보다 더 늦어졌네 ㅠㅠ

05월: dart/flutter 기본 학습

06월: 프로젝트 설계

07월: 업무 크리!

08월: 개발 1차 완료

09월: 업무 크리!

10월: 백엔드 개발하시는 분의 의견으로, 프로젝트 재설계 (GUI도 당연히 새로~ ㅋㅋㅋ)

11월: 개발 완료

Flutter 총평

* 장점

너무 너무 만족스럽게 작업함.

핫리로드야 말 할 것도 없고,

pub 위젯들 퀄리티도 상당히 좋고,

커뮤니티도 활발함 (블로그/유튜브 등에 좋은 컨텐츠들이 많다!)

* 단점

앱 개발 자체로는 크게 불만인 부분이 없었음

굳이 꼽자면 앱 용량이 네이티브 보다 크다는 것 정도?

* 기타

웹은 아직 무리이다! (flutter가 아니고, 내가하기엔 무리...)

- 앱 완료 후, 삘받아서 레거시 백오피스 웹 프론트쪽 도전했다가....

- 대시보드까지는 어째저째 만들었는데, 스크롤/테이블 등 처리하다가 난항을 겪고 일단은 보류

GetX 총평

상태관리, 네비게이션, 다국어, 기타유틸(벨리데이터, 스낵바 등) 모두 만족스럽게 사용함

프로젝트 구조 잘 정해놓고 사용해야 함

- 자유도가 높아서 프로젝트 구조 잘 정해놓지 않으면, 엉망진창이 될 가능성이 아주 높다

좋은 구조 잘 모르겠다면 bloc 이용하는 것도 좋은 접근

참고한 사이트들

* 위젯

https://www.flutterclutter.dev/
https://flutter.syncfusion.com/#/
https://fluttergems.dev/
https://flutterarsenal.com/index.html
https://itsallwidgets.com/
https://flutterawesome.com/

* GetX

The Flutter GetX Ecosystem ~ State Management

The Flutter GetX Ecosystem ~ Dependency Injection

초보자 보일러 플레이트로 괜찮음

Flutter GetX Tutorial for Beginners | Full Course in 3 hours (유튜브 GetX 전반적인 부분 다 다룸)

* 기타

플러터 디자인 패턴

quicktype.io (json > dart 코드 변환, freezed도 지원 함)

Flutter tips and tricks

보통 간단한 윈도우 툴 만들 때는, winform을 애용한다 (디자인 너무 편해요)

이번에 net5로 갈아타면서 winform 디자인하는 데,

기존 net framework에 비해 느린 게 체감이 됨

"와 너무 느리다"까지는 아니지만, 1~2초 정도 딜레이가 있는 듯 함

약간 신경 쓰이는 정도... 특히 properties 쪽이 갱신되는 경우가 많음

어차피 간단한 툴 만드는거라 크게 문제는 없지만

net6에서는 개선이되면 참 좋겄습니다. 마소님

주저리...

그러고보니 이거 쓸 시간에, 속도 올리는 법이나 찾아볼껄

net framework 프로젝트로 디자인만 하고, net5에 복붙해서 사용해도 잘 되는 거 같긴하네..

awesome golang 에서 몇 가지 확인만 해 봄

https://github.com/avelino/awesome-go#gui

fyne

https://github.com/fyne-io/fyne

크로스플랫폼

material 디자인 기반

활발함

유니코드(cjk) 지원이 아쉽.... 자모 분리되는 현상이 있음

walk

https://github.com/lxn/walk

윈도우 전용

기존 win32 또는 winform 익숙한 사람이 쓰면 좋을 듯

-피로곰님의 lxn/walk 강좌: https://modu-print.tistory.com/641?category=863372

webview

https://github.com/webview/webview

크로스플랫폼

OS에 맞는 웹뷰 띄워서 웹으로 디자인 가능

(OS별 엔진: Cocoa/WebKit on macOS, gtk-webkit2 on Linux and Edge on Windows 10)

lorca

https://github.com/zserge/lorca

크로스플랫폼

chrome 직접 띄워서 CDP(ChromeDevtoolsProtocl)로 chrome과 통신

chrome 대부분 깔려있어서 배포 할 때는 편할 듯

창 제어 등 기본 윈도우 기능은 사용을 못 함

- webview와 동일한 아저씨가 만듬

- webivew 및 lorca 관련 영상: https://www.youtube.com/watch?v=ANcU1g7ZWdU 

go-webview2

https://github.com/jchv/go-webview2

윈도우 전용

webview와 비슷하나, 종속성 없는 단일 파일 빌드를 추구함 (CGo 안 쓰는 걸 좋아하시는 듯)

일단은 windows webivew2 만을 대상으로 하는 듯

webview2 런타임 설치 필요

- 왜 만들었는가: https://news.ycombinator.com/item?id=24118305

wails

https://github.com/wailsapp/wails

크로스플랫폼

webview + js/vue/react 까지 묶어서 빌드 제공함 (go-embed)

init, server, build 등 기본 CLI 툴 제공

v1은 windows 쪽 엔진이 구닥다리라, v2에서 webview2 엔진으로 갈아타려고 하는 듯

- 트러블슈팅쪽 가보면 죄다 windows 이야기 ㅠㅠ

- 실제로 go-webview2에서 컨트리뷰션도 하고 있음

뭐가 좋을까?

간단한 윈도우 툴 만들때는 wails가 가장 좋을 듯

- 웹 베이스라, UI 프레임워크 따로 공부할 필요가 없음

- react/vue 아무리 CLI 사용한다고 해도 환경 구성 너무 구찮......

- OS 브라우저 엔진을 사용해서 배포 파일 크기도 작고, 싱글파일 오예!!

- 물론 v2에서 webview2 엔진 적용이 된 다는 가정하에...

추가

- 2.2 기준으로 70~80Mb 메모리 사용함

- system tray, multiple window, auto update 등 유용한 기능도 로드맵에 있음

4.6.x까지 잘 쓰던 confuserEx가 net5 지원을 안 해서 알아봄

1. 빌드하고

2. obfuscar 돌리고

3. publish 전 난독화 파일로 교체하는 형태임

obfuscar global 설치

# dotnet tool install --global Obfuscar.GlobalTool --version 2.2.31

VS 2019 설정

Project\Properties\PublishProfiles\FolderProfile.pubxml:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <Configuration>Release</Configuration>
    <Platform>Any CPU</Platform>
    <PublishDir>..\publish\</PublishDir> <!--Optional for custom publish folder-->
    <PublishProtocol>FileSystem</PublishProtocol>
    <TargetFramework>net5.0-windows</TargetFramework>
    <RuntimeIdentifier>win-x64</RuntimeIdentifier>
    <SelfContained>false</SelfContained>
    <PublishSingleFile>True</PublishSingleFile>
    <PublishReadyToRun>False</PublishReadyToRun>
  </PropertyGroup>
</Project>

obfuscar.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Obfuscator>
  <Var name="InPath" value=".\obj\Release\net5.0-windows\win-x64" />
  <Var name="OutPath" value=".\obj\Release\net5.0-windows\win-x64\Obfuscated" />
  
  <!--To solves "Unable to resolve dependency:  PresentationFramework" for WPF project.-->
  <AssemblySearchPath path="C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App\5.0.8" />
  <!--To solves something what your project depdends like "Unable to resolve dependency: ...".-->
  <AssemblySearchPath path=".\bin\Release\net5.0-windows" />

  <Module file="$(InPath)\YourProjectOutput.dll" />
</Obfuscator>

Project.csproj:

<Project Sdk="Microsoft.NET.Sdk">
  ...

  <!--Append these at the end of your .csproj file.-->
  <Target Name="Obfuscation" AfterTargets="AfterCompile" Condition="'$(PublishProtocol)'!=''">
    <Message Text="Obfuscating" Importance="high" /><!--Optional to log a message.-->    
    <Exec Command="obfuscar.console.exe obfuscar.xml" /><!--Assuming you have installed Obfuscar.GlobalTool(https://www.nuget.org/packages/Obfuscar.GlobalTool). -->
    <Exec Command="COPY $(ProjectDir)$(IntermediateOutputPath)Obfuscated\$(TargetFileName) $(ProjectDir)$(IntermediateOutputPath)$(TargetFileName)" />
  </Target>
</Project>

CLI 로 하려면

publish 할 때 --no-build 옵션이 중요함

# obfuscar.console.exe obfuscar.xml
# dotnet publish -c Release -r win-x64 -p:PublishSingleFile=true --self-contained false --no-build

참고

publish 할 때, dll 파일 어디선가 사용 중 이면 오류 뜨니 주의하자

(ILSPY로 결과물 확인하다가 오류 떠서 괜히 시간 버림 ㅠㅠ)

링크

https://www.nuget.org/packages/Obfuscar.GlobalTool

https://github.com/obfuscar/obfuscar

https://github.com/obfuscar/obfuscar/issues/314)

pkg 기본 win-x64 이미지 리소스 변경하고 pkg 수행하면 됨

단 pkg 쪽에서 이미지 해시 체크하는 부분은 주석 처리 할 것

# 위치 및 파일
C:\Users\user\.pkg-cache\v3.1
fetched-v14.17.0-win-x64

# 해시 체크 부분 주석 해제
node_modules\pkg-fetch\lib-es5\index.js
Binary hash does NOT match. Re-fetching...

링크

https://github.com/vercel/pkg