본문 바로가기

이것저것 스터디📚

 (107)
TCP와 UDP TCP(Transmission Control Protocol) - 인터넷상에서 데이터를 메시지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜이다. - 연결 지향 방식으로 패킷 교환 방식을 사용한다. - 3-way handshaking 과정을 통해 연결을 설정한다. - 4-way handshaking 과정을 통해 연결을 해제한다. - 흐름 제어(데이터를 송신하는 곳과 수신하는 곳에서 데이터 처리 속도를 조절하여 수신자의 버퍼 오버플로우를 방지하는 것. 예를 들어 송신하는 곳에서 감당이 안되게 데이터를 빠르게 많이 보내면 수신자에서 문제가 발생하기 때문) 및 혼잡 제어(데이터를 송신하는 곳의 데이터 전달과 네트워크 처리 속도 차이를 해결하기 위한 기법), 높은 신뢰성 보장 UDP(User Datagra..
나만의 동적 Portal 컴포넌트 만들기 1. portal이란? 리액트(React)에서 Portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. portal은 보통 모달창을 구현할 때, 많이 사용된다. 2. portal을 사용하는 이유 portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. 3. portal..
React 공식문서 -memo - memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다. import { memo } from 'react'; const SomeComponent = memo(function SomeComponent(props) { // ... }); - memo로 컴포넌트를 감싸 메모화된 버전의 컴포넌트를 얻을 수 있다. - 메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는 한 부모 컴포넌트가 리렌더링할 때 같이 리렌더링 하지 않는다. * 매개변수 - component : 첫 번째 인자로 메모화 하려는 컴포넌트가 들어간다. - arePropsEqual(optional) : 컴포넌트의 이전 prop 및 새로운 prop의 두 인자를 받는 함수이다. 만약 새로운 prop과..
React 공식문서 -useContext - useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React 훅이다. - useContext() 는 항상 호출하는 컴포넌트의 트리상 위의 가장 가까운 provider를 찾고, useContext()를 호출하는 컴포넌트 내의 provider는 고려하지 않는다. Specifying a fallback default value(fallback 기본값 지정하기) - React가 부모 트리에서 특정 context의 provider들을 찾을 수 없는 경우, useContext()가 반환하는 context 값은 해당 context를 생성할 때 지정한 기존 값과 동일하다. const ThemeContext = createContext(null); - 기본값은 절대 변경되지 않으며, co..
React 공식문서 -useReducer - useReducer는 컴포넌트에 reducer를 추가할 수 있는 React 훅이다. - useReducer는 useState와 매우 유사하지만 이벤트 핸들러의 state 업데이트 로직을 컴포넌트 외부의 단일 함수로 옮길 수 있다. State는 읽기 전용입니다. state 객체나 배열을 수정하지 마세요 // 잘못된 예시 function reducer(state, action) { switch (action.type) { case 'incremented_age': { // 🚩 Don't mutate an object in state like this: state.age = state.age + 1; return state; } // state의 객체나 배열을 수정하는 대신 새로운 객체를 반환해야 한다. ..
'www.google.com'을 브라우저에 입력하면 일어나는 일 1. 웹브라우저는 캐싱된 DNS 기록들을 통해 해당 도메인주소(www.google.com)와 대응하는 IP 주소를 확인한다. - 우리가 흔히 아는 도메인 주소는 사용자가 기억하기 쉽도록 IP 주소를 문자열로 바꾼 것이기 때문에 IP 주소를 찾아야한다. 2. 캐싱 기록이 없을 경우, 웹브라우저는 HTTP를 사용하여 DNS에게 입력된 도메인 주소에 대응하는 IP 주소를 요청한다. - Root DNS, TLD DNS, Autoritative DNS 서버 등에 순서대로 쿼리를 보내 IP 주소를 확인한다. 3. DNS가 웹브라우저에게 도메인주소와 대응하는 사이트의 IP 주소를 응답한다. 4. IP주소를 응답받은 클라이언트(브라우저)는 google의 서버와 TCP 연결을 한다. - TCP 연결을 위해 3 way h..
DeepDive - 39장. DOM - DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 - HTML 요소 : HTML 문서를 구성하는 개별적인 요소 - HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 - 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환 - HTML 요소간의 중첩 관계에 의해 계층적인 부자 관계가 형성된다. * 트리 자료구조 - 노드들의 계층 구조로 이뤄진다. - 즉, 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조를 말한다. - 최상위 노드(루트 노드)는 부모..
TCP/IP 4계층 1. TCP/IP 4계층이란? - OSI 7 계층 : 네트워크 전송 시 데이터 표준을 정리 - TCP/IP 4 계층 : OSI 7 계층 이론을 실제 사용하는 인터넷 표준 2. TCP / IP 개념 정리(선수 지식) 2.1 IP (Internet Protocol) - 지정한 IP 주소에 데이터의 조각들을 패킷(Packet)이라는 통신 단위로 최대한 빨리 목적지로 보내는 역할 - 조각들의 순서가 뒤바뀌거나 일부가 누락되더라도 크게 상관하지 않고 보내는 데 집중 - 패킷의 순서도 보장할 수 없고 패킷이 중간에 유실되도 방안이 없음 2.2 TCP(전송제어 프로토콜) - 패킷 데이터의 전달을 보증하고 보낸 순서대로 받게 해준다 - 도착한 패킷을 점검하여 줄을 세우고 유실되거나 순서가 변경되면 다시 요청하는 식으..

티스토리툴바