[Next.js] - Next.js에서 React Compiler 적용하기

1. React Compiler란 무엇인가?React Compiler는 React 애플리케이션의 성능을 자동으로 최적화하는 컴파일러입니다. 개발자가 수동으로 작성해야 했던 useMemo, useCallback, React.memo 등의 메모이제이션을 자동으로 처리해줍니다. 주요 특징:자동 메모이제이션: 컴포넌트와 함수를 자동으로 최적화번들 크기 감소: 불필요한 리렌더링 방지개발자 경험 향상: 수동 최적화 코드 작성 불필요2. 버전 요구사항React Compiler 사용 가능 버전:Next.js: 15.0.0 이상React: 18.3.0 이상 (권장: 19.0.0 이상)Node.js: 18.17.0 이상 3. Next.js 15로 업그레이드하는 방법 Upgrading: Version 15 Codemod를 ..

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

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

리액트에서 제공하는 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

[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

[TS] - 함수 오버로딩(Overloading)

먼저 들어가기에 앞서, 보통 아래와 같이 매개변수나 리턴타입을 Union타입을 이용하여 상황에 맞게 함수를 사용하였을 겁니다.function coordinate(x: number | string, y: number | string): string | number { if (typeof x === "string" && typeof y === "string") { return x + y; } else { return Number(x) + Number(y); }}console.log(coordinate(1, 2)); // 3console.log(coordinate("1", "2")); // 12console.log(coordinate(1, "2")); // 3 (의도되지 ..

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

반응형 디자인을 위한 개발자 TIP

1. 모바일 퍼스트  - 먼저 모바일을 위한 디자인을 하고 더 큰 화면에 맞게 확장 2. 유연한 그리드  - 레이아웃에 고정 단위 대신 백분율 사용 3. 미디어 쿼리 모바일(소형)브레이크 포인트 (최대 320px)iPhone5 시대의 스마트폰모바일(중형)브레이크 포인트 (321px ~ 480px)대부분의 스마트폰ex) iPhone 15 Pro(393x852), iPhone 15 Pro Max(430x932), Samsung Galaxy S9+(360x740)모바일(대형)/태블릿브레이크 포인트 (481px ~ 768px)큰 스마트폰 및 소형 태블릿ex) iPad Mini(768x1024)태블릿브레이크 포인트 (769px ~ 1024px)표준 태블릿ex) iPad Pro(1024 x 1366)데스트톱브레이크..

• format_list_bulleted Web
• · 2024. 8. 16.
• textsms

SOP, CORS 개념

SOP, CORS에 대해서 알아보기에 앞서 간단하게 이 출처(Origin) 라는 것이 정확히 뭘 의미하는지부터 한번 짚고 넘어가도록 해야 합니다. # Origin https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin Origin - HTTP | MDN Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, ori developer.mozilla.org fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. 즉, Protocol + ..

• format_list_bulleted Web
• · 2023. 3. 2.
• textsms