전체 글67 [프론트엔드 면접 대비] 브라우저의 렌더링 과정 브라우저 렌더링 과정 HTML 파싱 사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면, 웹 브라우저는 웹 페이지의 HTML 코드를 파싱하여 문서 객체 모델(Document Object Model, DOM)을 생성합니다. 이 DOM은 웹 페이지의 구조와 내용을 표현하는 트리 구조입니다. CSS 파싱 및 스타일 계산 DOM 트리를 만들다 Link 태그를 만나 StyleSheet를 내려받게 될 경우, 웹 브라우저는 CSS 코드를 파싱하여 스타일 시트 객체 모델(Cascading Style Sheets Object Model, CSSOM)을 생성합니다. 이 CSSOM은 스타일 정보를 나타내는 트리 구조입니다. 이후에는 HTML 문서 객체와 CSS 스타일 정보를 결합하여 렌더링 트리(Render T.. 2023. 7. 19. [프로그래머스 / 코딩테스트 연습] 약수의 개수와 덧셈-자바스크립트(javascript) 🎍 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 🎍 제한 조건 1 ≤ left ≤ right ≤ 1,000 🎍 입출력 예 left right result 13 17 43 24 27 52 🎍 나의 문제 풀이 function div(num) { let count = 0; for (let i = 0; i 2023. 7. 5. [리액트] React query parameter(=query string)으로 검색기능 구현하기 검색기능을 구현하면서 서버에 query parameter로 검색 카테고리와 검색어를 함께 보내줘야하는 상황이 생겼다. 아래와 같이 검색 카테고리와 검색어를 함께 서버로 넘겨줘야했기 때문에 쿼리 파라미터를 이용하기로 했다. 먼저 검색 카테고리를 선택할 수 있게 selector를 이용해 option(카테고리)을 선택할 수 있게 하고 const [currentOpt, setCurrentOpt] = useState("내용"); const [option, setOption] = useState("contents"); const optionChangeHandler = (currentOpt) => { if (currentOpt === "내용") { setOption("contents"); } else if (curr.. 2023. 6. 30. [React] 리액트 코드 스프리팅(Code Splitting) 코드 스플릿팅이라고 하는 것은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미한다. * 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서 이다. => 하나의 번들 파일을 여러 개의 번들 파일로 나눈 뒤 실제 로드될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 지연시킴으로 써 작업량을 줄여 더 빠른 속도로 화면이 보일 수 있게 도와주게 된다. 🎵 리액트에서 코드 스플리팅 React.lazy 💡 컴포넌트를 렌더링하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수이다. Suspense 💡 리액트 내장 컴포넌트로 컴포넌트를 렌더링 할.. 2023. 6. 29. 이전 1 2 3 4 5 6 7 8 ··· 17 다음
