뇌 채우기 공간

보호되어 있는 글입니다.

vue에서 lottie-web을 써서 아래 코드를 작성함 const lottieRef = ref(null); onMounted(() => { lottie.loadAnimation({ container: lottieRef.value, renderer: 'svg', loop: true, autoplay: true, animationData: animationLoading, }); }); 여기서 container 부분에서 빨간줄이 떴다. Type 'undefined' is not assignable to type 'Element'. 이런 에러가 떴다. undefined를 잡으면 null 문제라고 또 떴다. 이것을 해결하는 방법은 const lottieRef = ref(null); onMounted(() => ..

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..

1. node 버전이 안바뀌는 이유 한 프로젝트에서는 노드를 14버전을 써야해서 노드 버전을 바꿔야했다. 노드 버전을 바꾸어도 변경이 안되었는데 그 이유는 volta에서 노드를 잡고 있어서 그렇다 volta install node@14 이렇게 하여 해결했다. 2. vue $attrs https://hasudoki.tistory.com/entry/Vuejs-%EC%83%88%EB%A1%9C%EC%9A%B4-v-model-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B04-attrs-listeners [Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners) 2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (v..

1. package-lock.json / 패키지 잠금 package-lock.json https://oneroomtable.tistory.com/entry/packagejson-파일이란-무엇이며-어떤-역할을-할까요 패키지 잠금 https://www.daleseo.com/js-package-locks/ 패키지 잠금 파일 (package-lock.json, yarn.lock) Engineering Blog by Dale Seo www.daleseo.com 작업 시점에 따라서 패키지를 설치할 때 작업자마다 다른 버전을 설치하게 될 수도 있는데 package-lock.json에 명시가 되어있으면 모든 작업자가 같은 버전의 패키지를 설치할 수 있도록 보장받을 수 있다. 2. Vue setup https://kyo..

오늘은 달력을 만들어볼 것이다. 달력 만드는 것이 너무 어려워서 챗 gpt한테 코드 좀 작성해달라했는데.. 정말 뭔가 잘 작성해주었지만.. 프리미엄이 아니라서 끝까지 볼 수 없었다. 그래서 그냥 내가 했다. 1) 요일 만들기 빨간 줄 쳐진 요일 부분을 만들어보겠다. 이 달력 만드는 것 중에 가장 쉬운 부분은 여기다. 그래서 이거부터 하겠음. const DayoftheWeek = () => { const date = ["일", "월", "화", "수", "목", "금", "토"]; return ( {date.map((p) => { return ( {p} ); })} ); }; export default DayoftheWeek; 요일 배열을 만들어주고 map돌려서 보여주면 된다. 아주 쉽죠잉? 2) 현재 월..

1. next js 회사에서 만들게 된 페이지가 next js 와 타입스크립트를 써서 공부를 해보았다. next-js + typescript 시작하기 https://velog.io/@arenacast/Next.JS-Typescript-시작하기 Next.js + TypeScript 시작하기 본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본 velog.io next의 _documnet와 _app에 대하여 https://merrily-code.tistory.com/154 Next.js의 _document와 _app에 대하..

1. next js next js를 시도해보기전에는 또 학습하기 어려운 무엇인가를 학습해야하나 싶었는데 실제로 자습서가 매우 쉽게 되어있고 간편한 라우팅과 seo를 위한 프레임워크라서 편리하고 쉬웠다. 고도화해서 사용하는 방법은 더 알아봐야겠지만 마음속 장벽은 없어졌다..! https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybook Next.js 100% 활용하기 (feat. getInitialProps, getStaticPath, getStaticProps, getServerSideProps, storybook) Next.js 섹시하게 활용해보기 velog.io..

1. 이벤트 핸들러 네이밍 함수명을 어떻게 정해야할지 고민돼서 찾아보았다. 알고보니 네이밍 규칙이 있었다. . ! https://blog.sonim1.com/220 [번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react) 이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.들 blog.sonim1.com https://sustainable-dev.tistory.com/101 리액트 이벤트 핸들러 네이밍 항상 리액트 이벤트 핸들러 네이밍에 대한 고민이 있었다. 작성하면서도 이렇게 ..