just_HS

개요 반식 및 간헐적 단식 - 최종 8주차 정리를 해봅니다. 결혼 이후엔, 운동도 힘들어지고, 먹는 것을 절제하지 않아 몸무게가 인생 최고점을 찍었다. 운동은 하루 만 보 걷기와, 직장 계단 2번 오르기 (= 총 40 층) 를 시도해보고 있는데 이 정도로 체중관리는 한계가 있다. 이에 식이요법으로 반식 다이어트, 그리고 간헐적 단식을 시도해보게 되었다. - 계기가 된 후기 링크: https://www.clien.net/service/board/use/12944105 - 책 링크: http://aladin.kr/p/hhaG 책은 별로였지만, 체중조절에는 먹는 것이 운동보다 중요하다는 것은 공감 하며, 확실한 효과가 있다는 것과, 나 자신이 먹는 부분에서 개선점이 많기에 시도해보기로 하였다. 목표 목표1. ..

개요 1) Shinyei PPD42NS 센서에서 미세먼지를 측정하는 방식을 이해하고 2) 측정값을 미세먼지 측정단위로 계산, 변환하는 법을 정리해 본다. Shinyei PPD42NS 센서의 동작 원리 1) 센서는 미세먼지가 지나가면 GPIO 를 High → Low 로 만들어준다. - LPO time: Low Pulse Occupancy time 2) 센서는 두 개의 GPIO Output이 있는데 하나는 PM10, 다른 하나는 PM25 이다. - 각각 미세먼지의 지름이 1.0 micron, 2.5 micron 이라는 말이다. (micron = um = 1/1000 mm) 두 수치를 동시에 계측했다면 지름이 작은 먼지의 개수는 계측 값에서 큰 먼지의 개수를 빼는 것이 맞을 수 있겠다. 큰 먼지 개수까지 중복..

개요 웹캠의 video stream 을 받아서 브라우저 상에서 다양하게 가지고 놀아본다. style.css overflow-x: scroll - 가로축 (x축) 으로 내용이 넘칠때에 scroll bar 가 나오도록 함 nth-child - 웹캠이 없어 확인은 못했지만 지그재그로 흩뿌려져 이어진 모습으로 찍은 사진이 보이도록 하려는 것으로 보임 index.html 1) 버튼을 누르면 takePhoto() 라는 함수가 실행된다. 2) RGB 에 대해 각각 min 값 max 값을 설정할 수 있다. - 각각의 값은 rmin, rmax, gmin, gmax, bmin, bmax 에 저장(?) 된다. 3) photo class 를 사용하는 canvas 가 하나있고 4) player class 를 사용하는 video..

개요 만들고 싶은 전체 그림은 다음과 같다. 1) 라즈베리파이와 미세먼지센서를 이용하여 미세먼지 값을 측정하여 2) 주기적으로 클라우드 상의 데이터베이스에 올리고 (Google Cloud Firestore) 3) HTML + JavaScript 를 이용하여 챠트로 확인한다. 이번 블로깅에는 센서 선정 및 라즈베리파이와의 연결을 정리해본다. 1) 어떤 센서를 고를까? 2) 라즈베리파이에 어떻게 연결하면 될까? Shinyei PPD42NS 센서 선택 참고링크: https://goo.gl/oVMFEC 대표적인 센서들은 아래와 같은데 Shinyei PPD42NS 이 무난해 보이기도 하고 실제로 LG 공기청정기에서도 쓰인다길래 선택함 - 어짜피 엄청난 고가의 제대로된 미세먼지 센서와는 비교할 수 없으며, - 천만..

개요 기존에 Serveo 라는 서비스를 간단히 소개 한 적이 있었다. - https://jusths.tistory.com/73 - 지금 돌아보니 개념이해에 약간의 오류가 있다. 막연히 쓰기만 했었는데 언젠가 SSH 의 Port Forwarding 을 한번 정리해보고 싶었다. 참고링크 링크1: https://www.booleanworld.com/guide-ssh-port-forwarding-tunnelling/ 괜찮았음 링크2: https://blog.trackets.com/2014/05/17/ssh-tunnel-local-and-remote-port-forwarding-explained-with-examples.html - Local port forwarding 의 localhost (=127.0.0.1..

개요 시간 값들을 추출해서 더해보자. 이 과정에서 reduce() 를 이해하자 내용 data 속성 이용하기 - 참고링크: https://junhobaik.github.io/html-dataset/ - HTML 의 태그안에 데이터 속성을 넣어둔 다음, - 그 데이터를 JavaScript 또는 CSS 에서 가져다 쓸 수 있다. 1) 태그 안에 data- 으로 적어둔다. - 예) data-time, data-age, data-count 등등 2) 이후에 JavaScript 에서라면 dataset. 으로 불러다 쓸 수 있다. - 예) dataset.time, dataset.age, dataset.count 2-2) CSS 에서라면 [data-time="5:43"] 과 같이 특정 element 들을 선택할 수 있..

개요 리스트를 정렬해서 뿌려줘보자. 문자열들을 정렬하는데, a, an, the (대소문자 무관)을 제외한 문자열들로 정렬해준다. 내용 1) align-items 와 align-content 의 차이 - align-content 는 여러줄 사이의 간격을 정의하는 것이고 - align-item 은 item 자체의 정렬을 정의하는 것이다. - 출처: https://goo.gl/8thXHN 2) list-style 의 타입은 square, 포지션은 inside - 각각 리스트 앞 표시를 사각형으로 해주고, 표시가 리스트 박스(?) 안쪽에 위치한다는 것이다. 리스트 하나 하나의 아래쪽에 1px 한 줄을 그어주는데, 마지막 리스트에는 줄을 긋지 않겠다는 것이다. 1) strip() 은 들어온 문자열에서 해당되는 정..

개요 마우스의 움직임에 연동하여 Text 의 Shadow 가 변하게 구현해보자 내용 Element 에 contenteditable 만 넣어주면 input 이나 textarea 태그와 마찬가지로 편집이 가능하게 된다. 1) hero 는 아래의 style 에 따라 전체 윈도우 화면을 차지하게 된다. 2) text 는 글자가 있는 태그를 가리키게 되고 walk 는 그림자가 떨어지는 비율과 관련이 있다. 3) 전체 윈도우를 커버하는 hero 는 mousemove event 가 발생하면 shadow 함수를 호출한다. shadow(e) 함수 1) hero.offsetWidth, hero.offsetHeight 를 각각 width, height 에 할당해준다. 마찬가지로 e.offsetX, e.offsetY 를 각각..

개요 - 입력한 값을 목록에 추가한다. - 입력한 값을 로컬에 저장하는 Local Storage 개념을 이해해본다. index-START.html - 참고 링크: https://css-tricks.com/using-svg/ - svg 얻을 수 있는 사이트: https://thenounproject.com/ - 이미지를 다운로드 한 다음 소스를 보면 svg 태그가 보인다 - svg 라는 태그를 통해 이쁜 이미지를 가져다 붙일 수 있다 1) 위와 같은 svg 이미지가 있고 2) h2, ul, li 태그들로 글자들이 위치해 있다. 3) 그리고 가장 중요한 입력창 form -- script 는 1) .add-items 를 가져온 addItems 2) .plates 를 가져온 itemsList 3) 그리고 입력된..

개요 반식 및 간헐적 단식의 6주차 정리를 해봅니다. 결혼 이후엔, 운동도 힘들어지고, 먹는 것을 절제하지 않아 몸무게가 인생 최고점을 찍었다. 운동은 하루 만 보 걷기와, 직장 계단 2번 오르기 (= 총 40 층) 를 시도해보고 있는데 이 정도로 체중관리는 한계가 있다. 이에 식이요법으로 반식 다이어트, 그리고 간헐적 단식을 시도해보게 되었다. - 계기가 된 후기 링크: https://www.clien.net/service/board/use/12944105 - 책 링크: http://aladin.kr/p/hhaG 책은 별로였지만, 체중조절에는 먹는 것이 운동보다 중요하다는 것은 공감 하며, 확실한 효과가 있다는 것과, 나 자신이 먹는 부분에서 개선점이 많기에 시도해보기로 하였다. 목표 목표1. 몸무게 ..