리액트 컴포넌트 성능 최적화

리액트에서 제공하는 API 중 useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소화 하기 위해 최적화 기법으로 사용됩니다.이 세 가지가 모두 최적화 기법이라는것은 알지만 대부분은 정확히 언제 사용하는지에 대해서는 알아 보도록 하겠습니다.  먼저 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다.전달 받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링될 때 1. React.memo전달 받은 props의 변경이 아닌 다른 상황(2, 3번)으로 인해 리렌더링이 되는 부분을 방지하는 함수를 말합니다.컴포넌트를 만들고 React.memo()로 감싸주면 끝!const Item = ({ data, onClick }: { data: { id: string..

• format_list_bulleted Web
• · 2025. 1. 11.
• textsms

개발자들의 버전 표기 방법 (SemVer)

유의적 버전(Sementic Versioning, SemVer)을 통해 버전 표기방법을 많이 사용합니다.  버저닝 규칙은 다음과 같습니다.💡 Major.Minor.Patch-LabelMajor, Minor, Patch는 각각 숫자를 통해 나뉘게 됩니다.ex) 1.11.2, 1.8.0-beta  Major가장 큰 변화를 뜻하고, 보통 이전 버전과 호환이 불가능하거나 거대한 변화가 있을때 하나 증가시킵니다.Minor와 Patch는 다시 0으로 초기화 시켜줍니다.ex) 2.8.7 → 3.0.0Minor기능이 추가되었을때 숫자를 증가시킵니다.기능이 추가되었다고해서 이전 버전의 하위 호환성을 깨트리지 않습니다.Patch버그 수정, 텍스트 변경등의 자잘한 수정을 할때 증가 시킵니다.Label선택사항으로 alpha..

• format_list_bulleted 컴퓨터 기초 및 개념
• · 2025. 1. 7.
• textsms

[Next.js] - Pages Router 기반 ISR (+On-demand Revalidation)

ISR(Incremental Static Regeneration, 증분 정적 재생성) 말이 다소 어렵게 보이지만 단순히 SSG방식의 응용이라 할 수 있는 방법입니다.ISR은 SSG방식에 정적인 페이지를 생성하는 방법에 revalidate를 통해 유효기간을 설정하여 유효기간이 지난 생태에서는 getStaticProps()를 통해 화면을 다시 그리고 페이지를 업데이트합니다.revalidate: 60초라고 했을때 60초 이내에 새로고침을 하더라도 동일한 데이터가 보입니다.유통기한이 끝난 60초 이후에 새로운 데이터를 받아오게 됩니다. export const getStaticProps = async () => { return { props: { }, revalidate: 3, // 초단위로, 3초..

• format_list_bulleted 카테고리 없음
• · 2024. 10. 15.
• textsms

[Next.js] - Pages Router 기반 SSG

SSG(Static Site Generation, 정적 사이트 생성)SSR의 단점을 해결하기 위한 사전 렌더링 방식빌드 시 API등으로 부터 데이터를 얻어, 페이지를 미리 사전 렌더링 해두는 방식 SSG 빌드시 흐름빌드 시 getStaticProps()라는 함수가 호출되며, 그 함수 안에서 API 호출 등을 수행하고, 페이지를 그리는데 필요한 props를 반환합니다. 그 뒤 이 props를 페이지 컴포넌트에 전달해서 화면을 그립니다.화면을 그린 결과는 정적 파일의 형태로 빌드 결과로 저장합니다. 빌드 결과는 .next 폴더 → server 폴더에서 확인 가능합니다.  기본 골격SSG가 필요한 Page에 아래와 같은 getStaticProps() 함수를 추가해 준다.// 기본 골격export const g..

• format_list_bulleted 카테고리 없음
• · 2024. 10. 15.
• textsms

[Next.js] - Pages Router 기반 SSR

SSR(Server Side Rendering, 서버 사이드 렌더링) SSR은 가장 기본적인 사전 렌더링 방식페이지 접근(요청)이 발생할 때마다 서버에서 getServerSideProps()를 호출하고 결과값을 클라이언트에 전달즉, 요청이 들어올때마다 화면이 보이기 전에 사전 렌더링하는 방식  기본 골격SSR이 필요한 Page에 아래와 같은 getServerSideProps() 함수를 추가해 준다// 기본 골격export const getServerSideProps = async () => { return { props: { } }}   예제// ========================================// SSR(Server Side Rendering) 예제// =========..

• format_list_bulleted Web
• · 2024. 10. 15.
• textsms

일하기 좋은 카페 리스트

어떤 멋있는 분이 제보를 통해서 한번에 취합후 네이버 지도로 공유를 하고 있네요https://map.naver.com/p/favorite/myPlace/folder/3fb30df4b4734a27ab4f0f5e758b971f?c=15.00,0,0,0,dh

• format_list_bulleted 일상
• · 2024. 10. 8.
• textsms