nextjs (11) Nextjs의 Hydration 클라이언트 컴포넌트는 CSR로 이루어지지 않는다.next.js 에서 컴포넌트가 client component로 작동한다고 해도, 첫 렌더링은 서버에서 이루어진다. (SSR이 아닌 CSR로 작동하는 것이 아님)컴포넌트 최상단에 'use client'를 작성하면 해당 컴포넌트에서는 hydration이 일어난다. CSR방식은 리액트를 사용해봤다면 흔히 알 듯이, 초기 페이지를 로드할 때 하나의 빈 html파일과 js번들 파일을 서버로부터 전달받아index.html파일의 body태그 내부에는 root 역할을 하는 div 태그만이 존재하며, 이후 페이지에 포함되어야 할 컴포넌트들은 Critical rendering path 과정에서 js파일의 해석과 함께 실제 렌더 트리에 추가된다. React 프로젝트 내에 사용.. Next.js Auth 설정 + 새창으로 로그인하기 1. 구글 클라이언트 아이디, 시크릿 얻기 (주제에 살짝 벗어나므로 접어두었다.) 더보기1. 새프로젝트 생성 Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 2. API 및 서비스 > OAuth 동의 화면 3. 유저타입에서 ‘외부’ 선택 4. 각 필드에 해당사항 입력 5. 사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID일단 로컬에서 돌릴거여서 브라우저 요청에 사용되는 URL은 localhost:3000 으로 하고, 리디렉션 URI는 /api/auth/callback/google 로 해야 정상적으로 작동한다. (약속된 거라고 함)6. 다하면 뜨는 모달에서 아이디 비밀번호를 env에 담아둔다 2. Next Auth 사용하기.. nextJS로 만들고 vercel로 배포한 홈페이지 도메인 이전하기 회사에서 NextJS로 개발하고 Vercel로 배포한 홈페이지의 도메인 변경 요청이 들어왔다. (참고로 도메인은 타사이트에서 구매해두었던 도메인을 vercel에 등록하여 사용하고 있었음)처음에는 그냥 vercel 에서 redirect만 해주고 끝났다고 생각했는데,생각해보니 SEO를 위해 등록해둔 서치콘솔에서도 기존 도메인을 신규 도메인으로 연결해주는 작업이 남아있었다.서치콘솔에서 방법을 찾아보니, 아래와같이 장황하고 긴 글이 있어서 너무 어렵게 느껴졌으므로,실제로 내가 해준 것들 위주로만 간단하게 정리하고자 한다.사이트 이동 및 이전 | Google 검색 센터 | 문서 | Google for Developers1. Vercel 에서 새 도메인으로 redirect1-1. 도메인 추가Project S.. 이미지 최적화 & 지연로딩을 통한 블로그 Web Vital개선기 성능체감상으로도 블로그게시글을 불러오는게 느리다고 판단되어, 라이트하우스로 측정한 결과 성능이 55점이라는 처참한? 결과가 나왔다.첫번째로는 초기 서버 응답 시간이 길었다. 이유는 스크롤하면 캐릭터가 움직이는 3d 모델링을 로딩하는게 가장 큰 원인이었다. 3d모델링은 gltf파일인데 무려 10,782kb나 된다.두번째로는 전체 게시글 리스트를 한번에 받아와서이다. 서버에서 페이징처리를 해서 불러올까 했지만 아직 게시글이 그렇게 많지 않아서 지연로딩을 통해 개선하기로 하였다.세번째로는 이미지 최적화를 하지 않아서였다. 이미지 최적화를 하지 않고 업로드한 이미지를 그대로 firebase에 업로드 하였기에, 이미지를 로드하는데도 시간이 어느정도 걸린 것 같다.1. 웹 3D모델링(gltf파일) 최적화https:.. Next.js 13 정적/동적 OpenGraph 만들기 🌈 동적 og tag imageNext.js 13버전 이후부터 opengraph-image.tsx라는 예약어 파일이 생겼다.공식문서 대로 잘 따라하면, og tag image를 손쉽게 생성할 수 있다.🎨opengraph-image 이렇게 하면, SNS같은 곳에 url을 전송할 경우에 페이지별로 각 다른 미리보기 이미지를 생성해서 보여줄 수 있게 된다.// 1. 동적 og tag image를 생성할 폴더 아래에 opengraph-image.tsx 파일을 생성한다.// src/app/detail/[id]/opengraph-image.tsx import { ImageResponse } from 'next/server'// 2. ImageResponse를 import한다.export default async.. Next.js 블로그 동적 사이트맵 만들기 Next.js 13버전 이후로 app디렉토리 내에 sitemap.ts라는 예약어 파일을 만들면, 빌드 시점에 미리 sitemap을 생성해준다.블로그처럼 게시글을 계속해서 올릴 경우, 사이트맵에 들어갈 내용이 많을 경우에 sitemap.ts파일 하나를 만들어두면 아주 손쉽게 sitemap.xml을 생성할 수 있으며 nextjs에서는 그 방법 또한 매우 간단하다.1. sitemap.ts 파일 생성app폴더 내에 sitemap.ts 파일을 만들고, sitemap에 들어가야할 리스트를 return한다.나의 경우 tag/ 이하 url과 detail/ 이하 url들을 동적으로 구현하였다.방법은 아래 코드를 보면 알겠지만, 아주 간단히도.. sitemap을 생성할 리스트를 받아와서 넣어주면 끝이다.import { P.. TUI Editor로 작성한 포스팅에 TOC 만들기 🐰 구현방법본 블로그 게시글은 ToastUI의 에디터로 작성을 하고 html로 변환하여 DB에 저장하고 있다.TOC를 구현하려면 heading요소를 파싱해서 목록을 만들고, 각 요소의 id값을 넣어줘서 해당 heading영역으로 이동하도록 해야하는데, ToastUI 에디터로 html을 변환할 때는 각 head에 id값을 넣어주기가 힘들어서 detail화면에서 html을 뿌리기 전에 헤딩요소만 파싱해서 적절한 id값을 넣어 주는 방식으로 구현하였다.1. heading Element에 id값 넣어주기jsdom으로 document를 받아와서 heading요소(나의 경우는 어차피 h3까지만 쓸 것 같아서 h1, h2, h3만 가져옴)를 파싱하여 순서대로 id값을 넣어주었다.// detail/page.tsxco.. [에디터2] TUI Editor에 이미지 업로드 시 firebase Storage 이용하기 ToastUI Editor 이미지 업로드toastUI에서 이미지를 추가하면, 아래와 같이 base64 인코딩된 문자열로 업로드되고, 스크롤을 보면 알겠지만 그 길이가 어마어마하며, 이상태로 DB에 저장되게 된다.나는 몽고디비 무료버전을 사용하고 있기 때문에 이미지를 별도의 서버에 저장하고, 경로만 받아오도록 작업했다.firebase는 이전에 개인 포트폴리오 작업 시에 사용해본 적이 있던터라, 파이어베이스 Storage를 이미지서버로 사용하였다.Firebase 스토리지에 이미지 업로드하기🔥 firebase 스토리지 생성 및 설정1. 🔥 Firebase 문서에 따라 신규 프로젝트를 생성하고, storage를 만든다.2. firebase 설치// yarn 설치yarn add firebase// npm 설치.. 이전 1 2 다음
