노드 스트림에 대한 부드러운 소개

Stackblitz

Reference

Node.js에는 4가지 유형의 스트림이 있습니다.

쓰기 가능: 데이터를 쓸 수 있는 스트림입니다. 예를 들어 fs.createWriteStream()를 사용하면 스트림을 사용하여 파일에 데이터를 쓸 수 있습니다.

읽기 가능: 데이터를 읽을 수 있는 스트림입니다. 예를 들면 다음과 같습니다. fs.createReadStream() 파일의 내용을 읽을 수 있습니다.

이중: 읽기 및 쓰기가 모두 가능한 스트림입니다. 예: net.Socket

변환: 데이터를 쓰고 읽을 때 데이터를 수정하거나 변환할 수 있는 스트림입니다. 예를 들어 파일 압축 인스턴스에서 압축된 데이터를 쓰고 파일에서 압축 해제된 데이터를 읽을 수 있습니다.

import * as fs from 'fs';
// this works but let's use async iterator aka for loop
// to show the readable stream is an array whose elements
// are loaded as chunks of data
// const asyncIterableLogChunks = async (readable) => {
//   readable.on('data', (chunk) => {
//     console.log(chunk);
//   });
// };
const asyncIterableForLoopForReadableStream = async (readable) => {
  for await (const chunk of readable) {
    console.log(chunk);
  }
};

const readable = fs.createReadStream('./file.txt', { encoding: 'utf-8' });
// asyncIterableLogChunks(readable);
asyncIterableForLoopForReadableStream(readable);

스트림은 한 번에 서버 메모리 청크 1개로 로드되고 작동된 후 다음 청크가 오기 전에 어딘가로 전송되는 데이터 배열입니다. 롤러 코스터와 같습니다. 한 번에 한 그룹만 탑승하고 탈 수 있습니다. 스트림의 청크 프로세스 자체가 비동기라는 사실에도 불구하고 어떤 의미에서는 청크가 서로에 대해 동기적이라고 말할 수 있습니다. 즉, 이벤트에서 다른 노드 프로세스를 수용하기 위해 일시 ​​중지 및 재개할 수 있습니다. 고리.

더 다이빙하기 전에 잠시 멈추고 숙고합시다. 이것의 요점은 무엇입니까? 상위 구성 요소 패턴을 사용하여 소품으로 반응 구성 요소로 스트리밍되는 서버 측 데이터 가져오기를 통합합니다. 이것이 React RFC 229

에 대한 나의 해석입니다.







부 👻 멋지다









RFC 229 반응(후크 사용) TLDR; 이는 RFC 188(RSC)의 확장으로, 서버에서 실행되고(노드 TCP/db 연결 및 파일 시스템에 대한 액세스 권한 포함) 클라이언트 구성 요소에 props를 전달합니다. Suspense는 229에서 비동기 RSC가 허용하는 겹치는 io 상태 수명 주기를 관리합니다. 사용은 조건부입니다.


오전 02:14 - 2022년 10월 18일















부 👻 멋지다









RSC는 동적으로/조건부로 웹 API(ESM이라고 생각합니다)를 기반으로 클라이언트 구성 요소를 가져오므로 RSC는 서비스를 제공할 클라이언트를 "선택"할 수 있습니다. 사용은 데이터 관리를 위해 클라이언트에서 유사한 동작을 채택합니다.


오전 02:18 - 2022년 10월 18일















부 👻 멋지다









SSR: 서버는 핸들러가 "하이드레이트"앱에 연결된 브라우저에 DOM을 전송합니다(React 생태계를 통해 대화형으로 만들기). CSR: DOM이 없습니다(루트 요소 제외). 클라이언트는 데이터를 가져오고 동적으로 DOM을 작성합니다. (수화 아님)RSC: 노드(TCP/fs) 스트리밍에 액세스할 수 있는 HOC


오전 05:39 - 2022년 10월 19일