뇌 채우기 공간

보호되어 있는 글입니다.

GET export const getList = async () => { const data = (await firebase.firestore().collection("MY_COLLECTION_NAME").get()).docs.map( (doc) => { return { ...doc.data(), id: doc.id }; } ); return data; }; 콜렉션을 만들고 그 콜렉션에 있는 모든 데이터를 가지고 오는 코드 id를 자동 생성으로 만들게 되면 data안에는 id가 안들어있어서 따로 map으로 붙여서 새로운 배열을 만들어줬다. GET BY ID export const getItemById = async (id: string) => { const data = ( await firebase.fi..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

https://github.com/surmon-china/vue-awesome-swiper GitHub - surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs 🏆 Swiper component for @vuejs. Contribute to surmon-china/vue-awesome-swiper development by creating an account on GitHub. github.com 내가 원하는 기능은 autoplay되다가 마우스 오버를 하면 멈췄다가 mouseleave를 하면 다시 autoplay가 되는 기능을 원했다. 예시로 나오는 코드들은 다 vue2버전인데 나는 2.7의 setup script로 바꾸고 싶었음! ... swi..

1탄은 아래 게시물 https://sso-feeling.tistory.com/850 [css] clip-path polygon으로 원형 wheel 만들기 1탄 코드펜에서 이런 작업물을 발견했습니다. https://codepen.io/wheatup/pen/GbgyLY Interactive Wheel Menu Using javascript and css(non-svg) to make an hold-and-drag wheel menu.... codepen.io 마우스 클릭을 하면 동그란 휠이 나와서 sso-feeling.tistory.com 2탄은 리액트로 코드를 옮기고 hover 할때마다 약간 바운스되면서 커지는 효과를 넣어보겠습니다. css는 styled-components를 사용하겠습니다. 1. styl..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. react-query React-Query는 React 애플리케이션에서 API 데이터를 쉽게 가져오고 관리할 수 있도록 도와주는 라이브러리입니다. React-Query를 사용하려면, 먼저 React-Query 라이브러리를 설치해야합니다. npm install react-query 다음으로, React-Query의 useQuery hook을 사용하여 데이터를 가져올 수 있습니다. useQuery는 3가지 인자를 받습니다. queryKey: 요청에 사용할 고유 키입니다. 이 값은 문자열 또는 배열일 수 있습니다. 배열을 사용하면 여러 개의 쿼리를 처리할 수 있습니다. queryFn: 실제 데이터를 가져오는 함수입니다. 이 함수는 Promise를 반환해야하며, 데이터를 가져오는 로직이 포함되어야합니다. ..

코드펜에서 이런 작업물을 발견했습니다. https://codepen.io/wheatup/pen/GbgyLY Interactive Wheel Menu Using javascript and css(non-svg) to make an hold-and-drag wheel menu.... codepen.io 마우스 클릭을 하면 동그란 휠이 나와서 마우스가 움직일 때 마다 위치에 있는 버튼이 튀어나오는 인터렉션입니다. 그런데 무엇보다 이 원형 모양을 css로 어떻게 만들었는지 궁금해서 css를 분석해보았습니다. 전체 코드는 링크에서 확인 바랍니다. 1. 테두리있는 조각난 원링 모양 만들기 각각의 버튼에 기본적으로 이러한 css가 있었습니다. 예상컨대 이것이 핵심인 것 같았습니다. background-image: r..