개발지식소

1. Pages Router 개요Pages Router는 Next.js 1.x부터 존재했던 기존 라우팅 방식입니다. pages/ 디렉토리 안에 파일을 생성하면 그 파일명이 자동으로 라우트가 됩니다.예를 들어:pages/ ┣ index.js → / ┣ about.js → /about ┗ blog/[id].js → /blog/:id파일 이름 기반 자동 라우팅getStaticProps, getServerSideProps 등 데이터 패칭 함수 제공Link 컴포넌트를 통한 클라이언트 라우팅 지원👉 특징: 학습 곡선이 낮고 직관적, 기존 프로젝트에서 많이 사용됨.2. App Router 개요App Router는 Next.js 13에서 실험적으로 도입되고, 14부터 안정화된 새로..

1. Tailwind CSS란?Tailwind CSS는 Utility-first 접근 방식을 기반으로 한 CSS 프레임워크입니다.일반적인 CSS 프레임워크(예: Bootstrap)가 미리 정의된 컴포넌트를 제공하는 것과 달리, Tailwind는 작은 단위의 클래스를 조합해 원하는 UI를 직접 만들어 나가는 방식입니다.Tailwind의 특징Utility-first: bg-blue-500, text-center, p-4 같은 작은 단위의 클래스를 조합.빠른 프로토타이핑: 별도의 CSS 파일 없이 바로 클래스 조합으로 디자인 가능.높은 커스터마이징: tailwind.config.js에서 색상, 폰트, spacing 단위를 직접 설정.반응형 대응이 쉬움: sm:, md:, lg: 같은 접두어로 반응형 스타일 지..

1. SSR(Server Side Rendering)이란?개념SSR은 사용자가 페이지에 접속했을 때 서버에서 HTML을 즉시 생성해 전달하는 방식입니다. 브라우저는 완성된 HTML을 받아 곧바로 화면을 표시할 수 있고, 이후 자바스크립트가 실행되면서 인터랙티브한 React 앱이 동작하게 됩니다.특징실시간 데이터 반영 가능: 요청 시마다 서버에서 데이터를 가져와 화면에 반영.SEO 친화적: 검색 엔진이 완성된 HTML을 바로 수집 가능.최초 응답 속도(FCP)는 빠름: 빈 화면 대신 바로 HTML을 내려주기 때문.코드 예시// pages/index.jsexport async function getServerSideProps() { const res = await fetch("https://api.exam..

1. Next.js란 무엇인가?Next.js는 React 애플리케이션 개발을 위한 프레임워크입니다. React만으로도 블로그를 만들 수 있지만, Next.js는 다음과 같은 기능을 제공해 훨씬 효율적인 개발이 가능합니다.파일 기반 라우팅: pages 폴더에 파일을 추가하는 것만으로 자동 라우팅SSR(서버사이드 렌더링) & SSG(정적 사이트 생성) 지원 → SEO 최적화API Routes → 별도 백엔드 없이 간단한 API 구현 가능이미지 최적화 → 성능 개선👉 즉, 블로그와 같은 콘텐츠 중심 웹사이트를 구축하는 데 최적화된 프레임워크입니다.2. 개발 환경 설정프로젝트 생성npx create-next-app@latest my-blogcd my-blognpm run devhttp://localhost:3..

1. 상태 관리란 무엇인가?React에서 상태(state)는 컴포넌트의 렌더링 결과를 결정하는 데이터입니다.지역 상태(Local State): useState, useReducer 등을 통해 개별 컴포넌트 안에서 관리전역 상태(Global State): 여러 컴포넌트가 공유해야 하는 상태 (예: 사용자 로그인 정보, 테마, 언어 설정 등)서버 상태(Server State): 서버에서 가져온 데이터로, 동기화가 필요 (예: 게시글 목록, API 응답 데이터)React의 상태 관리 도구들은 이 세 가지 범주를 효율적으로 다루는 데 초점을 맞추고 있습니다.2. Context API – 전역 상태 관리의 기초Context API는 React가 제공하는 기본 내장 기능으로, props drilling 문제를 해결..

React의 기본 Hook(useState, useEffect, useRef, useContext)은 “상태를 쓴다/부수효과를 관리한다”로 끝나지 않습니다. 언제, 어떻게 쓰느냐에 따라 렌더 횟수, 불필요한 네트워크 호출, 이벤트 리스너 누수까지 좌우됩니다. 아래는 개념 + 실전 성능 팁을 한 번에 정리한 가이드입니다.1) useState — 초기화·업데이트만 잘해도 빨라진다개념 요약컴포넌트 로컬 상태를 선언하고 업데이트합니다. 업데이트가 일어나면 컴포넌트는 다시 렌더됩니다.성능 팁 1: Lazy 초기화로 무거운 계산 1회로 제한// ❌ 매 렌더마다 heavy() 실행됨const [list, setList] = useState(heavy());// ✅ 최초 마운트 시에만 heavy() 실행const [l..

React란 무엇인가 – 배경과 목적React는 Facebook에서 개발한 자바스크립트 라이브러리로, 웹과 모바일 환경에서 빠르고 동적인 사용자 인터페이스를 구축할 수 있도록 도와줍니다. 2013년에 오픈소스로 공개되었으며, 컴포넌트와 가상 DOM(virtual DOM) 개념을 도입해 UI 업데이트를 효율화했습니다. 특히 React는 단일 페이지 애플리케이션(SPA) 개발을 간편하게 해 주며, 단방향 데이터 흐름과 선언적(UI 선언 방식) 설계를 통해 예측 가능하고 유지보수하기 쉬운 코드를 작성할 수 있게 합니다.컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 분리합니다. 예를 들어 버튼, 입력창 같은 요소를 독립된 컴포넌트로 만들어 조합하여 전체 화면을 구성할 수 있습니다.가상 DOM: ..