분류 전체보기 (37) 이미지 최적화 & 지연로딩을 통한 블로그 Web Vital개선기 성능체감상으로도 블로그게시글을 불러오는게 느리다고 판단되어, 라이트하우스로 측정한 결과 성능이 55점이라는 처참한? 결과가 나왔다.첫번째로는 초기 서버 응답 시간이 길었다. 이유는 스크롤하면 캐릭터가 움직이는 3d 모델링을 로딩하는게 가장 큰 원인이었다. 3d모델링은 gltf파일인데 무려 10,782kb나 된다.두번째로는 전체 게시글 리스트를 한번에 받아와서이다. 서버에서 페이징처리를 해서 불러올까 했지만 아직 게시글이 그렇게 많지 않아서 지연로딩을 통해 개선하기로 하였다.세번째로는 이미지 최적화를 하지 않아서였다. 이미지 최적화를 하지 않고 업로드한 이미지를 그대로 firebase에 업로드 하였기에, 이미지를 로드하는데도 시간이 어느정도 걸린 것 같다.1. 웹 3D모델링(gltf파일) 최적화https:.. 성능측정 툴 및 Web Vitals에 관하여 💡 Lighthouse네트워크 탭에서 throttling으로 속도저하를 시킨 뒤 테스트해볼 수 있는데,라이트하우스도 유사하게 스피드를 떨어트려서 성능을 측정한다. (측정할 때마다 결과는 조금씩 다르다.)라이트하우스를 보고 퍼포먼스 참고를 하는 것은 좋지만, 라이트하우스에서 빨간색이 뜨는 경우는 육안으로 보기에도 느린 경우가 많아서 사실상 최적화에 큰 의미는 없을 수 있다.프로덕션 빌드로 봐야함 (빌드될 때 최적화가 어느정도 되기때문에 디벨롭일때랑 결과 다르게 나옴)🧐 Performance - 성능분석First Contentful Paint: 첫 번째 텍스트 또는 이미지가 표시되는 시간Largest Contentful Paint: 최대 텍스트 또는 이미지가 표시되는 시간Total Blocking Tim.. Javascript VS Typescript 🧐 Typescript 란?자바스크립트 대용품 같은 언어로, 자바스크립트 문법을 그대로 이용하지만 타입을 지정하여 쓸 수 있는 일종의 자바스크립트 업그레이드 버전이라 할 수 있다.JavascriptTypescript.js 확장자.ts 확장자동적타입 언어정적타입 언어인터프리터 언어컴파일 언어독립적으로 사용 가능자바스크립트에 의존적임좀 더 유연함좀 더 엄격함작고 간단한 프로젝트에 적합함복잡한 프로젝트, 협업에 적합함🫨 동적타입 언어👉🏽 예측불가능, 직관적이지 않음, 너무 관대함1 + true;function multiply( a, b ) { return a * b;}multiply();muliply(’hi’, true);👉🏽 즉, 개발자의 실수로부터 보호하지 못한다!👉🏽 너무 관대하고 자유.. 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] Next.js 블로그에 ToastUI Editor 장착하기 본 블로그를 처음 만들 때는 mdx파일로 포스팅을 하려하였으나, 이전 블로그 때 매번 편집기를 열어 작성하고 배포하는 것이 귀찮았어서 Editor를 달고자 마음먹었다.여러 에디터들을 비교해보았는데 UI가 제일 내스타일이어서(어차피 나만 볼 페이지지만) ToastUI의 에디터를 선택하였다.1. 설치🔗 toast-ui/react-editor// yarn 설치yarn add @toast-ui/editor @toast-ui/react-editor// npm 설치npm i --save @toast-ui/editor @toast-ui/react-editor2. 에디터 컴포넌트 생성1. toolbar 설정옵션은 아래와 같고, 이 중 쓸 것만 넣어주면 된다.toolbarItems: [ ['heading', 'b.. 이전 1 2 3 4 5 다음
