학교 활동 🏫/학교 이야기

[센서 키오스크 만들기 - 2] 웹 개발 준비

2023.03.20

1. node.js 설치Node.js (nodejs.org) Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org여기서 LTS 버전으로 설치를 진행했다. 2. CRA를 통해 react app 만들기 CRA를 통해 리액트 앱 초기 준비. 명령어 한 줄이면 다 준비해주기에 편함.3. CRA 기본 파일들 정리하기src 폴더 속 파일들 중 App.js, index.js만 남기고 전부 삭제한다. App.js, index.js에서 필요없는 import문도 전부 삭제한다.// 지금은 빠른 시간 내에 해야 했기에 곧바로 CRA를 통해서 했으나, 나중에는 다른 개발자가 만들어둔 boilerplate를 이용하는 것도..

학교 활동 🏫/학교 이야기

[센서 키오스크 만들기 - 1] 센서 키오스크가 필요해졌다.

2023.03.20

2023.03.20. 작성 올해 학교에 창의융합동이라는 공간이 리모델링되면서 공학실이 생기게 되었다. 실을 다 치우고 나서 학교의 모든 아두이노 및 전자 부품들이 이 실로 오면서 재료들의 개수 파악을 통한 함 정리가 필요해지기 시작했다. 따라서 엑셀에 리스트 작업을 진행했다. 이렇게 진행한 뒤 피벗테이블을 통해 물건들의 개수를 확인하였다. 개수를 확인하고 물건들을 넣을 통을 만든 것까지는 매우 좋았지만, 이후 물건을 가져가고 더 추가할 때 그 과정이 불편하였다. 따라서 이를 어떻게 해결할 지 고민하다가 키오스크를 만들어서 매장에서 무인주문하듯이 가져갈 때 마이너스 하고, 추가할 때 플러스하는 방식을 생각하게 되었다. 현재 생각한 구조는 다음과 같다. - 학생증으로 본인 인증 - 센서를 메뉴 고르는것처럼 ..

[센서 키오스크 만들기 - 2] 웹 개발 준비

[센서 키오스크 만들기 - 1] 센서 키오스크가 필요해졌다.

티스토리툴바