Peter's hardware & software

react-query 들어봤지? 그거 만든 게 Tanner Linsley라는 사람인가봐. 그런데 이 양반이 react query 말고도 여러 가지를 하는데 그걸 모아 둔 사이트가 tanstack.com 이야. 그 중에 Table도 만들고 있길래 이걸 한번 사용해 볼까해서 ㅎㅎ react-query 도 엄청 좋잖아? 사람들이 많이 쓰고 그러니까 tanstack table도 좋겠지? 아닌가? ㅎㅎㅎ 좋으면 정착하고 아니면 말고 ㅎ 설치는 하고 써보려고 했지만 -_- 뭔가 이상하네.. 아직 작업중인가봐. @tanstack/react-table는 지금 타입스크립트도 지원이 안되는 것 같아. 안되겠다. tanstack/react-table 말고 걍 react-table을 써보자고 👇 https://react-ta..

web page도 트렌드가 변할 것 같아서 미리 좀 공부해두는 건데.. 미리인건지는 잘 몰름 ㅋ 암튼 next.js 같은 웹 프레임워크 위에 three.js 사용하는 걸 좀 해보고 싶어서 시도해봤어. 물론 시작하기 전에 검색을 좀 해보니 내가 좋아하는 유튜브 채널 애플코딩에서는 쌩 자바스크립트로 코드를 짜고 있었고 👇👇 https://www.youtube.com/watch?v=CojyGfCMvuU 아니면 @react-three/fiber ? 라는 모듈을 사용해서 하는 것도 있었는데 -_- 모듈 이름이 별로야~ 짝퉁같은 느낌이 들어서 안쓰고 해볼라고. ( 근데 검색해보니까 한 주에 다운로드가 10만이나 되네ㅋ 관리도 잘되는 거 같고 ㅎㅎㅎ 다음엔 이걸 써봐야겠어!) 암튼 그래서 애플 코딩에서 하는 걸 ne..

AC 전원을 사용하는 장비들을 컨트롤 해야 하는 경우가 있어. 예를 들면 AC 펌프라던지, AC 히터같은 것들 말이지. 펌프 스피드나 AC 기기의 파워를 컨트롤 할 땐 단순하게 마구잡이로 Relay나 Triac on/off 하는게 아니야. 먼저 zero crossing을 찾아야 해. Zero crossing은 AC 전압이 0볼트 지나갈 때를 말하는 거야. Zero Crossing은 AC 파워를 세밀하게 조절하기 위해서도 필요하고 AC 장비들의 수명이 단축되는 걸 막기 위해 zero crossing근처에서 on/off를 하기 위해 사용될 수도 있어. 우리가 사용하는 220V 전기는 평균값이 220V를 의미해 위 아래로 +,- 311V까지 스윙하지. 생각해 봐. 장비에 갑자기 311 V 뽝하고 들어가는 거랑..

2022.06.02 - [Next.js] - nextauth + firebase authentication #1 nextauth + firebase authentication #1 nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝 engschool.tistory.com 이전 글에 이어서 계속할게. nextjs에다가 nextauth로 google 로그인 하는 것까지 했어. GCP 설정도 했고. 이제 firebase authentication 활성화하고 연결해 붙이는 것까지 해보자구. 이전까지 구글 로그인은 됐는데 해당 로그인..

nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝트 만드는 것부터 nextauth 설정, GCP, firebase 설정까지 차근차근 가보는 글이야. github에도 깔끔하게 남겨두고 하려고 👇👇👇👇👇👇 Github: https://github.com/peter-bang/nextauth-fb-authentication GitHub - peter-bang/nextauth-fb-authentication: Next.JS example project for nextauth and firebase authentication Next..

미친짓을 많이 하는 편이긴 한데 -_-;; 굳이 nextauth를 사용하면서 firebase authentication에 붙여봤어 무쓸모인가? ㅋㅋ 아 몰라 ㅋㅋ 뭔가 잘 정리되어 있고 nextjs에 최적화 되어 있는 nextauth를 사용하면서 일반 DB사용하면서 개고생하는게 아니라 firebase authentication 같은 기능으로 관리받고 싶었어! ㅋ 내용을 먼저 간단하게 설명하자면 1. firebase 프로젝트 새로 만들기, gcp 사용자 인증정보 새로 만들기(client id랑 client secret 받아야 구글 로그인 가능) 2. next.js에 nextauth설치 후 google login example 작성해서 테스트 해본 다음에 3. firebase 설치 후 init 했고 4. ..

30-40도 이런 상온 말고 고온을 측정해야 할 때가 있어. 예를 들면 히터 같은 거 말이지. 200도 ~ 300도 막 올라가니깐. 이럴 때는 열전대라고 부르는 약간 특별한 온도 센서를 사용해. 영어로는 Thermocouple 이라고 하지. 서로 다른 두 금속을 접합시켰을 때 온도가 달라지면 기전력이 흐르는 현상을 이용한 소자야. 그런데 자세한 설명은 위키피디아 보라구 ㅋ https://ko.wikipedia.org/wiki/%EC%97%B4%EC%A0%84%EB%8C%80 열전대 - 위키백과, 우리 모두의 백과사전 열전대(영어: Thermocouple)는 서로 다른 종류의 금속을 접속한 것으로 열전 효과를 일으키는 금속선이다. 열전기쌍 혹은 열전쌍이라고도 한다. 두 가지의 각각 다른 금속선을 접속했을 ..

Google I/O 2022에서 Firebae 쪽 변화를 한번 살펴봤는데 눈에 띄는 게 있더라고 원래 Firebase Hosting에서는 static 파일만 호스팅 해줬어. 그러니깐 Next.js 같이 SSR 지원해주는 애들은 단순히 Hosting 기능만으로는 서비스를 할 수가 없었지 그래서 Cloud function 쓰고 Hosting에서 연결하고 난리를 쳐줘야 Next.js를 돌릴 수 있었어. 그런데 이번에 업데이트를 했다고 하잖아? Next.js 폴더에서 Firebase deploy 한방만 때리면 자동으로 deploy해준다 그러네? 오~ 원래 AWS amplify는 100만년 전부터 되던 기능을 GCP Firebase는 이제서야 지원하다니... 2022.02.28 - [Next.js] - Next...

Nextjs에 로그인 적용하는 방법은 두가지라고 되어 있어. 첫 번째는 클라이언트에서 유저 데이터 Fetch하고 Loading state 사용하는 거고 (대부분 이런 방식을 사용하겠지) 그리고 두 번째는 서버에서 유저 데이터 Fetch하고 클라이언트에 아예 인증된 페이지만 주는 거지. 당연하겠지만 첫 번째 방식은 빠르지만 인증되지 않는 페이지들도 노출되고 두 번째 방식은 인증되지 않은 페이지는 클라이언트는 아예 보지도 못하므로 보안성은 훌륭할거야. 대신 서버는 병목이 엄청날거야. 매 request마다 페이지 pre-rendering해서 클라이언트에 뿌려줘야 하니깐. 그래서 ㅎㅎ 보통 첫 번째 방식을 사용하겠지 ㅋㅋㅋ 우린 또 느린 건 못참잖아? ㅋ 뭐 이런건 중요하지 않지 ㅋㅋ 그래서 Next.JS에서 ..

자 하나씩 순서대로 가자고~ next.js에 styled-components을 적용하는 건 그다지 어렵지 않아. 그냥 설치하고 yarn add styled-components @types/styled-components import해서 사용하면 끝. import type { NextPage } from "next"; import styled from "styled-components"; const Title = styled.h1` color: yellowgreen;//글씨 색 yellow green으로! `; const Home: NextPage = () => { return ( Hello world ); }; export default Home; 그런데 이렇게만 하면 처음 페이지가 로딩될 때 css가 ..

주로 Firebase를 사용하다 보니 GCP위주로 쓰게 되네. Next.JS를 해야해서 시험 삼아 비어 있는 프로젝트를 GCP App engine에 올려봤더니 하루 만에 비용이 청구되서 깜놀! App engine은 무료 사용 구간이 없나봐. 암튼 그래서 결과 공유하려고~ App engine 원래 비용은 아래 캡쳐 가장 작은 B1 인스턴스 사용하면 시간당 $0.065가 청구된다고 되어 있네. 한화로 시간당 82원 정도. 24시간이면 1,977원이겠네. 실제로 그런지 봤어. 두 가지로 테스트 해봤는데 첫 번째는 가변 인스턴스, 두 번째는 가장 저렴한 B1 인스턴스야. 청구된 비용은 아래 표로 만들어 봤어 ㅋ 인스턴스 종류 사용량 실제 청구 비용 시간당 비용 Flex(가변) 22.88 hour 1,929원 +..

React Query에서 나름 강력크한 기능 중 하나가 infiniteQuery지. Flatlist로 무한 스크롤 같은 거 구현할 때 데이터를 계속 읽어와야 하잖아. 그럴 때 useInfiniteQuery를 사용해서 연속적으로 데이터를 읽어와. 무한 스크롤 안들어간 앱 찾기가 힘드니까 거의 필수라고 볼 수 있지. Query할 DB는 다른 건 열심히 안해봤고 Firestore는 지금 사용중인데 잘 돌아가네. useInfiniteQuery 원래 문서는 아래 링크에 있으니까 참고해 https://react-query.tanstack.com/reference/useInfiniteQuery useInfiniteQuery Subscribe to Bytes Your weekly dose of JavaScript ne..

next.js 에서는 font optimazation이라는 기능을 제공해. 웹 폰트를 fetch할 때 extra round trip을 제거해준다고 되어 있는데 ㅋㅋ 참 영어를 한글로 바꾸기 힘드네.. 원래는 추가적으로 다운받고 하는 절차가 발생하나 봐? 어쨋든 뭐 그냥 헤더에서 넣어서 쓰면 되나보다 했는데 넣으라는 위치가 따로 있네? 넣으라는 위치는 pages 폴더에 _document.js(tsx) 파일의 ); } } _document.js(tsx)라는 파일은 next.js 프로젝트에 기본적으로 포함되어 있지 않아서 만들어야 하는데 위 코드랑 내용 똑같아. 주석하고 웹폰트 사용하기 위한 tag만 추가한거야. 그리고 나머지 css 파일에서 font-family 설정하면 해당 폰트를 사용할 수 있지. 문서에..

난 최근에 React native를 시작해서 그런지 왠만하면 최신 라이브러리를 사용하고 싶더라고~ 그래서 상태 관리 라이브러리도 가장 최근에 나온 Recoil을 사용하고 있어. Redux가 가장 유명한 거 같은데 ㅎㅎ 난 한번도 써본적이 없어. MobX도 마찬가지고. Context도 몰라. 상태 관리 라이브러리라고 뭐 거창하게 이름붙여 놨지만 결국 React에서 하위 컴포넌트로 props 계속 넘겨주기 힘드니까 전역 변수 쓸라고 만드는 거 아냐? ㅋㅋ 난 이렇게 이해하고 있어 아니면 알려줘. React 할 줄 알면 Recoil도 크게 어렵지는 않은 것 같아. 약간 useState 훅 사용하는 느낌이랄까? 간단하게 사용법을 살펴보자면, 일단 Recoil을 사용하려면 RecoilRoot로 최상위 컴포넌트를 ..

Next.JS 프로젝트를 GCP에 올려 봤어 GCP 계정 당연히 있어야 하고 난 mac 에서 vscode로 개발하니까 참고하고.. (한참 글쓰다가 알았는데 결제 설정 안해놨으면 안돼 ㅠㅠ 그러니까 결제 설정하고 따라하자.) 먼저 next.js 프로젝트를 만들자. 터미널에서 npx create-next-app test --typescript code . typescript 싫은 사람은 뒤에 --typescript 빼도 되고~ 해보나 마나 잘 돌겠지. ㅎㅎ 그래도 돌려봐 ㅎ npm run dev 역시 잘 돌지 ㅎㅎ 나는 3000번 포트에 하고 있는게 있어서 localhost:3001로 뜨는데 보통 3000번으로 뜨니까 헤깔리지 말고 니들은 localhost:3000으로 테스트햐. 그러면 흐미 지겨운거~ 허구..

회로 설계할 때 가끔씩 이럴 때가 있어. AC컨트롤하는 디바이스인데 디지털 로직때문에 SMPS쓰자니 너무 크고 가격도 비싸고 DC 아답터 쓰자니 AC 다이렉트로 들어가는데 웃기잖아 ㅋㅋ 전원 두번 넣는 느낌이지... 바보같고 그래 ㅋ 그치? 그렇다고 보드 위에 SMPS를 직접 설계하자니 무섭잖아!?? 인증 통과 할 생각하니까 심장도 쫄깃쫄깃하잖아! ㅎㅎ 이 뿐만이냐? 발주하는 새끼분들은 맨날 급하데 ㅋㅋㅋ 이럴 때 사용하는 전자 부품이 있어. AC-DC 컨버터라고 하는데 걍 소형 SMPS야. 내가 알고 있는 건 파워젠이라는 회사에서 만들고 있는 MS04시리즈야. 가격은 디바이스마트 기준 6200원이야. 비싸다고? 욕하기 전에 전원 인증 받은 일반 SMPS 얼만지 알아보자. 전원 회로 많이 해보고 인증도 ..

React Native 프로젝트 할 때, 난 함수 컴포넌트만 쓰는데 다른 회사는 어떤지 모르겠네? 검색하다보면 스택오버플로우에도 Class 컴포넌트로 되어 있는 코드가 많던데 난 그놈에 this가 너무 꼴보기 싫어서 함수 컴포넌트만 사용해. 1인 기업이라 누가 뭐라할 사람도 없고 ㅎㅎㅎ 그래도 궁금해서 조금 찾아보니 함수 컴포넌트와 클래스 컴포넌트 차이가 없다고 그러네. 둘 다 몇 가지 추가 기능이 있다고는 하는데 크게 문제 없는 것 같아. 그런데 Hook 에서 이유를 좀 찾을 수 있겠더라구. reactjs.org에서 Hook 문서보면 첫줄에 나와. Class 없이 리액트 사용하고 싶다고 ㅋㅋ 좀 더 읽다 보면 hook 만든 동기가 나오는데 요약하자면 class가 많은 문제를 만든다 그래서 별로다~ 결국..

React Query는 React web이건 React native건 데이터 가져오거나 보낼 때 무지성으로 사용하자 fetch를 이용해 날씨를 가져온다고 가정해보면... const weatherQuery = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=SEOUL&appid=87d867200b06df0b91f9e7399bdXXXXX`) .then((res) => res.json()); 이렇게 하면 간단하게 서울의 현재 날씨를 가져올 수 있어. 이건 쉬운데.. 관리가 어렵겠지.. 같이 생각해 보자고 단순히 fetch만 하면 얼마나 좋겠어? 하지만 때로는 fetch할 때 timeout을 설정해야 하고, 데이터의 만료 시간을 설정해야 하고 또 ..

GCP firebase firestore 작업하다보면 Collection 이름을 변경하고 싶을 때가 있다. Collection 이름을 뭔가 부끄럽게 만들었다던지.. 할 때.. ㅋㅋㅋㅋ 하지만 Firestore는 Collection 이름을 변경하는 기능을 지원하지 않는다. 그래서 새로운 이름의 Collection을 만들고 기존 Collection의 Document 전체를 복사해야 한다. 이런 기능을 하는 툴을 만드는 건 어렵지 않지만 혼자서 북치고 장구치는 1인 기업을 하는 상황에 이런 툴까지 만드는 것은 쉬운 일이 아니다. 그리고 해서도 안된다. '이럴 때 사용하는 툴들이 있을거 같은데?' 하고 검색해보니 몇개가 나오는데 그 중 Firefoo가 괜찮아 보여 사용중이다. Collection이나 Docume..

ADA Staking Pool을 한달 조금 넘게 운영을 해보았습니다. 총 20K ADA 정도로 테스트를 몇 달 해보면 뭔가 답이 나오겠지 했는데 그렇게 길게 끌 일도 아니었습니다. 20K로는 절대 풀 운영이 안됩니다. 그럼 최소한 얼마를 가지고 있으면 스테이킹 풀 운영이 될까요? pooltool.io로 검색을 해보면 현재 카르다노 풀의 saturation은 약 66M ADA입니다. 이 이상 넘어가면 풀의 보상이 더 이상 늘어나지 않고 오히려 줄어듭니다. 이런 식으로 블록 생성자의 집중을 막는 것이죠. 하지만 66M ADA = 66,000,000 ADA, 한화로 170,280,000,000원 입니다. 1700억이 넘는 돈이죠. 이런 풀들은 굉장히 안정적으로 운영되고 있습니다. 위의 그래프로 보자면 4M A..