분류 전체보기

더보기답변 초안www.google.com을 입력하면 DNS 서버에서 해당 주소를 검색해 IP 주소로 변환합니다. IP 주소로 변환해 TCP 연결을 설정합니다. 3way handshake를 통해 송신자(서버)와 수신자(브라우저)의 연결을 확인하고 서버로부터 데이터를 전달받습니다. 전달받은 데이터를 브라우저 렌더링 파이프라인을 통해 화면에 그려냅니다.DNS 조회TCP 연결 수립HTTP 요청서버의 응답브라우저 렌더링 파이프라인 진행 1. DNS 조회사용자가 "www.google.com"을 입력하면, 브라우저는 도메인 이름을 IP 주소로 변환해야 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 "www.google.com"에 해당하는 IP 주소를 얻습니다. 2. TC..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 `브라우저 렌더링 파이프라인`이라고 합니다. 브라우저 렌더링 파이프라인은 5단계로 구성됩니다.DOM 생성CSSOM 생성렌더 트리 생성레이아웃페인팅컴포지팅1. DOM 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자로 변환하고, 이 문자들을 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML을 생성하게 되면, 브라우저는 이를 기반으로 `DOM 트리`를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 `부모 -..

제어문조건에 따라 코드 블록을 실행(`조건문`), 반복 실행(`반복문`)할 때 사용한다. 제어문을 사용해 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문블록문은 0개 이상의 문을 중괄호(`{}`)로 묶은 것으로 코드 블록 또는 블록이라고 부른다.자바스크립트에서 블록문은 하나의 실행 단위로 취급한다.문의 끝에는 세미콜론(`;`)을 붙이지만 블록문은 자체 종결성을 갖고 있기 때문에 세미콜론을 붙이지 않는다.// 블록문{ var foo = 10;}// 제어문var x = 1;if (x  조건문조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 ..

메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..

제어 컴포넌트(Controlled Component)는 리액트 상태(state)를 이용해 입력값을 제어하는 컴포넌트를 말합니다.입력 요소의 값(value)를 리액트의 상태와 동기화하고, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 이벤트를 감지해 setter 함수로 state를 업데이트합니다. (useState Hooks)제어 컴포넌트의 장점은 입력값과 UI가 항상 일치하도록 유지하여 데이터 관리를 용이하게 하고, 입력 값을 유효성을 검사하고, 복잡한 폼을 효과적으로 관리할 수 있습니다.import React, { useState } from 'react';function ControlledInput() { const [value, setValue] = useState(''); co..

React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 건네는 단방향 데이터 흐름을 가집니다.Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.props가 불변이기 때문에 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.import React, { useState } from 'react';function ParentComponent() { const [name, setName] = useState('Original Name'); const handleClick = () => { setName('New Name'); }; return ( ..

연산자연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.이 때 연산의 대상을 피연산자(operand)라고 한다. 피연산자는 하나의 값으로 평가될 수 있는 표현식이어야 한다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이어야 한다.// 산술 연산자5 * 4 // 20// 문자열 연결 연산자'My name is ' + 'Lee' // 'My name is Lee'// 할당 연산자color = 'red' // 'red'// 비교 연산자3 > 5 // false// 논리 연산자true && false // false// 타입 연산자typeof 'HI' // string 산술 연산자산술 연산자 피연산자를 대..