Novel 사용 방법
Novel 설치: 터미널에서 'npm i novel'을 실행하여 프로젝트에 Novel을 설치합니다.
환경 변수 설정: OpenAI 통합을 위한 OPENAI_API_KEY와 Vercel Blob 접근을 위한 BLOB_READ_WRITE_TOKEN과 같은 필수 환경 변수를 설정합니다.
Novel 구성 요소 가져오기: React 코드에서 EditorContent 및 EditorRoot와 같은 필요한 Novel 구성 요소를 가져옵니다.
편집기 구성 요소 만들기: EditorRoot 안에 EditorContent를 래핑하여 Novel 편집기를 사용하는 구성 요소를 만듭니다.
초기 콘텐츠 구성: EditorContent의 initialContent prop을 사용하여 편집기의 초기 콘텐츠를 설정합니다.
콘텐츠 업데이트 처리: EditorContent의 onUpdate prop을 사용하여 편집기 콘텐츠의 변경 사항을 처리합니다.
모양 사용자 정의: Tailwind CSS 클래스 또는 선호하는 스타일링 방법을 사용하여 편집기의 모양을 사용자 정의합니다.
AI 기능 구현: OpenAI 통합을 구성하여 AI 기반 자동 완성 기능을 활용합니다.
추가 기능 추가: 프로젝트에 필요한 이미지 업로드 또는 협업 편집과 같은 추가 기능을 구현합니다.
테스트 및 개선: 편집기를 철저히 테스트하고 특정 요구 사항에 따라 기능과 모양을 개선합니다.
Novel 자주 묻는 질문
노벨은 AI 기반 자동 완성이 포함된 노션 스타일의 WYSIWYG(What You See Is What You Get) 편집기입니다. Tiptap, OpenAI 및 Vercel AI SDK로 구축되었습니다.
더 보기