jh.nrtv

Next.js로 개발하고 있는 프로젝트의 게시판 작성기능에 WYSIWYG (What You See Is What You Get) 에디터를 구현해야 할 필요성을 느꼇다. 위지위그는 HTML 태그를 사용자가 입력할 필요 없이 에디터 내장 기능을 이용해서 원하는 글의 모양을 만들면 자동으로 HTML 방식으로 변환하는 편집기를 의미한다. 여러 docs나 블로그 글 게시기능 등에 기본적으로 탑재되어 있기 때문에 익숙한 형태이다. 저번 React 프로젝트에서는 CKeditor를 사용했는데 에러가 너무 많이 발생해서 ㅜㅜ 이번에는 next와 더 호환성이 좋다는 Quill을 사용해보고자 한다. Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27..

Next.js와 MongoDB를 사용한 게시판을 만들고 있으며 게시판의 페이지네이션을 구현하는 과정을 기록해보고자 한다. 현재 내 실력과 상황에서 현실적인 구현방법을 고민한 것이며, 분명 이보다 훨씬 나은 방법이 있을 것이라 확신한다. 다음은 기존에 게시판의 글 목록을 보여주는 소스코드이다. // /community/page.tsx import { connectDB } from "@/util/database"; export default async function Community() { const client = await connectDB; const db = client.db("uppernight"); const result = await db .collection("community") .find..

Next.js 13.4.1 로 진행중인 프로젝트에서 메타데이터를 설정하고자 한다. 먼저 'Next.js에 메타데이터 설정하기' 등의 키워드로 검색하면 가장 보편적으로 소개하는 방법이 있다. ✅ 가장 보편적인 방법 - import ); } export default MyApp; 위와 같이 'next/head'에서 태그를 임포트 하고 그 안에서 이나 태그를 조작한다. _app.js 말고도 각각의 page.js 에서도 위의 방법으로 변경이 가능하다고 한다. [정직하게 배워보는 Next.js] Next.js에서 head 태그를 조작하는 멋진 방법 해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 10부작으로 이루어져 있습니다. Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽..