728x90 300x250 SMALL 프론트엔드개발4 Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 Lottie(로띠)란?Lottie는 Airbnb에서 개발한 Json 기반 애니메이션 파일 형식으로, 웹과 모바일에서 가볍고 부드러운 애니메이션을 실행할 수 있도록 해주는 라이브러리다.Lottie는 After Effects에서 만든 애니메이션을 JSON파일로 변환한 후, lottie-web 또는 lottie-react등의 라이브러리를 통해 쉽게 불러와 사용할 수 있다. Lottie의 특징가볍고 빠름 - JSON형식이기 때문에 GIF보다 파일 크기가 작고, 부드러운 애니메이션을 제공플랫폼 호환성 - 웹뿐만 아니라 Android, ios에서도 동일하게 사용 가능코드로 제어 가능 - 애니메이션을 재생, 멈춤, 속도 조절, 특정 프레임 이동 가능반응형 지원 - 벡터 기반 애니메이션이므로 해상도에 영향을 받지 않음.. 2025. 3. 12. 강력한 애니메이션 GSAP, 사용법과 예제 정리 GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리로, HTML, CSS, SVG, Canvas, WebGL등의 요소를 부드럽고 효율적으로 애니메이션할 수 있도록 도와준다. GSAP의 주요 특징1. 강력한 성능 : 일반적인 CSS 애니메이션보다 빠르고 부드럽게 작동한다.2. 다양한 애니메이션 가능 : 위치, 크기, 투명도, 색상, 회전 등 다양한 속성 애니메이션 지원3. 체이닝(Chaining)과 타임라인(Timeline) 지원 : 여러 애니메이션을 순차적으로 또는 동시에 실행 가능4. 반응형 지원 : 반응형 웹에서도 문제없이 동작5. 스크롤 애니메이션 연동 가능 : scrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능 1... 2025. 3. 11. 확장 가능한 컴포넌트 만들기 : Specialization 패턴 사용법 Specialization 패턴은 일반적인 컴포넌트를 만들고, 이를 확장하여 특정 역할을 수행하는 컴포넌트를 만드는 방식이다.일반적으로 props를 활용하여 특정 동작을 추가하거나, 기본 컴포넌트를 확장하여 특화된 기능을 제공한다. 추천 예제버튼 컴포넌트(기본 버튼 vs primary 버튼 vs danger버튼)입력 폼(기본 Input vs Password Input)알림 컴포넌트(일반 알림 vs. 경고 메시지 vs. 성공 메시지)예제 코드function Button({ type, children }) { const className = type === "primary" ? "btn-primary" : "btn-default"; return {children};}function App() { ret.. 2025. 2. 14. React에서 children을 활용한 Containment 패턴 이해하기 React에서 Containment 패턴은 컴포넌트 내부에 다른 컴포넌트를 포함하는 방식으로, 재사용성을 높이고 컴포넌트 간 결합도를 낮출 수 있는 방법이다. 일반적으로 리액트 컴포넌트 props에 기본적으로 들어있는 children 속성을 사용하여 구현한다. props.children 속성을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다. 앞에서 createElement()함수에 대해 배울 때 아래와 같은 형태로 호출 했는데React.createElement( type, [props], [...children]) 세번째 파라미터에 children을 사용한다. 추천 예제모달 컴포넌트카드(Card) UI 컴포넌트레이아웃 컴포넌트(예: 사이드바 + 컨텐츠 영역)리스트 컴포넌.. 2025. 2. 13. 이전 1 다음 728x90 반응형 LIST