[출처]https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg Understanding Reflow and Repaint in the browserRecently I came to know about Reflow and Repaint. How it's affecting web performance. I am writing th...dev.to   Reflow와 Repaint는 위와 같은 렌더링 과정에서 둘다 비용이 많이 드는 작업이다.먼저 이 두 과정에 대해 알아보자.  Reflow(Layout)이란?화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. ele..

📌 웹팩을 사용하기 전, 알고 있으면 좋은 배경 지식들웹팩을 사용하기 전, Node.js & NPM이 필요합니다. 해당 도구들에 대한 배경 지식이 있으면 웹팩을 다루는데 도움이 됩니다. 해당 배경 지식이 있는 분들은 웹팩으로 바로 넘어가셔도 좋습니다.✨ Node.js브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미합니다.✨ NPM(Node Package Manager)자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다.주요 명령어npm init : 명령어 실행 시, package.json 파일이 생성됩니다.npm init -y : 명령어 실행 시, package.json 파일이 생성됩니다.npm install ${라이브러리 이름} : 해당 명령어로 라이브러리 설치 시, 해당..

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어집니다. HTML를 파싱 후, DOM트리를 구축합니다. CSS를 파싱 후, CSSOM트리를 구축합니다. Javascript를 실행합니다. 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다. 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. (..

https://mangkyu.tistory.com/88 [기술면접] CS 기술면접 질문 - 프로그래밍 공통 (1/8) 1. 프로그래밍 공통 [ OOP란 ] OOP는 현실 세계를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법입니다. OOP mangkyu.tistory.com https://github.com/NKLCWDT/cs GitHub - NKLCWDT/cs: 🌈기술 면접 대비 및 지식 함양을 위한 Repo 입니다. 🌈기술 면접 대비 및 지식 함양을 위한 Repo 입니다. Contribute to NKLCWDT/cs development by creating an account on GitHub. github.com

https://xiubindev.tistory.com/119 1. 실제로 받은 프론트엔드 개발자 면접 질문 모음 첫 번째 직장에는 운 좋게 바로 들어가서 일을 시작했기 때문에, 제대로 취업 준비를 해본 경험이 없었다. 그래서 이번에 다시 프론트엔드 개발자로 취업 준비를 하면서 코딩 테스트 공부도 하 xiubindev.tistory.com https://realmojo.tistory.com/300\ 2. 프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트) 프론트엔드 기술면접 실제현업 질문 모음 최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨 realmojo.tistory.com https://..