메로그

네이버 봇이 사이트의 콘텐츠를 수집, 검색엔진이 색인을 진행하는 과정에 발생하는 문제점을 제공하는 리포트입니다. 사이트 진단은 최근 90일간 수집된 페이지로 분석합니다. 수집, 분석이 완료되어야 페이지 업데이트 결과가 사이트 진단에 반영됩니다. 색인: 정상적으로 수집되어 처리된 문서의 수 수집제한: 검색로봇에 최적화 되지 않은 상황 + 개발자의 의도 (robots.txt, 301, 302 등) 색인제외: 수집은 되었지만, 색인 과정에서 생기는 이슈로 대표적인 404, 대표 URL 누락 등 SEO: 수집된 문서 중, 검색엔진최적화가 필요한 문서들 https://searchadvisor.naver.com/guide/report-diagnosis 최적화 방법 - SEO 에 수치가 높아지는 경우, 내 페이지에 ..

sharp 를 사용해서 이미지를 리사이즈 할시 모바일에서 찍은 사진들이 90도 돌아가는 경우가 발생합니다.이미지가 리사이즈되면서 이미지의 메타데이터를 기억하지 못해 발생하는 문제인데, 해결방법이 2가지가 있습니다. 첫번째 방법으로, .withMetadata() 함수를 사용해서 원본 이미지에 메타 데이터를 넣어주는 방법입니다.const image = sharp(data) .withMetadata() .resize(width, height) .toBuffer()두번째 방법으로, .rotate() 를 resize 전에 넣는 방법이 있습니다.rotate 의 각도를 제공하지 않으면 EXIF 데이터(메타 데이터)에서 결정됩니다.const image = sharp(buff);const webpBuffer = a..

Nuxt.js에서 서버 미들웨어를 사용하여 CORS(Cross-Origin Resource Sharing)를 허용하는 방법은 아래와 같습니다.CORS를 허용하려면 서버 미들웨어를 만들어야 합니다. 1. Nuxt.js 프로젝트의 루트 디렉토리에 middleware 디렉토리를 만듭니다 (만약 없다면).2. middleware 디렉토리 안에 새로운 파일을 생성하고 원하는 이름을 부여합니다. 예를 들어, cors.js로 파일을 저장합니다.3. cors.js 파일에 다음과 같이 서버 미들웨어 코드를 작성합니다.// middleware/cors.jsexport default function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*');..

redux 를 보다 쉽고 간단하게 사용할 수 있도록 해주는 라이브러리입니다. 아래는 설치방법입니다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 예제 아래 간단한 예제와 설명을 통해서 사용 방법을 익혀보시면 됩니다. index.ts 에서 Provider 와 store 를 가져와서 등록해줍니다. // index.tx import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; im..

useState 에서 setState 는 비동기 동작 방식을 가지고 있다. 비동기로 동작하는 이유 하나의 페이지나 컴포넌트 내에서 수많은 상태값이 존재한다. 이를 하나 하나 바뀔 때마다 화면을 리렌더링한다면 성능 저하가 발생할 것이다. 그렇기 때문에 리액트는 성능 향상을 위해 한 번에 렌더링을 하는 방법을 채택하였다. 또한, setState를 연속 호출해도 배치(batch) 처리하여 한 번에 렌더링하도록 하여 아무리 많은 setState 가 연속적으로 사용되었어도 batch 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지한다. 하지만, 가끔 우리는 동기적으로 렌더링 시점을 잡아 무언가를 하고 싶은 경우가 있다. 아래 그에 대한 방법을 제시한다. 1. useEffect 를 사용해서 mount 시점을 잡..

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다. 우리가 흔히 사용하는 axios, ajax 와 마찬가지로 cors, header 설정을 할 수 있으며, promise 를 리턴한다. 기본적인 사용방법은 아래와 같다. // then fetch(url) .then((res)=>res.json()) .then((data)=>{ console.log(data) }) // async, await const res = await fetch(url) const data = await res.json() console.log(data) 헤더 설정 방법은 아래와 같다. fetch(url, { method: "POST" hea..