REACT

CSR의 대표적인 단점 중 하나인 취약한 SEO 점수와 모든사람들이 사용할 수 있는 서비스를 만들기 위한 웹 접근성 개선작업을 수행해야한다.    웹 접근성과 SEO을 개선하기 이전의 점수이다.접근성은 페이지 마다 상이하지만, 가장 낮은 메인페이지의 점수가 69점, SEO 점수는 83점을 기록하였다. SEO : 검색엔진 최적화🔍 React의 SEO리액트와 같은 SPA는 SSR과는 달리, 초기에 HTML이 최소한의 내용을 포함하고, 대부분의 콘텐츠는 JS를 통해 클라이언트측에서 렌더링이 되는 방식이다. 모든 크롤러가 아닌 많은 크롤러들이 JS를 지원하지 않기 때문에 이와 같은 문제가 발생한다고 한다.(구글봇은 JS를 지원해서 SEO가 나쁘지 않다고 함)Next.js를 이용한 프로젝트에서는 별다른 작업을 ..

진행중인 프로젝트는 반려동물의 기록과 사진 공유가 주된 기능인 만큼, 이미지 최적화 작업이 중요하다고 생각했다.번들사이즈를 열심히 줄여도 KB단위지만.. 이미지는 단위부터 MB이므로, 이미지 최적화는 필수이다. Next.js의 이미지 최적화Next.js는 next/image를 통해 기본적으로 다음과 같은 이미지 최적화 작업을 수행해준다.But, 리액트는 이와 같은 이미지 최적화를 자동으로 처리해주지 않으므로, 직접 최적화 작업을 수행해야한다...!🫣  자동 resizingWebp 같은 최신 이미지 포맷 지원Lazy Loading로 페이지 로딩 속도 향상CDN 지원이미지 최적화를 위한 여러가지 방법들을 공부해면서, 적용해보았다.  1. browser-image-compression 활용한 이미지 폭, 타..

채팅 입력창에 이모지 아이콘을 누르면, 이모티콘 키보드가 나와 이모지를 입력할 수 있게 구현하고 싶었다.  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)} > ..

keyDown/keyUp 이벤트를 사용할때, 영어는 괜찮지만 한국어로 입력하면 이런 문제가 발생하는 경우가 있다. 🤔 Why? 이 문제는 한글의 조합형 입력 방식 때문이라고한다. 한글 입력은 여러 키 입력이 조합되어 하나의 글자를 완성하는 과정을 거치기 때문에, key Event가 발생하는 시점에는 입력이 완전히 완성되지 않을 수 있다고 한다.  e.nativeEvent.isComposing  이 속성은 사용자가 텍스트 입력 중에 문자 조합(예: 한글 자음과 모음 조합)이 진행 중인지 여부를 나타냅니다. 이를 사용하면 키 이벤트가 발생할 때 입력이 완성된 상태인지를 확인하여, 입력의 완성이 된 경우에만 검색처리를 실행하도록 한다. const handleKeyDown: Keyboar..