Code Gear - 유튜브 개발 강의

동영상 강의

https://youtu.be/vgic4kn1Oko

Electron 화면은 web 제작 기술과 동일합니다.

따라서 html, css, js만으로 개발이 가능합니다.

이번 시간은 codepen 사이트에서 맘에 드는 디자인을 가져와서 화면 디자인을 바꿔봅니다.

우선 일렉트론 App을 만듭니다.

npx create-electron-app electron-app

VSCode로 프로젝트를 불러옵니다.

code .

codepen.io 사이트로 이동합니다.

• https://codepen.io/

검색창에 "intro" 로 검색합니다.

• 맘에 드는 디자인을 선택해서 click하면 editor 창으로 이동합니다.
• 저는 ScrollMagic Wiki Tutorial을 선택했습니다.
• https://codepen.io/grayghostvisuals/pen/EtdwL

• html 내용을 복사해서 index.html에 붙여 넣습니다.
• css 내용을 복사해서 index.css에 붙여 넣습니다.
• src/function.js 파일을 만듭니다.
• js 내용을 복사해서 function.js에 붙여 넣습니다.
• index.html </body>위에 <srcript src='function.js'></script>를 추가합니다.
• yarn start 를 실행합니다.

간단하게 일렉트론 화면을 만들어 봤습니다.

이렇게 codepen을 이용하면 디자이너 없이 약간의 수정만으로 일렉트론 개발이 가능합니다.

동영상 강좌

https://youtu.be/ojDfxv_EU1k

일렉트론의 메뉴는 다음 API 문서를 참조하시면 됩니다.

https://www.electronjs.org/docs/latest/api/menu

소스는 지난시간에 만든 react-electron을 계속 사용합니다.

• src/main.js

가장 먼저 menu를 사용하기 위해서 electron의 menu를 선언 합니다.

const { app, BrowserWindow, Menu } = require('electron');

다음과 같이 template을 이용하여 menu를 setting 합니다.

• createWindow function 다음에 아래 코드를 작성합니다.

const template = []; 
const menu = Menu.buildFromTemplate(template); 
Menu.setApplicationMenu(menu);

• 현재는 template에 값이 없기 때문에 메뉴가 나타나지 않는 것을 볼 수 있습니다.

• template에 다음과 같이 메뉴를 추가합니다.

const template = [
  { 
    label: "File",
  }
]

• submenu는 다음과 같이 추가합니다.

  { 
    label: "File", 
    submenu: [ 
      { 
        label: "Open" 
      }
    ] 
  }

Role 메뉴

• 일렉트론 menu에서는 일반적인 메뉴를 role 메뉴로 만들어 제공합니다.
• role 메뉴는 다음 url을 참조하시면 자세히 볼 수 있습니다.
  • https://www.electronjs.org/docs/api/menu-item#roles

• 개발자 화면을 toggle 하는 'toggleDevTools' role을 다음과 같이 추가합니다.

{ 
    role: 'toggleDevTools', 
}

메뉴 클릭시 이벤트 처리하기

• 다음과 같이 Open 메뉴를 클릭했을때 console 로그를 출력하는 이벤트를 추가합니다.

{ 
    label: "Open" , 
    click: function(){ 
      console.log('Clicked Menu Open!!!');
    }
},

Type 메뉴

• 일렉트론에서는 여러가지 type의 메뉴를 제공합니다.
• 그 중 가장 많이 사용하는 separator를 추가해 봅니다.

{ type: 'separator' },

• 'checkbox' type을 추가합니다.

{ label: 'Menu Item 2', type: 'checkbox', checked: true },

외부 사이트 열기

• 메뉴를 클릭했을 때 기본브라우저로 외부 URL을 호출하는 예제입니다.
• 우선 electron의 shell을 선언 합니다.

const { app, BrowserWindow, Menu, shell } = require('electron')

• shell.openExternal을 사용해 사이트를 호출합니다.

click: function(){
  shell.openExternal("https://www.electronjs.org/docs/api") 
}

이상으로 일렉트론의 메뉴 사용법을 알아보았습니다.

보다 자세한 사항들은 API 문서를 참조하시기 바랍니다.

동영상 강좌

https://youtu.be/o4ZjkibiD8A

리액트 프로젝트 만들기(create-react-app)

• npx create-react-app "프로젝트명"을 사용하여 React Application을 만듭니다.

npx create-react-app react-electron

리액트 프로젝트 실행

yarn start

• http://localhost:3000 으로 실행됩니다.

일렉트론 패키지 추가

yarn add --dev electron

일렉트론 실행 스크립트 추가

• package.json에 다음과 같이 스크립트를 추가합니다.

"scripts": {
	...
	"electron": "electron ."
},

일렉트론 Entry point 스크립트 추가

"main": "src/main.js",

main.js 만들기

• src/main.js 파일을 생성합니다.
• electron-quick-start의 main.js를 복사하여 추가합니다.

const { app, BrowserWindow } = require('electron') 
// include the Node.js 'path' module at the top of your file 
const path = require('path') 
// modify your existing createWindow() function 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      preload: path.join(__dirname, 'preload.js') 
    } 
  }) 
  win.loadFile('index.html') 
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

윈도우에 리액트 URL을 불러오기

• win.loadFile('index.html') 을 다음과 같이 변경합니다.

win.loadURL('http://localhost:3000')

실행화면

동영상 강의

https://youtu.be/g71mHJVbEzY

보일러플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 쉽게 만들 수 있습니다.

사용법은 다음과 같습니다.

npx create-electron-app "프로젝트명"

npx create-electron-app electron-app
cd electron-app

VS Code를 실행합니다.

code .

npm 패키지를 설치합니다.

• 메뉴에서 터미널 - 새터미널을 선택합니다.
• npm install 스크립트를 실행합니다.

npm install

프로젝트 폴더 구조는 다음과 같습니다.

다음 스크립트로 프로젝트를 실행합니다.

yarn start or npm start

실행 화면은 다음과 같습니다.

VSCode에 npm을 설치하면 보다 보다 쉽게 프로젝트를 실행할 수 있습니다.

• 왼쪽 메뉴바에서 확장을 선택합니다.

• 검색창에 "npm"을 입력합니다.

• egamma의 npm을 설치합니다.
• 보기 - 명령팔레트 메뉴를 선택합니다.
• 입력창에 "npm"을 입력합니다.

• "Npm 스크립트 보기에 포커스"를 선택합니다.
• 탐색기 하단에 "NPM 스크립트"라는 메뉴가 추가되었습니다.

• start 스크립트 옆에 마우스를 가져가면 실행 버튼이 나타납니다.
• 실행버튼을 클릭하면 스크립트가 실행됩니다.

이제 일렉트론 프로젝트를 쉽고 빠르게 만들고 실행할 수 있게 되었습니다.

남는 시간은 잠시 쉬었다 하시길 바랍니다.^^

이 글의 동영상 강의

https://youtu.be/cN8y5AjE1ZY

이번 포스트에서는 리액트에 카카오지도를 추가하는 코드를 만들어봅니다.

npx create-react-app kakaomap

프로젝트가 잘 실행되는지 확인해봅니다.

cd kakaomap
yarn start

Visual Studio를 실행합니다.

code .

index.html의 head에 다음 내용을 추가합니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net;">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net;">

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은키"></script>

App.js를 다음과 같이 수정합니다.

import './App.css';
import { useEffect } from 'react';

function App() {
  
  //스크립트 파일 읽어오기
  const new_script = src => { 
    return new Promise((resolve, reject) => { 
      const script = document.createElement('script'); 
      script.src = src; 
      script.addEventListener('load', () => { 
        resolve(); 
      }); 
      script.addEventListener('error', e => { 
        reject(e); 
      }); 
      document.head.appendChild(script); 
    }); 
  };
  
  useEffect(() => { 
    //카카오맵 스크립트 읽어오기
    const my_script = new_script('https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은키');
    
    //스크립트 읽기 완료 후 카카오맵 설정
    my_script.then(() => { 
      console.log('script loaded!!!');  
      const kakao = window['kakao']; 
      kakao.maps.load(() => {
        const mapContainer = document.getElementById('map');
        const options = { 
          center: new kakao.maps.LatLng(37.56000302825312, 126.97540593203321), //좌표설정
          level: 3 
        }; 
        const map = new kakao.maps.Map(mapContainer, options); //맵생성
        //마커설정
        const markerPosition = new kakao.maps.LatLng(37.56000302825312, 126.97540593203321); 
        const marker = new kakao.maps.Marker({ 
          position: markerPosition
        }); 
        marker.setMap(map); 
      });   
    }); 
  }, []);

  return (
    <div className="App">
      <div id="map" className="map"/>
    </div>
  );
}

export default App;

App.css에 class를 추가합니다.

.map {
  width: 100%;
  height: 600px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: medium;
  border-color: #D8D8D8;
}

실행화면

지도의 좌표는 다음 URL에서 찾으시면 됩니다.

(고맙게도 페이지를 만들어주셔서 감사합니다^^)

https://tablog.neocities.org/keywordposition.html

이상으로 리액트에 카카오맵을 추가해 보았습니다.