프코

하드웨어란 ?소프트웨어(운영체제와 프로그램)가 동작할 수 있도록 설계된 장치들소프트웨어란 ?하드웨어를 제어하고, 사용자가 원하는 기능을 구현하는 프로그램운영체제란?하드웨어와 소프트웨어 사이에서 중개자 역할운영체제의 실행(부팅과정)메인보드 전원 버튼을 누른다.BIOS 또는 UEFI가 실행된다.BIOS, UEFI란 : 컴퓨터 전원을 켰을 때 제일 먼저 실행되는 프로그램이야.CPU, 메모리, 하드디스크 같은 하드웨어가 정상인지 검사하고운영체제(Windows, macOS, Linux...)를 불러오는 준비를 한다.하드웨어 초기화 및 점검(POST), 하드웨어 작동 준비 상태로 만듬Power-On Self TestCPU, RAM, 그래픽카드, 키보드 같은 기본 장치들이 제대로 연결됐는지 확인부트 장치 탐색 및 부..

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

1. Lazy Loading & Suspense란 무엇일까?레이지 로딩(Lazy Loading)과 서스펜스(Suspense)는 성능 최적화를 위한 기법으로, 리소스를 효율적으로 로드하여 사용자 경험을 향상시키는 역학을 한다.Lazy Loading (지연 로딩): 필요한 시점에만 리소스를 로드하여 초기 로딩 속도를 개선하는 방법Suspense: 로딩 중인 컴포넌트를 감싸서 대체 UI(로딩 화면 등)를 제공하는 기능※ 이론만 보고 이해가 가지 않을테니 예시를 들어줄게!1. Lazy Loading의 예시import HomePage from "./HomePage";import AboutPage from "./AboutPage";function App() { return ( ..

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

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

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

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