xu의 성장일지

  • 홈
  • 태그
  • 방명록

2025/05/27 2

새로고침/뒤로가기 시도 시 모달 띄우기

일기 작성 페이지에서 새로고침, 뒤로가기 등을 시도할 때 이동을 막고 경고 모달을 띄우려고 한다. const router = useRouter();const pathname = usePathname(); // 현재 경로const lastPathname = useRef(pathname); // 이전 경로 저장useEffect(() => { if (pathname !== lastPathname.current) { // 페이지 이동 시도 감지 setShowSaveRestrictionModal(true); // 모달 띄우기 router.replace(lastPathname.current); // 현재 페이지로 강제 이동 → 이동 막기 }}, [pathname, router]);pathnam..

개발/프로젝트 2025.05.27

Tiptap 라이브러리로 텍스트 에디터 만들기

텍스트 에디터를 만들기 위해 Tiptap 라이브러리를 사용해 봤다. Tiptap 라이브러리ProseMirror를 기반으로 한 모던하고 확장 가능한 Rich Text Editor!Next.js, React, Vue, Svelte 등 다양한 프레임워크와 잘 통합되고 마크다운처럼 텍스트를 구조적으로 관리할 수 있는 기능을 제공한다. Tiptap 주요 특징1. ProseMirror 기반- 마크다운처럼 텍스트 구조를 명확하게 파악할 수 있는 트리 기반 편집기2. 확장성- Extension을 통해 기능을 자유롭게 추가하거나 수정 가능3. Headless 구조- 원하는 UI 직접 구성 가능!4. React/Vue 지원- @tiptap/react, @tiptap/vue-3 패키지 사용 Tiptap 구성 요소1. use..

개발/프로젝트 2025.05.27
이전
1
다음
더보기
프로필사진

xu의 성장일지

  • 분류 전체보기 (58)
    • 부트캠프 (1)
    • 책 (1)
    • 회고 (1)
    • 대외활동 (2)
    • 개발 (53)
      • HTML&CSS (2)
      • JavaScript (7)
      • React&Redux (6)
      • Node.js (5)
      • Database (2)
      • AWS (4)
      • TypeScript (6)
      • 프로젝트 (16)
      • 트러블 슈팅 (1)
      • 알고리즘 (1)
      • 자료구조 (2)

Tag

TODOlist, S3, HTML, OAuth2.0, 카카오디벨로퍼, Redux, RTK Query, CSS, Javascript, 자료구조, HTTPS, redux dev tool, Next.js, react, CloudFront, TypeScript, AWS, 자동로그인, TMDB, RTK,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바