개요 웹캠의 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. 몸무게 ..
상황 - 라즈베리파이에서 센서와 연동하는 파이썬 프로그램을 개발하고 있다. - 윈도우 원격 데스트톱 연결로 접속하여 라즈베리파이에 깔아둔 Spyder3 프로그램을 사용하여 개발하는데 너무 느리다 * 2018-05-30 에 작성하였던 글을, 2019-03-19 에 필요에 따라 다시 따라 해보면서 정리, 블로깅 한다. 목표 Windows PC 의 VSCode 에서, 네트웍으로 연결되어 있는 라즈베리파이의 파일을 편집하자. - VSCode 의 terminal 에서 ssh로 라즈베리파이에 접근한다. - ssh terminal 로 접속한 라즈베리파이에서 특정 파일을 VSCode 로 열 수 있고, 바로 실행해볼 수도 있다. 설치 및 설정 1) Windows PC 에서 OpenSSH, Remote VSCode (VS..
개요 Reference 와 copy 의 차이를 들여다보자 내용 문자열, 숫자, 불리언은 copy 된다. - 따라서 하나의 값을 바꾼다고, 다른게 따라 바뀌지 않는다. 하지만 배열은 다르다. (type 은 object 이다.) 각각의 item 값을 바꿨더니 둘 모두 값이 바뀌었다. - Dog 와 Tiger 배열을 reference 하지 않고 copy 하는 방법은 다양하다. - 개인적으로는 … 가 마음에 든다. 이번에는 구조체를 보자. 배열과 마찬가지이다. 둘은 연결되어 있다. reference 구조체도 마찬가지로 copy 할 수 있는 방법이 있다. - 역시나 … 가 가장 마음에 든다. 그런데 주의할 게 있다. copy 가 1단계만 된다는 것이다. 그 속에 중첩된 (nested) 배열이나 구조체는 copy ..
- Total
- Today
- Yesterday
- 잡학툰
- 클린 애자일
- solid
- postgres
- Bug
- OpenAI
- strange
- API
- bun
- 2023
- 독서후기
- websocket
- 명상
- 중용
- Gin
- ORM
- go
- pool
- Shortcut
- ChatGPT
- github
- 체호프
- 인텔리제이
- 노션
- folklore
- intellij
- 영화
- notion
- agile
- golang
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |