Tauri(5)
-
[5] Tauri 새 창 및 메뉴 버튼 만들기
기능- open window 버튼을 누르면 새 창 띄우기- 메뉴 버튼 만들기프론트엔드전체 코드src/index.html Open Window src/sub_window.html Send Data 프론트엔드 코드는 이제 베리 이지 하니까 넘어가겠다.잘 모르겠으면 이전 글을 참고하시길!!백엔드전체 코드src-tauri/src/lib.rs// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/use tauri::{ menu::{MenuBuilder, MenuItemBuilder, SubmenuBuilder}, AppHandle, Manager, Emitter,};#[c..
2025.05.07 -
[4] Tauri로 Text Editor 만들기
Tauri Text Editor기능파일 열기: 파일 내용 확인파일 저장Frontend전체 코드src/index.html Open File Save File 코드 분석const invoke = window.__TAURI__.core.invoke;const listen = window.__TAURI__.event.listen;core.invoke 함수는 저번 포스팅에서 설명했으므로 패스event 함수는 백엔드와 프런트엔드를 연결하여 emit 하거나 listen 할 수 있게 한다.그중 listen 함수를 호출하여 백엔드의 이벤트를 수신할 수 있게 한다.function init() { listen("contents", data => { doc..
2025.05.07 -
[3] Tauri Tutorial (button을 통해 프론트엔드와 백엔드를 연결해보자)
우선 Tauri 프로젝트를 생성하고,src 폴더에서 frontend를 만들어보자Frontendsrc/index.html Login Get User 코드 설명click 버튼을 두 개 만들었다.Login 버튼에는 doLogin() 함수를, Get User 버튼에는 getUser() 함수를 심었다. 블럭을 살펴보겠다.const invoke = window.__TAURI__.core.invoke;Tauri 프레임워크에서 Rust 백엔드와 JS 프론트엔드 간의 통신을 위한 핵심 함수를 가져온다.window.__TAURI__ : Tauri 프레임워크가 제공하는 전역 객체.core.invoke : Rust 백엔드의 함수를 호출할 수 있는 매서드=> Rust 백엔드 함수를 호출하겠다. 라는 의미가 된다.async..
2025.05.03 -
[2] Tauri 설치 및 환경 설정 방법
Tauri 설치 (Windows 기준)https://v2.tauri.app/start/prerequisites/ PrerequisitesThe cross-platform app building toolkitv2.tauri.app위 사이트에 잘 나와있다.1. C++ 빌드 툴 설치우선 C++ 빌드 툴을 깔아야한다.https://visualstudio.microsoft.com/ko/visual-cpp-build-tools/ 에 들어가서 설치한다.세팅은 사진과 같이한다. 오른쪽 Optional을 잘 맞춰준다.2. Rust 및 Node.js 설치https://www.rust-lang.org/tools/installhttps://nodejs.org/ko위 사이트에서 Rust와 Node.js를 설치해준다.Tauri ..
2025.05.03 -
[1] Tauri란? 간단하게 알아보자 (vs Electron)
Tauri란?데스크탑 앱 프레임워크이다.이 분야의 주류 프레임워크는 아무래도 Electron.둘의 공통점과 차이점이 있다.공통점HTML, CSS, JS를 이용하여 웹 앱을 제작하듯이 프론트엔드 개발 가능모던 앱 개발에 용이 (== 기존 웹 개발과 거의 같음)배포 성능이 높음 (== 크로스플랫폼 지원 용이)차이점프론트엔드 및 백엔드 프레임 워크의 차이프론트엔드Electron: ChromiumTauri: Tao, Wry백엔드Electron: Node.jsTauri: RustTauri의 장점은?앞서 Electron이 주류 프레임워크이고, 대부분 우리가 사용하는 데스크탑 앱은 Electron으로 개발한다.그러...나Chromium, Node.js 의 구동 방식이 런타임 메모리를 어마무시하게 사용한다.그런...데..
2025.05.03