Tauri와 ReactJS를 사용하여 노트북 만들기

안녕 친구들! 난 후디야.
베트남 하노이 출신의 웹 개발자

이 게시물에서는 Tauri 및 ReactJS를 사용하여 노트북 앱(데스크톱 애플리케이션)을 빌드하는 방법을 보여 드리겠습니다.

Tauri를 모르는 사람들을 위해, 이것은 개발자가 존재하는 거의 모든 프런트엔드 프레임워크를 사용하여 주요 데스크톱 플랫폼용 애플리케이션을 만드는 데 도움이 되는 툴킷입니다.

튜토리얼 비디오:



이 튜토리얼의 소스 코드는 여기에서 볼 수 있습니다: https://github.com/hudy9x/tauri-notebook

전제 조건

Tauri - 데스크탑 앱을 빌드하기 위한 툴킷

Nodejs

npm 또는 yarn - 패키지 관리자

목차

Tauri 설치

create-tauri-app를 사용한 스캐폴딩 코드 구조

<MainEditor/>의 Tiptap 라이브러리를 사용하여 <Menubar/> 생성

스타일링 할 시간

앱 아이콘 변경

앱 빌드

#1. 타우리 설치

첫 번째 단계는 Rust와 그 의존성을 설치하는 것입니다. 완료하려면 Tauri의 홈페이지를 방문하세요.

창 사용자의 경우: 이 항목을 확인하십시오link.

macOS 사용자의 경우: 이 항목을 확인하십시오link.

Linux 사용자의 경우: 이 항목을 확인하십시오link.

#2. create-tauri-app을 사용한 스캐폴딩 코드 구조

npm를 이미 설치했는지 확인하십시오. 그런 다음 다음 명령을 실행하여 코드 구조를 생성합니다.

$ npm create tauri-app

지시를 따르다. 기본 프레임워크로 react-ts를 선택하는 것을 잊지 마십시오.



이제 tiptap 및 remixicon를 설치할 시간입니다.

$ npm install @tiptap/react @tiptap/starter-kit remixicon

다음으로 components 및 Editor.tsx로 2개의 파일이 있는 Menubar.tsx 폴더를 만듭니다. 간단한 구성 요소 정의를 추가하십시오.

#삼. <MainEditor/>에서 Tiptap 라이브러리를 사용하여 <Menubar/> 생성

src/components/MainEditor.tsx를 열고 다음 코드를 추가합니다.

// src/components/MainEditor.tsx
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Menubar from "./Menubar";

export default function MainEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `<h2>Hello world</h2>`
  })
  return <>
    {editor ? <Menubar editor={editor} /> : null}
    <EditorContent editor={editor} />
  </>
}

다음으로 열기src/components/Menubar.tsx

// src/components/Menubar.tsx
import {Editor} from '@tiptap/react'

interface IMenubarProp {
  editor: Editor
}

export default function Menubar({editor}: IMenubarProp) {
  const getFocus = () => editor.chain().focus()
  const isActive = (type: string, options?: any) => {
    return editor.isActive(type, options ?? {}) ? 'is-active' : ''
  }

  const menus = [
    [
      {icon: 'bold', onClick: () => getFocus().toggleBold().run(), isActive: isActive('bold')},
      {icon: 'italic', onClick: () => getFocus().toggleItalic().run(), isActive: isActive('italic')},
      {icon: 'strikethrough', onClick: () => getFocus().toggleStrike().run(), isActive: isActive('strike')},
      {icon: 'code-line', onClick: () => getFocus().toggleCode().run(), isActive: isActive('code')},
    ],
    // ...
  ]

  return <div className="menu">
    {menus.map(group => {
      return <div className="group-item">
        {group.map(item => {
          return  <button className="menu-item" onClick={item.onClick}>
        <i className={`ri-${item.icon} ${item.isActive}`}></i>
      </button>

        })}
      </div>
          })}
  </div>
}

그런 다음 <MainEditor/>를 App.tsx로 가져오기만 하면 됩니다.

// src/App.tsx
import MainEditor from "./components/MainEditor";
import './App.css'
export default function App() {
  return <MainEditor />
}

앱을 실행하여 결과 확인

$ npm run tauri dev

#4. 스타일링할 시간

좋아, 지금까지 모든 것이 잘 작동합니다. 그러나 우리는 여전히 앱에 대한 스타일이 없습니다.
src/App.css 파일에 스타일을 추가해 보겠습니다.

.menu {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
}

.group-item {
  display: flex;
  gap: 0.5rem;
}

.menu-item {
  padding: 0.5rem 0.75rem
}

.menu-item .is-active {
  color: #55db55;
}

// Editor css

.ProseMirror {
  padding: 1rem;
  outline: none;
  padding-top: 2.5rem;
}

.ProseMirror >
 * + * {
     margin-top: 0.75em;
}
 .ProseMirror ul, .ProseMirror ol {
     padding: 0 1rem;
}
 .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
     line-height: 1.1;
}
 .ProseMirror code {
     background-color: rgba(97, 97, 97, 0.1);
     color: #616161;
}
 .ProseMirror pre {
     background: #0d0d0d;
     color: #fff;
     font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
}
 .ProseMirror pre code {
     color: inherit;
     padding: 0;
     background: none;
     font-size: 0.8rem;
}
 .ProseMirror img {
     max-width: 100%;
     height: auto;
}
 .ProseMirror blockquote {
     padding-left: 1rem;
     border-left: 2px solid rgba(13, 13, 13, 0.1);
}
 .ProseMirror hr {
     border: none;
     border-top: 2px solid rgba(13, 13, 13, 0.1);
     margin: 2rem 0;
}

// Scrollbar css
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 8px;
  background-color: rgb(182, 182, 182);
}

::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: transparent;
}

좋아보이네요 ㅎ ? 😁

#5. 앱 아이콘 변경(선택 사항)

기본적으로 Tauri에는 기본 아이콘이 있습니다. 내 도구를 사용하여 다른 것으로 변경하려는 경우here

크기가 1024px x 1024px인 .PNG 형식의 아이콘을 준비합니다. 그리고 이름은 1024x1024여야 합니다. 이제 도구를 복제하고 패키지를 설치하십시오.

$ git clone https://github.com/hudy9x/tauri-icon-converter
$ cd tauri-icon-converter && npm install

그런 다음 아이콘을 /tauri-icon-converter 폴더에 복사하고 아래 명령을 실행합니다.

$ node .

생성 프로세스가 완료되면 /tauri-icon-converter/outputs에서 아이콘 목록을 볼 수 있습니다.



그냥 다 교체하고 .keep 파일을 /src-tauri/icons 폴더에
npm run tauri dev 를 실행하여 확인할 수도 있습니다. 아이콘이 아래와 같이 표시되면 모든 것이 잘 작동하는 것입니다.

#6. 앱 빌드

앱을 .msi 파일로 패키징할 시간입니다. 터미널을 열고 다음을 실행하십시오.

$ npm run tauri build

아래와 같은 오류가 발생했다면



귀하의 indentifier가 고유하지 않기 때문입니다. src-tauri/tauri.conf.json를 열고 값을 새 값으로 변경하십시오. 내 것을 com.notebook.dev로 변경했습니다.



알겠습니다. 명령npm run tauri dev을 다시 실행하십시오. 그리고 결과를 보자



빌드 프로세스가 완료되면 위와 같은 출력 경로를 볼 수 있습니다.

결론

지금까지 Tauri 및 Reactjs를 사용하여 데스크톱 애플리케이션을 빌드하는 방법을 배웠습니다.

자동 업데이트, 로그인, 테마 등과 같은 일부 개인 기능을 제공하여 이 앱을 개선할 수도 있습니다.

읽어 주셔서 감사합니다!