본문 바로가기

React47

[React] navigator.share + clipboard로 공유 버튼 간단 구현하기 안녕하세요 오늘은 React 프로젝트 카드나 블로그 게시글 리스트에 간단한 공유 버튼(공유 or 복사) 을 추가하는 방법을 소개해보려고 합니다. 공유 버튼 사용 이유 블로그 글이나 포트폴리오 프로젝트는 결국 누군가에게 보여주려고 작성하는 글입니다. 링크를 쉽게 공유할 수 있는 버튼 하나만 달아줘도 독자 입장에서는 주소창 열어서 복사/붙여넣기 하는 수고를 덜 수 있습니다. 작은 디테일이지만 체감 UX가 확 달라집니다 요즘은 모바일에서 글을 보는 경우가 많습니다. 주소창 열어서 링크 복사하기는 은근 번거로운데, 공유 버튼을 누르면 바로 카톡/메일/sns 로 바로 보낼 수 있습니다. 네이티브 공유 시트가 뜨기 때문에 “이거 공유해야겠다” 싶은 순간 바로 행동으로 이어집니다. 모바일: 네이티브 공유 시트(n.. 2025. 8. 25.
[React] LottieFiles 애니메이션 적용하기 안녕하세요 오늘은 lottie 애니메이션을 적용해보도록 하겠습니다Lottie란?Lottie는 애니메이션 파일 형식(JSON) + 재생 라이브러리를 의미합니다. 원래는 After Effects(영상 툴)에서 만든 애니메이션을, Bodymovin 플러그인으로 “벡터 기반 JSON 데이터”로 추출한 게 시작이었으며 JSON에는 위치, 크기, 색, 모양, 타이밍 같은 애니메이션 정보가 다 들어 있습니다. 그래서 GIF처럼 무거운 픽셀 덩어리가 아니라, 벡터/수학적 계산 기반으로 움직이는 거라 용량이 적다는 장점이 있습니다. Lottie를 쓰는 이유 가벼움 → GIF보다 용량이 훨씬 작고, 확대해도 깨지지 않습니다.제어 가능 → 단순히 자동 재생만 되는 게 아니라, 재생/정지, 구간 반복, 속도 조절까지 가능합니.. 2025. 8. 21.
[React] 3D 아바타 컴포넌트 만들기 안녕하세요 오늘은 React + Three.js 기반의 3D 아바타 컴포넌트 예제를 만들어보겠습니다. 우선 3D 렌더링 라이브러리를 필수로 설치해야합니다 1. 관련 라이브러리 설치 - 이 예제는 TailwindCSS로 스타일링 돼있으니 Tailwind도 같이 세팅해줍니다. npm install @react-three/fiber @react-three/drei threenpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p react-three-fiber: https://docs.pmnd.rs/react-three-fiber@react-three/drei: https://github.com/pmndrs/dreiThree.js: .. 2025. 8. 11.
[React] 웹페이지 메뉴바 드롭다운 만들기 안녕하세요 오늘은 웹페이지 상단에 위치한 메뉴바에 드롭다운으로 세부 메뉴 목록을 구성해보도록 하겠습니다. 드롭다운 메뉴는 카테고리가 많을때 사용자가 쉽게 원하는 목록을 찾을 수 있도록 합니다. 드롭다운 메뉴의 주요 목적들: 1. 공간 효율성네비게이션 바의 공간이 제한적일 때많은 메뉴 항목을 한 줄에 모두 표시하기 어려울 때2. 정보 구조화관련된 메뉴들을 카테고리별로 그룹화사용자가 원하는 정보를 더 쉽게 찾을 수 있게 함3. 사용자 경험(UX) 개선복잡한 메뉴 구조를 단순화시각적 혼란을 줄이고 직관적인 네비게이션 제공실제 사례들:쇼핑몰: "남성의류" → "상의", "하의", "신발" 등기업 사이트: "제품" → "소프트웨어", "하드웨어", "서비스" 등포트폴리오: "프로젝트" → "웹개발", "모바일.. 2025. 8. 6.
[React] 웹페이지에 간단하게 폭죽 효과 구현하기 안녕하세요 오늘은 canvas-confetti 라이브러리 사용하여 간단하게 폭죽 효과를 구현해보도록 하겠습니다. 아래는 라이브러리 깃허브 링크입니다. GitHub - catdad/canvas-confetti: 🎉 performant confetti animation in the browser🎉 performant confetti animation in the browser. Contribute to catdad/canvas-confetti development by creating an account on GitHub.github.com 코드 한두줄만으로 폭죽 이벤트를 구현할 수 있으며 canvas-confetti 라이브러리의 npm 주간 다운로드율은 92 k 로 활발하게 사용되고 있는 라이브러리.. 2025. 8. 5.
[React] GSAP ScrollTrigger 라이브러리 사용해 스크롤에 반응하는 애니메이션 구현하기 안녕하세요 오늘은 GSAP ScrollTrigger 라이브러리를 활용하여 사용자의 스크롤에 따라 컴포넌트에 애니메이션을 추가해보도록 하겠습니다. https://gsap.com/docs/v3/Plugins/ScrollTrigger GSAP ScrollTrigger 은 "스크롤 위치에 맞춰 애니메이션을 재생·스크럽·핀·스냅까지 제어” 해 주는 GSAP 플러그인입니다. 먼저 components 디렉토리 내부에 (디렉토리가 없다면 "프로젝트 루트/src" 안에 만들어줍니다) FadeInSection.jsx 파일을 만들어줍니다. 1. FadeInSection.jsximport { useRef } from "react";import gsap from "gsap";import { ScrollTrigger .. 2025. 8. 4.
[React] react-hot-toast 사용하여 토스트 알림 UI 간편하게 만들기 안녕하세요 오늘은 react-hot-toast 라이브러리를 사용해 간단하고 예쁘게 토스트 메시지(알림) ui 를 구현해보겠습니다. 토스트 메시지(Toast message) 란 사용자에게 짧고 간결한 피드백을 제공하기 위해 사용되는 팝업 알림으로, 일정 시간이 지나면 자동으로 사라지며 사용자의 상호작용 없이 정보를 전달하는 데에 사용 되는 요소 입니다. 1. react-hot-toast 설치 프로젝트의 루트 디렉토리 위치에서 해당 라이브러리를 설치해줍니다. npm install react-hot-toast 2. 원하는 자바스크립트 파일에 react-hot-toast 를 import 해줍니다 About.jsximport { toast } from 'react-hot-toast'; 3. 토스트 메시.. 2025. 7. 30.
[React] react-simple-typewriter로 타이핑 효과 쉽게 구현하기 안녕하세요 오늘은 리액트의 react-simple-typewriter 컴포넌트를 사용해 텍스트가 자동 타이핑 되는 효과를 구현해보도록 하겠습니다 아래 react-simple-typewriter 홈페이지에서 자세한 정보를 확인할 수 있습니다. react-simple-typewriterA simple react component for adding a nice typewriter effect to your project.. Latest version: 5.0.1, last published: 3 years ago. Start using react-simple-typewriter in your project by running `npm i react-simple-typewriter`. There are .. 2025. 7. 29.
[React] IntersectionObserver로 스크롤 시 Fade-in 애니메이션 적용하기 안녕하세요 오늘은 React에서 IntersectionObserver API를 활용해 특정 컴포넌트가 화면에 진입할 때 부드럽게 나타나는 효과를 구현해보겠습니다. React에서 scroll 이벤트 없이 간단하게 등장 애니메이션을 만드는 예제입니다. IntersectionObserver란?보통 스크롤에 반응하는 UI를 만들 때 scroll 이벤트를 사용하지만,이 방법은 성능 저하, 여러 컴포넌트 관리의 복잡성 등의 문제가 생길 수 있습니다.이런 문제를 해결해주는 게 바로 IntersectionObserver입니다."요소가 뷰포트에 들어왔는지"를 관찰해서 이벤트 없이도 실행을 제어할 수 있는 브라우저 API입니다. 먼저 FadeInSection 컴포넌트를 만들어줍니다. 1. FadeInSection.j.. 2025. 7. 28.

티스토리툴바