개발자일지

React 프로젝트를 개발하다 보면 다음과 같은 오류 메세지를 볼 때가 있다. DOM 중첩 오류(DOM nesting error)는 HTML 요소들이 잘못된 계층 구조로 배치되었을 때 발생한다. React에서는 이런 오류를 자동으로 감지해서 경고 메시지를 띄워준다. 이 오류는 작성한 HTML 또는 JSX 구조에서 잘못된 DOM 중첩(DOM nesting)이 발생했다는 뜻이다. 예를 들어 태그 안에 나 같은 블록 요소를 넣는 것은 허용되지 않기 때문에 오류가 나며, 또한 는 반드시 이나 바로 아래에 위치해야 하므로 구조도 잘못된 예에 해당한다. 아래의 코드를 보면 태그는 인라인 요소만 포함할 수 있는데, 는 블록 요소이기 때문에 HTML 문법상 올바르지 않다. 그래서 React는 이를 감지하..

브라우저는 사용자가 웹사이트를 탐색할 수 있도록 도와주는 프로그램으로, 주소창에 입력한 URL을 기반으로 서버에 HTTP 요청을 보내고, 그 응답으로 받은 HTML, CSS, JavaScript 등의 리소스를 해석해 웹페이지를 시각적으로 화면에 출력해주는 역할을 한다. 내부적으로는 HTML을 DOM 트리로, CSS를 CSSOM으로 변환하고, JavaScript를 실행하여 동적인 동작을 처리하며, 이 모든 정보를 조합해 렌더 트리를 만들고 화면에 그리는 복잡하고 정교한 시스템이다. 브라우저 동작방식 프로세스 요약 → URL 입력 → DNS 조회 → 서버 요청 (HTTP) → 서버 응답 (HTML, CSS, JS) → HTML 파싱 → DOM 생성 → CSS 파싱 → CSSOM 생성 → JS 실행 → DOM..