주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

User-Agent Client Hints의 도입, UA 프리징을 대비하라 클라이언트 입장의 User-Agent Client Hints 유저의 많은 정보를 담고 있기 때문에 개인정보 침해가 우려, UA를 점진적 삭제할 예정이라고 예전에 포스팅 했었다. 당장에 무엇을 수정해야하는지, 언제 해야하는지 몰라서 고민하던 중에 네이버 개발블로그에서 작업한 내용에 대한 포스팅했더라. UA 프리징으로 달라지는 점 속성 값 고정 navigator.userAgent navigator.appVersion navigator.platform navigator.productSub navigator.vendor 크롬에서 안드로이드를 제외한 모든 운영체제는 윈도우10 동기방식으로 OS이름, OS버전, 모델명을 알 수 있음 비동기 ..

Chrome is deploying HTTP/3 and IETF QUIC 2013년 Google에서 공개적으로 발표했으며 처음에는 Quick UDP Internet Connections의 약어로 제안되었지만, 오늘날에는 약어가 아닌 QUIC라는 프로토콜 이름 그대로 불리운다. 발표 이후 IETF(인터넷 프로토콜 유지를 담당하는 평균 조직)에 도입 된 후 IETF에서 사용하면서 개선하기 시작했고 IETF의 QUIC는 초반에 출시한 QUIC와 유사하지만 다른 버전이 되었다. IETF의 개선된 버전을 확인한 Google의 QUIC팀은 IETF를 추적해서 Google QUIC를 발전시켰고 많이 유사해졌다. IETF QUIC는 TCP를 통한 TLS 1.3보다 HTTP를 훨씬 능가하는 것으로 나타났다. 검색시간감소..

취준생이 반드시 알아야 할 프론트엔드 지식들 -CSS Box Model box model Content Area Padding Area Border Area Margin Area box-sizing content-box : 컨텐츠 영역 기준 border-box : 테두리 영역 기준 Float 해제 부모에 float 적용 자식크기만큼 크기가 줄어듬 부모가 여러개일 경우 float를 또 써야하거나 clear해야함 부모에 overflow 적용 옵션에 따라 스크롤바가 생기거나 컨텐츠가 잘릴 수 있음 부모가 끝나기 전 빈 엘리먼트 추가 후 clear 적용 의미 없는 엘리먼트가 추가되므로 권장하지 않음 부모에 display:inline-block 적용 부모엘리먼트와 다음에 오는 엘리먼트 사이에 여백이 생김 자식크기..

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선 웹폰트 용량은 생각보다 크다. 이미지는 경량화하는데 폰트는 왜 안하는가? 서버에 올려 사용하는 것은 추천하지 않는다. 안정적이지만 용량이 매우 크기때문이다. 웹폰트 로드방식 링크 CSS import 웹폰트 로더 link css 파일보다 앞에 link를 추가한다. css 파일보다 먼저 로드할 수 있다. CSS import 로딩이 느리다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); webfont.js 세밀한 컨트롤이 가능하다. 웹폰트 로더를 통한 [동기] 방식 비동기 방식에 비해 렌더링이 느림 폰트가 먼저 로드되게하기 위해서는 동기방식을 사용해야한다. 웹폰트 로더..