Client/Next.js (18) 리스트형 [Next.js] Toast UI Text Editor 사용하기 블로그 프로젝트를 할 때 어떤 텍스트 에디터를 사용할지의 고민은 빼놓을 수가 없다.이전에 CKEditor를 써본 적이 있는데, 개인적으로 편리하진 않았어서 다른 에디터를 써보고 싶었다.후보는 여러 가지가 있었다.- react-quill - TinyMCE- Toast UI Editor - Summernote티스토리에서는 TinyMCE를 사용하는 듯 해서 TinyMCE랑 마지막까지 고민했는데, 디자인이나 기능이 우리 프로젝트에 더 적합하다고 판단되는 Toast UI Text Editor로 결정하였다.▪ 설치npm install @toast-ui/react-editornpm install @toast-ui/editor-plugin-color-syntax- 기본은 @toast-ui/react-editor고, @.. [Next.js] Sanity 사용하기 // SanitySanity는 Headless Content Management System(CMS)이다.Gatsby(React) 프로젝트를 할 때 Headless CMS로 Contentful을 사용한 적이 있는데, 너무 편하고 좋았다.(서버가 없을 때)근데 Contentful은 읽기는 되지만 쓰기가 안 되는 관계로... 특정 기능은 서버를 사용해야 하는 부분이 있었다.※ 참고: https://sorrel012.tistory.com/427 [리액트(React)] Gatsby - Contentful// Contentful- 컨텐츠를 관리하는 시스템- 공식 사이트: https://www.contentful.com/ Where content drives business momentum | ContentfulB.. [Next.js] Next에서 SWR 사용하기 // SWRSWR 은 Stale-While-Revalidate 의 약자이다.데이터 캐싱, 초기화 등을 간단하게 처리할 수 있게 해준다.사용이 간편하고 캐시된 데이터를 반환하기 때문에 속도가 빠르다.전역 상태 관리도 용이하여 많이 사용하는 React 훅이다.만약 전역 상태 관리에 초점을 맞출 거면 Redux나 zustand 같은 것을 사용하는 게 낫고, 데이터 fetching에 초점을 맞출 거면 react-query를 사용하는 게 나은 것 같다.일단 당장 내가 사용할 기능들은 SWR로 충분하기 때문에 가벼운 걸로 하자~ 해서 SWR을 사용해보았다.※ 공식 문서: https://swr.vercel.app/docs/getting-started Getting Started – SWRSWR is a React H.. [Next.js] Next 14에서 NextAuth 사용하여 소셜 로그인 구현하기 (구글 로그인) // NextAuthNextAuth는 Next 앱의 오픈소스 인증 솔루션이다.OAuth 인증, 비밀번호 기반 인증, 세션 관리 등이 필요한 상황에서 주로 사용한다.간편한 설정으로 인증을 관리할 수 있다는 장점이 있으며, 필요에 따라 커스터마이징도 가능하다.* 공식 사이트: https://next-auth.js.org/ NextAuth.jsAuthentication for Next.jsnext-auth.js.orgNextAuth는 App Routes 와 Route Handlers 에서 사용법이 다르기 때문에 14 버전은 Route Handlers 가이드를 보아야 한다.▪ NextAuth 설치npm install next-auth▪ route.ts 파일 생성app/api/auth/[...nextauth]/r.. [Next.js] Redirects, Rewrite // Redirects특정 url에 접속했을 때 다른 url로 redirect 시켜주는 기능▪ next.config.mjs 설정async redirects() { return [ { source: '접속url', destination: 'redirect할 url', permanent: boolean값 }, ]}source- redirection을 시작할 경로- 여기에 해당하는 URL로 접속하면 redirection이 발생한다.destination- redirection으로 이동될 경로- 목적지permanent- 해당 redirection이 영구적인지 여부// Rewrite해당 페이지의 url을 다른 url로 대체해주는 기능▪ next.config.mjs 설정as.. [Next.js] 데이터 캐싱하기 데이터 캐싱이란 데이터를 임시 저장해두고 같은 요청이 있을 때 재사용하여 응답 속도를 높이는 방법이이다.DB에 반복적으로 접근하는 것은 효율적이지 못하기 때문에 캐싱 기술을 사용한다.▪ unstable_cache서버 컴포넌트에서 데이터 fetching 결과를 캐싱한다.이름 그대로 현재 'unstable'한 상태로, 이름이나 사용 방식은 언제든 변할 수 있다.(이래서 공식 문서를 잘 봐야한다..)import { unstable_cache } from 'next/cache'; const data = unstable_cache(fetchData, keyParts, options)()공식 문서에 나와 있는 코드이다.데이터를 캐싱하기 위해서는 fetchData, keyParts, options를 매개변수로 넘겨준.. [Next.js] Interception Routes와 Parallel Routes로 모달(Modal) 구현하기 // Interception RoutesInterception Routes는 현재 페이지에서 특정 route를 로드할 수 있는 기능이다. (현재 페이지를 intercept)모달 창을 열거나 닫을 때 전체 페이지를 새로고침 하지 않고 현제 페이지 위에 모달을 표시할 수 있게 해준다.만약 공유된 URL을 클릭하거나 새로고침 할 경우에는 interception routes 페이지가 아닌 기존 페이지로 렌더링된다.▪ 디렉토리 생성interception routing을 위해서는 디렉토리를 생성해서 상대경로를 지정해야 한다.해당 디렉토리에서 어떤 페이지를 intercept 할 건지에 따라 경로를 설정하면 된다.(.) : 같은 레벨의 경로를 intercept.(..) : 한 레벨 위의 경로를 intercept.(... [Next.js] Cloudflare에 이미지 업로드하기 이전에는 이미지를 AWS의 S3에 업로드 했는데, 프리티어도 끝난 김에 다른 서비스를 찾아보았다.Cloudflare는 이미지가 자동으로 최적화 되어서 편리하다.근데 얘도 무료는 아니고, 매달 5$ 를 내는 게 가장 저렴한 요금제인 것 같다.(환율 적용하여 6836원 빠져나갔다.)정해진 요금으로 정기결제말고 유연하게 사용량에 따라 책정하는 요금제를 선택해도 좋을 것 같다.일단 나는 공부용이기 때문에 한 달 하고 해지한 후 나중에 다시 필요할 때 결제할 예정..먼저 회원가입 후 원하는 요금제를 결제하고 나면 Images의 하위 메뉴가 생긴다. (요금제 결제 전에는 하나만 있다.)Images > Overview 페이지로 들어가서 Use Api 탭의 Get an API token here을 눌러준다.1. Clo.. < 1 2 3 >
