메로그

SEO 모니터링 중에 Naver 진단에서 요소에 동일한 제목인 웹문서 다수 발견 라는 이슈가 발생하였다. 무슨 일인지 확인해보니 하나의 페이지에 여러 url 이 만들어지는 문제가 발생한 것이다. 원인을 분석해보니, 페이지의 url 을 동적으로 만들 때 몇가지 정보를 혼합하는데, 여기서 네이버가 seo 봇을 이용해서 랜덤하게 url 을 넣다가 해당 정보들에 매칭되는 url 이 몇가지 나오기 시작해보임. 이것의 근본적인 문제는 url 을 동적으로 만들어주는데 만들기만 할 뿐 거기에 대한 검증을 제대로 하지 못한 것이었다. 예를 들어, 아래의 url이 달라보이지만 실제로는 의미론적으로는 같은 url 인 경우가 발생하여 봇이 인식하는 경우가 발생한 것이다. 예시) /detail/abcd1234 /detail/z..

OpenAI Embedding 주어진 텍스트에 대한 연관성을 측정하기 위한 임베딩 모델로, 문장의 임베딩 유사도를 계산하여 문맥적 검색을 할 수 있습니다. 예를 들어, 찾는 문장을 임베딩하여 벡터 데이터베이스로 만들고 질의를 받아 임베딩한 벡터 데이터를 가지고 저장한 데이터들과 유사도를 측정할 수 있습니다. 생성 주의: openai embedding 을 사용하기 전에 key 를 미리 발급받아야 한다. api docs 에는 예제에 embeddings.create 로 설명되어 있지만, 필자는 아래와 같이 하도록 하겠다. 모델은 text-embedding-ada-002 을 권장한다. import { Configuration, OpenAIApi } from 'openai'; const configuration ..

이미지 최적화 PC, Mobile 에서 작업을 하다보면 이미지 크기로 인해 웹페이지 성능이 안 좋아지는 경우가 있다. 웹페이지 성능개선을 하다보면 LightHouse 를 사용하게 되는데 여기서 png, jpeg, jpg 등의 이미지 확장자를 사용하는 경우, webp 로 변경해서 최적화하라는 해결방안을 볼 수 있을 것이다. Webp Webp 는 구글이 만든 이미지 포맷으로 png, jpeg 보다 더 나은 압축을 제공하여 품질은 같지만, 크기를 더 작게 저장할 수 있다. 설계 기존은 클라이언트에서 이미지를 업로드하면 CDN 을 걸쳐서 S3 에 이미지를 업로드 하고, 사용시에는 S3 에 저장된 이미지를 불러서 사용하는 방식을 이용하고 있었다. 여기에 Lamda@edge 를 이용해서 cdn 에 왔을시 리사이징한..

router v6 버전이 올라가면서 자연스럽게 react router 를 6버전을 사용합니다. root 에서 index.jsx 를 아래와 같이 셋팅 해줍니다. import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import Main from "./layouts/Main.jsx"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")).render( );라우팅 셋팅을 해줍니다. 이제 Routes 라는 훅을 사용합니다. 또한, Route 에서 component 가 아닌, e..

Automatic Batching React 에서 Bathing 이란, 여러 state 업데이트를 하나의 업데이트로 그룹화하여 렌더링 성능을 향상시키는 것을 의미합니다. v18 부터는 새로운 Root API 인 createRoot 를 통해 자동으로 state 업데이트를 배칭 시킵니다. 그로 인해 기본적으로 ReactV18 부터는 렌더링 성능이 향상되었습니다. 예를 들어 기존에는 아래의 로직이 자동으로 배칭되어 여러번 수행하지 않고 렌더링 과정을 다 한 번만 처리하도록 합니다. function clickHandler() { setCount(cnt => cnt + 1) setFlag(flag => !flag) } useTransition 느린 컴포넌트 성능을 향상 시켜 UX 를 개선할 수 있음. startT..

vite 를 이용한 react + tailwind 사용하기 최근 webpack 말고 vite 를 쓰는 곳이 많아지다보니 webpack 기반의 create react app 말고 vite 기반으로 react 를 설치를 하기 시작함. 실제로 사용해보면 기본적으로 훨씬 빠른 성능을 경험할 수 있음. 아래 npm, yarn 둘 중 하나로 다운받으면 됩니다. npm create vite@latest my-project -- --template react cd my-projectyarn create vite my-project -- --template react cd my-projectinstall tailwind tailwindcss와 해당 피어 종속성 설치. tailwind.config.js, postcss.c..