프로그래밍 잡동사니

Next.js + TypeScript + styled-components 환경에서 위와 같은 텍스트 슬라이드업 캐러셀을 구현해보자! [components/Home/HomeAnimation.tsx] import { useState, useEffect, useRef } from 'react'; import { ... CarouselContainer, CarouselRotator, CarouselRotatorItem, } from './HomeAnimation.styled'; export default function HomeAnimation() { const [count, setCount] = useState(0); const intervalRef: { current: NodeJS.Timeout | null..

react-animated-cursor🔽 GitHub - stephenscaff/react-animated-cursor: An animated custom cursor React component. An animated custom cursor React component. Contribute to stephenscaff/react-animated-cursor development by creating an account on GitHub. github.com 사용 예시🔽 Animated Custon Cursor - React stephenscaff.github.io Next.js + TypeScript 환경에서 react-animated-cursor 라이브러리로 커서 디자인을 적용해보자! npm i r..

다음과 같은 .svg 파일을.. [assets/github.svg] React에서 하던 것처럼 import해 Next.js에서 컴포넌트로 사용하려고 하면.. 아래 패키지를 설치해주자 npm i -D @svgr/webpack next.config.js를 수정해준다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig;..

ESLint & Prettier🔽 Next.js 초기세팅 - eslint, prettier, typescript(tsconfig) - 짜구's WIKI 프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc) wiki.jjagu.com 터미널에 다음 항목들을 설치하고, 위 글을 참고해 ESLint와 Prettier 설정을 해준다 npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react esli..