반응형
하이드레이션이 뭐에요?
- 어... html 파일에 js를 입히는 것입니다.
필자는 이렇게 면접 떨어지는 답변으로 밖에 설명하지 못해서 이번에는 확실히 알고 가자해서 이 글을 작성하게 되었다. 사실 하이드레이션에 대해 알기 보다 이 개념을 알기 전에 반드시 꼭 알아야 하는 개념들에 대해 알아보기 위한 글이다.
hydration을 이해하기 전, 준비운동
하이드레이션을 이해하기 전에 먼저 알아야 하는 것은 웹페이지가 화면에 어떻게 그려지는 것인가 이다. React, Next.js에서 말하는 하이드레이션은 갑자기 튀어나온 개념이 아니라, 정적인 html에 자바스크립트가 붙어서 상호작용 가능한 화면이 되는 과정이기 때문에 그 전 단계 개념들을 먼저 잡아두면 훨씬 이해하기 좋을 것이다.
차례
- HTML, CSS, JavaScript가 각각 무슨 역할을 하는가
- 브라우저는 HTML을 받으면 일단 보여줄 수 있다
- 정적 페이지와 동적 페이지의 차이
- DOM이란?
- 이벤트는 어떻게 붙는가
- 서버와 클라이언트의 차이
대략 차례는 이렇다.
그럼 이제 드가봅시다잉
1. HTML, CSS, JavaScript가 각각 무슨 역할을 하는가
이 세 가지는 웹페이지의 기본 요소이다.
- HTML: 화면의 뼈대
- CSS: 디자인
- JavaScript: 동작, 상호작용
HTML은 웹페이지의 구조(structure)를 정의하는 마크업 언어이다. 브라우저는 이 html을 읽고 화면의 기본 틀을 구성한다.
<body>
<h1>제목</h1>
<p>내용</p>
</body>브라우저는 위 코드를 보고 대충 아래와 같은 구조로 이해한다.
body
├─ h1
│ └─ "제목"
└─ p
└─ "내용"즉, 원본 재료는 HTML이고, 브라우저가 내주에서 바꾼 구조는 DOM인 셈이다. 그래서 흔히들 'HTML은 DOM 생성의 기반이다'라고 한다.
HTML의 핵심 역할
- 콘텐츠 구조 정의
- 문서 의미 전달 (시맨틱)
- 브라우저가 DOM 생성의 기반
CSS는 HTML에 구성된 요소를 디자인하고 배치하는 역할을 한다.
button {
background: blue;
color: white;
}
JavaScript는 웹페이지의 동작과 로직을 담당하는 언어이다.
button.addEventListener("click", () => {
alert("클릭됨");
});
JS의 핵심 역할
- 이벤트 처리
- 데이터 처리
- DOM 조작
- API 통신
2편은 다음 글로...
반응형
'개발 > React' 카테고리의 다른 글
| 브라우저가 HTML을 받아 화면을 그리는 과정 (Critical Rendering Path) (0) | 2026.03.11 |
|---|---|
| FSD 아키텍쳐란? (짧고 굵게 알아보기.) (0) | 2026.03.10 |
| 이미지 업로드 기능 구현 (0) | 2025.05.03 |
| useState... 이거는 알고가야죠? (0) | 2025.04.14 |
| 모노레포 프로젝트에서 라이브러리 import 문제 해결하기 (0) | 2025.03.29 |