| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- keyof
- 구글애널리틱스
- router
- 데이터베이스
- useEffect
- Thymeleaf
- @Entity
- Polylang
- firebase
- 리액트오류
- @Query
- S3
- Login
- SEO
- particial
- AWS
- 워드프레스
- useContext
- 구글
- react-hook-form
- AI
- ChatGPT
- 구글알고리즘
- 플러그인
- 인텔리제이
- GA4
- GET
- Omit
- post
- JPA
- Today
- Total
목록DOM (2)
개발자일지
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..
