프로젝트가 거의 끝나갈 때쯤 최적화를 진행하기 위해서 Light House를 사용해서 어떤 부분에 최적화를 진행해야 할지 알아보고 있었는데, 그중 퍼포먼스 부분에 Image Size가 성능을 많이 느리게 하는 주범이라는 것을 찾아 파일을 리사이징적용을 하기로 결정되었다. 먼저 리사이징을 하기 위해서 react-image-file-resizer라는 라이브러리를 사용해 JPG와 PNG 같은 확장자를 WEBP와 같은 압축률이 높은 확장자로 변경하고 현재 진행하는 프로젝트 썸네일에 맞게 파일의 사이즈를 조절해 주었다. 사용하는 방법은 간단하다. const resizeFile = (file: File) => new Promise((resolve) => { Resizer.imageFileResizer( file, ..

CSR(Client-Side Rendering)이 왜 SEO(Search Engine Optimization)에 취약한지 이해하려면 먼저 React의 기본 동작인 CSR로 동작하는 것을 이해하고 CSR과 SSR의 차이점에 대해서 알아보고 그 단점을 보완하려면 어떤 방법이 있는지 알아봅시다. CSR (Client-Side Rendering) 이미지 사진은 많은 블로거들이 사용하고 있는 이미지를 가져왔습니다. 우선은 CSR의 동작원리를 알아봅시다. 1. 사용자가 Website에 요청을 보냅니다. 2. CDN이 HTML파일과 JS로 접근할 수 있는 링크를 클라이언트로 보냅니다. "여기서 CDN이란 엔드유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식" 3. 클라이언트는 HTML과 JS를 다운..

기존에 사용하던 무한 스크롤 기능은 스크롤이 바닥에 닿는걸 감지해서 무한히 읽어오는 방법으로 구현을 하였습니다. 방법으로는 react-bottom-scroll-listener 라는 라이브러를 이용했습니다. 이 라이브러리는 사용방법이 매우 간단합니다. useEffect(() => { firebaseInfinityScrollProjectDataRequest( setProjects, lastVisible, setLastVisible, ); if (uid) { firebaseFindMyInterestRequset(uid, setLikedProjects); } window.onbeforeunload = () => { window.scrollTo(0, 0); }; }, []); useBottomScrollListe..

React v18 환경에서 프로젝트에 Toast Editor 적용 방법 및 오류 해결 방법 오늘은 프로젝트에 토스트 에디터 적용을 해 볼려고 한다. 저는 패키지 매니저로 Yarn berry를 사용했기에 그 기준으로 작성을 하겠습니다. Toast Editor 패키지 설치 방법 yarn add @toast-ui/react-editor 이렇게 설치를 해주면 된다. 그리고 파일을 하나 만들어서 toast editor를 적용을 해보겠습니다. // ToastEditor.tsx import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; interface Props { editRef: MutableR..