딥링크 — 커스텀 URL 스킴으로 앱 실행

"딥링크는 myapp://open?file=doc.txt처럼 URL로 앱을 실행하는 기능" — OAuth 콜백, 파일 열기, 특정 화면으로 이동할 때 필수입니다.

커스텀 URL 스킴 등록

macOS / Linux

JAVASCRIPT

const { app } = require('electron');

// 개발 모드에서 딥링크 등록
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [
      path.resolve(process.argv[1]),
    ]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

Windows (electron-builder 설정)

YAML

# electron-builder.yml
win:
  target: nsis
nsis:
  perMachine: false
  # 커스텀 프로토콜 등록
protocols:
  - name: "MyApp Protocol"
    schemes:
      - myapp

딥링크 처리

macOS

JAVASCRIPT

// macOS에서는 open-url 이벤트 사용
app.on('open-url', (event, url) => {
  event.preventDefault();
  handleDeepLink(url);
});

Windows / Linux

JAVASCRIPT

// Windows/Linux에서는 second-instance 이벤트 사용
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  app.quit();
} else {
  app.on('second-instance', (_event, commandLine) => {
    // commandLine의 마지막 요소가 딥링크 URL
    const url = commandLine.find(arg => arg.startsWith('myapp://'));
    if (url) {
      handleDeepLink(url);
    }

    // 기존 윈도우를 포커스
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });
}

딥링크 파싱

JAVASCRIPT

function handleDeepLink(url) {
  try {
    const parsed = new URL(url);
    const action = parsed.hostname; // myapp://open/... → 'open'
    const params = Object.fromEntries(parsed.searchParams);

    switch (action) {
      case 'open':
        openFile(params.file);
        break;
      case 'auth':
        handleOAuthCallback(params.code);
        break;
      case 'settings':
        navigateToSettings(params.tab);
        break;
      default:
        console.log('알 수 없는 딥링크 액션:', action);
    }
  } catch (error) {
    console.error('딥링크 파싱 실패:', error);
  }
}

OAuth 콜백에서 딥링크 활용

JAVASCRIPT

// OAuth 로그인 흐름
async function startOAuth() {
  const authUrl = 'https://auth.example.com/authorize'
    + '?client_id=YOUR_CLIENT_ID'
    + '&redirect_uri=myapp://auth/callback'
    + '&response_type=code';

  // 기본 브라우저에서 인증 페이지 열기
  shell.openExternal(authUrl);
}

// 딥링크로 돌아왔을 때
function handleOAuthCallback(code) {
  // 인증 코드로 토큰 교환
  mainWindow.webContents.send('auth:callback', { code });
}

면접 포인트 정리

setAsDefaultProtocolClient로 커스텀 URL 스킴 등록
macOS는 open-url 이벤트, Windows/Linux는 second-instance 이벤트로 처리
requestSingleInstanceLock으로 앱 중복 실행 방지
OAuth 콜백, 파일 열기 등에 딥링크가 실무에서 많이 쓰임
URL 파싱 시 예외 처리 필수

딥링크를 설정했으면, 다음은 드래그 앤 드롭 구현을 살펴봅시다.