널리 강의 정리본 웹 접근성이란- 접근성이란? 접근하는 정도를 말한다. 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻한다.- 그렇다면 웹 접근성이란? 어떠한 사용자(장애인, 노인)가 어떠한 기술환경에서도 전문적 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것- 간단히 정리하면 모든 사용자, 모든 기기, 모든 정보- 왜 접근성을 준수해야 할까? 1) 장애인차별금지법  장애 환경- 웹의 창시자의 말: 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.- 모든 사람에 장애를 가진 사람도 속함- 장애의 정의: 신체적 또는 정신적 결함이 있는 것뿐만 아니라 정보를 얻지 못하도록 방해..

Unit Test 단위 테스트(Unit Test)는 함수나 메서드와 같이 하나의 작은 코드 단위를 테스트한다. 즉 특정 모듈이 목표한 기능을 올바르게 수행하고 있는지 검증하는 절차다. 중요한 점은 다른 코드들은 모두 잘 동작한다는 가정하에 해당 모듈이 잘 동작하는 지를 테스트 한다는 점이다. 가장 간단한 Jest 예제를 확인해보자.function sum(a, b){ return a + b;}it("a+b", () => { expect(sum(1, 3)).toBe(4);} toBe는 Jest의 matcher로, expect가 반환한 "expectation" 객체를 Object.is를 사용하여 테스트한다. Jest가 실행되면 실패한 모든 matcher를 추적하여 오류 메세지를 출력한다. 위의 예제..

들어가며 SEO는 Search Engine Optimization의 약자로 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스이다. 나한텐 너무 많이 듣고 자주 말해서 마치 잘 알고 있다고 착각이 들지만, 막상 누군가에게 설명하려고 하면 한마디도 나오지 않는 주제이다. 가볍게 그 개념이라도 공부해보고자 한다. 참고로 구글을 기준으로 학습하려고 하며, 해당 문서를 참조하려고 한다.  구글 검색의 작동 방식구글 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. 웹 크롤러는 정기적으로 웹을 탐색하여 구글 색인(index)에 추가할 페이지를 찾는다. 실제로 구글 검색결과에 포함된 페이지의 대부분은 사이트 소유자가 사이트를 검색결과에 포함하기 위해 직접 제출한 것이 아닌, 구글 웹 크롤..

웹 성능 지표에는 어떤 것들이 있을까?가장 유명하고 자료도 가장 방대한 라이트하우스를 기준으로 웹성능 지표를 학습해보고자 한다. 성능 말고도 접근성, PWA, SEO에 대한 측정도 가능하다고 한다.  아래는 라이트하우스에서 측정 기준에 대한 가중치를 나타낸 표이다 (버전 10기준). 들어본 지표도 있고, 처음 보는 지표도 있다. 하나하나 조금씩 알아가보자. FCP (First Contentful Paint)FCP는 사용자가 페이지로 이동한 후 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는 데 걸리는 시간을 측정한다. 페이지의 이미지, 흰색이 아닌 , SVG는 DOM 컨텐츠로 간주되면 iframe 안의 모든 요소는 포함되지 않는다. 참고로 라이트하우스는 HTTP 아카이브의 실제 데이터를 기반으로 성능 지표..

들어가며 종종 프론트엔드 개발을 공부하면서 WAI ARIA라는 용어를 마주하게 됐는데, 접근성과 관련있다는 정도만 알고 그 이상은 알지 못했다. 최근에 입문하기에 적절해 보이는 글을 발견해서, 가볍게 정리해보고자 한다. 참고로 해당 글에서 시멘틱 마크업에 대한 내용은 없지만, 좀 더 기술 흐름을 종합적으로 파악하기 위해 시멘틱 마크업 내용을 추가하였다.  시멘틱 마크업 HTML에서 h1 요소는 시맨틱 요소로, "페이지 최상위 제목"이라는 역할(또는 의미)을 텍스트에 부여한다. 기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트는 제목처럼 보이도록 큰 글꼴 크기로 h1의 스타일을 지정한다. (물론 원하는 대로 스타일을 지정할 수도 있다.)  반면에 어느 요소도 최상위 제목처럼 보이게 만들 수도 있다...

리액트만 배운 분들은 PHP를 배워보세요즐겨보던 개발자 유튜브가 있다. 그냥 분위기만 봐도 고수라는게 느껴진다. 리액트만 배운 분들은 PHP를 배워보세요라는 어쩌면 나한텐 조금 자극적인(?) 영상을 보게 됐는데, 이분이 말하고자 하는 요지는 간단하다. 과거의 기술을 알아야 현재의 기술을 이해한다.   그렇다고 새로운 기술을 배울때마다 1990년으로 돌아가 모든걸 경험해볼 수는 없다. 하지만  Next를 공부하는 요즘  적어도 내가 왜 이 기술을 쓰는지는 이해하고 사용하고자 이런 도입부를 썼다. 한상훈님 유튜브 제목이랑 무슨 관계지? 그냥 의식의 흐름이다.SSR 학부에서 웹 개발을 수강신청하고 리액트나 스프링 같은걸 배우나? 기대하며 수업을 들었지만 var을 사용하는 js와 jsp를 배운 경험이 문득 생각..