Electron으로 개발하기에 앞서 디자인을 도와줄 Semantic-UI와 jQuery를 설치하는 법을 배워보도록 합시다.
jQuery는 너무나도 유명한 javascript 라이브러리입니다. Semantic-UI를 사용하기 위해서는 jQuery가 필수적으로 설치되어 있어야하기 때문에 먼저 설치를 해줍니다.
$ npm install --save jquerySemantic-UI는 UI Library의 카테고리에 속하는 제품입니다. 이 도구는 잘 만들어진 기본 부품(component)를 제공합니다. 이 부품들을 활용해서 빠르게 서비스를 구현할 수 있고, 필요에 따라서는 개조해서 사용할수도 있습니다.
우리는 Angular2에 맞춰져 있는 ngSemantic을 이용하도록 하겠습니다.
ngSemanticLink: https://ng-semantic.herokuapp.com/#/
Semantic-UI 설치는 간단합니다. 이전의 일반 html코딩하던 것 처럼 index.html의 <head>태그 안에 semantic.js와 semantic.css파일을 추가해주면 됩니다.
<!-- /src/index.html -->
<head>
...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
...
</head>이제 한번 Electron을 실행시켜 봅시다.
$ ng build --watch
$ npm run electron그리고 우리는 한 에러에 직면하게 됩니다.
Uncaught ReferenceError: jQuery is not defined
우리는 분명 jQuery를 설치하였는데, jQuery를 찾지 못했다는 황당한 이유입니다. 여기서 저도 며칠을 삽집을 한지 모르겠습니다.
원인은 바로 Electron의 환경때문이었습니다.
기타 다른 라이브러리와 다르게 jQuery의 경우에는 Electron 환경을 크롬과 다른 환경으로 인식, Common JS환경으로 인식하기 때문에 jQuery를 전역변수로 설정하지 않습니다. 따라서 jQuery를 Electron에서 사용하기 위해서는 별도의 설정이 필요합니다.
npm에서 jQuery를 설정했다면 이와 같이 설정하면 됩니다.
<!-- index.html -->
<head>
...
<!-- 이 부분을 추가해 줍니다. -->
<script>window.$ = window.jQuery = require('jquery');</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
...
</head>
이제 정상적으로 Semantic-UI와 jQuery가 설치된 것을 확인할 수 있습니다.