우주먼지 개발 log

오늘도 삽질! 수파.. 베이스 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값은 고유값, 보통 변수명과 동일하게..

지금 사실은 next js 구간이다.. (?) 언제해 공부.. TIL React query mutation 공통 함수로 빼기 오늘의 에러 : useMutation 같은 React hook은 top level에서 사용할 수 없다. 는 에러 src\query\useTodoQuery.js Line 5:31: React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks 오늘의 실수 () => 이것을 안붙인 것.. 아직도 개념이 안잡혀서 그런 듯ㅠ.ㅠ [공통으로 ..

숙제 5 level 늦은 제출, 막혔던 부분 catch up~ TIL 내가 생각한 typescript의 이해.. 내가 사용하려는 값(위에서 선언한 변수이든 함수의 리턴값이든 매개변수든)이 무슨 타입인지 나는 알지만 컴퓨터도 알게 하자. typescript로 리액트 쿼리 사용하기 javascript로 짠 코드를 typescript로 바꾸는 시작부터 막혔다.. 답을 찾아가는 방법.. 어떻게든 되게 하는 방법?? todolist 조회 함수이다. // 1. as-is // 모든 todos를 가져오는 api const getTodos = async () => { const response = await axios.get(SERVER_URL); return response; }; //(처음에는 response를 통..

오늘도 화이팅! TIL 타입스크립트 보조 교재 ㅊㅊ 동기가 튜터님 질문하는 거 구경하다가 추천 교재 주워왔다. 살까말까. 1) effective typescript 2) https://www.zerocho.com/book/3 리덕스 툴킷 with typescript https://redux-toolkit.js.org/tutorials/typescript https://redux-toolkit.js.org/usage/usage-with-typescript - 공식 사이트인데 이대로만 하자.. - 타입쓰기전에 하던 것과 조금 다르더라도 -0- redux thunk with typescript 블로그 참고한 거 https://i-ten.tistory.com/285 - payload를 여러 변수를 담아 객체로 ..