useMemo useMemo 란 값을 캐싱(메모이제이션)하는 리액트의 훅입니다. useCallback 과 다른점은 useCallback 은 함수를 캐싱하고 useMemo 는 값 자체를 캐싱합니다. 첫번째 인자로 함수를 받고 두번째 인자로 의존성 배열을 받습니다. useMemo 사용 예시 import React from 'react'; import { useState } from 'react'; export default function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(0); const countValue = count1*count1 return ( setCount((prev) => p..
이번에 개인 프로젝트로 NFT 거래소를 만들고 있는데, 최근에는 성능 최적화에 관심이 많이 생겨서 여러 가지 성능 최적화를 시도해 보았습니다. 성능 최적화는 주로 Next.js의 기능들을 활용하여 이루었는데, 정말 잘만들어진 프레임워크라는걸 다시 한번 느낄수 있었습니다. 1. Next 의 Image 를 활용한 최적화 next.config.js를 통해 이미지 최적화 옵션을 설정할 수 있습니다. 예를 들어, 이미지 파일 형식을 avif로 변경할 수 있습니다. 기본적으로 Next.js는 이미지를 webp 형식으로 변경해주는데, avif로 변경하면 인코딩에는 약간의 시간이 더 걸리지만, webp에 비해 압축률이 더 좋습니다. 따라서 처음 요청할 때는 avif가 약간 더 느리지만, 이후에는 캐싱된 상태이기 때문에..
CSR ( Client Side Rendering) CSR은 React,Vue 등의 SPA(Single Page Application)에서 쓰이는 기법이다. 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트가 그것을 받아 렌더링을 합니다. 데이터를 제외한 모든 코드들은 index.js에 들어있습니다. 때문에 첫 화면 로딩시 번들 크기에 따라 로딩시간이 오래걸릴수도 있습니다. (code splitting 기능으로 어느정도 해결가능) CSR은 이미 모든 페이지 코드들을 가져와있기때문에 클라이언트가 상호작용을한다면 데이터만 바꿔주면됩니다. CSR의 단점은 초기 html에 데이터가 없어 검색 봇이 해당페이지를 빈페이지로 착각하여 SEO 검색엔진 최적화에 취약합니다. CSR 작동 방식 클라이..
개인프로젝트를 Open API를 사용하여 만들고 있던 도중 나의 코드엔 문제가 없는데 자꾸 데이터가 오류가 나는 현상이 발생했다... (이 현상때문에 3일을 삽질했다..) 개발자 도구탭을 열어보니 Next의 Link태그로 만든 컴포넌트에 마우스 호버를 하기만 해도 fetch 요청이 가는 것이 확인되었다. 정말 미스테리했다. 내가 호버한곳에서 데이터요청은 param에서 id값을 매게 변수로 삼아 데이터를 fetch 해야 하는데 어떻게 요청이 가는 거지..? 심지어 상태코드도 200으로 응답이 잘 오는 것이었다. 또한 페이지 이동시 요청이 아예 안 가고 있다.. 이 현상 때문에 화면에 마우스를 휙휙 휘저으면 내가 사용하던 Open API는 RateLimit을 뱉어버려 나의 코드들이 제대로 작동하지 않는 것이..
