230406

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

• Semantic HTML이란?
  • semantic 단어 뜻은 '의미의', '의미론적인' 이다.
  • 따라서, Semantic HTML은 '의미론적 HTML'이 된다.
  • HTML에서 Semantic element는 브라우저와 개발자 모두에게 명확하게 의미를 전달하는 요소(element).
• Semantic Tag란?
  • 의미가 있는 태그.
  •  non-semantic
    • <div> 
    • <span>
  • semantic
    • <header>
    • <main>
    • <footer>
    • <section>
    • <form>
    • <article>
    • <nav>
    • <aside>
    • 더 자세한 건 여기서 참고
• Semantic HTML의 필요성
  1. 검색엔진 최적화 (SEO)
     • 검색엔진이 알맞은 결과를 내기 위해 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석하는데, 의미 있는 태그를 사용하면 그렇지 않은 태그를 사용했을 때 보다 더 적절한 키워드를 추출 할 수 있다.
  2. 코드 가독성 향상
     • 내가 작업하지 않은 코드여도 어느 부분이 헤더 영역이고 본문 영역인지 등을 쉽게 알 수 있어 유지 보수 하기도 쉽다.
  3. 웹 접근성

💡참고

https://babycoder05.tistory.com/entry/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

HTML 시맨틱 태그를 사용하는 이유

https://tried.tistory.com/24

[HTML]Semantic HTML가 뭐길래 중요한데?

https://velog.io/@jeju_daun/%EC%9B%B9%ED%91%9C%EC%A4%80-Semantic-HTML%EC%9D%98-%ED%95%84%EC%9A%94%EC%84%B1

[웹표준] Semantic HTML의 필요성

 

---

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

• Redux란?
  • JavaScript 상태관리 라이브러리
  • 모든 상태를 하나의 저장소(store)에서 관리하는 전역 상태 관리.
• Redux 기본 개념
  1. Single source of truth
     • 동일한 데이터는 항상 같은 곳에서 가지고 옴 -> Store라는 하나뿐인 저장소
  2. State is read-only
     • React에서는 setState 메소드를 활용해 상태 변경이 가능하다면, 
       Redux에서는 action이라는 객체를 통해서만 상태를 변경한다.
  3. Changes are made with pure functions
     • 변경은 순수함수로만 가능.
     • reducer와 연관되는 개념.
  4. Action -> Dispatch -> Reducer -> Store 순서로 단방향 흐름
   
• Store 
  • 상태가 관리되는 오직 하나의 공간.
  • 컴포넌트에서 상태 정보가 필요할 때 store에 접근.
• Action
  • reducer에게 변경하라고 내리는 명령
  • 이 액션을 하길 원한다 라고 표현한 것을 reducer가 실행 시켜주고, 이 행동을 코드로 나타내는 것을 action 객체 라고 한다.
  • type이라는 key를 가져야 하며, vlaue는 대문자로 작성해야 한다. 
    {type : "PLUS_ONE"}
• Dispatch
  • action 객체를 reducer로 보내는 전달자 함수. 
  • store의 내장 함수 중 하나.
  • dispatch의 전달 인자로 action 객체가 전달되며, 전달 받은 dispatch 함수는 reducer를 호출
    dispatch({type : "PLUS_ONE"})
• Reducer
  • dispatch를 통해 전달 받은 액션 객체를 검사하고, 조건이 일치했을 때 새로운 상태 값을 만들어내는
    '변화를 일으키는' 함수
  • 첫 번째 인자로 state, 두 번째 인자로 action을 받는다.
  • store의 상태를 업데이트.
  • reducer는 순수함수여야 한다. 외부 요인으로 인해 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문이다.

💡참고

https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

https://velog.io/@jeju_daun/React-Redux

[React] Redux

 

📌다른 상태관리 도구와 비교 설명 해주세요

• Redux 장점
  • 상태 예측 가능
  • 유지보수 (복잡한 상태 관리와 비교)
  • 디버깅에 유리 (action과 state log 기록 시) -> redux dev tool (크롬 확장)
  • 순수 함수를 사용하기 때문에 테스트를 붙이기 용이.
  • 상태의 중앙화 (전역 상태 관리에 효과적)
• Redux를 사용하면 좋을 때
  • 전역 상태가 필요하다고 느껴질 때
  • 상태들이 자주 업데이트 될 때
  • 상태를 업데이트 하는 로직이 복잡할 때
  • 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
  • 상태가 업데이트 되는 시점을 관찰할 필요가 있을 때

 

💡참고

https://dori-coding.tistory.com/entry/React-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%96%B4%EB%96%A4%EA%B1%B8-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

[React] 상태관리 라이브러리 어떤걸 써야할까?

https://velog.io/@404/%EB%A6%AC%EB%8D%95%EC%8A%A4-2.-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

리덕스 #2. 리덕스의 장·단점