useReducer는 React에서 상태를 관리하기 위한 훅(Hook) 중 하나이다. useState가 “값을 직접 바꾸는 방식”에 가깝다면, useReducer는 상태 변화 규칙을 함수로 분리하여 상태를 갱신하는 방식에 가깝다. 특히 상태가 복잡해지거나, 여러 이벤트에 따라 동일한 상태를 다양한 방식으로 갱신해야 할 때 useReducer는 코드의...

React의 “렌더링”은 화면에 무엇을 그릴지 결정하고, 실제 DOM(브라우저 화면)을 최소한으로 갱신하는 일련의 과정이다. 흔히 “Virtual DOM을 쓴다”라고 말하지만, 핵심은 상태 변화 → UI 계산 → 변경점 비교 → 필요한 부분만 반영이라는 흐름에 있다. 본 글에서는 React가 컴포넌트를 어떻게 평가하고, 어떤 순서로 화면이 바뀌는지 ...

REST API는 “REST(Representational State Transfer)”라는 아키텍처 스타일을 따르는 API를 의미한다. 다만 실무에서 REST API는 엄밀한 이론을 완벽히 구현한 형태라기보다, HTTP의 특성을 잘 활용하여 읽기 쉽고 일관된 규칙으로 설계한 API를 가리키는 경우가 많다. 이 글에서는 웹 개발 관점에서 REST A...

HTTP(HyperText Transfer Protocol)는 웹에서 클라이언트(브라우저, 앱)가 서버와 통신할 때 사용하는 대표적인 프로토콜이다. 웹 개발 관점에서 HTTP를 이해한다는 것은 “주소로 접속한다”를 넘어, 요청(Request)과 응답(Response)이 어떤 형식으로 오가고, 메서드·상태 코드·헤더·캐시·쿠키 같은 요소가 어떤 역할을 ...

SEO(Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진이 웹 페이지를 더 잘 발견하고(Discovery), 이해하고(Understanding), 평가하여 노출하도록(Ranking) 돕는 일련의 활동을 의미한다. 실무에서는 “키워드 몇 개 넣기” 같은 단편적인 작업으로 이해되기 쉽지만, 실제로는 콘텐츠 품질, 기술적 기...

URL(Uniform Resource Locator)은 인터넷 상의 자원(Resource)이 어디에 있는지를 나타내는 주소이다. 웹 개발에서는 URL을 단순히 복사해 붙이는 수준을 넘어, 각 구성 요소가 무엇을 의미하는지 이해하는 것이 중요하다. 특히 라우팅, 검색(SEO), 캐시, 보안, API 설계에서 URL 구조는 자주 설계 대상이 된다. ...

브라우저는 서버로부터 전달받은 HTML·CSS·JavaScript를 해석하여 최종적으로 화면에 픽셀 단위로 표시됨으로써 렌더링된다. 이 과정은 단순히 “HTML을 읽어 화면을 그린다”로 끝나지 않으며, 문서 구조를 트리로 구성하고 스타일 규칙을 결합한 뒤, 요소의 위치와 크기를 계산하고, 시각적 결과를 칠하고, 마지막으로 레이어를 합성하여 화면에 출력...

자바스크립트는 싱글 스레드 언어로, 기본적으로 한 번에 하나의 작업을 처리하는 방식으로 동작한다. 따라서 오래 걸리는 작업(서버 요청, 파일 읽기, 타이머 등)을 그대로 기다리면 화면이 멈춘 것처럼 보일 수 있다. 이 문제를 피하기 위해 자바스크립트는 오래 걸리는 작업을 비동기 처리로 넘기고, 작업이 끝났을 때 결과를 받아 이어서 처리하는 방식을 사용...

렉시컬 스코프(Lexical Scope)란 코드가 “어디에 작성되었는지(선언 위치)”에 따라 스코프(식별자 접근 범위)가 결정되는 규칙을 의미한다. 다른 표현으로는 정적 스코프(Static Scope) 라고도 한다. 자바스크립트를 포함한 많은 언어에서 이 규칙을 채택하며, 특히 클로저(Closure) 를 이해하기 위해 반드시 짚고 넘어가야 하는 핵심...

SPA, CSR, SSR은 React에서 나온 개념이 아니다. 이 용어들은 웹 앱을 만드는 방식(아키텍처/렌더링 전략)을 설명하는 개념이고, React는 그 방식을 구현할 때 자주 쓰이는 도구일 뿐이다. React를 공부하다 보면 이 단어들을 한 세트처럼 만나서 “React 개념인가?” 싶지만, 정확히는 다음처럼 이해하면 깔끔하다. SPA: ...