Naver : React 클론코딩

🟢 NAVER

🔍 시맨틱태그

웹사이트의 레이아웃을 설계할 때 사용하는 태그로, HTML 구조에 의미를 부여하여 사이트의 구성 요소를 명확하게 구분하고 파악하기 쉽게 만들어주는 역할을 한다.

* 기존 네이버 markup

<body>
  <div id="header"></div>
  <div id="container"></div>
  <div id="footer"></div>
</body>

* 개선

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

→ 기존 네이버 사이트에서는 div태그에 id를 부여하는 방식으로 설계가 되어있었기에 클론코딩을 진행하며 각 영역에 맞는 시맨틱 태그를 사용해줌으로써 웹표준을 준수하는 구조를 갖추도록 개선하였다.

🔍 IR 기법

이미지를 볼 수 없는 사용자를 위해 적절한 대체 텍스트를 제공함으로써 웹 접근성을 향상시키며, 스크린 리더 사용자뿐만 아니라 검색 엔진이 콘텐츠를 효과적으로 수집하는 데에도 도움이 된다.