[ Smart Mirror ] 02. MagicMirror 윈도우 환경에 설치하기.

Smart Mirror 프로젝트 _ 02. MagicMirror 윈도우 환경에 설치하기.

---

 MagicMirror 프로그램

매직미러( MagicMirror )는 오픈소스 기반의 모듈식 스마트미러 프로그램이다.

Node.js를 통해 웹 서버를 구축하고 Electron 프레임워크에 올려서

우리가 앞으로 보게 될 스마트미러의 화면을 개발한다.

 

[ MagicMirror 공식문서 ]

https://magicmirror.builders/

MagicMirror²

 

 

---

 

 Node.js 설치 

매직미러를 설치하기 전에 먼저 node.js를 설치해야 한다.

Node.js 는 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜 주는

런타임이다. 특히, 서버 프로그램을 작성하는데 많이 사용된다.

​

https://nodejs.org/ko/

Node.js

 

 

 

Node.js 사이트에 접속해서 LTS 버전을 설치하도록 하자.

 

 

 

 

---

매직미러 설치하기

매직미러 프로그램의 설치는 공식문서에 나와있는 데로 설치하면 되는데 

해당 방법은 라즈베리파이 OS에 설치하는 방법이다.

* 윈도우에서 설치하는 방법도 나와있음

 

따라서 우리는 Window 환경에서 개발 후 옮길 것이기 때문에  설치과정에서 약간의 수정이 필요하다.

 

 

 

[ 매직미러  설치 과정 ]

1. 매직미러 Github  git clone

매직미러 Github : https://github.com/MichMich/MagicMirror 

 

GitHub - MichMich/MagicMirror: MagicMirror² is an open source modular smart mirror platform. With a growing list of installable

 

설치할 경로에서 Cmd 창을 열고 다음 명령어를 입력한다.

 

git clone https://github.com/MichMich/MagicMirror.git

​

​

설치된 폴더에 들어가서 보면 html , css , js 파일들로 이루어져 있는 것을 볼 수 있다.

 

 

 

 

2. npm install

 

npm 은 Node Package Manager 로 js 프로그래밍 언어를 위한 패키지 관리자이며,

자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.

​

​

cmd(명령프롬프트) 창을 열어 매직미러가 설치되어 있는 경로에 들어가서

npm install 명령어를 입력한다

​

cd 매직미러설치된경로
npm install


cd C:\Users\nackjun\JS_practice\blog\MagicMirror-master npm install

* 위 코드는 내 노트북 에서의 경로이기 때문에 본인이 설치한 경로를 입력해야 함.

​

그러면 npm이 설치가 되는데 다음과 같은 오류가 발생한다

​

​

오류를 읽어보면 package.json 파일의 스크립트에 있는 cd vendor / npm install 명령을 실행할 수 없다고 한다.

​

​

package.json 은 개발자가 배포한 패키지를 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서인데,

작성된 코드를 보면 magicmirror, vendor, font파일에 있는 package.json 파일을 통해 자동으로

npm을 설치(install) 하도록 되어있다.

​

하지만 명령어 코드가 리눅스 기반인 라즈베리파이 os를 기준으로 작성되었기에

window 환경인 우리 컴퓨터에서는 정상적으로 수행되지 않아 발생한 오류이다.

​

​

​

cmd창에 다음 명령어를 입력한다.

 

cd vendor npm install

설치가 정상적으로 진행이 되고 다음과 같은 문구가 뜬다.

​

​

​

보안 취약점이 발견되었다는 문구인데  다음 명령어를 차례로 입력하면 된다.

 

npm audit fix --force npm fund

 

​

​

그러면 정상적으로 처리? 된다.

​

​

​

fonts 폴더에도 package.json 파일이 있다.

vendor 폴더에서 한 것처럼 똑같이 npm install을 해주면 된다.

​

cd..
cd fonts npm install

 

​

​3. config.js 생성

 

이제 config 폴더의 config.js.sample 파일을 복사해서 config.js 파일을 만들어야 한다.

​

config.js 파일은 기본설정?을 해주는 파일이라고 생각하면 된다.

 

내용을 읽어보면

​

​

언어 설정 port 설정 등등 여러 가지 설정들을 해주고 있다.

​

다음 명령어를 입력하여 config.js.smaple 파일을 복사한다.

​

copy config폴더경로\config.js.sample config폴더경로\config.js

​

형식은 copy [복사할 경로][파일이름] [붙여 넣을 경로][파일이름]이다.

​

​

​

명령어로 하기 어렵다면 그냥 파일탐색기 창에서 복사/붙여 넣기/이름변경 을 해도 된다.

​

 

 

​

​4. package.json 수정

 

npm start

 Cmd창에서 npm start 명령어를 통해 프로그램을 실행시켜 보자.

* 실행 시 꼭 매직미러 본 폴더 경로에서 명령어를 입력해야 함.

 

 

현 상태에서 실행시키면

 

​

​

window 환경에서는 "DISPLAY="${DISPLAY:=:0}" 에러가 발생한다.

​

 

 

package.json 파일의 start 부분에 "DISPLAY="${DISPLAY:=:0}" 를 삭제한다.

* font, vendor 가 아닌 MagicMirror 폴더에서의 package.json 파일을 수정해야 한다.

​

​

​

 

이런 오류가 발생한다면 package.json 파일에 따옴표가 누락되지는 않았는지 확인해 보자.

다음과 같이 작성되어야 한다

"start": "./node_modules/.bin/electron js/electron.js",

 

​

이제 모든 준비가 끝났다.

​

 

npm start 명령어를 입력하면 정상적으로 잘 작동이 된다.

* 실행 시 꼭 MagicMirror 폴더 경로에서 명령어를 입력해야 함.

​

 [ 실행 명령어 ]
 npm start # 실행 
 npm start dev # 개발환경으로 실행
 npm run server # Electron 없이 서버만 실행, 웹브라우저에 http://localhost:8080을 통해서 확인.

 

[

​

​