어리둥절 분석가 그리고 개발자

✔️ 필요성 canvas package를 사용해야하는데 Cannot find module '../build/Release/canvas.node' 다음과 같은 에러가 떴다. ✔️ 문제 확인 이런 저런 글을 살펴보니 설치할 때 신경써야하는 부분이 있는 것 같다. 아래 canvas 공식 github에 가서 설치하는 방법을 찾아봤다. https://github.com/Automattic/node-canvas GitHub - Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS. Node canvas is a Cairo backed Canvas implementation for NodeJS. - GitHub - ..

import { NextApiRequest, NextApiResponse } from "next"; import abroad from "../../../../data/aptLifestyle/abroad.json"; import { Type } from "../../../../types"; export default async function handler( req: NextApiRequest, res: NextApiResponse ) { const { query: { code } } = req; const foundData = (abroad as Type[]).filter( (item) => String(item.code) === (code as string) ); // if (foundData.leng..

:is 를 통해서 여러개에 동일한 명령어를 지정할 수 있다. 순서대로 등장하기 위해서 animation-delay값에 조금씩 차이를 주었다. 사실 10개 정도라서 그냥 하드코딩했는데, 만약 수십개 이상이라면 for문을 사용해서 스타일링할 수 있는 것인지, 거기까지는 시도해보지 않아서 모르겠다 ^^; 부디 그럴 일이 없기를. animation-fill-mode는 애니메이션이 수행된 다음에 어떻게 변화하는 지를 나타내는 것인데, 이번 경우에는 등장한 이후에 다시 사라지지 않는 것이 요건이었기 때문에 "both" 혹은 "forwards" 값으로 설정하였다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode const styled from..

marker 리스트의 lat, lng을 활용해서 최적의 bound를 설정해주는 hook import { useEffect } from "react"; /* Tmap의 handleCreate를 활용해서 map 객체를 부모로 올린 다음 활용 */ export const useFitEdge = ( map: any, data: any, coordList: number[][], margin?: { left: number, top:number, right:number, bottom:number } ) => { useEffect(() => { if (!coordList || coordList.length === 0) return; const latLngBounds = new (window as any).Tmapv2...

https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. swr.vercel.app useSWR을 사용해서 API를 여러번 콜해서 데이터를 받아오고 싶은데, 이 때 useSWR 자체를 여러번 map해서 돌리면 다음과 에러가 난다. "Rendered fewer hooks than expected. This may be caused ..

✔️ 필요성 setInterval을 통해서 주기적으로 state값을 변경시키고 싶다 ✔️ 문제 해결 useEffect의 [] argument안에 state값을 추가해야 한다! const [monthIdx, setMonthIdx] = useState(2); /* 0부터 2까지 숫자를 계속 돌아가게 만듦 */ const monthCarousel = (monthIdx: number) => { var len = 3; if (monthIdx === len - 1) return 0; else return monthIdx + 1; } /* 3초에 한번씩 내용 바뀜 */ useEffect(() => { const interval = setInterval(()=>{ setMonthIdx(monthCarousel(mont..

Swiper.js는 화면을 부드럽게 Slide 하는데 널리 쓰이는 라이브러리이다. Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper에서 마우스휠 + Vertical 조합을 활용하면 FullPage 효과를 낼 수 있다. 예전에 FullPage.js를 쓴 적도 있는데 이것보다 훨씬 쉽고 간단하게 만들 수 있는 것 같다. 개인적으로 FullPage를 사용하는 것을 선호하지 않는다. 다양한 해상도 화면에서 세로 길이가 다른데, 이 모든 해..

GSAP으로 배경이 Sticky하게 걸려있는 상황에서 element등이 올라오도록 애니메이션 적용하기 이런식으로 스크롤에 따라서 요소들이 부드럽게 움직이는 것이 요즘 프론트 퍼블리싱 트렌드인 것 같다 네이버는 카드가 겹쳐지면서 조금씩 뒤로 가는 듯한 모습을 구현했다 이것을 GSAP의 ScrollTrigger를 활용해서 비슷하게 만들어보자! 코드 슬라이드2 안에서 카드1, 카드2, 카드3이 순서대로 올라오는 구조 const Slide2 = styled.div` display: flex; padding-bottom: 1000px; //스크롤이 충분히 내려가도록 padding `; const ThumbnailCard = styled.div` position: absolute; display: flex; wid..

import React, { useEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; import { useSwiper } from "swiper/react"; import classNames from "classnames"; const Container = styled.div` display: flex; flex-direction: column; position: sticky; ` const CardBox = styled.div` position: sticky; width: 800px; height: 400px; background-color: yellow; ` const Card1 = styled.div` pos..

스크롤 이벤트 useEffect(() => { var beforePosition = document.documentElement.scrollTop; window.addEventListener('scroll', function() { var afterPosition = document.documentElement.scrollTop; if (afterPosition > 50) { if(beforePosition < afterPosition ){ // 스크롤 아래로 console.log('scrollDown') } else { // 스크롤 위로 console.log('scrollUp') } } else { // 평상 시 } beforePosition = afterPosition; }) }, []); 휠 이벤트..