말랑말랑 개발기

홈페이지 우측 하단에 고정되어 따라다니는 플로팅 버튼을 만들었습니다. 그런데 이 플로팅 버튼으로인해 홈페이지 최하단 푸터의 일부 정보가 보이지 않는 현상이 있었습니다. 이를 방지하고자 스크롤을 일정 이상 내렸을 경우 플로팅 버튼이 사라지는 효과를 넣었습니다. 부드럽게 보이기 위해 페이드인, 페이드아웃 애니메이션도 추가해주었습니다. body의 전체 스크롤 높이를 이용하여 EventListener를 붙이는 간단한 방법입니다. export const FloatingButton = () => { const [isVisible, setVisible] = useState(true); useEffect(() => { const handleScroll = (e: Event) => { if (window.scrollY ..

vite에서 절대경로를 설정해 주기 위해서는 vite.config.ts와 tsconfig.json에 alias를 설정해줘야 합니다. 이것이 귀찮다면 vite-tsconfig-paths 플러그인을 사용합니다. (관련 링크) 이번 글에서는 플러그인을 사용하지 않고 manual 하게 설정해 보겠습니다. 자주 사용하는 src, atoms, hooks, components, pages, types 폴더에 대해서 설정해 보겠습니다. vite.config.ts import path from 'path'; import { defineConfig } from 'vite'; import eslint from 'vite-plugin-eslint'; import react from '@vitejs/plugin-react-sw..