Semantic HTML의 필요성을 예시를 들어 설명해주세요.
Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요.

HTML(Hyper Text Markup Language)은 웹페이지의 뼈대를 만들고 레이아웃을 구성한다. 하지만 뼈대를 꾸미는 일은 css에서 하기때문에, 가끔 id나 class와 같은 선택자를 통해 컴포넌트를 구분하고 태그는 <div>로 통일시키는 코드를 볼 수 있다 .

<div class="header">...</div>
<div class="main">...</div>
<div class="footer">...</div>

그러나 HTML은 뼈대의 역할 말고도 의미를 나타내는 역할을 담당하고 있기 때문에 의미있는 요소(Semantic Elements)로 작성하는 것은 아주 중요하다. (또한, HTML5부터는 이러한 의미있는 요소들이 많이 추가되었다.)

HTML Semantic Markup

시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 된다. 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻한다. 따라서 Semantic elements란 의미를 가진 elements를 뜻하며 HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있다.

시멘틱 마크업은 말그대로 의미에 맞는 적절한 태그를 사용하여 마크업 하는 것을 말한다.

예를 들면 페이지의 머릿말에는 <header> , 네비게이션 역할을 하는 부분에는 <nav>, 웹사이트의 주요 내용을 담고 있는 영역에는 <main>, 구분되는 영역에는 <section>, 페이지의 하단에는 <footer> 등을 적절히 사용하는 것이다.

장점

이렇게 시멘틱 마크업을 하는 이유는 다양한 이유가 있겠지만 특히 검색 엔진 최적화, 웹접근성, 가독성에 장점이 있기 때문이다.

1. 검색 엔진 최적화(SEO)

검색 엔진이 웹 사이트 정보를 크롤링하고 해석할 때 주로 웹사이트에 사용된 태그와 단어의 빈도 등 검색엔진 자체 알고리즘에 따라 주요 키워드를 추출한다. 이때 <div>와 <span>만 사용한 문서는 어떤 부분이 중요한 영역인지 구분이 어렵다.

검색엔진마다 알고리즘이 다르기 때문에 무엇이 정답이다라고 말할 수는 없지만 의미 구분이 확실한 문서가 그렇지 않은 문서보다 더 적절한 키워드를 추출하는 것은 당연할 것이다. 결국 시맨틱 요소로 HTML 문서를 작성하는 것은 검색 엔진에 더 많은 정보를 쥐어 줄 수 있다.

검색 엔진 최적화가 된다면 나의 웹페이지가 적절한 검색을 통해 상위 노출이 가능하다는 것이고 유져의 유입도 더 활발히 일어날 수 있다.

2. 웹 접근성

웹 접근성이란 장애인,고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다. 시각장애인들을 위해 웹페이지의 내용을 음성으로 알려주는 스크린 리더, 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근할 수 있게하는 서비스 등은 HTML 태그를 기반으로 작동한다.

그렇기 때문에 웹 접근성이 뛰어난 웹앱을 구현하기 위해서 시멘틱 마크업이 필요하다.

3. 가독성

다른 개발자와의 협업에 있어서도 시멘틱 마크업은 의미가 있다. 이건 HTML의 문법이고 개발자들과의 약속이기 때문에 적절한 태그의 사용은 주석을 달아 설명하는 것보다 확실한 이해를 가져온다.

Semantic HTML의 필요성

시맨틱한 HTML을 알기 위해선 검색 엔진의 웹사이트 정보 수집 방법에 대해 알아야 한다. 구글이나 네이버가 사용하는 검색엔진은 봇을 이용하여 전세계에 있는 웹사이트의 정보를 수집한다. 이 과정에서 사용자가 검색할 만한 키워드를 미리 예상하여 해당 웹사이트의 키워드에 대응하는 인덱스를 만들게 된다.

이러한 인덱스를 생성할 때 사용되는 정보는 당연히 웹사이트의 HTML 코드이다. 그리고 그 과정에서 Semantic Elements를 해석하게 된다. 만약 Semantic Element가 없다면 HTML 코드에서 어떤 것이 중요하고 어떤 것이 중요하지 않은 지 확인할 수 없게 된다. 이는 해당 웹사이트의 인덱싱을 어렵게 만드는 안 좋은 결과를 초래할 수 있다.

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에, 검색엔진이 html 파일을 분석할 때 정확하게 콘텐츠를 식별하기가 힘들었다.
HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정한 거라고 보면 될 것 같다.
요새 많이 느끼는 거지만 개발을 할 때 명확한 기준이 없다면 다른 개발자들과 협업이나 의사소통에 있어서 문제가 발생한다.
또한 점점 기하급수적으로 늘고 있는 웹사이트들 중 조금이라도 검색엔진에 노출되어 방문자를 끌어모으려면 이러한 세밀한 부분까지 신경 써야 하는 것은 필수이다.