Electron 오류 : Resources issue

Daun Jung·2020년 4월 18일

Electron

목록 보기

1/1

1. Problem

electron + react 환경으로 개발을 하던 중,
dev환경에서 electron을 실행하면 이상이 없었는데,
build만 하면 해당 png 파일을 index.html에서 못 읽어내는 오류가 발생했다.

구글링을 계속 해보면서 다행히 해결책을 발견해냈지만,
해결책 자체가 상당히 오래된 stackoverflow 자료에 있었고,
심지어 해당 글의 댓글에는 같은 문제로 5일 동안이나 답을 찾아 해맸다는 글도 달려있었다.

2. code 살피기

<!--index.html 파일이다.*-->
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>일렉트론 앱</title>
</head>
<body>
</body>
</html>

위와 같이 index.html 파일이 작성되어있었다.
Electron은 빌드를 하게 될 때에 크게 두가지 과정을 거친다.
Electron 자체의 특성으로 인해 Main 과 Renderer의 영역으로 나뉘게 되는데,
Renderer 부분을 먼저 webpack을 이용해 build하고 난 이후 electron-packager 또는 electron-builder라는 라이브러리를 이용해서 전체 프로그램을 빌드하게 된다.

Rendere영역은 위에 보이는 index.html 에서 body영역 안에 <div id="root"></div> 부분을 추가하여 build 되어지고 그 안에 react로 작성되어진 js 파일을 로드하여 작동된다.

Electron은 chromium기반으로 작동하는 어플리케이션이어서, dev환경에서는 이것이 localhost를 통해 작동되고, 빌드 되고나면 file:///이라는 경로 상에서 작동하는데 여기서 문제가 발생했다.

<img alt="이미지" src="img/test.png"></img>

이런식으로 작성되어있는 부분에서 파일을 읽어오지 못하는 것이다.
해당 소스가 잘못 빌드되어졌나 싶어 개발자도구를 통해 source를 확인했을 때 img 폴더는 있었지만,
img 폴더 내부에 파일들이 존재만 할 뿐 읽어지지 않는 모습이었다.

3. 해결법

찾게 된 해결방법은 간단했다.
<base>태그가 필요했다.

<!--index.html 파일이다.*-->
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="./">  <!-- 수정된 부분 -->
    <title>일렉트론 앱</title>
</head>
<body>
</body>
</html>

<base> 태그는 HTML5 표준이 정해지기 전에도 이미 표준으로 정해져 있는 태그입니다. 이 태그는 <head> … </head> 안에 쓰여 마치 <meta> 태그와 같이 작동하는 태그로, 페이지의 링크가 상대경로로 되었을 때 그 기준이 될 경로를 지정하고 다른 페이지로 링크할 때 기본적으로 그 링크의 대상이 되는 창 혹은 프레임을 어디로 할 것인가를 지정합니다. 이 태그는 필수적인 것은 아니지만 상대경로로 링크를 걸 상황이거나 페이지를 새 창으로 여는 링크를 많이 걸어야 할 상황 등에 편리하게 쓸 수 있습니다.

4. 회고

찾고나니, 뭔가 상당히 기본적인걸 내가 놓친 기분이었다. 이번에 알았으니 다음번에 좀더 빨리 수정하며 착오를 줄여갈 수 있기를...

Daun Jung