Not allowed to load local resource... 왜 로컬파일에 접근이 안되는거야!!!

일하던 중 엄청난 난관에 부딪혔다..

개발환경에서는 아무런 문제가 없었으나 Electron Builder로 배포된 일렉트론 앱에서 문제가 발생하였다.

렌더러 프로세스(React)에서 로컬 파일에 접근하려고 하니, 아래와 같은 에러가 나타났다.

장장 2시간동안 구글링을 통해 이것저것 보았지만, 다들 이상한 방법 뿐이었다.

나는 초록색 체크표시가 있는 스택오버플로를 찾고싶었지만 찾을 수 없었다 ㅠ_ㅠ 망할 일렉트론..

그러다가 문득 이런 생각이 들었다.

local resource에 File 프로토콜로 접근할 때 불가능 한 거 아닐까? 혹시 다른 방법으로 해결할 수 있지 않을까?

LUCKY. 맞았다.

일렉트론에서는 Protocol API를 제공한다.

렌더러 (저의 경우에는 React 입니다.) 에서는 아래와 같이 호출해준다.

<div
  style={{
    backgroundSize: 'contain',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundImage: `url('safe-my-protocol://${path}')`,
  }}
  className="full-screen-img"
/>

메인 프로세스에서는 아래와 같이 호출해준다.

protocol.registerFileProtocol('local', (request, callback) => {
    const pathname = decodeURIComponent(request.url.replace('safe-my-protocol://', ''));
    try {
      callback(pathname);
    } catch (error) {
      console.log(error);
    }
  });

이렇게 하면 renderer에서의 Not allowed to load local resource문제를 해결하게 된다! 굿!

** 도움이 되셨다면 하트 한번만 부탁해요 :-) **

2021-03-16. 문제가 됐던 상황

Blob으로 불러온 이미지가 렌더가 일어 날 때마다 깜빡거렸다.

FOUC (Flash of Unstyld Content, 링크 사라짐)

이 에러를 해결하다 알게 된 단어인데, 무언가 처리되면서 DOM 요소가 반짝 거릴 경우를 FOUC라고 하는데, css의 스타일이 적용이 안되었는데 화면이 표시되거나 웹 폰트 등이 로딩이 되지 않았을 때 발생하는 화면 깜빡임을 말한다. 이번에는 useEffect에 의해 해당 깜빡임이 있었음을 알게 되었다.

하지만 useEffect는 사용도 안하고 "찾았다!" 생각하고서는 글 쓰다가 아랫쪽에 React.memo를 사용했음을 알린다.

useEffect vs useLayoutEffect

• useEffect

  • 렌더가 화면에 그려진 후 비동기적으로 실행

    ✨ 일부 state를 즉시 바꿔 렌더할 필요가 없을 경우

    ✨ 페이지에 시각적으로 영향을 주지 않는 무언가를 동기화 할 경우

    ✨ 이벤트 핸들러를 설정하는 경우

    ✨ 모달 상자가 나타나거나 사라질 때 일부 상태를 재설정하는 경우

• useLayoutEffect

  • 렌더링 후 화면이 업데이트 되기 전에 동기적으로 실행

    ✨ state가 업데이트 될 때 요소가 깜빡이는 경우

    ✨ DOM을 변경하려는 경우

    
    
    

하지만....

그런데.. 내 코드는 useEffect를 통한 깜빡임이 아니었다.

useState를 이용한 값을 set하면서 렌더가 되는 것이었다...

Setstate가 되더라도 렌더가 되지 않게끔 따로 설정을 해주어야 했고, 그에 해당하는 함수로 HOC 방식 (제가 번역한 페이지에요!)의 React.memo를 사용하는 것이었다.

• React memo의 자세한 내용은 해당 링크를 확인하면 될 것 같다.

이미지 부분만 자식 컴포넌트로 뜯어내고, React.memo의 첫번째 인자로 넣어주고, 두번째 인자를 사용해 렌더를 할 지 안 할지를 결정하여 빤짝거림을 해결했다.

적용 결과

이미지가 더이상 반짝이지 않음을 볼 수 있다.

오늘의 트러블 슈팅 끝!

참조 사이트

• useEffect vs useLayoutEffect
• react memo를 현명하게 사용하기
• 원본 노션 글

os x catalina 10.15.7

발생 원인

$ bundle

에러 메세지 (일부)

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

An error occurred while installing eventmachine (1.2.7), and Bundler
cannot continue.
Make sure that `gem install eventmachine -v '1.2.7' --source
'https://rubygems.org/'` succeeds before bundling.

current directory:
/Library/Ruby/Gems/2.6.0/gems/http_parser.rb-0.6.0/ext/ruby_http_parser
make "DESTDIR="
make: *** No rule to make target
`/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/universal-darwin19/ruby/config.h',
needed by `ruby_http_parser.o'.  Stop.

make failed, exit code 2

등등 엄청난 에러가 발생. jekyll기반으로 만들어진 블로그가 설치가 안되는 상황이 발생

해결방법

$ brew install ruby
$ brew link --overwrite ruby

If you need to have ruby first in your PATH, run:
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

For compilers to find ruby you may need to set:
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include"

zsh 쉘을 사용하기 때문에 ~/.zshrc에 설정하라고 위와 같은 메세지가 나온다. 쉘의 설정파일 안에 위 내용들을 추가해주면 된다.

bash 쉘을 사용한다면 ~/.bash_profile이라고 나옵니다.

참고 사이트 : github.com/ffi/ffi/issues/653

이에 본인의 기록용 포스팅이라는 베이스를 두고 누군가 필요한 사람을 위해 강좌 형식으로 적도록 하겠다. 본디 기록용 포스팅 일 뿐이어서, 불친절한 시리즈인건 안비밀

0. 본 포스팅에 사용 된 버전

필자는 yarn이 아닌 npm을 주로 사용한다.

사용된 버전 node: v12.20.0 npm, npx: v6.14.8 react : 17.0.1 electron-is-dev: 1.2.0 electron: 11.2.0 electron-builder: 22.9.1 typescript: 4.1.3 wait-on: 5.2.1 cross-env: 7.0.3 concurrently: 5.3.0

1. React App 생성

npx create-react-app 앱이름 --template typescript

npm이 아닌 npx로 앱을 생성한다. npx를 사용하면 최신버전의 CRA로 React가 실행되는 환경을 만들 수 있다. 우리는 타입스크립트를 사용할 것이기 때문에 뒤에 뒤에 _--template typescript_는 필수.

참조: npm과 npx의 차이점

2. Electron 설치

react 프로젝트가 성공적으로 생성 되었다면, 해당 앱 폴더로 이동하여 Electron과 각종 개발에 편의성을 주는 도구들을 설치한다.

npm i electron-is-dev
npm i electron electron-builder concurrently cross-env wait-on typescript --save-dev

해당 모듈들은 (electron-is-dev 제외) 런타임에서 사용되지 않을 개발용 모듈이므로 --save-dev 인수를 추가해준다.

• Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인을 위하여 사용됨.
• Electron : 일렉트론을 실행하기 위해서 사용됨.
• Electron-builder : 일렉트론을 실제 프로덕션 버전으로 빌드하기 위해 사용됨.
• concurrently : 동시에 여러 명령어를 사용(병렬적으로)하기 위해 사용됨.
• cross-env : 프로그램을 CLI환경에서 실행 시킬 때에, OS에 관계 없이 환경변수를 설정할 수 있도록 하기 위해 사용됨.
• wait-on : HTTP 자원, port, file등이 활성화 될 때 까지 기다려주는 cross platform
• typescript : typescript

tsconfig는 각자 알아서 작성하시길....

3. Electron을 실행하는 코드작성

위에서 모든것이 완료되었다면, public 폴더 안에 Electron을 실행하는 ts파일을 하나 작성해준다.

import { app, BrowserWindow } from 'electron';
import * as isDev from 'electron-is-dev';
import * as path from 'path';

let mainWindow: BrowserWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    center: true,
    kiosk: !isDev,
    resizable: true,
    fullscreen: false,
    fullscreenable: true,
    webPreferences: {
      // node환경처럼 사용하기
      nodeIntegration: true,
      enableRemoteModule: true,
      // 개발자도구
      devTools: isDev,
    },
  });

  // production에서는 패키지 내부 리소스에 접근.
  // 개발 중에는 개발 도구에서 호스팅하는 주소에서 로드.
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }

  mainWindow.setResizable(true);

  // Emitted when the window is closed.
  mainWindow.on('closed', () => (mainWindow = undefined!));
  mainWindow.focus();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

4. package.json 파일 수정

프로젝트 파일 내의 package.json 파일을 다음과 같이 수정해준다.

{
  ...
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "tsc ./public/electron.ts && concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "npm run react-build && electron-builder",
    "release": "npm run react-build && electron-builder --publish=always",
    "lint": "eslint './src**/*.{ts,tsx}'"
  },
  ...
}

main : 프로그램의 진입점이므로 꼭 설정해주어야함. 일렉트론을 실행하는 코드이다. scripts :

• [start] : electron.ts를 js파일로 변환해 준 후, concurrently를 통해 browser로 띄우지 않고 리액트를 실행시킨 후 http://localhost:3000이 로드가 완료되면 electron을 실행시킨다.
• [build] : dist폴더에 production 실행파일을 생성해준다.
• [release] : build명령어와 같지만 그 후 배포를 해준다. (추가설정 필요)

5. 실행

npm run start를 터미널에 입력해주면 다음과 같이 앱이 뜨고, 가운데 리액트 마크가 삥글삥글 돈다면 성공적으로 완료되었다.

1. 'React' must be in scope when using JSX

  import React from 'react'

위와 같이 임포트해주면 끝. (안해주거나 소문자로 리액트를 임포트 하면 발생하는 에러)

2. TS2322: typescript에서 useRef를 사용할 때

Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
  Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'.
        Type 'undefined' is not assignable to type 'HTMLInputElement | null'.  TS2322

useRef 선언시에 null을 빼트려서 나오는 에러임.

  const abc = useRef<해당하는엘리먼트객체>(null)

해주면 끝