🍈 [TIL] Semantic HTML? / Redux?

질문 1) Semantic HTML의 필요성을 예시를 통해 설명해주세요.

답변)

Semantic HTML은 웹 문서를 작성할 때 HTML태그를 의미적으로 사용하여 웹 페이지의 구조와 의미를 명확하게 표현하는 방법을 말합니다. 즉, 웹 페이지의 각 부분이 무엇을 나타내는지를 의미적으로 정확하게 표현하는 것입니다. 

이것은 웹피이지의 접근성, 검색엔진 최적화(SEO), 유지 보수의 용이성 등을 개선하는데 도움이 되며, 웹 페이지의 의미와 구조를 이해하기 쉽게 만들어 줍니다.

시맨틱 태그의 예시로 <h1>,<h2>등의 태그가 있습니다. 이 태그를 사용하면 제목과 목차를 구분하고 웹 페이지의 구조를 명확하게 표현할 수 있으며, 사용자가 페이지의 구조를 이해하기 쉽게 만들어 줄 수 있습니다. 또한, 검색 엔진은 제목과 목차를 통해 페이지의 주요 내용을 파악하고 검색 결과에 반영할 수 있습니다.

또한 <form>,<input><label>등의 태그들은 양식과 입력 요소들을 구성하고 구분할 수 있습니다. 

이는 웹페이지에서 사용자와의 상호작용을 위한 양식을 명확하게 표현하고, 스크린 리더와 같은 보조 기술을 사용하는 사용자의 접근성을 개선해줍니다.

 

---

질문 2) Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요.

답변)

Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.
Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다. 해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.
Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달되며. Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.
Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로, Reducer가 리턴하는 값이 새로운 상태가 됩니다. 이 때, Reducer는 순수함수여야 합니다.
외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문입니다.
Store는 Redux의 전역 저장소로, Redux 앱의 state가 저장되어 있는 오직 하나뿐인 저장소의 역할을 합니다.

 

Redux와 다른 상태 관리 도구와의 비교에서 Redux는 중앙 집중식 상태 관리를 강조합니다. 애플리케이션의 상태가 하나의 스토어에 저장되고, 상태 변경은 액션과 리듀서를 통해 일어납니다. 이로써 상태의 흐름이 예측 가능하고, 상태 변경 로직이 명확해집니다.

또한 Redux는 불변성을 강조합니다. 상태가 변경되면 새로운 상태 객체를 생성하여 기존의 상태를 변경하지 않고 업데이트 합니다. 이를 통해 상태 변경의 추적이 용이하고, 애플리케이션의 성능을 개선할 수 있습니다.
Redux이외의 상태관리 도구로는 MobX, VueX, Recoil등이 있습니다.