일단 IoT를 구축하기 위해서는 메인 서버가 필요합니다. 삼성의 스마트싱스같은 IoT 솔루션을 보면 대개 '허브'라는 개념이 존재합니다. IoT 허브는 Zigbee를 사용하는 장치들이 웹을 통해 제어될 수 있도록 중간다리 역할을 합니다. 이 프로젝트에서의 메인 서버는 허브의 역할을 함과 동시에 현재 서비스중인 IoT 솔루션의 클라우드 서버 역할을 동시에 하게 됩니다.
프론트엔드, 백엔드
프론트엔드는 웹에 접속했을 때 흔히 볼 수 있는 UI를 의미합니다. 이 프로젝트에서 프론트엔드는 React라는 자바스크립트 기반의 라이브러리를 사용합니다. 기존에는 HTML + CSS + Javascript를 통해 개발했지만 데이터 흐름이 매끄럽지 못하고 개발이 굉장히 복잡해지는 감이 있어 React를 새로이 사용하게 되었습니다.(근데 React를 썼는데 왠지 모르겠지만 더 복잡해진 느낌이 듭니다.. 프로젝트가 커져서 그렇겠지요.....?)
백엔드는 유저에게 필요한 정보를 보여주고, 정보를 받아오는 역할을 합니다. 게시글을 프론트엔드로 보내주거나, 유저가 프론트엔드를 통해 작성한 게시글을 서버 DB에 저장하는 일, 혹은 유저가 접근하면 안되는 정보 처리(ex.:가입된 회원 정보들, 다른 유저의 비밀글 등) 백엔드가 담당합니다. 백엔드 서버는 프론트엔드와 마찬가지로 취향과 성능, 유지보수 세 부분에서 적절한 것으로 선택하면 됩니다. 이전에 Flask를 사용했었으나, Python 기반의 서버는 다른 장치에서 개발할 때마다 매번 venv 를 새로 세팅해줘야 하고 라이브러리들이 파이썬 버전에 민감하기도 해서 제 경우에는 별로 적합하지 않았습니다.
이 프로젝트에서는 Node.js 미들웨어인 Express를 백엔드로 사용합니다. 다른 장치에서 개발할 때도 npm install 한 방이면 모든 게 끝나고, 사소한 문제에 민감하지도 않고, 성능도 준수한데다, 프론트엔드와 같은 자바스크립트를 사용하기에 어렵지 않게 개발을 진행할 수 있습니다.
Node.js & Express 설치하기
Node.js는 두 가지 방법으로 설치할 수 있습니다. 설치파일을 다운로드 받거나, 터미널을 통해 설치를 진행합니다. 여기서는 불필요한 명령어 입력을 피하기 위해 설치 페이지에서 파일을 다운로드 받아 설치하겠습니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
1. nodejs.org/ko/에서 nodejs를 설치합니다.
2. 설치프로그램의 안내에 따라 설치를 진행한 후 명령 프롬프트 혹은 터미널창에 node -v 명령어를 입력했을 때 다음과 같이 버전이 표시된다면 성공입니다.
3. 일단 패키지 폴더 생성 후 npm init을 수행합니다. 패키지 이름이나 이것저것 물어보는데, 필요에 따라 설치해주시면 되고, entry point는 app.js, test command는 nodemon app을 입력합니다. 이후 npm i express를 통해 express를 설치합니다.
4. Node.js와 express 설치가 완료되었습니다. 이제 백엔드 서버를 구축할 수 있습니다.
const express = require("express");
const port = process.env.PORT || 5000;
// express 객체 생성
const app = express();
app.get("/", function (req, res) {
res.send("hello cranberry!");
});
app.listen(port, function () {
console.log("server works on port :" + port);
});
5. /에 app.js를 만들고 위의 내용을 붙여넣으세요.
6. 이제 터미널 창을 열어 npm test 혹은 /에서 nodemon app을 실행시킨 후 웹브라우저에 localhost:5000에 접속하면 express 서버에서 보내는 내용을 확인할 수 있습니다. 코드에서 알 수 있듯, hello cranberry! 창이 뜨는 것을 확인할 수 있습니다.
React 설치하기
React는 Node.js와 Express를 설치한 폴더 내에 위치시키겠습니다. 프론트엔드나 백엔드나 별개로 구성해도 되지만 지금 우리는 둘 다를 개발하기에 이 둘을 그냥 하나의 패키지로 간주할겁니다.
1. npm i react | React를 설치합니다.
2. create-react-app client | React App을 생성합니다.
3. 이제 React App 이 생성되었습니다. cd client && yarn start를 입력해 React App 이 정상적으로 실행되는지 확인합니다. Chrome 창이 뜨면서 자동으로 localhost:3000 으로 연결될텐데, 그렇지 않다면 수동으로 웹브라우저에서 localhost:3000으로 접근할 수도 있습니다.
Done!
웹브라우저가 열리면서 위의 화면이 페이지에 나타났다면 성공적으로 설치하신겁니다. 다음 포스팅에서 찾아뵙겠습니다. 감사합니다.
긴 글 읽어주셔서 감사합니다. 글이 도움이 되셨다면 공감버튼과 광고 클릭 부탁드립니다. 감사함을 표현하는 가장 쉬운 방법입니다.
