Dev Guru Company

개발환경설정 1 에서 프로젝트 세팅을 하다가 저장하고 곰곰히 생각을 해보니 내가 개발할 환경에 딱 맞는 Template가 없다는걸 깨달았다. 그래서 현재 오픈되어 있는 wails용 svelte 템플릿 4가지를 조합해서 구성해보려고 했는데 설정 세팅이 만만치 않더라.

그래서 기존 프로젝트들을 모두 생성 후 나에게 필요한 템플릿 구성을 만들어보고 있었다. 그런데 wails 에서 template를 만드는 쉬운 방법을 마련해놓은걸 알게되었다. 

그래서 만들어보았다 

Wails Template 만들기 과정 소개

자신만의 템플릿을 만들고 싶다면 참고해서 따라해보면 쉽게 구성할 수 있을것 이다. 추천 좀 부탁..!!

이제 앞에서 설명하던 글들은 무시하고 wails-vite-sveltekit-ts-tailwind-template 으로 새로운 프로젝트를 생성하기로 한다.

wails init -n graduateapp -t https://github.com/dofstar/wails-vite-sveltekit-ts-tailwind-template.git

cd graduateapp

wails dev

wails build를 먼저 진행해야 하는게 맞지만 wails dev를 실행하면 build를 진행하면서 sveltekit 와 tailwind가 적용된 wails windows form이 실행되는걸 볼 수 있다.

3일동안 자료찾아보고 고민하고 지웠다가 다시 만들었다가 생쑈를 해서 만들었는데 얼추 완성본이 나오고 나니 눈물이 앞을 가린다. ㅠ.ㅠ 역시 나의 웹개발정신은 죽지 않았다!!!

이제 개발을 시작해보자 아자아자!!

가장 처음 개발해야 할부분은 각 거래소의 거래정보들을 websocket으로 안정적으로 받아오는지 확인을 하는데 있다.

그래서 Golang용 websocket 모듈이 쓸만한게 뭐가 있는지 살펴보니 Gorilla가 눈에 들어왔다.

일단 적용해보자. 더 고민하고 찾아봐야 시간만 간다.

https://www.gorillatoolkit.org/

https://www.olis.or.kr/license/Detailselect.do?lId=1092 

일단 무료로 써도 된다는것 같으니 패쓰~~

가장 있기있는 라이브러리들이 4가지 있다고 하는데 전부 추가를 해야 하나?

go get github.com/gorilla/websocket
go get github.com/gorilla/mux
go get github.com/gorilla/sessions
go get github.com/gorilla/handlers

일단 추가해보자.

github Repository를 만들고 회사에서 테스트겸 템플릿 다운을 받으려고 했더니 SSL 문제 떄문에 프로젝트 생성이 안되는 문제가 확인되었다. 보안적으로 많은 부분이 막혀있는 곳이라 좀 문제가 많은데 wails init 를 통해 템플릿 형태로 프로젝트 생성하는건 허용이되고 있다. 이게 어떤 이유로 되는지는 잘 모르겠다. 뭐 그부분까지 확인하려면 많은부분들을 확인해보고 알아봐야 하는데 템플릿을 만드는 주제와는 무관하므로 스킵하도록 하겠다. 그래서 왜 -t 옵션으로 프로젝트 생성을 못하는지 확인을 해보니 다음 설정파일이 누락되어 있어서 안되고 있는걸 확인했다.

template.json을 추가해서 내용을 등록했다.

{
    "name": "Wails + Vite + Sveltekit + Typescript + TailwindCSS template",
    "shortname": "wails-vite-sveltekit-ts-tailwind-template",
    "author": "dofstar(dofstar@gmail.com)",
    "description": "Wails + Vite + Sveltekit + Typescript + TailwindCSS template",
    "helpurl": "https://github.com/dofstar/wails-vite-sveltekit-ts-tailwind-template"
  }

파일을 추가 후 wails init 명령어로 프로젝트를 생성해보니 정상적으로 생성되었다.

이 template.json 설정파일의 내용은 추후에 어떤 용도로 사용될지 설명을 할텐데 일단 등록해두자.

자 템플릿 만들기 002 까지는 불필요한 파일들 싹 지우고 액기스 파일들만 남겨두고 순수 설정파일과 소스 파일들만 남겨뒀다.

Wails + Vite 설정만 되어있는 구조인데 이제 사용할 프레임워크들을 추가해보도록 하자.

frontend의 핵심 기술인 Sveltekit 과 Typescript 를 추가해보도록 하자.

frontend 폴더를 새롭게 교체하게 될텐데....

==============

헉.. wails 명령어에 template 기본을 생성해주는 기능이 있다.

그렇다면 제공된 기능을 최대한 사용하는 구조로 템플릿을 만들어봐야지!!

-- 끝

Rust - Tauri를 잠시 보류하고 Golang 기반의 Wails를 선택하고나니 좀 길이 보이기 시작했다.

Tauri가 막 엄청나게 어렵고 복잡하기보다는 시간적인 압박감때문에 계속 진도가 안나갔던것 같은데 심리적인 안정감 떄문인지 훨씬 진행속도가 빠르다는걸 느끼고 있다.

일단 거두절미하고...

Wails와 어떤기술을 사용 해야할지 검색을 좀 해보니 다음 기술들이 조합이 되어야 할 것 같았다.

Wails + Vite + Sveltekit + Typescript + Tailwind 조합이 딱 적당할 것 같았다.

각 기술들의 장단점들인 인터넷에 널려있으니 검색해도록 하자. 혹시 댓글로 요청이 많이 오면 별도로 정리하는 글을 적어보도록 하겠다.

Wails 개발홈페이지에서 제공하는 템플릿 기반으로 프로젝트를 생성하려다 보니 문제가 좀 있었다.

https://wails.io/docs/community/templates

원하는 기술에 딱 부합되는 템플릿이 없었다. 

wails-vite-svelte-tailwind-template 가 제일 적합한것 같았는데 typescript 가 빠져있었고 sveltekit이 적용이 안되었다. 게다가 관리를 안해서 그런지 프로젝트를 생성해서 구동을 해보면 정상적으로 실행이 안되고 각 config 들을 손을 좀 봐야 정상 작동을 하는 수준이있다.

그래서 해당 template를 fork 받아서 수정해서 쓰려고 했는데 svelte와 sveltekit 설정이 조금 상이해서 약간의 수정으로 처리하기가 좀 어려운감이 들었다. 물론 웹쪽에 아주 전문가 분들이라면 뚝딱뚝딱 수정해서 사용하기는 하겠지만....

그래서 진행하는 프로젝트는 wails-vite-svelte-tailwind-template를 수정해서 진행하기로 하고 template를 새롭게 구성해보겠다고 마음먹었다. template 만드는건 처음 해보는 시도이기도 하고 웹쪽의 각 기술들이 어떤식으로 조합해서 구성해야 하는지 기본부터 한번 해봐야 겠다는 생각도 들어서였다.

그래서 만드는 과정을 블로그에 기록하기로 하고 추후 다른 템플릿 만들때 참고 자료로 사용하면 좋을것 같아서 짬짬이 시간내서 진행하기로 한다. 

일단 https://github.com/dofstar/wails-vite-sveltekit-ts-tailwind-template 에 등록해서 작업해보도록 하겠다.

(지금 당장 생성된건 아니니 조금만 기다려달라..)

기술 조합은 다음과 같다.

Wails : 2.1.0
Vite : 3.18
SvelteKit : 1.0.0 (RC)
Typescript : 4.8.4
Tailwind : 3.1.8

Wails 도 Electron이나 Tauri 처럼 초기 개발환경 설정은 따라하기만 하면 쉽게 설정이 가능하다.
일단 설치할 리스트를 살펴보자

• Go
• nodeJs
• Git

일단 크게 설치할 내용은 3가지 이다 Git은 사용할지 말지 결정하고 설치하면 되는데 소스 이력관리를 위해서는 가능하면 설치하도록 하자. Git 설치는 너무 간단한 내용이라 여기서는 생략하도록 한다. 검색해보면 얼마든지 있는 내용이라서 추가적으로 작성할 필요가 없다.

Go 설치

https://go.dev/

Download 버튼을 클릭하여 개발할 환경에 맞는 인스톨러를 다운받아 설치한다. 지금은 Windows에서 개발하고 사용할거라서 Microsoft Windows 용 인스톨러를 설치한다.

설치 방법은 크게 특이한게 없다 실행 후 계속 다음버튼을 클릭하면 무난히 설치가 될것이다.
Golang 은 타 언어들 처럼 별도의 패키지 관리자가 없다. 그냥 go 명령어로 모든걸 관리하기 때문에 Rust의 Cargo나 nodeJs의 npm 같은걸 사용하지 않는다.

NodeJs 설치

https://nodejs.org/en/

둘중 어떤걸 설치하는지 망설여지는 사람이 있을텐데 LTS 는 Long Term Support 의 약자로 해당버전으로 오랫동안 지원하도록 고안된 안정된 버전이다. Current는 현재 최신 버전을 의미하는데 필자는 그냥 최신이 좋아서 Current 버전으로 설치하도록 하겠다. 뭐 개인용 프로젝트인데 큰 의미가 없다. 개발하면서 그동안 개선된거 누리면서 개발하다가 큰문제가 생겨서 막히는 순간이 오면 LTS 버전으로 돌아가면 된다.
하지만 큰 규모의 프로젝트에서 사용한다면 LTS를 설치하여 개발하는게 당연히 맞다.

Git 설치

https://github.com/

아뭏튼 여기서 설치하도록 하자. 별다른 설정은 하지 않을테니 쉽게 설치할 수 있을것이다.

자 위의 3가지를 설치했다면 npm 으로 Wails와 별도의 설치를 진행하도록 하자.

Wails 설치

Wails는 Go를 설치하면 같이 설치되는것 같다. 별도 설정없이 Wails 명령어를 사용할 수 있다.
일단 개발용 프로젝트를 만들어보자.
프로젝트명은 늘 그렇듯이 Graduate App 이다.

wails init -n graduateapp-svelte-tailwind -t svelte-ts

-n : New
graduateapp-svelte : 프로젝트명
-t : Template
svelte-ts : 사용할 Frontend Framework (Svelte + Typescript)
이런 의미로 사용한다.
생성된 프로젝트 폴더구조를 확인해보자.

위 이미지는 프로젝트 생성 직후 폴더 구조 캡쳐한 내용이다.
나머지는 내일 다시....

2주전에 Tarui로 개발하기로 결정한것을 잠정 보류하기로 했다.

Rust 라는 언어에 대한 학습곡선도 있긴하지만 다른 부분도 학습해야 할 부분이 많아서 고민하던 중에 Go-lang 진영에서 개발된 Cross Platform 이 있다는걸 알게되었다. 일단은 뛰어난 성능이 최우선이 아니라 빨리 만드는게 더 중요한 포인트여서 Rust-Tauri-Svelte 개발건은 잠시 보류하기로 한다. 게다가 더 큰 문제는 회사에서 방화벽 때문에 Rust 관련 module이 다운로드가 안된다는 점이다.

Rust-Tauri는 추후에 여건이되면 동일한 로직으로 다시 진행을 해볼것이다.

최근에  V2.0으로 업그레이드 되었다고 한다.

https://wails.io/

구조는 Electron, Tauri와 유사하다.

Go로 만들어진 Winform 프레임에 Frontend 웹 프레임워크로 개발을 한다.

잠깐 환경설치를 해보니  Rust-Tauri 기반 개발 설정과 유사점이 많다.

https://wails.io/docs/gettingstarted/installation

이곳에서 설치부터 튜토리얼까지 모두 볼 수 있다.

이미 비슷한류의 Cross Platform 기반 설정을 해본 개발자라면 설치 문서만 봐도 금방 기본적인 프로젝트 설정은 해볼 수 있고 build 까지 해볼 수 있을것이다.

어려운건 없다. 단지 프로젝트 설정을 하고 그 다음 부터가 문제지...

추가되어야 할 모듈들도 좀 있고 설정방법 사용방법 체크하려면 이것도 쉽지는 않을듯하다.

이번에는 변경하지않고 GO-Wails-Svelte 기반으로 만들어보겠다.

오늘 Go-lang에 대한 기초를 하루 통째로 학습했다. 예전부터 드문드문 보기는 했었는데 오늘 각잡고 풀로 소스코딩 따라하기와 개념학습을 해보니 배우는데 막힘이 없다. 물론 한 2-3가지 부분은 아직 체크해놓고 있는 상태이지만 말이다.

예전 javascript 때부터 항상 먹구름 같았던 Closure 에 대한 개념을 이번에 Golang 학습하면서 확실히 이해했고 Go루틴도 다시 확실하게 개념을 잡았다.

내일 한 번 더 재학습을 마치고 바로 Svelte 와 추가해서 사용할 모듈에 대해 학습을 해봐야겠다.

Electron
https://www.electronjs.org

특징 : Chrominum 을 기반으로 여러 Frontend Framework 를 조합해서 개발

Tauri
https://tauri.app/

특징 : Rust 언어로 만들어진 Form 에 여러 Frontend Framework 를 조합해서 개발

WAILS
https://wails.io

특징 : Go 기반에 여러 Frontend Framework 를 조합해서 개발

===================================

대표적인 Cross Plaform Application 개발 기술들이다.

Electron이 가장 오래되었고 각종 유명한 프로그램들이 Electron을 기반으로 만들어졌다.

가장 대표적인건 VS Code 이다. 

하지만 Chrominum 자체 배포에 용량이 크다는 문제점이 제기되는데 대안으로 Rust 언어로 만들어진 Tauri가 차츰 조명을 받으며 부상하고 있다. 

그리고 Tauri와 WAILS 의 비교를 보면 Tauri가 현재 좀더 핫하긴한데 특이한건 Wails의 성장속도가 꽤 가파르다는 사실이다. 아무래도 Rust 언어의 학습곡선보다 훨씬 낮은 Go 언어의 장점이 개발자들에거 더 어필하고 있는것 같다. Wails의 특장점은 아직 자세하게 파악되지 않았다. 그래서 다음 링크를 대체하려고 한다.

https://www.libhunt.com/compare-tauri-vs-wails