본문 바로가기

IT/React9

[react] react Framer-motion 리액트 프레이머 활용하기 (애니메이션을 간편하게!) 프로그래밍 세계를 탐구합시다. react Framer-motion 리액트 프레이머 모션 활용하기 React Framer Motion은 주로 다음과 같은 역할을 합니다: 애니메이션 제어: 사용자가 정의한 컴포넌트나 DOM 요소를 애니메이션화할 수 있습니다. 움직임, 크기 조절, 회전 등 다양한 애니메이션 효과를 구현할 수 있습니다. 제스처 처리: 터치, 클릭 등의 제스처 이벤트를 감지하고 이에 따른 애니메이션을 쉽게 추가할 수 있습니다. 컴포넌트 간 통신: 다양한 컴포넌트 간의 통신을 촉진하며, 애니메이션을 통한 사용자 경험 향상에 기여합니다. react Framer-motion 리액트 프레이머 모션 구현 예시 구현 예시 화면입니다. 밑줄 효과, 마우스 hover 시 box가 커지는 효과, 버튼이 나타나는.. 2024. 1. 10.

[react] CKEditor 라이브러리 활용하여 게시판 구성하기 (최소 높이 설정하기, CSS Module) 프로그래밍 세계를 탐구합시다. CKEditor 라이브러리 활용하여 게시판 구성하기 CKEditor 라이브러리를 활용하여 게시판을 효과적으로 구성할 수 있습니다. HTML, CSS를 전부 활용해서 구현하려면 어려운 게시판 요소를 간편하게 출력할 수 있습니다. 아래는 구현 예시입니다. CKEditor 라이브러리 1. CKEditor 란? CKEditor는 웹 기반의 텍스트 에디터로, HTML로 작성된 문서를 편집할 수 있습니다. 이는 웹사이트의 사용자가 브라우저에서 직접 콘텐츠를 편집할 수 있게 해줍니다. 이 에디터는 JavaScript로 작성되었으며, 다양한 웹 브라우저와 호환됩니다. CKEditor 사이트 URL https://ckeditor.com/ckeditor-5/ CKEditor 5 | Power.. 2024. 1. 9.

[Spring Boot, react] Spring Boot 데이터 react에 가져오기 프로그래밍 세계를 탐구합시다. 해당 페이지의 프론트는 react로 구성하였습니다. 데이터는 springboot를 활용하여 가져왔습니다. 전기차에 따른 주행거리를 알 수 있으며, 차량을 검색하고 클릭하여 상단에 저장할 수 있습니다. 구현 화면 작성 코드 (1) Spring Boot CarDataController.java package com.example.board.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.. 2023. 11. 1.

[react] Lottie 활용하여 react에서 로딩 화면 구성하기 프로그래밍 세계를 탐구합시다. Lottie라이브러리를 활용하여 로딩 화면을 효과적으로 구성할 수 있습니다. 아래는 구현 예시입니다. 로딩 화면 예시 Lottie 사이트 링크 https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi 로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통 lottiefiles.com 1. Lottie 설치 Lottie를 설치해야 합니다. 터미널(Ctrl+J) 에 다음과 같은 명령어를 입력하여 설치할 수 있습니다. npm install.. 2023. 10. 27.

이전 1 2 3 다음

티스토리툴바