╱╱╭╮╱╱╱╱╱╱╭━━━╮╱╱╱╭╮╱╭╮╱╱╱╱╱╱ ╱╱┃┃╱╱╱╱╱╱┃╭━╮┃╱╱╱┃┃╱┃┃╱╱╱╱╱╱ ╱╱┃┣━━┳━━╮┃┃╱┃┣━╮╱┃╰━╯┣━━┳━╮╱ ╭╮┃┃╭╮┃┃━┫┃╰━╯┃╭╮╮┃╭━╮┃╭╮┃╭╮╮ ┃╰╯┃╭╮┃┃━┫┃╭━╮┃┃┃┃┃┃╱┃┃╭╮┃┃┃┃ ╰━━┻╯╰┻━━╯╰╯╱╰┻╯╰╯╰╯╱╰┻╯╰┻╯╰╯

FE 기본기 3

[FE 기본기] 프론트엔드 성능

프론트엔드 성능 사실 프론트엔드 개발자가 관여할 수 있는 부분이 많은 편은 아니다. 브라우저와 웹표준이 발전하면서, 성능 튜닝의 많은 부분을 브라우저가 알아서 해준다. make it work, make it right, make it fast시간 초기 구동 시간     - 파일 다운로드          - 최신 브라우저는 대체로 도메인 당 최대 6개의 접속만 동시에 처리 (HTTP/1.1 기준)          - 파일 개수가 6개 이상이면 그 다음 부터는 다운로드가 지연됨          - 별도 도메인과 CDN 등으로 분산하는 것도 방법          - HTTP2에서는 접속을 하나만 생성해서 모든 요청을 다 처리함          - RFC2616 Section 8.1.4에는 한 도메인당 최대 2..

FE 기본기 2024.08.11

[FE 기본기] Layout, CSS Logical Properties, Margin Collapsing 요약

CSS - CSS3는 없다. - CSS 명세가 방대해졌다. Layout- 크기와 위치 - CSS Box Model     - CSS 레이아웃의 기본이 되는 원리     - 엘리먼트의 크기를 정하는 표준     - box-sizing 속성으로 크기 계산 방식 변경 가능         - content; 너비와 높이를 설정하면, 컨텐츠 부분의 크기로 받아들이겠다.         - border-box; 너비와 높이를 보더까지 포함한 크기로 받아들이겠다. - runlayout.com Flexbox - 부모/자식/자식들 사이의 관계를 직관적으로 정의 - 이전에는 12 Column Grid를 사용하기도 했었다. - 성배 레이아웃 문제를 해결 - flex-direction: row는 글쓰기 방향과 일치된다. (항상..

FE 기본기 2024.08.07

[FE 기본기] HTML5, Progressive Enhancement, Graceful Degradation 요약

HTML5- 버전이 없는 Living Standard로 변화- 그래도 이전과의 차이를 두기 위해 HTML5라고 지칭한다. HTML6이 나오진 않을 것.- HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.- 의미를 기술하기 위한 Microdata도 포함 (지메일 지원) - Microdata를 포함해도 구글 검색 우선순위 배치와 같은 이점이 아직은 없다. - 비주얼 요소를 의미하는 태그나 속성은 사라지거나 의미가 변함    - , 등등 옛날 기능을 브라우저 자체에서 지원하는 것이지 HTML5 명세에는 포함되지 않는다.- 멀티미디어, 네트워크 등 다양한 기능과 API 추가     - , , , srcset 등     - WebSocket, WebWorker, Web Storage, Hi..

FE 기본기 2024.08.07