nextjs4 NextJS에서 mouse hover시 특정 텍스트 변경 마우스 호버 시 특정 텍스트 보여주기Next.js 환경에서 했던 것이니 Next 태그를 넣긴 했지만 이 녀석은 거진 React..회사 프로젝트를 진행하다가 어려웠던 부분이 있었는데 그거를 집에서 혼자 해보고 싶었습니다.. 주절주절..😑우선 화면에 보이지 않으면 내가 답답하기 때문에 퍼블리싱부터 빠르게 해주었습니다.export default function Hover() { return ( 1번을 호버 시 나타나는 텍스트입니다. 1번 호버 2번 호버 3번 호버 4번 호버 );} 저는 Next.js 환경에서 Tailwind CSS와 TypeScript를 사용하고 있습니다.매우 간단한 퍼블리싱을 마치고 이후에는.. 2024. 4. 27. NextJS에서 AOS 라이브러리 사용하기 AOS Library Install터미널에서 AOS를 설치해줍니다.npm install --save aos@next 또는yarn add aos@next 정상적으로 설치가 완료된 것을 확인하기 위해 setting.json 파일에서 "aos": "^3.0.0-beta.6"를 확인합니다.Next 환경으로 돌아와 다음과 같이 AOS를 import 해줍니다.import AOS from 'aos';import 'aos/dist/aos.css';export default function TEST() { AOS.init(); return ( TEST );} AOS Option더 자세한 내용은 AOS Github에서 확인하실 수 있습니다.AOS Github, AOS Site 👍너무나 쉽게 .. 2024. 4. 25. NextJS에서 카카오지도 넣기 Kakao map API Install터미널에서 지도 SDK를 설치해줍니다.npm install react-kakao-maps-sdk 또는yarn add react-kakao-maps-sdk 정상적으로 설치가 완료된 것을 확인하기 위해 setting.json 파일에서 `react-kakao-maps-sdk`를 확인합니다.Kakao developers 등록하기 kakao developers에서 시작하기를 누르고 로그인을 완료해줍니다. 애플리케이션을 추가해줍니다. 애플리케이션을 추가하고 해당하는 앱 키가 있는데 저는 JavaScript 키를 사용했습니다. 상단 네비게이션 바의 문서를 클릭하고 밑으로 내려 지도로 이동해줍니다. 이후 들어간 화면에서 지도 SDK 웹 .. 2024. 4. 23. NextJS에서 Swiper 사용하기 Swiper란?Swiper는 자바스크립트로 제작되어 터치, 마우스 드래그, 키보드 등 다양한 입력 방식을 지원하며 반응형 웹에 적합합니다. 이 라이브러리는 다양한 애니메이션 효과, 루프, 자동 재생 등의 기능을 제공하고 있습니다. Swiper Install터미널에서 swiper를 설치해줍니다.npm install swiper 또는yarn add swiperModule Import1. Swiper, SwiperSlide를 import 해줍니다.import { Swiper, SwiperSlide } from 'swiper/react'; 2. 사용할 모듈과 SwiperCore를 import 해줍니다.import { Navigation, Scrollbar, Autoplay } fro.. 2024. 4. 22. 이전 1 다음
