본문 바로가기

전체 글

 (136)
HTTP 1.0과 HTTP 1.1의 차이 커넥션 유지(Persistent Connection) - HTTP 1.0과 HTTP 1.1의 가장 큰 차이점은 연결의 지속성이다 - HTTP는 기본적으로 TCP를 이용하여 통신하는데, HTTP 1.0은 TCP 세션을 유지하지 않고, HTTP 1.1은 TCP 세션을 유지한다는 큰 차이가 있다 - 즉, HTTP 1.0은 매번 데이터를 요청하고 수신할 때마다 TCP 세션을 맺지만, HTTP 1.1은 한 번의 TCP 세션에 여러 개의 요청을 보내고 응답을 수신할 수 있다 - HTTP 1.0은 Non-persistent HTTP, HTTP 1.1은 Persistent HTTP라고 할 수 있다 파이프라이닝(Pipelining) - HTTP 1.1은 HTTP 1.0과 달리 파이프라이닝 기능을 제공한다 - 파이프라이닝..
React 공식문서 -lazy - lazy를 사용하면 처음 렌더링될 때까지 컴포넌트 코드의 로딩을 지연시킬 수 있다. import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); - 컴포넌트 외부에서 lazy를 호출하여 지연 로드된 React 컴포넌트를 선언한다. 매개변수 * load - Promise 또는 다른 thenable(then 메서드를 가진 Promise와 유사한 객체)을 반환하는 함수이다. - React는 반환된 컴포넌트를 처음 렌더링하려고 시도할 때까지 load를 호출하지 않는다. - React는 load를 처음 호출한 후에는 resolve될 때까지 기다린 다음 resolve된 값을 React 컴포넌트로 렌..
React 공식문서 -<Suspense> - 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. Reference Props - children : 렌더링하려는 실제 UI이다. 렌더링하는 동안 children이 일시 중단되면 Suspense 경계가 fallback 렌더링으로 전환된다. - fallback : 로딩이 완료되지 않은 경우에 실제 UI 대신 렌더링할 대체 UI이다. 유효한 어떤 React 노드든 상관없다. - Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 다시 준비되면 다시 children으로 전환된다. - 렌더링 중에 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. -> "가장 가까운(부모) Suspense 경계를 활성화시킬 수 ..
DeepDive - 40장. 이벤트 40.1 이벤트 드리븐 프로그래밍 - 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 - 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 - 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 40.2 이벤트 타입 - 이벤트 타입 : 이벤트의 종류를 나타내는 문자열(mdn : https://developer.mozilla.org/ko/docs/Web/API/Event) 40.3 이벤트 핸들러 등록 40.3.1 이벤트 핸들러 어트리뷰트 방식 Click me! - HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다. - on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.(e..
HTTP 프로토콜 HTTP(Hypertext Transfer Protocol) - 인터넷상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다. - OSI 7계층의 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동한다. - HTML 문서, 이미지, 동영상, 오디오 등 어떤 종류의 데이터든지 전송할 수 있도록 설계되어 있다. - "링크기반으로 데이터에 접속하겠다"는 의미이다. 작동방식 - HTTP는 서버/클라이언트 모델을 따르는데, 클라이언트에서 요청을 보내면 서버에서 응답하는 형태이다. - 클라이언트는 URI를 이용해서 서버에 접속하고 데이터를 요청한다. - 웹서버는 보통 표준포트인 80번 포트로 서비스한다. Connectionless & Stateless - HTTP는 Connectionle..
3-way handshake, 4-way handshake 3-way handshake - TCP는 장치들 사이에 논리적인 접속을 성립하기 위하여 3-way handshake를 사용한다. - 즉, 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미한다. - TCP의 연결을 초기화 할 때 사용한다. * 3-way handshake 과정 1. 클라이언트는 서버에 접속을 요청하는 SYN 패킷을 보낸다. 클라이언트는 SYN/ACK 응답을 기다리는 SYN_SENT 상태, 서버는 Wait for Client 상태이다. 2. 서버는 SYN 요청을 받고 클라이언트에게 요청을 수락한다는 ACK와 SYN 플래그가 설정된 패킷을 발송한다. 서버는 SYN_RECEIVED 상태가 된다. 3. 클라이언트는 서버에게 ACK를 보내고 연결이 이루어진다. 서버는..
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..

티스토리툴바