남남이루의 고군분투 🌳

"수집 중인 내용을 올립니다." 1. debugger;JS 코드에 입력하면 디버깅에 용이 2. 렌더링 탭콘솔 탭 옆에 렌더링 탭을 꺼낼 수 있습니다. "페인트 플래시"를 통해 리페인트 영역을 확인할 수 있고, "프레임 렌더링 통계" 옵션을 활성화하면 브라우저에 프레임 드랍에 대한 작은 창을 표시합니다. user interaction을 통해 프레임이 어디까지 떨어지고 있는지, GPU 성능은 얼마나 사용하고 있는지 확인할 수 있습니다.프론트엔드 성능 개선을 위해 렌더링 문제를 잡아내고, 해소하는 데 도움이 되는 기능입니다.

이 포스팅의 배경 :부끄럽지만, 화면 레이아웃을 flex로만 때우곤 했다. 그러나 동일한 레이아웃의 화면간 이동을 할 때 레이아웃이 크게 흔들린 경험이 있었고, 완성도가 좋지 못하다는 생각을 했다. 물론 flex로도 이를 해결할 수 있지만, 레이아웃 잡으라고 만든 grid 속성을 이제는 제때 잘 사용해봐야겠다는 생각이 들어 grid 기본에 대해 정리해본다.요약 *(column은 row로도 가능)ESSENTIAL : grid, grid-template-columns(또는 rows)BASIC : grid-column-start, grid-column-end 또는 grid-columnLEVELUP : grid-area 상위 요소에 필요한 속성.container { display: grid; grid-tem..

HTML 왜 해? 처음 HTML을 접한 건 경영학부 수업인 MIS 경영정보시스템이었다. 다짜고짜 HTML문법 알려주고 브라우저에 띄우라는데, 머리 속에 물음표만 가득했다. PowerPoint로 10초면 그릴 수 있는 걸 굳이 타이핑을 친다? 신기하긴 한데 내 컴퓨터에서 밖에 안 보인다고? 이렇게 하찮아 보이기만 했던 HTML이 어떤 역사를 거쳐 지금처럼 발전해왔는지, 웹 프로그래밍에 있어 얼마나 중요한 기반이 되는 지 꿈에도 몰랐다. 개발자로서 처음 화면을 구성할 때, 화면에 대시보드 JavaScript....를 검색해서 나오는 여러 코드들을 망라해서 읽었다. 도무지 패턴을 알 수 없었고, 자동완성 되게 할 거면 meta랑 head는 왜 쓰는 것이며.. 같은 의문이 있었다. Frontend 프로젝트를 두..