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

일단 추가해보자.

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