Dev Guru Company

SvelteKit 1.0 이 출시된 지 불과 2주가 지났습니다! 아직 하지 않았다면 라이브스트림, 새 웹사이트 및 learn.svelte.dev를 확인하여 SvelteKit 의 모든 기능 을 단계별로 알아보세요.

자세히 알아 보시죠.

SvelteKit의 새로운 기능

• @sveltejs/kit1.0이 나왔습니다! 모든 향후 릴리스는 semver를 따르며 변경 사항은 CHANGELOG 에 주/부/패치로 나열됩니다 .
• Storybook 및 Histoire에 대한 지원이 향상되었습니다( #7990 ). 이러한 도구를 완벽하게 지원하기 위한 작업이 진행 중입니다( storybook#20239 ).
• vitePreprocess이제 기본 전처리기입니다. 와 ( #8036 ) 의 차이점 은 문서 를 참조하세요 .vitePreprocesssvelte-preprocess

브레이킹 체인지:

• +(layout|page)(.server)?.js및 +server.js파일 에서 알 수 없는 내보내기(밑줄로 시작하는 경우 제외)가 더 이상 허용되지 않습니다 ( #7878 ) .
• __data.json이제 URL에서 제거되었습니다( #7979 ) .
• sveltekit()이제 Vite 플러그인 배열에 대한 약속을 반환합니다( #7994 ) .
• embedded기본적으로 꺼져 있는 새 옵션은 SvelteKit을 포함할 때 링크 클릭에 도움이 됩니다( docs , #7969 ) .
• builder.generateFallback(fallback)자동 폴백 생성이 ( #8013 ) 으로 대체되었습니다 .
• invalid()지금 fail()이고 ValidationError지금입니다 ActionFailure( #8012 )
• 이제 SvelteKit에서 잘못된 로드 응답에 대한 오류가 발생합니다( #8003 ) .
• SvelteKit은 현재 Vite 4를 사용하고 있으며 Svelte가 필요합니다 peerDependency( ^3.54.0# 7543 ) .
• ssr가 거짓이고 거짓 이 아닐 때 셸이 사전 렌더링 됩니다. prerenderssr도 거짓인 경우 사전 렌더링이 거짓인지 확인합니다( #8131 ) .
• 제거/변경된 API에 대한 경고 및 오류가 제거되었습니다( #8019 ) .

Svelte의 새로운 기능

• 이제 options.direction인수를 사용자 지정 전환 함수에 전달할 수 있습니다( 3.54.0 , #3918 ) .
• @const이제 선언된 함수 에서 변수를 업데이트할 수 있습니다 ( 3.54.0 , #7843 ) .
• svelte/elementsSvelte /HTML 유형 정의에 추가되었습니다( 3.55.0 , #7649 ) .

언어 도구의 새로운 기능

Svelte 확장 및 언어 도구에는 이제 몇 가지 새로운 최소 버전 요구 사항이 있습니다.

• 노드 버전은 현재 16입니다.
• TypeScript 버전은 이제 4.9입니다.
• Svelte 버전은 이제 3.55입니다.

다음 기능도 릴리스되었습니다.

• 누락된 처리기 빠른 수정( #1731 )
• Svelte 앵커 누락 속성 코드 작업 추가( #1730 )
• 더 나은 커밋 문자 처리( #1742 )
• 옵션 추가 --preserveWatchOutput( #1715 )
• Svelte Stores를 포함하도록 Quickfix 향상( #1789 )
• SvelteKit 프로젝트에서 SvelteKit 파일 컨텍스트 메뉴만 표시( #1771 )
• satisfies가능한 경우 연산자를 사용하십시오 ( #1770 ) .

출시되지 않은 변경 사항을 포함하여 Svelte 컴파일러에 대한 모든 변경 사항은 CHANGELOG 를 확인하십시오 .

커뮤니티 쇼케이스

Svelte로 구축된 앱 및 사이트

• Svelte Recipes 🧑‍🍳 는 일반적인 데이터 시각화 문제에 대한 코드 스니펫을 제공합니다.
• Everything Svelte 는 최신 웹 애플리케이션을 구축하기 위해 알아야 할 모든 것을 가르치는 새로운 과정입니다.
• CSS 타임라인 은 CSS의 역사와 진화를 보여주는 타임라인입니다.
• GitBar 는 풀 리퀘스트 리뷰를 보여주는 시스템 트레이 앱입니다.
• Texture Lab 은 모든 텍스트에서 게임용 인스턴트 텍스처를 생성합니다.
• Totems 는 맞춤형 스탠드와 지지대를 제작하는 스튜디오입니다.
• PeopletoNotion 은 한 번의 클릭으로 Notion에 LinkedIn 프로필을 추가하는 Chrome 확장 프로그램입니다.
• DeckDev 는 Magic: The Gathering의 덱 빌더입니다.
• 기본 바로 가기 는 브라우저에서 키보드 바로 가기를 검색하는 도구입니다.

학습 리소스

날씬한 사회에서

• Svelte Society - 2022년 12월 런던 에서 Antony와 Rich의 두 가지 강연이 각각 진행됩니다. Rich의 강연 "Mistakes were made"는 SvelteKit 1.0 회고전입니다.
• Brittney Postma 의 Netlify Edge 기능 이 포함된 SvelteKit
• Sirens Stream: Skeleton - Chris Simmons 및 Brittney Postma와 함께 완전한 기능을 갖춘 UI 툴킷
• 사이렌: 엔터프라이즈용 SvelteKit - Lacey Pevey가 사이렌에 합류하여 엔터프라이즈 수준에서 SvelteKit을 사용하여 대화합니다.
• 사이렌: 양식 작업 - Kev는 다시 사이렌에 합류하여 SvelteKit의 양식 작업에 대해 이야기하고 SvelteSirens.dev에서 발표자 제출을 위한 새 양식을 만듭니다.

보려고

• SvelteKit은 Fireship 의 내 여주인 입니다.
• Gui Bibeau 가 3분 이내에 Sveltekit 1.0
• 어떤 Svelte UI 라이브러리를 사용해야 합니까? Joy of Code의 Svelte(Iconify)를 위한 최고의 아이콘 라이브러리

읽다

• Gautier Ben Aïm의 Svelte로 이메일 렌더링
• 이제 React가 죽었습니다. 다음으로 중요한 것은 무엇입니까? 솜낫 싱
• SvelteKit이란 무엇입니까? 왜 관심을 가져야 합니까? 틸라
• Jef Meijvis의 Sveltekit API 끝점
• Svelte 지원이 업데이트된 Chart.js 4.0 이 출시되었습니다.
• 사용자 지정 Svelte 미디어 쿼리 저장소 만들기 Rik Schennink 작성

라이브러리, 도구 및 구성 요소

• Konsta UI 는 React, Vue 및 Svelte용 Tailwind CSS로 구축된 완벽한 픽셀 모바일 UI 구성요소 라이브러리입니다.
• 아마도kasper/modal-svelte 는 Svelte의 모달 구성 요소입니다.
• deepcrayon/scrolltron 은 OBS Studio용 뉴스 티커 오버레이입니다.
• 이제 JetBrains WebStorm 2022.3 에 Svelte 지원 기능이 내장되어 있습니다.
• 이제 SvelteKit 에서 NextAuth.js를 사용할 수 있습니다.
• SvelteKit CAS 인증 은 SvelteKit에서 CAS/SSO를 쉽게 사용할 수 있는 기능 집합입니다.
• @macfja/sveltekit-session 은 SvelteKit에 대한 세션 관리를 수행하는 쉬운 방법입니다.
• @svelte-plugins/tooltips 는 Svelte로 작성된 기본 툴팁 구성 요소입니다.
• tRPC-SvelteKit 은 SvelteKit 애플리케이션을 위한 종단간 유형 안전 API를 제공합니다.
• SvelteKit Tailwind Blog Starter 는 SvelteKit + Tailwind CSS를 위한 쉽게 구성 및 사용자 정의 가능한 블로그 스타터입니다.
• 무료 Svelte Accelerators 는 프로젝트를 바로 시작할 수 있는 Svelte 및 Sveltekit 오픈 소스 코드 목록입니다.

새해 복 많이 받으세요 🎆 Reddit 또는 Discord 에서 놓친 것이 있으면 알려주세요.

원문 : 

https://svelte.dev/blog/whats-new-in-svelte-january-2023

https://sveltesociety.dev/

Svelte 커뮤니티 사이트입니다.

Templates, Components, Tools, Recipes 등을 검색해 볼 수 있다. 아쉽지만 영문 사이트라서 구글 번역으로 

아쉬움을 해결하도록 하자.

개발환경설정 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

일단 추가해보자.

글을 읽는 분들에게 미안한 마음이 들지만 앞단에 진행되던 내용들도 뭐 나름 의미가 있기는 하다.
003 글 마지막에 template 기본을 만들어주는 기능을 발견하고 바로 작성하던 글을 종료시켰다. 그럼 새롭게 알아낸 방법으로 template를 만들어보기로 하자.
https://wails.io/docs/guides/templates/

01. 템플릿 기본 생성하기

아주 간단히 template 기본 틀을 생성할 수 있다.

wails generate template -name {프로젝트명}
ex)
wails generate template -name wails-vite-sveltekit-ts-tailwind-template

앞에서 등록한 글들에서 본 폴더/파일 구조와 별반 다르지 않다고 느낄 수 있는데 자세히 보면 설정 파일들의 파일명이 다르다는 걸 알 수 있다.
package.tmpl.json
, app.tmpl.go
, go.tmpl.go
, main.go.tmpl
, wails.tmpl.json
이렇게 tmpl이라는 문구가 추가되어 생성되어 있다.

대표적으로 wails.tmpl.json 파일을 오픈해보면 변경될만한 정보들이 {{ }} 로 감싸져 있는 걸 볼 수 있다. 이 부분이 -t 옵션으로 프로젝트를 생성하게 되면 상황에 맞는 값들이 대입되어 온전한 wails.json 파일이 생성되게 된다.
그런데 template 프로젝트를 생성 후 frontend 폴더를 보면 frontend 소스가 없고 dist 폴더와 package.tmpl.json 만 있는 걸 볼 수 있다. dist는 frontend 폴더에 개발을 하면 빌드 시 재 구성되는 부분이라 확인할 필요가 없고 package.tmpl.json은 개발에 사용할 의존 모듈들에 대한 정의들이 정의된 설정 파일이다. 개발된 샘플 소스가 없다.
template 프로젝트를 생성할 때 -frontend 옵션이 있는데 별도로 구성된 javascript 프로젝트를 frontend로 포함시켜서 템플릿을 완성시켜 주는 기능이 포함되어있다.
나는 sveltekit + vite +typescript + tailwind 를 사용할 예정이므로 이 네 가지를 적용한 프로젝트를 별도로 만들어보겠다.

일단 앞에서 샘플로 생성한 폴더를 삭제한다.

rmdir /s /q wails-vite-sveltekit-ts-tailwind-template

02. Frontend 기술 적용된 프로젝트 만들기
https://kit.svelte.dev/docs/introduction

sveltekit을 설치하기 위해 사이트에 접속해 보자.
그럼 다음 내용을 확인할 수 있다.

나는 npm을 사용하지 않고 pnpm을 사용할 것이므로 위 내용과는 조금 다르게 프로젝트를 생성하겠다.

pnpm create svelte@latest sveltekit-template

문답형 설치가 진행된다.

Skeleton Project로 템플릿을 생성하니 너무 없어 보여서 SvelteKit demo app으로 선택하기로 한다.

Typescript 를 사용할 예정이므로 두 번째 항목을 선택한다 (본인이 만들 템플릿에 따라서 선택하면 된다. No는 VanillaJS를 의미한다.)

ESLint (Option)
Prettier (Option)
Playwright (Option)
위 세 가지 선택 여부를 결정하고 프로젝트를 생성한다. (위 3가지는 검색해서 한번 알아보도록 하자)

프로젝트가 생성되면서 다음 절차를 통해서 실행해볼 수 있다는 문구가 나타난다. (npm을 pnpm으로 바꾸고 pnpm에서는 run 명령어를 생략해도 되므로 run을 생략하고 실행해보자(4 번에서)
그리고 git 사용 여부는 본인 선택이므로 사용할 거면 git 설치 부분을 학습하고 설치 후 3번을 진행하도록 한다. 단 지금은 템플릿을 만드는 단계이므로 맨 마지막에 진행해도 상관없을 것 같으므로 지금은 3번은 스킵하도록 한다.

cd sveltekit-template
pnpm install
pnpm dev -- --open

pnpm install 실행 중 corepack을 통한 update를 하라고 하는데 지금 정확히 잘 모르겠다. 추후 알게 되면 해당 글에 업데이트하도록 하겠다.

다음과 같이 devDependencies에 의존성 모듈들이 추가되었다고 나타난다. 모두 최신 버전인 것 같다.
(Skeleton 으로 생성했을 때와는 의존성 모듈 구성이 조금 틀리니 이상하다고 겁먹지 말자)
이제 정상적으로 구동이 되는지 실행해보자.
pnpm dev -- --open

크롬 브라우저를 실행 후 Local에 있는 주소를 복사해서 붙여 넣어 보자.

정상적으로 실행되는 걸 확인했다.
이번에 사용할 기술들 중 3가지가 해결되었다.
Sveltekit + Vite + Typescript
다음으로 Tailwind css 프레임워크를 추가해보자.
https://tailwindcss.com/docs/guides/sveltekit

8 단계로 설명해 놓았는데 1단계는 이미 처리된 거고 2단계부터 적용해보자

항상 유의해야 할 부분이 npm을 사용하지 않고 pnpm을 사용하는 거다.

pnpm install -D tailwindcss postcss autoprefixer svelte-preprocess

devDependencies가 추가되었는데 svelte-preprocess 부분은 이미 등록되어 있어서 누락되었다.

pnpx tailwindcss init tailwind.config.cjs -p

두 가지 cjs 파일이 생성되었다.
이제 사용할 모든 프레임워크와 모듈이 추가되었으므로 wails 템플릿을 다시 만들어보자.

02. frontend Project로 wails template 생성하기

cd ..
wails generate template -name wails-vite-sveltekit-ts-tailwind-template -frontend ./sveltekit-template

sveltekit-template 폴더 상위로 이동한 후 template 을 생성해보자.

정상적으로 생성되었다.
알기 전까진 꽤 어렵게 생각되었는데 구조를 알고 나니 큰 어려움 없이 사용자 Template를 생성할 수 있었다.
그렇지만 아직 끝난 게 아니다.
일단 템플릿 형태이기 때문에 wails build 해서 바로 실행할 수 있는 구조가 아니다 . wails 의 -t 옵션을 통해서 프로젝트를 생성해 줘야 정상적인 값이 설정된 프로젝트가 생성되기 때문이다.
그리고 wails로 template를 생성하면 기본적으로 npm을 사용하는 구조로 생성된다.
그래서 wails.tmpl.json 파일을 열어서 npm 부분을 수정해주자.

다른 템플릿들을 보면

다음과 같은 옵션들이 있는데 추가해주자 : 추가하지 않으니 실행이 안된다.
두 번째 template.json 파일 내용을 수정하도록 한다.

내용을 보고 자신에게 맞는 구성으로 수정해서 등록하도록 한다.
READMD.md 파일과 NEXTSTEPS.md 같은 파일들을 자신에 맞게 수정 후 저장한다.
자 일단 github에 올려보자. open 할 template이기 때문에 Repository 등록할 때 public으로 등록해야 한다.
git을 잘 사용하시는 사람은 git 명령어로 빠르게 처리해도 좋고 좀 미숙한 사람들은 VSCode에 있는 기능을 이용해 자신의 Repository에 등록하면 된다.

Initialize Repository 버튼을 클릭하면 현재 Project에 git init 가 실행되어 git 적용 환경이 된다.

상단 Message 부분에 "Initialize Template" 를 입력하고 Commit 버튼의 오른쪽 화살표를 클릭해 Commit & Sync 항목을 클릭한다.

3개 파일이 저장이 안 되었다고 저장 후 Commit을 진행한다고 한다. 각자 상황에 따라 메시지가 다를 테니 적절히 대처한다.

public repository를 선택한다.

저장소가 없던 게 생겼다. 그렇지만 클릭해 보면 정상적으로 소스가 upload가 안되었을 것이다.
다시 한번 Message 부분에 "initialize template" 등록 후 commit & Sync 버튼을 클릭해보자

여차저차 해서 정상적으로 개인 github에 등록이 되었다.
github에 관한 내용은 음.. VSCode로던지 직접 git 명령어로 등록하던지 별도로 학습해서 적용해보도록 하자. VSCode로 적용하는 게 생각보다 쉬우니 적용해보자.
이제 Template가 github에 등록이 되었으니 wails 의 -t 옵션으로 정상적으로 프로젝트를 생성할 수 있는지 확인해 본다.
공식적인 template가 아니므로 github 저장소 주소를 가져와서 프로젝트를 생성해야 한다.

주소를 복사해둔다.

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

프로젝트가 정상적으로 생성되었다. 파일명도 tmpl 명칭이 빠졌고 설정값들도 정상적으로 적용되어 있다.
이제 구동이 되는지 확인해보자.
VSCode에서 Ctrl + ` 를 이용하면 TERMINAL을 사용해 CMD 를 사용하는 것과 같은 기능을 사용할 수 있다.

wails build

실행하면 wails build 부터 frontend 부분 빌드 및 번들링까지 해서 exe파일을 생성해준다.
그렇지만 지금은 exe파일을 실행하는 게 목적이 아니라 build를 통해 build, frontend/dist, frontend/node_modules 등등의 생성 폴더/파일이 필요해서이다. dist 폴더와 내부 파일들이 없으면 wails가 정상적으로 구동이 안된다. 이유는 main.go 에 설정되어있는 assets 부분 때문인데 추후 내용을 설명하기로 하겠다.
일단 build가 오류 없이 정상적으로 진행되어 종료되었다.
그럼 TERMINAL 창에 다음 명령어를 실행해보자.

wails dev

필요한 부분 빌드가 다시 진행되고 wails 프로그램이 실행되면서 sveltekit 내용이 wails에서 구동되면 완료이다!!!
빌드 후 실행이 안된다..
뭐가 문젠가..??
늦은 밤이라 내일 다시 확인해보기로 하겠다. 잘되는 것 같아 기분 좋았는데 갑자기 급우울이 오네.
=========================================================
문제점을 찾았다. wails.json 파일에

  "frontend:dev:watcher": "pnpm dev",
  "frontend:dev:serverUrl": "auto",

두 가지 항목을 추가해주자.
wails dev 실행하면 정상적으로 실행되는 걸 볼 수 있을 것이다.
기능들을 많이 넣다 보니 소스가 너무 복잡하다.
역시나 우려했던 대로 오픈소스 진영 프로젝트는 설정 지옥이 되는 게 어쩔 수가 없다.
설정을 한 곳으로 모으는 무언가가 있었으면 좋겠는데 좀 아쉽다.
마지막으로 tailwind를 사용하기 위한 설정은 적용되어 있는데 어떻게 적용해서 사용하는지 확인이 되지 않았다.
app.css 파일 추가 및 설정
layout.svelte 파일에 import 설정 추가
page.svelet 파일에 html 표현하기

3가지 적용에 대한 설명이 누락되었는데 너무 늦어서 일단 자야겠다.
사실 여기서 Template 만드는 방법은 종료를 해야겠다.
일단 시간이 없어서 개발을 우선순위로 둬야 하기 때문이다. 불필요한 파일 삭제는 마무리되었지만 설명 파일들 update도 해야 하고 잔잔하게 소스들 수정을 해야 완전히 끝나긴 하겠지만 지속적으로 조금씩 업데이트를 해나가는 방법으로 진행해야겠다.
자 그럼 이제부터 본격적으로 Graduate App을 만들어보도록 하자.
https://devguru.tistory.com/27?category=588709

[corepack 에 대한 설명]
https://luvstudy.tistory.com/188

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 와 추가해서 사용할 모듈에 대해 학습을 해봐야겠다.

기대하고 있던 Tauri 가 1.0  정식버전이 릴리즈 되었다. -> 1.1 버전으로 최근에 업그레이드 되었네.

Electron의 무거움에 배울까말까 고민하고 있던 터엿는데 Tauri가 출시되면서 학습할 동기를 만들어준것 같다.

그래서 학습용으로 뭘 만들까 고민을 하다가 코인 매매앱을 만들어 보기로 했다.

이름은 심플하게 GraduateApp-TAURI 이다. 코인으로 졸업하게 해주세요 젭알!!! ㅠ.ㅠ

농담이고 일단 많은 기술적인 난제가 있을것 같긴한데 하나하나 만들어가면서 방법을 찾아보도록 하겠다.

개발초기 몇년간은 웹쪽에 관심이 있다가 너무 급여가 팍팍한데다가 정적인 페이지 기술의 한계가 보여서 CS(C#, JAVA)계열로 넘어갔지만 웹에 대한 관심은 항상 있었다. 그래서 하나 배워서 다 같이 연동해서 써먹을 수 있는게 없을까 항상 고민을 했는데 최근에 찾은 언어가 Rust 이다. 시스템 프로그래밍, 웹, 모바일, 데스크탑 프로그래밍  모두 가능하도록 계속 진화하고 있는데 지켜보고 있으면 뿌듯해진다. 내 주력언어가 되기를 기원하며 조금씩 학습을 진행하고 있다.

하지만 Rust는 아직 비주류 언어라서 대한민국에서 취업을 위해 배우기에는 시간적 리스크가 있고 학습곡선도 높기때문에 일반적인 업체 취업용으로는 추천하지 않는다. 다만 긴 호흡을 가지고 꾸준히 배우고 싶다면 한 번 도전해도 좋지 않을까 싶다. 그리고 Svelte도 핫한 언어이긴 하지만 취업용으로는 아직 추천하지 않는다.

이 메뉴 카테고리는 Tauri Svelte Vite 를 가지고 개인적인 프로그래밍을 하면서 학습내용을 정리하고 공유하는 곳이기에 Rust에 대한 사설은 더 하지 않겠다. Rust는 별도 메뉴에서 다룰 예정이다.

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

Tauri가 뭔가?  황소!!

https://www.tauri.app

https://vitejs.dev/

https://svelte.dev/

짜잔~~

개발에 사용할 굵직한 기술 3가지이다.

이렇게 3가지를 선택한 이유는 간단하다.

코인앱을 만들기에 속도적인 부분이 좀 중요한 포인트기 때문이다.

처음에는 Electron + Viewjs or React를 고민했는데 대체 할수 있고 성능적인 부분도 우위에 잇는 Tauri와 Svelte가 나타나서 냉큼 바꿔버렸다.

하나씩 기술적인 내용을 확인하고 개발목표와 목차들을 구성해 보도록 하자.

Bye!!