![]()
Code Name : Cherry | Level : CLASSIFIED | Declassified : 2021-07-24 이런 기믹성 글은 포스팅하고 싶지 않지만 이게 정말 웃긴 이야기이기도 하고 프로젝트에 들인 시간이 있다보니 소개를 안할 수 없을 것 같습니다. 일단 시작해보겠습니다. 친구에게 전화를 걸어 뭘 하고 있는가 물어본적이 있었습니다. PC방에서 약초 캐고 있답니다. 저는 메이플스토리를 하지 않아서 그게 무슨 헛소리인가 하고 들었는데, 단순히 요약해보니 "쥬니퍼베리라는 아이템을 캐다 보면 확률적으로 돈이 되는 아이템이 나온다. 이걸 한 시간 내내 캐면 4000원 정도 벌 수 있다." 정도의 이야기를 해줬습니다. 이후에 PC방을 한 번 같이 간 적이 있는데, 아니 친구 두 명이 돈이 없다고 한 ..
![]()
죽은 Pro Micro 살리기. Arduino Pro Micro 제품을 2개 가지고 있었습니다. 그 중 하나는 PC에 연결해도 인식을 하지 못합니다. 지금이었으면 조금 고민하다 버렸겠지만, 당시 저는 돈도 없었고 알리익스프레스에서 장장 한 달을 기다려 구입했던지라 차마 버릴 수가 없었습니다. 그렇게 수 년동안 공구함 어딘가에 짱박혀있는 Pro Micro를 꺼내봤다가 한 번 살려 보기로 했습니다. 부트로더를 다시 업로드하든 뭘 하든 해서 살려보겠다는 굳은 각오를 하고 방법을 찾아봤습니다. 허무하게도 생각보다 굉장히 간단한 방법으로 살려버렸습니다. 아두이노 프로 마이크로 usb 장치 인식 문제 (벽돌상태 해결방법) 아두이노 프로 마이크로 arduino pro micro 벽돌상태 해결방법 아두이노 IDE에서 ..
![]()
Introduction 지금까지 React로 Frontend를 만들고, fetch를 통해 React와 Express가 서로 통신하도록 만들었습니다. 이렇게 서로 통신이 가능하게 되었으니 express-session과 Firebase Realtime Database를 가지고 React에서 유저 인증을 할 수 있도록 해 보겠습니다. *내용이 조금은 길어질 수 있습니다. Session 이 부분에 대한 정확한 정보는 사실 저도 잘 모르겠습니다만, 우선 제가 파악 내용대로 설명을 드리자면, Session은 유저에 대한 인증 정보를 서버에 저장합니다. 유저가 페이지에 접속했을 때, Express는 유저의 디바이스에 저장된 쿠키 값을 불러옵니다. 이 쿠키 값이 서버에 저장된 값과 인증 정보가 같다면 유저의 세션을 유..
![]()
Form을 만들었으니 이제 작동할 수 있도록 만들어 보겠습니다. Front-end와 Back-end간에 통신이 이루어지도록 하는 것은 그리 어렵지 않으면서도 세심함을 요하는 작업입니다. 주소가 틀리거나, 주고 받을 데이터의 형식이 다르거나, 전송 속도와 앱의 실행 속도 간에 발생하는 시간 차이를 고려해야 합니다. 일단 이 포스팅에서는 그런 모든 복잡한 것을 뒤로 하고 단순히 데이터 통신에만 집중해보도록 하겠습니다. React에서 fetch로 요청 보내기 이전에 작성했던 /client/src/pages/Login.js 파일의 handleSubmit함수에 fetch관련 내용을 추가해줍니다. const handleSubmit = (e) => { const requestOptions = { // 데이터 통신의 ..
![]()
이번 편은 조금 길어질 수 있어 프론트엔드와 백엔드로 나눠서 포스팅하겠습니다. 우선 이번 포스팅에서는 React + react-bootstrap으로 페이지를 구성하고 백엔드에 요청을 보내는 페이지를 만들겠습니다. 이전에 맛보기로 만든 FormTest.js 컴포넌트를 지우고 시작하겠습니다. 컴포넌트 구성 및 Blueprint components 폴더에 LoginForm.js 컴포넌트를, pages 폴더를 만들고 Login.js를 추가합니다. Login.js는 로그인 페이지 자체를 표현하고, LoginForm.js는 로그인을 위한 폼들이 구현되는 컴포넌트입니다. 여기에도 역시 react-bootstrap을 적용해서 페이지를 만들어 보겠습니다. 지금 만드는 로그인 페이지는 기존 홈페이지의 로그인과 조금 다릅니..
![]()
이전 포스팅에서 Component, State, Props의 개념을 아주 약간 맛봤습니다. Reactful한 페이지를 만들었다는 데 일단 축하한다는 말씀을 드립니다. 이번에는 react-bootstrap이라는 React UI 라이브러리를 사용해보겠습니다. bootstrap이 무엇인지 모르는 분도 있을 수 있어 간단하게 설명드리자면, 블로그 스킨 같은 겁니다. 근데 특별한 identitiy가 있다기보다 누가 봐도 깔끔한 느낌이 들도록 하는 스킨같은 겁니다. 기존에 HTML + CSS를 사용했다면 그냥 bootstrap.min.css를 다운로드 받아 html파일에 적용하는 것만으로 bootstrap을 사용할 수 있었습니다. 그러나 React에서는 별개의 패키지를 설치해서 적용해야 기존 html에서 boost..
![]()
React는 기존에 봐 왔던 HTML+CSS+Javascript와 조금 느낌이 다릅니다. 비전공자의 눈에서 React는 HTML +Javascript가 섞여서 조금 복잡하게 다가올 수 있습니다. 제가 그랬습니다. 그렇지만 포스팅을 읽으면서, 구글과 Stackoverflow의 도움을 받으면서 조금씩 해 나가다 보면 React에 익숙해지는 자신을 발견할 수 있게 됩니다. 특히 지금 진행하고 있는 프로젝트 자체가 프론트엔드 / 백엔드 모두를 다루기 때문에 풀스택 개발자를 잠시 맛볼 수도 있을 거라 생각합니다. 시작하겠습니다. Component, Props, State 여기서는 MVP(Minimum Valuable Product) 개발을 가장 중요하게 생각하기에, React의 Virtual DOM같은 기술적인 ..
![]()
이전 포스팅에서 Express와 React를 설치하고 실행까지 해봤습니다. 저번 포스팅에서 해봤듯, React 앱은 localhost:3000에서, Express 서버는 localhost:5000에서 접근할 수 있습니다. 그런데 어떻게 해야 Express 서버로 접속했을 때 React로 개발한 프론트엔드가 나오게 할까요? 이번 포스팅에서 해결해보겠습니다. React와 Express 서버의 작동방식 그림을 통해 알 수 있듯, 또 접속 포트가 달랐다는 점에서 알 수 있듯, 둘은 각자 개별적으로 동작합니다. 다시 말해서, React는 Express가아닌 자체 서버를 사용하고 있습니다. 물론 이 상태로도 React 앱 개발은 문제 없이 가능합니다. 그런데 이렇게 된다면 React와 Express간의 통신이 굉장..
![]()
일단 IoT를 구축하기 위해서는 메인 서버가 필요합니다. 삼성의 스마트싱스같은 IoT 솔루션을 보면 대개 '허브'라는 개념이 존재합니다. IoT 허브는 Zigbee를 사용하는 장치들이 웹을 통해 제어될 수 있도록 중간다리 역할을 합니다. 이 프로젝트에서의 메인 서버는 허브의 역할을 함과 동시에 현재 서비스중인 IoT 솔루션의 클라우드 서버 역할을 동시에 하게 됩니다. 프론트엔드, 백엔드 프론트엔드는 웹에 접속했을 때 흔히 볼 수 있는 UI를 의미합니다. 이 프로젝트에서 프론트엔드는 React라는 자바스크립트 기반의 라이브러리를 사용합니다. 기존에는 HTML + CSS + Javascript를 통해 개발했지만 데이터 흐름이 매끄럽지 못하고 개발이 굉장히 복잡해지는 감이 있어 React를 새로이 사용하게 되..
![]()
정말 오랜만입니다. 그 동안 많은 일이 있었습니다. 이 블로그에 글을 남겼듯이 소소하게 부업으로 진행했던 채굴은 직장인 월급정도로 수익이 늘어났고, 덕분에 조금 더 여유롭게 IoT 프로젝트를 진행할 수 있게 되었습니다. 이런 점들이 달라졌습니다. Flask → Express로 백엔드를 변경했습니다. 웹 프레임워크는 다양합니다. 제가 많은 프레임워크들을 만져본 것은 아니지만, 되도록이면 자유도가 높은 프레임워크가 필요했습니다. Javascript는 태생이 웹을 위한 언어라 그런지 웹 관련해서는 파이썬 기반의 Django, Flask가 도저히 따라올 수 없는 자유도를 가지고 있음을 느껴 Node.js 위에서 굴러가는 Express 서버를 백엔드 서버로 사용하게 되었습니다. 플랫폼이 바뀌었습니다. 기존에는 R..
![]()
PCB 설계는 생각보다 복잡한 과정입니다. 그렇기 때문에 PCB를 설계하기 전에 어떤 식으로, 어떻게 굴러가는지 확인할 필요가 있습니다. 이전 포스팅에서 아주 간단하게 다뤄 드렸습니다만, 이번 포스팅에서 조금은 더 자세히 알아보도록 하겠습니다. 여기에서는 OrCAD를 기준으로 PCB 설계의 Workflow를 설명하겠습니다. 일단 OrCAD를 Trial 버전으로 설치를 해보셨다면, 뭔가 많이 설치되어 있는것을 확인하실 수 있습니다. 각 프로그램들에 대해 설명해드리겠습니다. OrCAD Capture | PCB Schematic을 디자인하는 툴입니다. OrCAD Capture CIS | Component data를 관리합니다. OrCAD PSpice A/D | 회로 시뮬레이션 / 분석을 위한 툴입니다. OrC..
![]()
라즈베리파이에 우분투를 올리고, 와이파이를 잡기 위해 여러 삽질을 해봤습니다. 가장 최고이고 편안한 방법을 찾아서 공유합니다. 기존의 방법은 다음과 같았습니다. 1. 유선랜에 연결한다. 2. sudo apt-get install network-manager를 설치한다. 3. sudo nmtui를 통해 TUI(Terminal User Interface) 환경에서 와이파이를 잡는다. 이게 잘 안되는 경우가 많아 다음의 방법으로 간단하게 잡을 수 있었습니다. 1. sudo nano /etc/netplan/50-cloud-init.yaml(없으면 50-init.yaml) 입력 후 수정 wifis: wlan0: dhcp4: true optional: true access-points: "ssid": passwor..
