728x90
728x90
Etag 😎 ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. (보통 지문으로 비유된다) 서버는 각 리소스에 대해서 Etag를 생성하고 버전을 관리한다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있게 해준다. 🍎 특정 URL의 리소스가 변경되었을 때 Etag가 변경되어 새로 생성된다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 한다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있다. 👻 ETag는 주로 웹 캐시 관리에 사용되며, 캐시된 리소스가 여전히 유효한지 확..
har은 HTTP Archive의 약어로, 웹 브라우징 성능 및 네트워크 트래픽 분석을 위해 사용되는 파일 형식이다. 크롬에서 개발자 도구를 사용하였을 때, 이를 생성할 수도 있는데 이를 통해서 현재 발생한 에러를 공유할 수도 있고 성능 테스트의 결과를 공유할 수도 있다. 생성된 har 파일은 당시 HTTP 통신의 기록을 가지고 있기 때문에, 정확한 디버깅이나 성능 측정, 웹 페이지 로딩과정 기록 등 다양한 목적을 위해서 사용될 수 있다. har 파일을 읽는 방법으로 Charles Proxy 같은 디버깅 도구를 사용할 수 있다. Charles는 사용자 PC에서 발생하는 모든 HTTP 패킷을 탐지하고 사용자가 보기 쉽게 디렉토리로 구분해서 보여준다. 또한, Har 파일에 대한 데이터도 읽어 사용자에게 보여..
일반적으로 웹 페이지에서 tab으로 input이나 a태그와 같은 요소에 접근할 때 나열된 서순대로 접근하게 된다. 이 순서는 절대적이지 않고 수정이 가능한데, tabindex 속성이 이를 가능케 한다. 탭으로 input에 접근하면, email, name, nickname 순서가 된다. Home Services About Contact tab으로 a태그 링크에 접근하면 Contract, About, Services 순서로 접근된다. tabindex가 음수이면, tab으로 포커싱할 수 없다.
HTML 작성 시 피해야 할 안티패턴들 🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다. 테이블 레이아웃 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다. 🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다. 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다. 인라인 스타일 HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다. 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다. 문자 창조 순서 (Character Entity References) 사용 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다. 하지만 이제는 대부분의 ..