🌳Frontend

https://www.youtube.com/watch?v=G1IWq2blu8c 프런트엔드 성능 최적화 최적화는 크게 로딩최적화와 렌더링최적화 로 나눌 수 있다. 브라우저 기준 로딩 최적화 processing: 웹 페이지 파일을 파싱하는 과정 document.readystatechange , document.DOMContentLoaded 이벤트 발생 dom 트리를 만들고 화면에 그리기 전에 JS를 주입함 load: css, 이미지, 동영상 등 필요한 리소스를 다운받는다. windlow.load 이벤트 발생. 브라우저기준에서 최적화라하면, 두 이벤트를 시점을 앞당기고 빨리 하는 것에 목표가 있다. 브라우저 동작원리 1. HTML 2.HTML 파싱해서 DOM Tree 3. CSSOM Tree 4. Render..

https://www.daleseo.com/react-children/ React의 Children API 사용법 Engineering Blog by Dale Seo www.daleseo.com 컴포넌트의 Props로 넘어온 children props와 Children API를 다뤄보자. children props 컴포넌트 함수의 props에 넘어온 컴포넌트 자식이 넘어온다. Children API children props를 효과적으로 다룰 수 있도록 제공하는 API children props children props는 아래처럼 다양한 경우로 넘어올 수 있다. // HTML 요소나 React 요소, 문자열이 넘어올 수도 있다. Text {100} // 함수가 넘어올 수도 있다. (보통 function..

version `x.y.z` `Major.Minor.Patch` 형태로 구성된다 Major: 하위호환이 되지 않는 변화 , 이전 버전과 호환되지 않는 변경 Minor: 하위호환이 되는 범위내에서 기능 추가, 이전 버전과 호환되는 새로운 기능 Patch: 하위 호환이 되는 범위내에서 bug fix, 기존 기능에 대한 간단한 버그수정 틸드(~): x.y.z 중 z 범위 내에서 버전 업데이트 - npm update 했을 때 최신 마이너 버전 이전까지 업데이트가 됩니다. 캐럿(^): x.y.z 중 x 이하 하위호환성이 보장되는 범위 내에서 버전 업데이트 - npm update 했을 때 최신 마이너 버전까지 업데이트가 됩니다. ~1.2.3 `>=1.2.3` `=1.2.3` `

부모요소에 `:focus-within` 선택자를 사용하면, 자식요소가 포커스되었을 때, 부모요소에서 스타일링이 가능하다. 예시 // style div:focus-within { /*focus시 요소의 부모에 스타일 지정*/ } input { /*focus시 자체 스타일 지정도 가능*/ }