● 4월 26일~28일 Section 3 / Unit5 - [사용자 친화 웹] 웹 표준 & 접근성

● 그동안 공부한 것

• 웹표준을 준수하는 방법

시맨틱 태그

• div나 span태그를 막 쓰지 않고 의미가 있는 태그들로 html을 작성해준다.
  1. <header>
  2. <main>
  3. <aside>
  4. <article>
  5. <section>
  6. <hgroup>
  7. <footer>
  8. <b> 보다는 <strong>으로
  9.  

등 이 있다.

 

• 크로스 브라우징
  • 크로스 브라우징 이슈를 해결하기위해 어떤 기능을 사용한다면, 브라우저가 호환해주는지 늘 확인을 해야하고, can i use 같은 웹사이트로 확인을 해주면 좋다
  • 개발이 완료되면 브라우저별로, 운영체제별로 테스팅을 꼭해주어야한다.
• SEO에 영향을 미치는 On-page, Off-page가 있다.
  • 광고비를 내고 검색어 상단에 뜨는 거는 Off-page이며, 나머지 meta태그나 html의 다른요소들을 검사하여 검색어와 매칭해주는건 On-page다.
  • 따라서 <meta>태그 안을 잘 적어주어야한다.
  • 그렇다고 연관없는 단어나, 단어를 중복해서 메타 태그안에 마구 넣으면 안된다
• 웹 접근성
  • 장애인, 비장애인 구분할 것 없이 모두 웹에 접근하여 동등하게 정보를 받을 수 있어야한다. 
  • 따라서 스크린 리더에 잘 읽힐 수 있도록 img태그에 alt속성을 잘 기입해주거나, 비디오가 자동 재생되게 하지 않거나 하는 등의 설정을 통해 웹접근성을 높여야한다.
  • 그 중에서도 웹 접근성을 높이는 방식 중 하나인 WAI-ARIA가 있는데, role, aria-selected등 여러가지 속성으로 태그들을 좀 더 상세히 기술해줄 수 있다. 그리고 동적으로 움직이는 컨텐츠도 표시해줄 수 있어 좋은방식이다.

 

● 수업 이외의 공부

4월 26일

• RTK Query.. 찍먹.. 이고잉님의 영상을 시청했습니다. (https://youtu.be/pnpO3o8mLBU)
• 캐싱이 무엇인지에 대해 알아보았습니다. (우테코..)
• 코드스플리팅 React.lazy, Suspense에 대해 알아보았씁니다.

[19장 코드스플리팅]

• 프로그래머스 그리디 문제 풀었는데 죽을맛이었습니다..(4문제..)

 

4월 27일

• SSR 공부하다가 바벨 공부햇읍ㄴ디ㅏ..

[서버사이드 렌더링의 이해]

[바벨 Babel]

• 웹팩 공부하는 중입니다..