[데일리 과제] 4월 6일

1. Semantic HTML의 필요성을 예시로 들어 설명해주세요.

Semantic HTML은 구조를 만드는 것을 넘어 의미를 갖게 만드는데 필요합니다.
시맨틱 요소의 예시로는 header, main, nav, footer tag 등이 있습니다.
HTML에는 많은 종류의 요소가 있지만, div와 span tag 두 가지 요소만 알아도 충분히 화면의 구조를 만들 수 있습니다.
하지만, 이 두 요소의 이름에는 의미가 없기 때문에
요소의 이름으로는 각 요소가 어떤 역할을 하는지 알 수 없습니다.
하지만 시맨틱 요소를 사용하면 요소의 이름만 보고도
해당 요소가 어떤 역할을 하는지, 요소가 가진 의미를 통해 파악할 수 있게 됩니다.
시맨틱한 HTML을 작성하면 개발자간 소통, 검색 효율성, 웹 접근성에 효과를 볼 수 있습니다.
요소의 이름만 봐도 의미를 파악할 수 있기 때문에 그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해집니다.
또한 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용함으로써 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있습니다.
마지막으로 시맨틱 요소를 사용하면 화면의 구조를 짜는 것을 넘어 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹 접근성을 향상시킬 수 있습니다

 

---

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

Redux의 주요 개념인 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는 Context API와 비교했을 때 보다 더 폭넓은 기능을 제공한다. 

1. 로컬스토리지에 상태를 영속적으로 저장하고, 시작할 때 다시 불러오는 것에 뛰어나다.

2. 상태를 Server에서 미리 채워서, HTML에 담아 Client로 보내고, 앱을 시작할 때 다시 불러오는 것에 뛰어나다.

3. 사용자의 액선을 직렬화(Serialize)해서, 상태와 함께 자동으로 버그 리포트에 첨부할 수 있고, 개발자들은 이를 통해 에러를 재현할 수 있다. 

4. 액션 객체를 네트워크를 통해 보내면, 코드를 크게 바꾸지 않고도 협업 환경을 구현할 수 있다.

5. 코드를 크게 바꾸지 않고도 실행 취소 내역의 관리나 Optimistic Mutations(낙관적인 변경)을 구현할 수 있다.

6. 개발할 때, 상태 내역 사이를 오가고 액션 내역에서 현재 상태를 다시 계산하는 일을 TDD 스타일로 할 수 있다.

7. 개발자 도구가 완전한 조사, 제어를 할 수 있게 함으로써 개발자들이 자신의 앱을 위한 도구를 직접 만들 수 있게 해준다.

8. 비즈니스 로직을 대부분 재사용하면서 UI를 변경할 수 있게 한다. 

Redux는 이와 같이 다양한 기능을 제공한다. 하지만 Context API에 비해 작성해야 하는 코드의 길이도 많고, 또 복잡하기 때문에 본인의 어플리케이션에 알맞은 상태관리 방법을 잘 고심해보고 선택해야 한다. 

 

React Query, 요즘 정말 핫한(?) 라이브러리다. 전역 상태관리 라이브러리라고 보기보다는, 서버와 클라이언트 간 비동기 작업을 쉽게 다룰 수 있게 도와주는 라이브러리다. 서버상태를 관리하는 라이브러리라고 생각하면 된다. 프론트엔드에서 어려운 부분 중 하나가, 이렇게 비동기를 통해 서버 상태를 가져오고 관리하고 업데이트 하는 부분인데, 고 부분을 쉽게 해준다.

보통 Redux와 같은 전역상태관리 라이브러리들이 클라이언트의 상태에 대해서는 잘 동작하지만, 서버 상태에 대해서는 그렇게 동작하지 못하기 때문에(명시적으로 fetch를 해야지 서버의 데이터를 최신으로 반영한다거나, 많은 컴포넌트에서 최신 데이터를 받아오기 위해 여러번 fetch를 한다던가.. 하는 등의 최적화가 어려워서), 이와 같은 서버상태관리 라이브러리가 나타나게 되었다고 볼 수 있다.