우주먼지 개발 log

오늘도 화이팅! TIL 소제목1 본문1 소제목2 본문2 소제목3 TODO 할일

새해맞이 글쓰기.. 새해가 2시간 지나긴 했다. TIL avatar 지옥 supabase 제공 예제코드 이게 있는건 왜 남의 블로그를 보고 지금알았지? 공식 사이트를 제대로 탐방 못했나보다. 다 고민하고나서 이걸 보니 .. 오.. 한다. 로딩도 처리해줘야겠다. 깔끔하긴하네. 좋은코드를 많이 보고 적용하는 것도 역시 좋은 공부이다!!! https://github.com/supabase/supabase/blob/master/examples/user-management/react-user-management/src/Avatar.jsx 문제점은 아직 해결 방법을 못찾았다. 문제 ) 예제 코드를 보면 avatar.png 로 적용을 해주길래 아바타 이미지를 이름을 하나로만 관리해도 되겠구나 싶었다? upsert를 ..

오늘도 화이팅! TIL 봐도봐도 모르겠는 typescript typescript useRef 사용 - 와 모르겠오~ https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5 useRef로 input type=file 변경해서 쓰기 https://velog.io/@cjforla123/React-input-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%EB%A5%BC-%EA%BE%B8%EB%A9%B0%EC%A3%BC%EC%9E%90-2%ED%83%84-useRef

오늘도 삽질! 수파.. 베이스 TIL sql 지금 이걸 하고 있는게 맞나? @_@ 정리 나중에..

오늘도 화이팅! TIL supabase Auth 관련 정리는 나중에.. https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=ko // 구글 Oauth설명 https://supabase.com/docs/guides/auth/social-login/auth-google 영상 중간쯤보고 함 https://console.cloud.google.com/apis/ //google OAuth 수정하는 곳 https://supabase.com/docs/guides/auth/social-login/auth-github // 깃허브 Oauth설명 https://github.com/settings/developers // githu..

오늘도 삽질하기! TIL yarn berry 와 MacOS vs Window yarn berry가 최근에 4.xx 로 업데이트 되었다고 함 .yarn/cashe에 파일들이 사라졌다고 함 4.xx macOS에서 만든 프로젝트를 클론해 옴. yarn start 하면 이런 에러가 남. 그래서 yarn install을 하라길래 해봄. node:internal/process/esm_loader:40 internalBinding('errors').triggerUncaughtException( ^ Error: Required package missing from disk. If you keep your packages inside your repository then restarting the Node process..

쉽지않다.. css 찐 프론트가 되는 길.. 클스 이브에 뭐하는.. TIL 쉽지않았던 무료 특강 : 크리스마스 캘린더 만들기 원래 아직 안온 날짜의 카드는 안열리게 구현 되어있는데, 이미 24일이어서 모든 카드 열람가능. 그래서 약간 수정해서 크리스마스 편지로 활용해보는 중.. 1번카드부터 24번카드 까지 편지를 써놔서, 이전 날짜 카드가 안 열려있으면 열지 못하게 바꾸었다!! github에 올리고 이전 카드 안열려있을 때는 모달창에 내사진 나오게 해줌. 이제 배포해서 친구들 전달..ㅋㅋ https://replit.com/@azazahee/SCC-Advent-Calendar SCC-Advent-Calendar 스파르타코딩클럽 "1시간만에 크리스마스 디데이 캘린더 만들기" 실습 프로젝트 저장소입니다. FO..

점점 재밌어지는.. 프론트의 세계.. 토요일에 처음 써본다 TIL 사실 TIL이라기보다는 정보저장에 가까운데.. TIL 그냥, 어제 canvas 강의를 듣고 너무 재밌어서.. 탐방을 하다가 touch event 로 동작하게하는 소소한 예제를 발견해서 나중에 참고하려고 퍼왔다. 뭔가 참고를 하겠지? Drag Touch 뽀개기 (velog.io) 위 블로그에 적힌 touchscreen 여부를 판단하는 기준도 알아두면 유용하겠다. hover 이벤트가 없고, pointer가 coarse 이면 (미세하지 않은, 러프한) pointer가 fine이면 디지타이저가 되겠다. 어제의 그림판 예제는 마우스 이벤트로만 가능하지만 모바일에서 이용하기 위해서는 터치 이벤트를 사용해야한다. 예제를 스마트폰에서 동작하도록 수정해보..

프론트 밥 아저씨 오창영 튜터님과 함께.. canvas로 그림판 만들기 마지막에 결국에 멘트 해주심 "참쉽죠?" 여튼 나에게 찐 프론트의 영감을 주셔버렸다 TIL Canvas로 그림판만들기 라이브세션에서 순식간에 뚝딱 더 많은걸 만들어주시긴했지만 펜으로 그리기와 펜굵기까지 반영되어있는 코드!! drawing-board-step1 - CodeSandbox MDN 사이트의 튜토리얼을 통해 더 다양한 것을 해볼수 있겠다. 캔버스 튜토리얼 - Web API | MDN (mozilla.org) 1. 리액트 IDE 사이트 : code sandbox 많은 튜터님들이 특강 세션을 해주시는 좋은 점. 개발자마다 사용하는 환경과, 유용한 꿀팁들이 쏟아진다규.. 리액트는 초반에 찾다가 못찾았는데 검색어를 어떻게 했어야했는지..

재밌었다~ 남상림 튜터님 예뻐여.. TIL Redux 대신 Recoil 을 써보자~ 사실 tutorial 그대로라 다시 옮겨 적을 필요는 없지만.. ㄷㄷㄷ 복습차원으로.. recoil 패키지 설치 yarn add recoil recoilRoot redux의 provider 처럼 App.jsx에 전역으로 사용하려는 범위에 감싸 놓기 import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); } Atom 전역으로 사용하려는 state 변수를 atom을 사용해서 끄적여 준다. key값은 고유값, 보통 변수명과 동일하게..