JJUNNAK's

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

PROJECT/Smart Mirror

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

최낙준 2023. 1. 22. 02:39

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


 MagicMirror 프로그램

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

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

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

 

[ MagicMirror 공식문서 ]

https://magicmirror.builders/

 

MagicMirror²

Voted number 1 in the MagPi Top 50! MagicMirror² is the winner in the official Raspberry Pi magazine’s 50th issue celebration feature voted by the Raspberry Pi community.

magicmirror.builders

 

 


 

 Node.js 설치 

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

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

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

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

 

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

 

 

 

 


매직미러 설치하기

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

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

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

 

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

 

 

 

[ 매직미러  설치 과정 ]

설치할 경로에서 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을 통해서 확인.

 

[

 

Comments