Electron+React 프로그램에서 링크 클릭 시 사용자 기본 브라우저에서 열리도록 하기

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 6월

상황

• 프로그램 내에서 사용자가 링크 클릭 시 지정된 사이트가 보이도록 구현이 필요했음
• 그런데 사용자가 링크를 클릭하면 크롬 등의 브라우저에서 열리지 않고, 일렉트론의 새 윈도우가 생성되고 그 안에서 사이트가 보였음.
• 사용자 편의성을 위해 사용자 기본 브라우저에서 사이트가 열리도록 수정이 필요했음

구현 과정

• 일렉트론의 독스에 따르면, 링크를 열어야 하는 경우 window.open()을 사용해도 되지만, 이게 일렉트론의 새 윈도우로 열린다고 함 -> 새 윈도우 열리는 과정을 수정해주면 됨.

  There are several ways to control how windows are created from trusted or untrusted content within a renderer. Windows can be created from the renderer in two ways:
  (1) clicking on links or submitting forms adorned with target=_blank
  (2) JavaScript calling window.open()

• 일렉트론 독스에서 더 찾아보니, shell 모듈에 openExternal(url) 메서드가 있었음
  • openExternal(url) 메서드는 지정된 외부 프로토콜 URL이 데스크톱의 기본 방식으로(사용자 기본 브라우저에서) 열리도록 해줌
• 새 윈도우 열리는 과정을 메인 프로세스에서 수정하기

  win.webContents.on('new-window', function (e, url) {
    e.preventDefault();
    shell.openExternal(url);
  });

  • 새 윈도우 창이 열리는 요청을 받으면, 기존 기능 대신에 openExternal이 실행되도록 구현

배우고 느낀 점

• 역시 독스를 꼼꼼하게 읽어보는게 중오하다!