문미새 개발일지

Render phase와 Commit phaseReact의 렌더링 과정은 Render phase와 Commit phase로 크게 두 가지 단계로 나눌 수 있다.각각의 단계는 UI 업데이트 과정에서 서로 다른 역할을 수행하며, 이를 통해 효율적이고 일관된 사용자 경험을 제공한다.Render PhaseRender phase는 React가 변화된 상태(state)나 속성(props)에 따라 어떤 UI를 변경해야 할지를 결정하는 단계이며, 이 과정에선 실제 DOM을 업데이트하진 않지만, 변경 사항을 가상 DOM(Virtual DOM)에서 계산하고 비교한다.중단 가능성: Render phase는 성능에 영향을 주지 않도록 필요에 따라 중단되거나 다시 실행될 수 있다.비동기 처리: React 18에서 도입된 Con..

IEEE 802의 표준 규약 IEEE 802.3 : CSMA/CDIEEE 802.4 : Token BUSIEEE 802.5 : Token RINGIEEE 802.8 : Fiber optic LANSIEEE 802.9 : 음성/데이터 통합 LANIEEE 802.11 : 무선 LAN(CSMA/CA)HRN 방식의 우선순위 산정 공식 (대기시간+서비스시간) / 서비스 시간  >>  (값이 클 수록 우선순위가 높다.)IP 주소 ClassA class에 속하는 ip 주소 범위: 0.0.0.0 ~ 127.255.255.255B class에 속하는 ip 주소 범위: 128.0.0.0 ~ 191.255.255.255C class에 속하는 ip 주소 범위: 192.0.0.0 ~ 223.255.255.255D class i..

시스템 구성요소입력 (Input): 처리 방법, 처리할 데이터, 조건을 시스템에 투입하는 것처리 (Process): 입력된 데이터를 처리 방법과 조건에 따라 처리하는 것출력 (Output): 처리된 결과를 시스템에서 산출하는 것제어 (Control): 자료를 입력하여 출력될 때까지의 처리 과정이 올바르게 진행되는지 감독하는 것피드백 (Feedback): 출력된 결과가 예정된 목표를 만족시키지 못할 경우 목표 달성을 위해 반복 처리하는 것코드 방식연상 코드: 항목의 명칭이나 약호와 관계 있는 숫자, 문자, 기호를 이용하여 코드를 부여하는 방법블록 코드: 대상 항목에서 공통적인 것을 블록으로 구분하고 블록 내에 일련 번호를 부여하는 방법순차 코드: 일정 기준에 따라 최초의 자료부터 순차적으로 일련번호를 부여..

StrictMode StrictMode는 React 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하는 데 도움을 주는 개발도구이며, 프로덕션 빌드에서는 아무 영향을 미치지 않고, 오직 개발 환경에서만 작동한다.비권장 API 및 오래된 라이프사이클 메서드 감지React의 최신 버전에서는 더 이상 사용되지 않거나 비권장 상태인 API를 감지할 수 있다.예: componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 라이프사이클 메소드이러한 메소드가 포함된 코드는 콘솔 경고를 통해 개발자에게 알림을 주고, 최신 React API로 전환하도록 유도한다. 의도치 않은 부수효과 감지React는 컴포넌트가 예측 가능한 방식으..

www.google.com을 입력하면 발생하는 일웹 브라우저 주소창에 "www.google.com"을 입력하면, 브라우저는 사용자가 요청한 웹 페이지를 화면에 표시하기 위해 여러 단계를 거친다.1. DNS 조회사용자가 입력한 도메인 이름(예: www.google.com)은 사람이 읽기 쉬운 형태로, 실제 서버와 통신하려면 해당 도메인의 IP 주소가 필요하다.브라우저는 먼저 캐시를 확인하여 IP 주소가 있는지 찾고, 만약 캐시에 없으면 로컬 DNS 서버를 통해 IP 주소를 조회한다.결과적으로 www.google.com에 해당하는 IP 주소를 얻는다.(예: 142.250.190.78)2. TCP 연결 수립IP 주소가 확인되면 브라우저는 해당 서버와 데이터를 주고받기 위해 TCP 연결을 설정하며, TCP 연결..

브라우저 렌더링 파이프라인브라우저 렌더링 파이프라인은 브라우저가 HTML, CSS, JavaScript 파일을 처리하여 웹 페이지를 화면에 표시하는 과정을 말하며, 6단계로 나뉜다.1. DOM 생성 (Document Object Model)브라우저는 HTML 파일을 바이트 단위로 수신하여 이를 문자로 변환하는데, 문자를 HTML 토큰으로 파싱하고, 이 토큰을 기반으로 DOM 트리를 생성한다.DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 태그는 노드로, 태그 간의 계층 구조는 부모-자식 관계로 나타난다.2. CSSOM 생성 (CSS Object Model)브라우저는 CSS 파일도 바이트로 수신하여 문자로 변환한 뒤, 이를 CSS 규칙으로 파싱한다.CSS 규칙은 선택자와 선언으로 구성되며..

리액트에서 성능 최적화를 위해 적용할 수 있는 방법 컴포넌트 렌더링 최적화React.memo를 사용한 컴포넌트 메모이제이션React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지한다.사용 예시:const MyComponent = React.memo((props) => { return {props.value};});렌더링 비용이 큰 컴포넌트나, 부모 컴포넌트의 재렌더링이 자식 컴포넌트의 렌더링을 불필요하게 유발할 때 사용된다.useCallback으로 함수 메모이제이션useCallback은 동일한 함수를 재사용하여 자식 컴포넌트가 불필요하게 렌더링되지 않도록 한다.사용 예시:const handleClick = useCallback(() => { console.log('Button c..

Controlled Component와 Uncontrolled ComponentControlled Component입력값이 State를 통해 제어되는 컴포넌트이다.입력 요소의 value는 리액트 상태와 동기화되며, 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러가 호출되어 상태를 업데이트한다.장점:리액트 상태로 관리되므로 입력값을 실시간으로 검증하거나 수정하기 쉽다.여러 입력 필드 간의 복잡한 의존 관계나 동적인 폼 로직 처리에 적합하다.import React, { useState } from 'react';const ControlledInput = () => { const [value, setValue] = useState(""); const handleChange = (e) => { ..