일렉트론을 설치하고, 제이쿼리를 사용한 방법에 대해 정리한 PPT 자료를 공유합니다.

1. 일렉트론 가볍게 사용해보기
2018.11.14 Myung Jun

2. • 일렉트론(Electron)이란?
• 일렉트론을 설치하고 예제 앱을 실행해보기
• 내가 경험한 일렉트론에서 제이쿼리 사용해보기
• 내가 만들어본 일렉트론 프로그램 시연
오늘 이야기할 주제는?

3. 일렉트론(Electron) 이란?
웹 언어 (Html5 , CSS, Javascript, node.js)를 사용하여 데스크롭 앱을
제작할 수 있는 프레임워크
UI는 HTML5 . CSS . JAVASCRIPT로 구성하며
코어는 JAVASCRIPT를 통해 네이티브API를 요청 할 수 있도록 만들어짐!
하나의 개발로 Windwos , Mac , Linux 프로그램을 만들 수 있음.

4. 설치 전 선행 과정(Node.js)
• 일렉트론을 사용하려면 Node.js가 설치되어 있어야함.
• Npm은 node.js 설치하면 자동으로 설치되니 다운로드 GO!

5. 설치 전 선행 과정(Git)
• Git은 선택! 이 이야기에서는 예제 파일을 다운로드 받을 때 사용하며,
꼭 일렉트론을 사용하기위해 깃이 있어야할 필요는 없음

6. 일렉트론 프로젝트 시작하기
• CMD 창을 여신 뒤, node가 제대로 설치되어 있는지 확인!
• 자신이 원하는 폴더로 이동한 뒤, git clone https://github.com/electron/electron-quick-start를 다운로드.
(git 설치를 안했다면 그냥 위 경로에서 받은 다음 동일 경로에 압축을 해제하여 넣어줘야함.)

7. • 자신이 압축을 푼 경로에 제대로 파일이 있는지 확인 한 다음..
일렉트론 프로젝트 시작하기
• 이후 npm install 을 cmd에 입력해주면 준비는 끝!
간단하죠!
NPM가 다른 묘듈과 종속성을 관리해주기때문에 다른 설치과정이 따로 없음!

8. 일렉트론 프로젝트 시작하기
사용하는 폴더 위치에서 npm start를 입력하여 실행하는걸 확인해보자

9. 간단하게 일렉트론 실행 완료!

10. 일렉트론에서 제이쿼리를?
그냥은 사용하지 못하는 제이쿼리..
웹이랑 똑같은것 같은데.. 이렇게 사용하면 안될까요?
정상적으로 로딩은 되지만
놉, 못씀.
실행해보면..

11. 왜 못쓰지?
제이쿼리는 CommonJS 환경 , 브라우저 환경 둘다 사용하는 구조
그러다보니 구분하여 초기화를 시켜주는데 이때 라이브러리의 기능을 전역
으로 노출시킬지 판단함. (묘듈이 objec면 – CommonJS)
일렉트론은 크롬(크로미움)기반이지만,
환경은 Node.js기 때문!

12. 해결 방법 1
1. Window.$ / Window.jQuery에 할당

13. 해결 방법 2
Module이 object라면 CommonJS 환경이라고 판단 한다고..?
그럼 먼저 조건을 걸어서 가지고 있다가 3자 스크립트 실행 뒤 다시 돌려주자.
1. 모든 3자 라이브러리 겹침 없음
2. node-integration 사용 안함 문제도 해결! ( node.js , Electron API 이슈 해결)

14. 여기서는 담지 않은 방법도 있음.
https://tinydew4.github.io/electron-ko/docs/faq/

15. 내가 만들어본 프로그램 시연
-
QA

16. 내가 만든것
네이버 딥러닝 번역 (SMT) API 급히 준비한 PHP JSON 서버
복사 번역기
JSON

17. 복사번역기
긁어서 복사 버튼 누르는 순간 바로 번역.
한정된 번역키 때문에 무한정 보내지 않도록 소스 코드 구성
어떤 창이던 최상단에 유지 하고 이동시에는 빨간 버튼을 통해 이동하도록

18. 끝.
Jung Myung Jun
정 명 준 Thank YOU!
junnet_7@naver.com