토이 프로젝트를 하기 전 따로 공부하기 위해 작성한 글입니다.
HTML란?
Hyper Text Markup Language 약자로써, 마크업 언어의 한 종류이다
웹 사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어
여기서 마크업이란 것은 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미한다.
그리고 마크업 정보를 표현하기 위한 언어를 마크업 언어라고 한다.
HTML은 이러한 마크업 언어의 한 종류이다.
HTML에서는 우리가 흔히 태그라고 부르는 것을 사용해서 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용들을 채워넣게 된다.
태그란?
HTML을 기술하기 위해 사용하는 명령어의 집합
<head>, <body>, <script>, <button> 등...
모든 태그는 여는 것으로 시작해서 닫는 것으로 구성되는데 예를 들어 <html> 태그 같은 경우에는 괄호를 사용해서 열고 </html> 를 사용해서 닫는다.
그리고 </br> 처럼 열고 닫는 것을 한 번에 쓰는 경우도 있다.
태그는 열었으면 꼭 닫아줘야 한다는것을 기억.
-> 제대로 닫지 않으면 오류가 발생할 수도 있기 때문.
HTML 태그 종류
웹사이트의 뼈대를 구성하는 태그에는 어떤 것들이 있을까?
HTML에는 웹사이트의 뼈대를 구성하기 위한 가장 기본적이고 필수적인 태그들이 존재한다.
1. html 태그
먼저 html태그는 말 그대로 html의 시작과 끝을 알리는 태그이다.
모든 웹사이트의 html 소스 파일을 열어보면 <html> 로 시작하고 </html> 로 끝나는 것을 볼 수 있다.
이 그림은 우리가 자주 방문하는 구글 웹사이트의 html 소스를 크롬 브라우저의 개발자 도구로 열어본 것이다.
그림에 표시된 것처럼 시작과 끝에 html 태그가 존재하는 것을 볼 수 있다.
그리고 html 태그 안에는 head 태그와 body 태그가 존재한다.
2. head 태그
head 태그는 단어의 의미 그대로 머리를 의미한다.
head는 이 웹사이트가 어떤 웹사이트인지, 제목, 설명 등의 여러가지 속성을 담고 있는 곳이다
그리고 이러한 속성들을 메타데이터라고 한다.
웹사이트의 제목을 넣기 위해 사용하는 헤드 태그 <title>
이 웹사이트의 제목은 소플의 블로그를 의미.
3. body 태그
해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용
HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있다.
<head> 태그 바로 다음에 나오며 실제로 웹사이트에서 보이는 컨텐츠가 들어가게 된다.
<body> 태그 안에 있는 내용이 우리가 실제로 웹브라우저에서 보게 되는 내용이다.
// html 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML 문서의 제목</title>
</head>
<body>
HTML 문서의 콘텐츠(contents) 영역
</body>
</html>
지금까지 html, head, body태그에 대해 간략하게 알아보았다.
여기서 우리가 하나의 웹사이트를 탐색할 때를 한번 떠올려 보자.
보통 하나의 복잡한 사이트에 접속해서 여러가지 버튼이나 탭을 누르면서 여러 페이지를 왔다 갔다 할 때마다 브라우저에 나오는 내용이 달라지는 것을 알 수 있다.
그렇다면 브라우저에 나오는 내용이 바뀐다는 것은 바디 태그로 둘러싸인 부분의 내용이 바뀐다는 것일까?
맞다. 실제로 이 그림처럼 각 페이지 별로 html 파일이 따로 존재하며 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 html 파일을 받아와서 화면에 표시해준다.
그렇다면 수많은 페이지가 존재하는 복잡한 웹사이틔의 경우 html 파일이 수십에서 수백 개가 될 텐데 이걸 어떻게 다 관리해줄까?
이러한 문제를 해결하기 위해 나온 것이 바로 SPA이다.
SPA란?
SPA는 Single Page Application의 약자
하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션
어떻게 하나의 페이지로 복잡한 웹사이트를 모두 표현할 수 있을까?
그 비밀은 우리가 새롭게 배우려는 리액트와 관련이 있다.
이 그림의 왼쪽은 전통적인 방식의 웹 애플리케이션을 나타낸다.
이 방식의 경우 여러 개의 페이지가 존재하는 형태이기 때문에 멀티 페이지 애플리케이션이라고 부르기도 한다.
사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것이다.
그리고 각 페이지는 각자의 html파일을 갖고 있다.
오른쪽은 싱글 페이지 애플리케이션을 나타낸 것이며, 단 하나의 페이지만 존재한다.
여기서 페이지가 하나라는 것은 html파일이 하나라는 뜻이다.
리액트의 역할
처음에는 이 html파일의 body 태그의 내부가 비어 있다가 해당 페이지에 접속할 때 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 body 태그 내부를 채워넣게 된다.
자세한 내용은 뒤에 React를 배울 때 설명드리도록 할 테니 여기에서는 SPA의 개념만 간단하게 이해하고 넘어가도록 하겠다.
참고 강의 : 처음 만난 리액트(React)
'React' 카테고리의 다른 글
| [리액트] Hooks의 정의와 사용법 (0) | 2024.05.10 |
|---|---|
| [리액트] Props 정의 실습 (0) | 2024.05.08 |
| [리액트] Rendering Elements의 정의, 특징 (0) | 2024.05.08 |
| [리액트] JSX란? (정의, 역할, 장점 및 사용법) (4) | 2024.05.07 |
| [리액트] npx create-react-app 가 실행되지 않을 때 (0) | 2024.05.06 |
