Next.js

SSR와 CSR의 SEO CSR (React.js) CSR(ClientSide Rendering)의 경우 초기에 빈 html 문서를 전달하기 때문에, 봇이 데이터를 수집하기 어렵기때문에 SEO에 불리하다.   SSR(Next.js)하지만, SSR(ServerSide Rendering)은 클라이언트가 요청한 페이지를 서버에서 동적으로 생성해 브라우저에 보내는 방식으로, 이미 서버쪽에서 만들어진 완성된 html을 검색엔진들이 크롤링이 가능하기때문에 검색에 유리해진다. SEO 진단✅ SSR의 장점인 SEO 성능 최적화 작업하기 전, SEO checkup을 해보았다.https://pagespeed.web.dev/analysis/https-balanco-vercel-app/hxv2uh2yl9?form_factor..

채팅 입력창에 이모지 아이콘을 누르면, 이모티콘 키보드가 나와 이모지를 입력할 수 있게 구현하고 싶었다.  emoji-picker-react const [showPicker, setShowPicker] = useState(false); const [message, setMessage] = useState("");const onEmojiClick = (event, emojiObject) => { setMessage((prevMessage) => prevMessage + emojiObject.emoji); setShowPicker(false); }; return ( setMessage(e.target.value)} > ..

DebounceDebounce는 과도한 요청으로 발생할 수 있는 성능 저하 문제를 개선할 수 있는 방법 중 하나다.input창에 연속적으로 값을 입력할때, 이벤트 변경이 발생하고 그때마다 네트워크 요청이 발생하게 되는데, 이런 경우에 지속적인 요청으로 인해 네트워크 용량과 백엔드 등 과부하가 발생할 수 있으므로 성능면에서 좋지 못하다.(유료 API을 사용할경우엔 비용면으로도 문제가발생한다..🫠) 👉🏻 Debounce를 사용해, 연속적으로 발생하는 이벤트 중 마지막 이벤트(검색할 키워드) 만을 기점으로 네트워크 요청을 보내, 사용자 입력과 같은 빈번한 이벤트를 처리할때 사용한다.  useDebounce : 사용자 정의 Hookimport { useState, useEffect } ..