Project 53

미니 드론 만들기

옛날에 만든거라 정보가 적음 재료 아두이노 프로미니, 기울기-가속도센서 (mpu-6050), 블루투스 모둘 (HC-06), 프로팰러, 바디, 모터4개, 모터드라이버, 배터리 설명 블루투스를 이용해 스마트폰으로 드론 조종 기울기-가속도센서를 이용해 PID제어를 통한 균형제어 A가 정면인 드론, B가 정면인 드론 2가지 방법의 드론이 있다. A가 정면인 경우 전진하기 위해서는 1번 프로펠러의 출력을 줄이면 앞으로 기울어져서 앞으로가며 2,3번 프로펠러로 좌우 균형을 잡는다 B가 정면인 경우 전진하기 위해서는 1,2번 프로펠러의 출력을 줄이며 1~4번 모두를 컨트롤해서 균형을 맞춰야한다 간단하게 A형태로 만들고 싶었으나 바디에 기울기센서를 대각선으로 넣기 힘들어서 B형태로 만들기 시작했다 회로도 및 사진 결과..

Project/arduino 2022.08.03

서버로 데이터 보내는 온습도계

옛날에 만든것 재료 WeMos D1 mini, DHT-22 설명 온도 센서로 얻은 온도, 습도 데이터를 와이파이를 이용하여 ThingSpeak서버로 보냄. 스마트폰으로 데이터 확인 비고 처음에는 부피를 소형화 시켰는데 WeMos자체 발열로 인해 온도가 높게나와서 온도센서와 떨어트려 놓음 자체 타이머의 최대치인 49일후와 에러가 여러번 누적시 reset단자에 전기신호를 줘서 reset되게끔 함그래프가 부드럽게 나오도록 현재값에 이전값을 가중치를 둬서 표현함 완성 현재(2022.08.02) 약 240만개의 데이터가 저장되어있다 00시40분경에 에어컨을 틀어서 온도와 습도가 떨어진것을 볼 수 있다. 코드 : https://github.com/full-fish/thingspeak-TandH

Project/arduino 2022.08.02

리펙토링 및 개선 - 8 / google map에 마커 여러개 찍기, diary 검색 타입 설정 시 재랜더 막기

google map에 마커 여러개 찍기 원래는 가계부에서 하나의 물건에 대한 위치만 구글 맵에서 확인이 가능했다 변경 후에는 하나의 카드(하나의 구매내역)의 지도를 확인시 해당 구매한 위치를 중심으로 띄우며 모든 구매한곳의 마커를 한번에 볼 수 있게하였다. 코딩도중 애먹은점 우선 현재 google map관련된 script는 Helmet태그로 감싸져있다 Helmet태그로 감싸지않으면 Functions are not valid as a React child 라는 에러가 뜨는데 구글링해보면 해당에러는 함수를 실행시켜주지 않았기 때문이며 router부분에서 ()를 뒤에 붙여줘서 함수실행을 시켜줘야한다고 한다 하지만 현재 구글 맵은 따로 페이지를 만든것이아닌, modal창을 사용한것이라 실행이란 개념이 없다 그래..

리펙토링 및 개선 - 7 / nodemailer를 이용한 비밀번호 재발급

현재의 문제점 현재 user의 password는 Bcrypt에 의해 hashing되어져서 보관되고 있으므로 복호화가 불가능하다 그래서 user가 password를 잊어먹었을 경우에는 찾을 방법이 없다 만약에 mysql에서 password를 직접적으로 바꾼다고 하더라도 로그인시 digest와 검증하게끔 로직이 이루어져 있기에 안된다 그렇기에 많은 사이트들이 비밀번호찾기시 비밀번호를 알려주는것이 아닌 이메일로 임시 비밀번호를 발급해주거나, 새비밀번호를 생성하는것이 아닌가 싶다 해결법 nodemailer를 이용해서 임시비밀번호를 email로 보내준다 (원래 EmailJS를 쓰려고 했으나 nodemailer로 바꿈) nodemailer에 대해서 내가 쓴 글 코드 메인 코드 find: { post: async (..

리펙토링 및 개선 - 5 / 카이사르, 모노알파베틱 암호화 적용

한것 카이사르 암호화와 모노 알파베틱 암호화를 RSA와 함께 적용했다 (회원가입, 로그인, 비밀번호 변경) 내가 쓴 카이사르와 모노알파베틱 암호화 카이사르 암호(Caesar cipher) 카이사르 암호란 각 글자를 n만큼 shift시킨 간단한 치환암호 예 : 'abz'를 +1만큼 shift -> 'bca' 코드화 문자열의 각 문자를 유니코드화 -> 각 유니코드에 원하는 shift만큼 더해줌 -> 이 때 'z' 다음에는 ' fullfish.tistory.com 모노 알파베틱 암호화 (Monoalphabetic Cipher) 앞선 카이사르 암호화와 마찬가지로 치환암호 26자의 알파벳을 각기 다른 알파벳으로 치환시킴 코드화 알파벳이 오름차순된 ('abcd...') 문자열과 랜덤으로 뒤섞인 문자열을 준비해서 각..

리펙토링 및 개선 - 4 / RSA 적용

클라이언트단에서 서버단으로 정보보낼 때 중간에 password 탈취에 대응하기위해 RSA를 적용해서 password 암호화를 해주었다 RSA에 대해 내가 쓴 글 RSA RSA란? 현재 SSL/TLS에 가장 많이 사용되는 공개키 암호화 알고리즘 전세계 대부분의 인터넷 뱅킹에서 사용 대칭키가 아닌 공개키와 개인키가 한 쌍을 이룸 공개키로 암호화한 내용은 개인키로만 fullfish.tistory.com 회원가입 흐름 클라이언트에서 email과 nickname 그리고 createKey: true(키 생성위해)를 보냄 서버에서 이메일 중복확인 중복이면 중복 에러 중복아니면 키를 생성 서버에서 첫 요청시와 그 다음 요청시에 값을 다 입력했는지 검증 db에 d,e,N저장 (email과 nickname ,d , e, ..

리펙토링 및 개선 - 3 / Bcrypt 적용

Bcrypt에 대해 내가 쓴 글 https://fullfish.tistory.com/123?category=1054038 Hash와 Salt 그리고 Bcrypt 기본 용어 hash : 다양한 길이를 가진 데이터를 고정된 길이의 데이터로 매핑하는것 digest : hash에 의해 암호화된 데이터 avalanche(눈사태) 효과 : 작은 변화에도 결과가 완전히 달라짐 rainbow 공격 : fullfish.tistory.com 주요 개념을 위에 정리해뒀으며 서버단에서 적용은 // signUp bcrypt.genSalt(13, async function (err, salt) { bcrypt.hash(password, salt, async function (err, hash) { userInfo.password..

리펙토링 및 개선 - 2 / 잡다한 버그 해결

trip 정보 새로고침시에만 나오는것 해결 -> 처음 정보 받아올 때 header부분에 token정보 안 받아 오고있었음 로그인정보나 토큰정보같은것들이 localstorage에 있길래 sessionstorage로 옮김 왜냐하면 해당 정보들은 영구적일 필요가없고 탭을 닫으면 소멸해야할 정보기에 리프레쉬토큰 적용. 서버에서 엑세스토큰이 온다면 클라이언트단의 sessionstorage의 토큰정보를 업데이트함