2023-04-06 목요일

✏️ 무엇을 배웠나

---

1. 시멘틱 태그

시멘틱 태그 (Sementic Tag)는 말 그대로 '뜻이 있는 태그'를 말함. html 관점에서 다시 말하면, 역할과 용도가 정해져 있는 태그라고 할 수 있음.

div나 span은 역할과 용도가 딱히 정해져 있지 않아서 범용적으로 사용할 수 있는데 mdn에서는 시멘틱 태그를 사용할 것을 권장하고 있음.

왜?

1. SEO 강화: 크롤링봇이 HTML을 더 쉽게 파악할 수 있게 해주고 시멘틱 태그를 사용하면 상위 노출 확률이 더 높음
2. 접근성 강화 : 스크린 리더가 시멘틱 태그를 인식해서 더 잘 작동함
3. 유지보수 강화 : div가 여러 개 있는 것보다는 section, nav 등으로 나뉜 게 더 가독성 좋고 무슨 코드인지 파악하기도 쉬움.

아래 링크에서 시멘틱한 마크업을 도와줄 요소들을 확인할 수 있음.

HTML 요소 참고서

2. 리덕스란

• 자바스크립트 기반으로 사용할 수 있는 상태 관리 라이브러리

왜 리덕스를 사용해야 하는가?

• 상태를 전역으로 관리해 유지보수가 용이함
• props drilling 같은 문제를 해결할 수 있음
• 부수효과 없이 예측 가능하게 앱을 관리할 수 있음

리덕스의 핵심 개념

• 앱의 모든 상태는 하나의 저장소에 객체 트리로 저장됨 (store)
• 저장된 상태를 변경하려면 오직 액션 객체를 보내는 방법뿐임 (action)
• 액션 객체로 상태를 어떻게 바꾸는지 적어두는 리듀서가 있음 (reducer)

리덕스가 작동하는 방식

1. 저장소에 상태를 저장한다
2. 상태를 변경하고자 하는 컴포넌트에서 액션 객체를 보낸다. 액션 객체는 액션의 종류를 나타내는 타입과 리듀서가 참조할 데이터인 페이로드를 포함한다.
3. 리듀서는 방금 받은 액션 객체와 기존의 상태를 인수로 해서 실행 결과 새로운 상태를 반환한다. 그러니까 리듀서는 함수일 뿐이다.

리코일과 비교

리코일

• atom()으로 한 큐에 스토어를 만들 수 있다.
• 하나의 스토어에 다 넣지 않고, 상태를 atom 단위로 분할해서 관리할 수 있다. 때문에 상태 관리에 조금 더 신경 써야 한다.
• 비동기 처리를 지원하는 기능이 내장되어 있다.

리덕스

• 보일러 플레이트가 많다.
• 하나의 스토어에 모든 상태를 저장하는 중앙 집권식이다. 때문에 상태 관리가 조금 더 편하다.
• 비동기를 처리하려면 thunk를 추가로 써야 한다.