# rendering
Rendering&Scraping&Crawling
서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 과정스크래핑을 한국어로 번역하면 ‘긁다’라는 뜻이 되는데, 이 의미처럼 ‘특정 사이트를 스크래핑을 한다’ 라고 하면 특정 사이트의 한 페이지를 쭉 긁어와 1번 가져오는 것을 의
Element Rendering
React 앱의 가장 작은 단위인 element를 React DOM이 어떻게 rendering하고 update하는지

[Next.js] Data Fetching & Rendering
Next.js는 페이지를 어떻게 렌더링할까? Data fetching을 할 때, 사용에 따라 다양한 방식으로 렌더링할 수 있다.

웹 브라우저의 렌더링(Rendering) 알아보기
사용자가 입력한(원하는) 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청서버로부터 전달(응답) 받은 자원을 화면에 출력웹 브라우저에는 두 개의 엔진이 있다.렌더링 엔진사용자가 볼 화면을 그려내는 역할 (내용 정보인 HTML과 서식정보인 CSS 등을 읽어들여 사람이

Server component vs. Client Component
Next.js 13버전을 사용하면서 Server Component와 Client Component의 존재에 대해서 알게 되었고, 대충 개념은 이해한 것 같지만 뭔가 애매해서 Next.js의 공식문서 등을 참고해서 다시 한국어를 섞어서 정리해보려고 한다.참고: https

[JavaScript] 브라우저 렌더링 과정
전반적으로 다룰 과정을 미리 소개한다. 렌더링이 되는 과정을 다섯 단계로 구분했는데 한 단계씩 차근차근 살펴보려고 한다.
CS | Rendering 종류
브라우저의 Rendering 기본적인 렌더링의 설명이다. 아래 링크에 자세한 자료와 설명이 있다. 영상 - https://www.youtube.com/watch?v=oLC_QYPmtS0 자료 - https://davidhwang.netlify.app/Develop

2023.01.12 TIL: C# Jagged Array, LeetCode 1519, Visibility Buffer Rendering with Material Graph
LeetCode라는 곳에서 하루에 한 문제씩 알고리즘을 풀고 있는데, LINQ를 좋아해서 C 요즘은 트리에 관한 문제를 풀고 있어 Edge 정보를 문제의 인풋으로 받는 경우가 많은데, 이를 테면 int와 같은 형식이다. 그런데 테스트 케이스를 작성할 때에는 int,와

서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR) 이란?
클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR)에 대해서 알아보자!

[자바스크립트] 브라우저 렌더링
자바스크립트 렌더링에 알아보던 중 DOM요소 조작을 많이하면 웹 성능이 떨어진다고 한다.그래서 브라우저의 렌더링에 대해 알아보았다.클라이언트가 서버에 HTML을 요청하면 바이트 형태로 HTML 문서를 응답받는다.이 때 해당 문서에 정의한 인코딩 방식(UTF-8과 같은)
React 정리: 렌더링, CSR, SPA, Virtual DOM
FE개발을 위한 자바스크립트 오픈소스 라이브러리html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면
[WEB 최적화] WebFont
폰트는 다른 리소스보다 다운로드하는데 용량을 많이 차지하거나 지연되고 브라우저는 리소스를 가져올 때까지 텍스트를 렌더링하지 못하도록 차단될 수 있다. 따라서 WebFont 로드를 최적화하는 방법은 중요하다.현재 페이지에서 사용할 리소스를 우선순위를 높게하여 빠르게 가져
PRE - React 조건부 렌더링, state
React version 16.8부터 추가된 상태값과 여러 React 가능을 사용할 수 있는 요소함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수.React에서 제공하는 내장 Hook 중 하나. 현재의 state값과 이 값을 업데이

[React] 조건부 렌더링
Westagram Login 진행 중, 정규식 조건을 거쳐 형식에 맞지 않을 경우 아래의 사진처럼 errorMessage를 보여주고, 로그인 형식이 맞다면 Main 페이지로 넘어가도록 구성하고 싶었다. 아래는 validator를 check하기 위한 나의 코드 아이디와 비밀번호 정규식을 test를 돌려서, 그 결과가 true이면 navigate를 태워 ma...