Electron Adventures: 에피소드 2: 프런트엔드 코드 및 백엔드 코드

2131 단어 electronjavascript
Electron 앱은 일종의 두 개의 앱이 하나로 합쳐진 것입니다. 프론트엔드를 제어하는 ​​프론트엔드 앱과 백엔드를 제어하는 ​​백엔드 앱이 있으며 두 개의 개별 프로그램처럼 통신합니다.

이전 에피소드에서 작은 백엔드 앱을 이미 작성했으므로 간단한 프런트엔드 앱도 빌드해 보겠습니다.

물론 우리는 Svelte, Imba 또는 React와 같은 멋진 웹 프레임워크를 사용할 수 있지만 지금은 평범하고 오래된 Javascript를 사용할 것입니다.

index.html



몇 가지 상호 작용을 진행해 보겠습니다. 가장 간단한 종류입니다. 버튼과 몇 번이나 눌렀는지 카운터만 있으면 됩니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to the Internet!</h1>
    <div id="counter"></div>
    <button>Click me</button>
    <script src="app.js"></script>
  </body>
</html>


app.js



이제 카운터를 제어하기 위해 일부app.js를 작성해 보겠습니다. 이것은 Electron에 한정된 것이 아니라 고전적인 Javascript입니다.

let counter = 0
let div = document.querySelector("#counter")
let button = document.querySelector("button")

let updateCounter = () => {
  div.innerHTML = `You clicked the button ${counter} times`
}

button.addEventListener("click", () => {
  counter++
  updateCounter()
})

updateCounter()


결과



그리고 우리가 얻은 것은 다음과 같습니다.



All the code for the episode is here .

다음 에피소드에서는 프론트엔드와 백엔드 간의 통신 방법에 대해 이야기하겠습니다.

보안



그러나 가기 전에 보안에 대해 이야기합시다.

프런트엔드와 백엔드 코드는 보안 모델이 매우 다릅니다.
  • 백엔드 코드는 컴퓨터에 대한 전체 액세스 권한이 있지만 신뢰하는 코드만 실행한다고 가정합니다
    • .
  • 프런트엔드 코드는 인터넷의 임의 사이트에서 모든 사람의 코드를 실행하지만 브라우저 외부 및 심지어 브라우저 내부에도 (거의) 동일한 도메인의 항목에만 액세스할 수 있습니다
    • .

    Electron 앱을 작성하려면 이 두 가지를 혼합하지 않도록 매우 주의해야 합니다. 그렇지 않으면 낯선 사람에게 귀하의 시스템에 대한 전체 액세스 권한을 부여하게 될 것입니다. 이는 나쁠 것입니다.

    아무튼 다음화에서 뵙겠습니다.
    LAMP에서도 작업하고 싶어요.
    C, 파이톤에서 Go를 불러오세요.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage