프론트엔드 개발자는 직접적으로 사용자 인터페이스를 다루기 때문에, 웹 접근성 개선에 중요한 역할을 할 수 있다. 정의부터 개선 방법까지 접근성을 고려했을 때의 이점을 알아보자 👀A11Y란 무엇인가?A11Y란, 접근성이라는 뜻을 가진 영단어 'Accessibility' 의 축약어이다. 숫자 11은 첫 문자 a와 마지막 문자 y 사이에 생략된 문자의 수를 나타낸다고 한다. 일부 웹개발자들과 UX 디자이너들은 A11Y를 웹 사이트의 전반적인 사용자 경험을 평가하는 점수표의 의미로 여기듯, 그저 축약어가 아니라 하나의 운동으로 나타난다. 원문에서 표현하듯, A11Y는 WCAG와 재활법 508조(Section 508 of the Rehabilitation Act)나 특정 국가들에만 국한되는 문제가 아니며 세계 ..
HTTP 메서드 활용 클라이언트 -> 서버로 데이터 전송쿼리 파라미터를 통한 데이터 전송GET주로 정렬 필터(검색어)에 사용 ex) 검색어를 치거나 리스트에 정렬 조건을 넣을 때메시지 바디를 통한 데이터 전송주로 POST, PUT, PATCH 메서드 사용회원 가입, 상품 주문, 리소스 등록, 리소스 변경 4가지 상황의 예시 1. 정적 데이터 조회 : 이미지, 정적 텍스트 문서 -> 조회는 GET 사용정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능하다.2. 동적 데이터 조회 주로 검색, 게시판 목록에서 정렬 필터(검색어)조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용한다.조회는 GET을 사용하고, GET은 쿼리 파라미터를 사용해서 데이터를 전달한다...
캐시의 기본 동작캐시가 없을 때 먼저 캐시가 없을 때의 상황을 예로 들어보자.1. 웹 브라우저에서 star.jpg라는 이미지를 요청하면 0.1M의 헤더와 1.0M의 바디를 가진(이미지의 크기는 가정한 것) 이미지를 보내준다.2. 그리고 캐시가 없을 때 같은 이미지를 한 번 더 요청하게 된다면 서버에서는 한 번 더 헤더와 바디를 만들어 브라우저에 응답한다. 위의 예제 상황처럼, 캐시가 없다면 데이터가 변경되지 않아도 계속 네트워크를 통해 데이터를 다운로드 해야 한다.인터넷 네트워크는 매우 느리고 비싸다.브라우저 로딩 속도가 느리기 때문에 사용자 경험 또한 느려진다. 캐시 적용 시헤더에 cache-control이라는 캐시가 유효한 시간(초) 값을 넣어줄 수 있다.1. 웹 브라우저에서 star.jpg라는 이..
HTTP 헤더HTTP 헤더의 용도를 알아보자! HTTP 전송에 필요한 모든 부가정보를 헤더에 담는다.또한 표준 헤더의 목록은 매우 많으며 임의의 헤더도 추가가 가능하다. 과거의 헤더과거에는 크게 4가지로 분류했다. 1. General 헤더 : 요청 메시지, 응답 메시지 구분 없이 메시지 전체에 적용되는 정보 ex) Connection: close2. Request 헤더 : 요청 정보 ex) User-Agent: Mozilla/5.0 (Macintosh;...) 3. Response 헤더 : 응답 정보 ex) Server: Apache 4. Entity 헤더 : 엔티티 바디 정보 ex) Content-Type: text/html, Content-Length: 3423 과거에는 메시지 본문(message..
HTTP란HTTP란, 처음에는 HyperText (= HTML) 같은 문서를 전송하는 프로토콜로 시작되었다. 하이퍼텍스트란 문장과 단어 등이 링크를 통해 서로 연결된 네트워크처럼 구성된 문서이다. 하지만 지금은 거의 모든 형태의 데이터를 HTTP 프로토콜에 담아서 전송한다고도 볼 수 있을 만큼 다양하게 사용되고 있다.심지어 서버간에 데이터를 TCP 프로토콜을 직접 연결해서 전송하지 않고(실무에서도 이런 경우는 거의 없다고 한다) HTTP 프로토콜을 사용한다. +물론 TCP 프로토콜 위에 HTTP 프로토콜이 있겠지만! HTTP의 역사가장 중요하게 볼 것은 HTTP/1.1 버전이다.Q. HTTP/2 나 HTTP/3 이 더 중요하지 않나요?! A. HTTP/1.1 스펙에 대부분의 기능이 들어가있고, 2/3 ..
리액트가 많은 사람들에게 사랑받는 이유 중 하나는 빠른 속도인데,빠르고 효율적이게 페이지를 브라우저에 그려주는 가상돔 (Virtual DOM) 덕분이다.가상돔을 알아보기 전에, DOM이 무엇인지 먼저 살펴보자 🧐 DOM (Document Object Model) 이란?브라우저를 통해 웹 사이트에 들어가면, 제목 사진 버튼 등 다양한 요소들을 볼 수 있다.이런 하나하나의 요소들을 Elements 라고 부르고 이 모든 것을 담고 있는 웹 페이지를 Document(문서)라고 부른다.브라우저는 이 페이지에 해당하는 HTML을 분석해서 화면에 띄워준다.DOM이란, 웹페이지에 들어가 있는 HTML 요소들을 tree형태의 구조로 표현한 것이다.DOM Tree 안에는 각각의 element에 상응하는 node가 들어있..
