본문 바로가기

전체 글74

[React] 가상 DOM 가상 DOM # 가상 DOM의 등장 이유 React 가장 큰 특징은 가상 DOM을 사용한다는 것이다. 가상 DOM을 사용하는 이유를 알기 위하여 우선 브라우저 렌더링 과정을 이해해야 한다. 브라우저는 서버에게 렌더링에 필요한 리소스를 받고, 이를 이용하여 DOM을 생성한다. DOM은 렌더 트리를 구성하고, 이 렌더 트리를 기반으로 HTML 요소가 페인팅된다. 즉, DOM 트리 생성, 렌더 트리 생성, 레이아웃 계산(리플로우), 화면에 그리기(페인트) 과정을 거쳐 화면이 완성되는 것이다. 자세한 내용 : 브라우저 렌더링과 DOM https://inthedev.tistory.com/16 그러나 웹 페이지는 사용자와 상호작용한다. 따라서, DOM은 자주 변화한다. DOM의 변화 하나하나마다 계속해서 페이지를 .. 2022. 12. 5.
[React] React Hooks와 useState, useEffect React Hooks와 useState, useEffect # React의 클래스형 컴포넌트와 함수형 컴포넌트 React의 컴포넌트를 작성하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 생명 주기 관련 기능을 사용할 수 있다. 함수형 컴포넌트는 상태값과 생명 주기 관련 기능을 사용할 수 없지만, Hook을 이용하여 이를 해결한다. 클래스 방식보다 함수 방식이 선언이 더 쉽고 메모리를 덜 사용한다는 장점이 있어서 현재는 함수형 컴포넌트 방식을 많이 사용한다. (React 공식 문서에서도 함수형을 권장하고 있다.) # React Hooks 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있도록 추가된 자바스크립트 함수이다. React.. 2022. 12. 4.
[WEB] SPA, MPA와 CSR, SSR, SSG SPA, MPA와 CSR, SSR, SSG 1. SPA와 MPA 예전에는 웹 사이트를 만들 경우, 여러 페이지를 만들 때는 각각에 해당하는 html 파일을 만들었다. a페이지를 보여주기 위해서는 a.html을 만들고 b페이지를 보여주기 위해서는 b.html을 만든다. a페이지를 보다가 b페이지를 보고 싶으면 페이지를 새로 렌더링 했다. 이렇게 각 페이지에 해당하는 html을 다 따로 만들어서 페이지를 접속할 때마다 새로 렌더링해서 새로 html 페이지를 보여주는 전통적인 웹 페이지 방식, 이를 MPA(Multi Page Application)이라고 한다. 그러나 점차 웹 사이트의 규모가 커지고 데이터가 많아지면서 페이지를 바꿀 때마다 페이지를 새로 렌더링하면 속도가 느려지는 등의 문제가 생겼다. 따라서 .. 2022. 11. 29.
[WEB] 브라우저 렌더링과 DOM 브라우저 렌더링과 DOM # 브라우저 렌더링 과정 우리는 웹 페이지를 어떻게 보게 되는가? 클라이언트가 서버에게 웹 페이지를 요청하면 서버는 그에 대한 응답으로 클라이언트에게 웹 페이지의 HTML, CSS, 자바스크립트로 구성된 텍스트 문서를 준다. 이 문서를 브라우저가 파싱(해석)하여 렌더링(시각적으로 출력)하는 과정을 거쳐 우리에게 보여지게 된다. 대략적인 과정은 다음과 같다. 1) 브라우저는 HTML, CSS, 자바스크립트 등 렌더링에 필요한 리소스를 서버에게 요청하고, 응답을 받는다. 2) 브라우저의 렌더링 엔진이 HTML을 파싱하여 DOM을 생성하고, CSS를 파싱하여 CSSOM을 생성한다. 3) DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 4) 브라우저의 자바스크립트 엔진이 자바스크립.. 2022. 11. 9.
[React] JSX JSX # JSX란 JSX는 자바스크립트의 확장된 문법이다. 기존의 웹 페이지와는 다르게 html과 자바스크립트를 분리하지 않고, 둘 다 포함하는 컴포넌트라는 것을 사용한다. 간단히 표현하자면 React에서 사용하는 html인데, 자바스크립트 문법이 적용된 것이라고 할 수 있을 것 같다. export default function App() { const text = "hello"; const arr = [0, 1, 2]; return ( {text} {arr.map((item) => {item})} ); } 이렇게 하나의 파일에 html과 자바스크립트가 모두 있다. 또한, 자바스크립트에서 표현된 변수와 함수를 바로 html에 적용할 수 있다. 이렇게 React에서는 JSX로 표현된 html을 사용한다... 2022. 11. 7.
[WEB] 브라우저 저장소 브라우저 저장소 # 브라우저 저장소가 필요한 이유 웹은 HTTP 프로토콜로 통신한다. HTTP는 클라이언트-서버 간의 통신이 끝나면 상태 정보를 저장하지 않고 접속을 종료한다는 특징이 있다. 예를 들어, 로그인을 하고 난 뒤 마이페이지를 접속하려 할 때, 서버는 로그인을 한 사용자와 마이페이지에 접속하려는 사용자가 같은 사람인지 알지 못한다. 따라서 서버가 사용자를 식별하고 정보를 저장하기 위해 쿠키라는 기능이 도입되었다. # 쿠기 사용자의 브라우저에 저장되는 작은 크기의 문자열 정보이다. 웹 사이트를 사용하는 사용자의 정보를 저장한다. 서버와 데이터를 주고 받기 위한 용도로 사용되며, 만료시간을 지정할 수 있다. (그래서 로그인 창의 자동완성 기능, 공지사항 오늘 하루 보지 않기 기능 등에 이용된다.).. 2022. 11. 6.
[JavaScript] 이벤트 이벤트 # 이벤트 등록 click! const div = document.querySelector('div'); div.addEventListener('click', handleClick); const handleClick = (event) => { console.log(event); }; 화면에 동적인 기능을 추가하기 위해 addEventListener()로 이벤트를 등록할 수 있다. 사용자는 이를 통해 웹 페이지와 상호작용한다. 그렇다면 브라우저는 이벤트를 어떻게 감지할까? 브라우저가 이벤트를 감지하는 방법에는 두 가지가 있다. # 이벤트 감지 1. 이벤트 버블링 특정 요소에서 이벤트가 발생했을 때, 해당 요소의 상위 요소로 이벤트가 전파되는 것이다. 클릭 const divs = document.qu.. 2022. 11. 5.
[JavaScript] for, forEach, map 차이 for, forEach, map 차이 1. for 조건에 부합하면 계속해서 순회한다. 중간에 break를 만나면 중단한다. const arr = [0, 1, 2, 3]; for (let i = 0; i 2) break; else console.log(arr[i]); } // 출력 결과 // 0 // 1 // 2 2. forEach 배열의 각 요소에 대해 callback 함수를 실행한다. break를 사용할 수 없다. const arr = [0, 1,.. 2022. 11. 2.

티스토리툴바