[Tiptap 강의 #1] 리액트에서 Tiptap 설치하고 기본 에디터 만들기안녕하세요! 오늘부터 Tiptap이라는 강력한 텍스트 에디터 라이브러리에 대해 함께 알아보겠습니다.최근에 제가 작성한 Tiptap 관련 블로그 글 조회수가 꽤 많이 늘어났습니다. 처음엔 저도 배우는 입장에서 정리해본 글이었지만, 이제는 어느 정도 익숙해져서 여러분께도 Tiptap에 대한 내용을 공유해드리면 좋겠다는 생각이 들었습니다.1. 이번 강의에서 배울 내용이번 강의는 Tiptap을 처음 접하시는 분들을 위한 기초 편으로, 다음 내용들을 다룰 예정입니다:Tiptap이 무엇인지, 왜 사용해야 하는지다른 에디터 라이브러리와의 차이점프로젝트 설정 및 설치 방법5분 만에 기본 에디터 만들기실제 동작 확인 및 트러블슈팅2. Tipta..

React Bits란?React Bits는 애니메이션 중심의 React UI 컴포넌트 라이브러리입니다.30개 이상의 컴포넌트를 제공하며, 시각적으로 강력한 효과들을 간단한 props 설정만으로 구현할 수 있는 것이 가장 큰 특징입니다.이 라이브러리는 JS/TS + CSS/Tailwind CSS 조합으로 구성되어 있어 유연한 사용이 가능하며, minimal dependency 설계 덕분에 코드가 가볍고 기존 프로젝트에 무리 없이 통합할 수 있습니다.Framer Motion, GSAP, react-spring 같은 인기 애니메이션 엔진과도 잘 어울리며, 특정 방식에 종속되지 않고 자유롭게 활용할 수 있는 것도 장점입니다.실제로 커뮤니티에서는 “10분 만에 번개 애니메이션을 구현했다”, “설치 후 바로 wow..

개요React Hooks, 단순히 "외워서" 사용하고 있진 않으셨나요?"이 Hook은 왜 이렇게 작동하지?"라는 궁금증을 가져본 적이 있다면, 훨씬 더 깊이 있는 리액트를 이해하게 될 수 있습니다.Hooks는 이제 리액트 개발에서 빼놓을 수 없는 핵심 개념입니다. 이번 글에서는 대표적인 React Hooks인 useState, useEffect, 그리고 Custom Hooks에 대해 알아보겠습니다. 1. React Hooks란?2019년 2월 6일, React는 함수형 컴포넌트에서도 상태 관리와 생명주기 관리를 가능하게 해주는 Hooks 기능을 도입하며 큰 변화를 맞이했습니다.기존에는 다음과 같은 차이가 있었죠:클래스형 컴포넌트: 상태 관리, 생명주기 메서드 사용 가능함수형 컴포넌트: 단순히 UI를 그리..

개요오늘은 메인 페이지 기능을 확장했습니다. 오늘 작업하면서 몰랐던 점이나 새로 느낀 부분들을 공유해보려 합니다.목차실행 결과노트 데이터 전역 상태 관리 및 함수 생성 및 sort 함수 활용(redux, sort)filter 함수 활용모달창 구현 및 애니메이션 적용(framer)1. 노트 데이터 전역 상태 관리(redux)전 포스터에 redux 다운법을 다룬 적이 있으니 코드만 살펴보겠습니다.src/features/ 폴더 안에 noteDataSlice.js라는 이름으로 파일을 생성했습니다.import { createSlice } from "@reduxjs/toolkit";const initialnoteData = [ { id: 0, title: "아침 산책 기록", con..