Overview Web.dev에서 소개하는 Accessibility에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 2부에 걸쳐서 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 의미 체계 및 기본적인 화면 읽기 프로그램 지원 이해하기 # Semantics and screen readers Headings and landmarks Labels and text alternatives Media accessibility 다양한 요구 사항을 가진 사용자를 지원하는 디자인 및 CSS 생성 # Accessible tap targets Color and c..

Overview Web.dev에서 소개하는 Accessibility에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 2부에 걸쳐서 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 사용자의 다양한 요구 이해 # What is accessibility? 사이트 키보드에 접근성 부여 # Keyboard access fundamentals Use semantic HTML for easy keyboard wins Control focus with tabindex Style focus What is Accessibility? An accessible sit..

Overview Web.dev에서 소개하는 Chrome DevTools에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents Chrome DevTools는 페이지가 로드되거나 실행되는 동안 발생하는 모든 것에 대한 심층 분석을 제공합니다. 성능 패널 UI에 익숙해지려면 런타임 성능 분석 시작하기를 참조하십시오. 다음 DevTools 기능이 특히 관련이 있습니다. CPU 조절로 덜 강력한 장치를 시뮬레이션합니다. 네트워크 조절로 느린 연결을 시뮬레이션합니다. 기본 스레드 활동 보기로 기록하는 동안 기본 스..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 2부에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents 정보 유출 방지 Browser sandbox Same-origin policy Cross-Origin Resource Sharing (CORS) Making your website "cross-origin isolated" using COOP and COEP Why you need "cross-origin isolated" for powerful features Prote..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 2부에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table of Contents 보안 기초 이해하기 Security should not be so scary! What are security attacks? Understanding "same-site" and "same-origin" Security headers quick reference HTTPS를 통한 보안 연결 Why HTTPS matters What is mixed content? Fixi..

위 아티클과 첨부된 Code Snippet은 React 17버전(17.0.1) 기준으로 작성되었습니다. 17버전 이전(16버전 이하)에서는 다르게 동작할 수 있습니다. Overview 지난 포스팅에서 리액트가 어떤 식으로 이벤트를 핸들링 하는지에 대해서 살펴보았습니다. 이번 포스팅에서는 지난 포스팅에서 소개한 것처럼, 리액트가 17버전 이후부터 이벤트를 핸들링 하는 방식이 어떻게 달라졌는지에 대한 내용들을 살펴보면서 17버전으로 업데이트 할 때 어떤 영향을 미치는지, 또 어떤 점들을 주의해야 하는지를 살펴보려고 합니다. Changes to Event Delegation 리액트 17버전이 발표되면서 발표한 공식문서의 첫 번째 섹션에는 “No New Features”라는 타이틀이 달려 있습니다. 즉 리액트 ..