새로운 프로젝트를 구상하면서 이번에는 실제로 배포를 통해 사용자가 있는 웹앱을 제작해보려고 한다. 새로운 프로젝트는 학원차량 스케줄 관리 및 시스템 관리 웹앱이다. 사전 조사를 해보니 vue보다는 React가 더 적합하다는 생각이 들었고, 실제 웹앱 배포를 구상하면 먼저 배포 방식에 대한 결정이 끝난 상태에서 배포를 진행하며 나머지 부분들을 완성하는 게 더 바람직하다고 느꼈다. 백엔드 부분에서 정보가 유출되지 않으려면 Github public을 사용하면 안됐고, 그래서 Cloud를 이용해서 배포를 해보려고 한다. 개발 목표는 1. Firebase를 통한 웹앱 배포 2. id와 password를 입력해서 각각의 페이지를 보여주기 3. 페이지 구성하기 1 - 예약 페이지 1) 그날의 이용 가능한 차량과 시간..

앞의 글에서는 Web(mobile) - Sever - Arduino 의 연결을 테스트했다 이번 글에서는 Web에서 입력한 메세지로 Arduino를 제어하는 걸 해보겠다. 오늘의 목표 3. Front에서 websocket에 접근 후 아두이노에 변동사항 적용 여기서 Front라고 함은 브라우저에서 입력한 데이터를 말한다. 연결 방향은 Front에서 입력 -> Server가 다시 클라이언트에 메세지 전달 -> 아두이노가 해석 후 동작 간단하지만 꽤 복잡하다. 우선 기본 틀에서 천천히 보자 Front에서 입력을 하면 Server가 받고 다시 Client에게 보내는 부분 (만약에 받은 msg와 보내는 msg의 형식이 바뀌길 원한다면 io.emit 부분의 msg를 바뀌게 만들면 될 것 같다) 이제 아두이노가 해당 ..

굉장히 중요한 부분이고 많은 분들이 어려움을 많이 겪었을 것이라 생각한다. 왜냐면 많은 한, 영문의 문서들이 컴팩트한 정보를 담고 있지도 않고 생각보다 복잡하게 설명하고 있다고 생각했다. 그래서 나는 최대한 컴팩트하고 빠르게 크로스 컴파일을 진행해보겠다. 우선 앞에서 사용하던 serialport exam을 이용해서 해당 내용들을 조금 수정하고 install이 필요한 것은 인스톨해 주겠다. ps. electron-forge는 크로스 컴파일에 관해 정보가 없어서 electron-builder로 진행한다. package.json의 devDependencies 부분에 electron-builder를 추가시키기 위해 아래 코드를 터미널에서 실행해준다. npm install --save-dev electron-bu..