일렉트론 삽질기
•Download as PPTX, PDF•
9 likes•5,323 views
일렉트론 삽질기 일렉트론으로 실제프로그램을 만들면서 삽질했던 내용을 소개하고 그 해결방법을 공유해 봅니다.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
일렉트론 삽질기
- 2. 소개 엔트리교육연구소 엔트리 오프라인 에디터 웹 서비스를 오프라인으로 변환 하드웨어 연결프로그램 오프라인 전용 서비스
- 5. 목차 원래 발표는 Electron-Builder 만 하려고 했는데… 프로그램들을 만들면서 발견했던 문제점과 그 처리 방법을 공유
- 6. 첫번째 삽질(문제편) 가끔씩 성능이 너무 떨어져요! 절망적인 현장의 반응
- 7. 첫번째 삽질(문제편) 엔트리 에디터 하드웨어 연결 프로그램 하드웨어 장치 (아두이노 등) WebSocket SerialPort 심각한 느려짐 발생 심각한 느려짐 발생
- 8. 첫번째 삽질(해결편) 이유는 backgroundThrottling !!! 해결 방법은 webPreferences !!!
- 9. 두번째 삽질(삽질편) 이미지가 나오지 않아요! 업로드가 제대로 되지 않아요!
- 10. 두번째 삽질(해결편) 문제는 windows의 경로 문제 (-역슬래시)와 OSX, Linux, Windows간 저장 파일을 공유 하면서 권한문제가 발생 OSX LinuxWindow
- 11. 두번째 삽질(해결편) Css 적용은 항상 역슬래시()는 슬래시(/)로 변경 파일 및 폴더 생성 mode옵션 항상 사용하여 적절한 권한 생성
- 12. 세번째 삽질(문제편) Mp3를 다루면 프로그램이 죽어요
- 13. 세번째 삽질(해결편) 이유는 확실치 않으나 FFMPEG 라이브러리 문제로 보여짐 처리 방법은 64비트 운영체제에서는 64비트로 동작시키면 문제 해결 32비트와 64비트 둘다 만들어서 배포
- 14. 네번째 삽질(문제편) README등 파일 추가시 OSX 빌드 오류 발생
- 15. 네번째 삽질(해결편) 이유는 electron-builder경로 지정문제 오류 성공
- 16. 다섯번째 삽질(문제편) Windows에서 빌드 실패의 반복
- 17. 다섯번째 삽질(해결편) Electron-Builder의 고질적인 문제 (비동기 동작문제) 버전이 올라가면서 나아지고 있음 완전한 해결 방법은 CI활용 (Windows – Appveyor / Osx – travis CI)
- 18. Electron-Builder의 추가 문제점 일부 Windows PC에서 알수없는 스퀘럴 설치 오류 발생 (설치중 오류 메시지 없이 그냥 중단) 스퀘럴 이용 설치시 설치 진행상황이 표시가 안됨 (사용자 불편 접수) 통상적 설치에 익숙한 사용자들 32비트 환경의 사용자가 너무 많은 것도 문제
- 19. 결국은 OSX – Electron-Builder사용 (.dmg를 이용하기때문에 문제 없음) Windows – Electron-Builder를 이용하여 패키징만 하고 NSIS로 설치 파일 생성
- 20. 팁? 일렉트론에서 사용 가능하도록 노드모듈 빌드 node-pre-gyp 설치 node-pre-gyp configure node-pre-gyp build node-pre-gyp rebuild --target_arch=“arch선택” --target=“일렉트론버전” --target_platform=“플랫폼” --runtime=electron --dist-url=https://atom.io/download/atom-shell 윈도우 32비트 예제 node-pre-gyp rebuild --target_arch=ia32 --target=1.1.1 --target_platform=win32 --runtime=electron --dist-url=https://atom.io/download/atom-shell
- 21. 앞으로 계속할 삽질… 자동업데이트 기능 개발 ES2015와 React 적용 테스트 자동화(Spectron – 현재는 샘플 적용) CI를 이용하여 테스팅 및 배포 자동화 적용
- 22. 감사합니다
Editor's Notes
- 안녕하세요. 일렉트론 삽질기를 발표하게된 엔트리교육연구소 소속 김정용 이라고 합니다. 허접한 실력이지만 일렉트론으로 현재 프로그램을 두개를 개발해 운영하고 있고, 이 프로그램들을 개발하면서 삽질했었던 내용을 공유드리기 위해서 이 자리에 나왔습니다.
- 일단 제 소개를 드리겠습니다. 저는 지금 엔트리교육연구소에서 근무하고 있구요. 엔트리교육연구소 이전에는 하이브리드 앱 개발을 주로 했었습니다. 현재 엔트리교육연구소에서는 엔트리 오프라인 에디터와 하드웨어 연결프로그램 2가지 만드는데 힘을 최대한 쓰고 있습니다. 두 프로그램 모두 일렉트론으로 개발된 어플리케이션 입니다.
- 엔트리 오프라인 에디터 화면이구요. 웹서비스 되고 있는 에디터 화면을 그대로 오프라인으로 구현한 프로그램입니다.
- 이 화면은 엔트리 하드웨어 연결프로그램 이구요, 이 프로그램은 따로 웹서비스가 없는 독자적인 어플리케이션 입니다. 이프로그램의 역할은 여러 하드웨어 장치들과 시리얼통신을 하고, 웹소켓 통신으로 좀전에 보셨던 엔트리 에디터와 데이터를 중계해주는 역할을 하고있습니다.
- 원래 발표는 일렉트론 빌더만 하려고 했는데 (클릭) 분량이 적은것 같아서 앞서 보여드렸던 프로그램들을 만들면서 발견했던 문제점과 그 처리방법을 공유해 보려고 합니다. 처음 개발했을떄는 0.36.10 버전에서 시작했는데 현재는 1.1.1 버전을 사용하고 있습니다.
- 가금씩 성능이 너무 떨어져요! (클릭) 실제로 프로그램을 사용하시는 선생님들의 원성… 아무리 개발 콘솔을 띄우고 확인해봐도 원인을 찾을 수 없었는데요…
- 일단 저희 프로그램의 구조를 간단하게 표현해보면 다음과 같습니다. 엔트리 에디터와 하드웨어 연결프로그램 사이는 WebSocket으로 연결되어 있구요 하드웨어 연결 프로그램은 아두이노 같은 하드웨어 장치들과 시리얼 포트로 연결되어 있는데요.(클릭) 이 사이의 연결 부분에서 특히나 느려짐이 발생하는것을 어렵게 확인했습니다.
- 그 이유를 계속 찾아보니 backgroundThrottling이 문제 였습니다. 일렉트론에 포함된 크로미엄의 기능인데요, 프로그램이 background 상태로 변경되면 쓰로틀링이 동작하면서 전력등의 자원소모를 아끼기 시작하면서 성능또한 전반적으로 느려졌습니다. Background상황에서만 발생하기때문에 계속 콘솔창을 띄워가면서 디버깅을 해서 해당 문제를 발견하지 못했었습니다. 정말 삽질 했었네요.(클릭) 해결방법은 엄청 간단했습니다. BrowserWindow 생성시 webPreferences 값에 backgroundThrottling 값을 false로 주면 해당 기능이 동작하지 않습니다.
- 두번째 삽질은 경로와 관련된 부분입니다. 잘 나오던 이미지가 나오지 않아요(클릭)(클릭) 오프라인에서 저장한 파일이 업로드가 되지 않아요!(클릭) 이런 문제점들이 지속적으로 리포트가 발생했는데요.
- 확인해보니 이는 windows의 경로 문제와 권한문제 였습니다. 저희 프로그램의 경우에는 온라인-리눅스 환경과, 오프라인의 맥과 WINDOWS 환경을 지원하고 있는데요 온라인으로 데이터를 업데이트 하는것이 아니라 인터넷이 연결안되는 환경에서도 대응이 가능하도록 따로 저장 파일을 관리하고 있습니다. 윈도우에서는 separator가 역슬레쉬로 사용되는것이 문제 였습니다. 이것이 맥나 linux에서 같이 사용할때 문제가 발생하는 부분이 있었고, Css를 처리할때도 역슬래시가 아닌 슬래시 이어야 제대로 동작하는 부분도 있었습니다. 또 윈도우에서 작업할떄는 폴더나 파일생성에 따로 권한을 신경쓰지 않았는데요 이렇게 생성된 파일을 리눅스나 맥환경에 가져하면 권한이 없어서 처리가 안되는 경우가 발생했습니다.
- Css적용 하기전에는 항상 역슬래시를 슬래시로 변환해서 사용하고 파일생성 및 폴더 생성시에는 mode옵션을 통해 권한을 삽입해서 처리해 주었습니다.(클릭)
- 세번째 문제는 Mp3등의 오디오 파일을 다루면 화면이 먹통이 되는 현상입니다. 증상은 화면과 같습니다.(클릭) 용량이 대략 3메가 이상의 어느정도 용량이 있는 mp3 파일등을 재생과 로드 하는 동작을 반복하다 보면 화면이 먹통이 됩니다. 의외로 자주 발생하는데요.
- 이유는 확실치는 않은데 일렉트론에 기본적으로 포함된 FFMPEG 라이브러리 문제가 아닐까 생각되어 집니다. 아무래도 프로그램이 32비트 환경에서 현재 많이 사용되고 있어서 두 운영체제다 사용할 수 있도록 32비트로만 배포 했었는데요, 64비트 운영체제 에서 32비트 일렉트론을 사용하면 발생하는 문제 였습니다. 이 문제는 심플하게도 64비트 컴퓨터에서는 64비트 일렉트론을 32비트 운영체제에서는 32비트 일렉트론을 사용하는것으로 문제가 해결되었습니다. 이 문제 때문에 64비트와 32비트로 구분하여 배포 하도록 하였습니다.
- 보시는 그림은 통상적으로 맥에서 dmg파일로 설치 할 때 많이 보시는 형태인데요(클릭) 다음 그림처럼 README파일등을 추가로 넣어서 사용자에게 정보를 보여주는 형태로 개발을 할때가 많을것 같은데요 Electron-builder 에서 이것을 처리하다보면(클릭) 다음과 같은 오류가 발생하는 경우가 있습니다. 스크린샷을 보면 생성된 app파일을 못찾고 있네요
- 두개의 코드가 있습니다. 해당 코드는 electron-builder에서 맥용을 빌드 할 때 사용하는 package.json파일중 일부 내용이구요 왼쪽이 방금 전 오류가 나는 코드입니다. 왼쪽의 콘텐츠 정의 순서를 보시면 app밑의 README파일의 상대경로가 먼저 포함되고 난 후 프로그램의 app경로가 지정되었는데요, 이런경우 오류가 발생합니다. 오른쪽처럼 app을 먼저 지정하고 상대경로를 지정해야 오류가 발생하지 않는것을 확인할 수 있습니다.
- 다음은 Electron-builder문제인데요 윈도우 에서만 빌드를 수행하면 스크린샷과 같은 오류가 매우 자주 발생했었습니다. 특히나 프로젝트에 포함된 파일이 많고 용량이 크면 클수록 많이 발생했습니다. 저희 오프라인 에디터 프로그램을 예로 들자면 용량은 300메가 파일은 약 2만개 정도사용하고 있습니다.
- 저는 이것이 electron-builder의 고질적인 문제라고 보고 있습니다. 오류의 내용을 자세히 보면 내부 동작들이 비동기로 돌면서 특정파일들이 아직 생성이 안되었는데 해당 파일을 참조 하려다 실패하고 내뿜는 오류들이었습니다. 용량이 커지거나 파일의 개수가 많으면 자주 발생하는 부분이 여기에 있는 것 같습니다. 그러나 다행 스럽게도? Electron-builder의 버전도 점점 올라가면서 해당 문제가 개선이 되고 있다는 점입니다. 물론 아직도 큰 프로젝트에서는 간간히 발생하고 있습니다. 이 오류를 절대 보고싶지 않으시다면 CI가 도움이 될것 같습니다. Windows의 경우는 Appveyor에서 맥에서는 travis CI에서 빌드하면 오류 없이 빌드가 가능했습니다. 음.. 추가적으로는 패키징시에 asar로 만들어서 처리하면 좀더 효과적으로 빌드가 되었습니다.
- 음 다만 electron-builder 문제점이 몇가지 있었는데요 일단 electron-builder가 윈도우 에서는 스퀘럴 사용해서 설치를 하는데요 일부PC에서 설치가 안되는 문제가 있었습니다. 어떤경우에는 설치 오류 로그가 표시되는데 어떨때는 설치 오류 로그도 없이 설치가 되지 않아서 좀 난감했습니다. 또 스퀘럴 설치는 사용해보신분들은 아시겠지만 설치 프로그레스가 표시되지 않습니다. 이부분에 대한 사용자 리포트가 꽤나 발생하였고, 기존의 통상적 설치를 좋아하시는분들이 더 많았습니다. 또, 저희 프로그램 사용자들 중에 32비트 사용자 많은데요 자동업데이트 서버인 Nuts가 32비트 환경에서는 제대로 동작하지 않는 점도 문제점이라면 문제라고 할 수 있을것 같습니다.
- 결국은 맥 환경에서는 electron-builder를 통해 생성된 dmg를 사용하고 Windows에서는 electron-builder로 패키징 된 파일등을 nsis를 통해서 설치파일을 생성하고 이 파일을 배포 하는 것으로 사용하고 있습니다.
- 이것은 조금 애매한 부분이라 이렇게 언급해 드리는데요. 노드에서 사용하는 네이티브 모듈을 일렉트론에서 사용하는 방법입니다. Node-pre-gyp를 설치하고 위와 같이 빌드 옵션을 주시면 일렉트론에서 사용가능 한 버전으로 빌드가 됩니다. 물론 전부다 되는것은 아니고 어떤 경우에는 코드수정후에 가능한 경우가 있습니다. 저희회사의 경우에는 serialport라이브러리를 이런방식으로 빌드해서 사용하고 있습니다.
- 앞으로도 계속 삽질하면서 나아갈 예정입니다. 자동업데이트 기능 개발과 ES2015 리액트를 적용할 예정이고 테스트 자동화 등의 명세를 작성 후 CI등을 이용하여 테스팅과 배포자동화를 만드려고 하고 있습니다.
- 감사합니당