frontend 5

[Next.js] - 코드잇(단기 심화) 프로젝트 성능 최적화

✅ 프로젝트 성능 최적화 — 어떻게 접근했는가?Next.js의 가장 큰 장점 중 하나는 기본적으로 자동 코드 분할과 SSR(서버사이드 렌더링)을 지원한다는 점이다.하지만 프로젝트 규모가 커지거나 다양한 외부 라이브러리를 쓰다 보면 불필요한 리렌더링, 번들 크기 증가, 느린 TTFB 등이 성능 이슈로 이어질 수 있다.단기 심화 과정에서 배운 이론에 그치지 않고, 개인적으로 블로그와 기술 아티클을 찾아보며 실습을 병행했습니다.이러한 능동적인 학습을 통해 최적화 전략들을 빠르게 이해하고 적용할 수 있었으며, 새로운 기술을 빠르게 익히는 데 강점을 가지고 있음을 직접 확인할 수 있었다.이미지 최적화→ next/image를 활용해 lazy loading 및 자동 리사이징 적용→ 빠른 이미지 로딩이 필요할 땐 pr..

frontend 2025.04.18

[Next.js] 최적화(데이터 패칭) 및 성능 비교

최적화란?프론트엔드에서 최적화는 웹 페이지나 애플리케이션의 성능을 개선하기 위해 자원(로딩 시간, CPU 사용량, 메모리 등)을 효율적으로 관리하고, 사용자 경험을 향상시키는 과정입니다. 주로 이미지 압축, 코드 분할, 캐싱, 비동기 로딩 등을 통해 웹 애플리케이션의 속도와 반응성을 높이는 것이 포함됩니다. 목표 (비동기 로딩 - 데이터 패칭)Next.js에서 CSR 방식과 SSR 방식을 사용하여 LightHouse 퍼포먼스 성능 비교Next.js의 CSR과 SSR 방식에서 LightHouse 성능 점수를 비교하여 각 방식의 성능을 평가합니다.CSR 방식과 SSR 방식의 초기 로딩 속도 비교CSR 방식과 SSR 방식 각각의 초기 페이지 로딩 시간을 비교하여 어떤 방식이 더 빠른지 분석합니다.CSR 방식과..

frontend 2025.01.31

[Next.js]렌더링 방식(CSR, SSR, SSG, ISR) - 퍼포먼스 성능 비교

렌더링이란?쉽게 말해서 우리가 평소에 핸드폰으로 유튜브를 보거나 컴퓨터를 통해서 쇼핑몰 사이트에서 쇼핑을 하듯이 화면에 출력이 되는걸 렌더링이라고 표현을 해! 프코 : 인제 렌더링이 무엇인지 바로 느낌이 오지??자 그럼 렌더링 방식은 무엇이냐?먼저 초창기에는 MPA(Multi-Page-Application)라는 SSR방식으로 화면을 렌더링 했었어.여러 개의 정적 페이지를 미리 만들어 놓은 후 각 페이지별로 서버에 요청을 해서 HTML 문서를 서버에서 받아오는 방식이러한 MPA의 방식은 미리 만들어 놓은 페이지를 다른 페이지로 이동 시 전체 페이지를 새로 로드하므로, 깜빡거리는 느낌이 사용자 경험이 떨어질 수 있고, 오래 걸리는 게 단점이었어!MPA 방식의 단점을 보완하고자 SPA(Single-Page-A..

frontend 2025.01.25

[REACT] 컴파운드(조합) 컴포넌트

컴파운드 컴포넌트란?하나의 큰 컴포넌트(자이언트 컴포넌트)를 세부 요소로 쪼개놓고, Root에 assign 하는 형태로 합성하는 것입니다.prop을 사용하지 않고 내부에서 데이터를 처리할 수 있고, 비슷한 디자인의 컴포넌트가 필요할 때 새로운 컴포넌트를 만들지 않고 사용할 수 있습니다. 컴파운드 컴포넌트?? 용어부터 어렵잖아....? 그래서 왜 사용하는데?내가 처음 게시한 블로그 글에 "단단한 컴포넌트 부수기"라는 내용을 언급을 했는데 인제 하나씩 알아가 보자고!유연한 UI 구성부모 컴포넌트의 상태와 로직을 기반으로 자식 컴포넌트를 조합하여 다양한 UI를 유연하게 설계할 수 있습니다재사용성로직과 UI를 분리해 여러 곳에서 재사용 가능하며, 다른 조합 방식으로 새로운 기능을 쉽게 추가할 수 있습니다.컴포넌..

[REACT] 재사용성 컴포넌트

재사용성 컴포넌트 정의중복되는 코드를 함수(컴포넌트)로 지정하여 사용하는 곳에 이름을 호출하여 사용한다고 생각한다재사용 가능한 컴포넌트를 사용하는 목적반복되는 코드가 100만 개 있다고 가정해 보자! "프코님, 버튼 오늘까지 수정해 주세요"라고 요청받았는데, 그 해당 버튼은 이곳저곳 100만 개가 사용된다고 생각해 보자.하나씩 고치다 보면 절대 시간 안에 못 끝낸다이러한 문제점을 하나의 함수로 정의하여 사용했더라면? 그 함수만 수정하면 사용되는 부분도 자동으로 수정되는 거 아닌가? ※ 이러한 문제들이 발생하여 궁극적으로는 재사용이 가능한 컴포넌트를 사용하는 이유는 추후 유지보수에 편리하기 위해 사용한다고 나는 정의할 수 있다. 아래의 코드를 살펴보자export default function Home() ..

frontend 2025.01.20