(Tauri) Multi Browser App 만들기

Posted Aug 11, 2024 Updated Sep 3, 2024

By hyse_yang

13 min read

이번에 만들 어플리케이션은 VSC, Pycharm과 같이 문서를 여러 개 열 수 있는 어플리케이션이다.

이 브라우저를 만들기 위해서는 다음 기능에 대해서 어느 정도 이해도가 있어야 한다.

html/css/js
- drag & drop 기능에 대한 이해
  - (선택) DropZone 패키지 활용하기
- 웹을 html component 안에서 열어보기
Tauri
- Session 및 Cookie 활용하기
기타
- 브라우저 메모리 (누수) 확인하기

개발 단계

Step 1_기본 기능 점검하기

다음 기능들을 사용할 수 있는지 검토 해보자.

drag & drop을 테스트할 수 있는 <div>
browser를 <div> 태그 안에서 열어보기.

Step 1.1 drag & drop 기능 모음

우리가 구현할 기능은 VSC의 창 기능과 같다.

widget의 제목창만 미리 표시한다.
widget의 내부에 상하좌우, 가운데에 drag하면 미리 놓을 장소를 표시하고 drop시 표시한 위치로 이동하게 만든다.

drag & drop에 관한 이벤트 종류는 아래와 같다.

drag : 태그 안에 draggable = "true"를 추가해야 한다.
drag : 자기자신이 드래그 중일 때
dragstart : 자기자신이 드래그를 시작했을 때
dragend : 자기자신이 드래그 종료했을 때
drop
dragenter : 자신의 영역에서 드래그가 들어왔을 때
dragover : 자신의 영역에서 드래그가 이벤트 발생 중일 때
drop : 자신의 영역에서 드래그가 종료했을 때 (하지만 이 과제 하면서 느낀게 dragleave 이벤트가 우선 순위가 더 높은 것 같다..)
dragleave : 자신의 영역에서 드래그 벗어났을 때

파일 drag & drop 의 경우 dataTransfer를 활용해야 하는데 이번 프로젝트에서는 사용 안 하니 넘어가자.

Step 1.2 `<iframe>` 활용하기

<iframe>은 상당히 간단하다. 아래 내용만 만족시켜주면 되기 때문이다.

  
<iframe src="삽입하는 웹페이지 URL" title="내용"></iframe>

이것만으로 구현하면 허전하니 Browser의 기본기능들을 구현해보자.

이것만으로 페이지 여는 걸 어떻게 여는지 확인할 수 없다..

하지만 위 사진처럼 문제가 생겼는데https://www.electron.org, https:/tauri.app은 <iframe>으로 그대로 가져올 수 있었는데, goolge, naver, github 등은 위와 같이 X-frame-options to sameorigin이라는 Warning창을 띄우며 액세스를 거부한다.

이는 mdn X-Frame-Options를 봤는데 이해가 잘 안 되서 google에 X-Frame-Options와 frame-ancestors 검색했는데 click jacking 이라고 iframe 위에 z-index 높은 이상한 링크를 숨겨놓아서 사용자가 클릭 시 이상한 사이트로 옮겨버리는 방식 때문에 생긴 보안 장치라고 보면 된다.

electron의 경우 iframe을 안 쓰고 <webview> 라는 태그를 대신 사용하는데, Tauri 공식 문서에서 비슷한 기능이 없는지 찾아봤지만 이에 대해서 설명한 내용이 없었는지 확인해본 결과 window.ts 에서 비슷한 기능을 하는 WebViewWindow 라는 클래스를 찾을 수 있다. 그 클래스 내용은 다음과 같다.

  
declare class WebviewWindow extends WindowManager {
    /**
     * Creates a new WebviewWindow.
     * @example
     * ```typescript
     * import { WebviewWindow } from '@tauri-apps/api/window';
     * const webview = new WebviewWindow('my-label', {
     *   url: 'https://github.com/tauri-apps/tauri'
     * });
     * webview.once('tauri://created', function () {
     *  // webview window successfully created
     * });
     * webview.once('tauri://error', function (e) {
     *  // an error happened creating the webview window
     * });
     * ```
     *
     * * @param label The unique webview window label. Must be alphanumeric: `a-zA-Z-/:_`.
     * @returns The WebviewWindow instance to communicate with the webview.
     */

    constructor(label: WindowLabel, options?: WindowOptions);
    /**
     * Gets the WebviewWindow for the webview associated with the given label.
     * @example
     * ```typescript
     * import { WebviewWindow } from '@tauri-apps/api/window';
     * const mainWindow = WebviewWindow.getByLabel('main');
     * ```
     *
     * @param label The webview window label.
     * @returns The WebviewWindow instance to communicate with the webview or null if the webview doesn't exist.
     */

    static getByLabel(label: string): WebviewWindow | null;
    /**
     *  Gets the focused window.
     * @example
     * ```typescript
     * import { WebviewWindow } from '@tauri-apps/api/window';
     * const focusedWindow = WebviewWindow.getFocusedWindow();
     * ```
     *
     * @returns The WebviewWindow instance to communicate with the webview or `undefined` if there is not any focused window.
     *
     * @since 1.4
     */
    static getFocusedWindow(): Promise<WebviewWindow | null>;
}

위에서 가이드라인 대로 한 번 코드를 짜보자.

Step 1.3 구현하기

Tauri는 <WebView> 태그를 지원하지 않아 Electron 처럼 쉽게 구현하기 어렵다. 그래서 먼저 Electron부터 써먹자.

[2024-08-27-Electron&Svelte 초기화]({{ site.baseurl }}/ElectronampSvelte-) : #미완성

dragover 이벤트를 사용할 때, event.clientX, event.clientY로 div태그 기준 마우스 포인터 위치를 표시해줄 수 있다.

clientX Y
offset X Y
layer X Y : deprecated

1차 구현

dragover로 상하좌우 표시하기
- margin을 줘서 일단 해결하기
마우스 포인터가 떠나면 표시박스 삭제하기
drop 발생 시
- client X,Y 출력하기
- drop이 발생했을 때 가장 마지막으로 dragover 되었던 객체정보 출력하기
  - .target을 활용하기

2차 구현

디테일 추가
- 애니메이션 transition
브라우저 모사하기
브라우저 탭 이동시 실제 상하좌우 구현하기
브라우저 간 간격 조절할 수 있게 하기
앱 바깥으로 드래그 앤 드롭할 경우 newWindow 생성할 것

3차 구현

리다이렉트 방지하기
다른 window 앱 간 이동을 공유할 것
크롬/파폭/사파리 위로 드롭할 경우 새 탭으로 열기
크롬/파폭/사파리로부터 드래그했을 경우에도 창 열기
디버깅
- 메모리 누수 여부 체크
- 네트워크 3G 테스트

Reference

기반지식 모음

html/css/js

Drag & Drop 기능 활용하기

🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기

HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는 물건을 장바구니에 드롭하는 것 까지 일상생활에서 많이 접해 봤을 것이다. HTML 그리고 JavaScript에서의 드래그 드롭은 이벤트 기반으로 작동하게 되는데, 마우스 커서로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 되어 동작이 완료되게 된다. 이번 포스팅에서는 자바스크립트를 이용해 드래그 앤 드롭 이벤트 동작 원리를 이해하고 여러 예제를 구현하는 시간을 가져볼 예정이다. 드래그 & 드롭 이벤트 종류 HTML에서 요소가 드래그 이벤트가 발생 할 수 있도록 해당..

inpa.tistory.com

iframe vs webview

02장-3.2 HTML iframe

HTML iframe이란 inline frame의 약자로, 웹 페이지안에 또 다른 웹페이지를 삽입하는 것을 의미합니다. 사용법 src : source의 약자로,…

wikidocs.net

Webview Versions | Tauri Apps

WebView2 (Windows)

tauri.app

Tauri

쿠키(Cookie), 세션(Session) 특징 및 차이

개요 > 쿠키(Cookie), 세션(Session) 각각 특성 및 차이 확실히 분류하기 메모 1. 공통점 : 웹 통신간 유지하려는 정보(ex:로그인 정보 등)를 저장하기 위해 사용하는 것(?) 2. 차이점 : 저장위치, 저장형식, 용량제한, 만료시점 등 (해당 포스트 하단에 '표'로 정리됨) 쿠키 : 개인 PC에 저장됨. 세션 : 접속중인 웹 서버에 저장됨. * 위 내용 관련하여 조금 더 자세한 내용은 아래 "내용" 참고하세요~ 내용 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용된다. 1. Connectionless 프로토콜 (비연결지향) 클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다..

hahahoho5915.tistory.com

쿠키(Cookie) 그리고 세션(Session)

nesoy.github.io

기타

브라우저 메모리 확인

Chrome DevTools로 JS 메모리 누수(Memory Leak) 디버깅하기

Chrome DevTools를 활용하여 Javascript 메모리 누수를 디버깅 한 경험을 기록합니다.

blog.eunsukim.me

ResizeObserver
Log

Electron

Electon with Svelte 구동 완료 🔜2024-08-28
svelte에서 on: 활용해서 drag 이벤트 구현하기 🔜 2024-08-28 01:14:00
Reference 예제들을 직접 구현해보기.
창 이동 기능과 구성요소에 대한 명세서를 짜고 구현해보기
Webview 태그로 인터넷 연결확인하기
Network 속도와 메모리 속도 확인하기

Tauri

<WebView>를 대체할만한 방법을 찾기 전까지 보류

Programming, Web_desktop

This post is licensed under CC BY 4.0 by the author.

(Tauri) Multi Browser App 만들기