khg0712

// Next.js v13.0.0 ~ v13.3.0에서의 SSR 코드
// 레퍼런스하는 코드는 v13.3.0 기준
// packages/next/src/server/render.ts
// https://github.com/vercel/next.js/blob/v13.3.0/packages/next/src/server/render.tsx#L119

// streaming SSR 지원을 위해 renderToReadableStream을 사용해서 SSR 처리
// v12.3.4처럼 renderDocument에서 document render를 진행하고,
// renderDocument에서 renderToString 호출
async function renderToString(element: React.ReactElement) {
  const renderStream = await ReactDOMServer.renderToReadableStream(element)

khg0712

// Next.js v12.3.4 버전 기준 SSR 코드
// packages/next/server/render.tsx
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/server/render.tsx#L1114
const renderDocument = async () => {
  // ...

  //
  const createBodyResult = (
    initialStream: ReactReadableStream,
    suffix?: string

khg0712

// packages/next/server/render.tsx
// pre-render하는 renderToHTML 함수
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/server/render.tsx#L351

export async function renderToHTML(
  req: IncomingMessage,
  res: ServerResponse,
  pathname: string,
  query: NextParsedUrlQuery,
  renderOpts: RenderOpts

khg0712

$ npm install -g create-react-app //cra 설치
$ create-react-app react-test //react-test 리액트 앱 생성

khg0712

확장 프로그램이란?

확장 프로그램들은 브라우징 경험을 커스터마이징하는 작은 소프트웨어 프로그램이다. 이를 통해서 사용자는 Chrome의 기능과 동작을 개인의 필요나 기호에 따라 조정할 수 있다. 확장 프로그램은 HTMTL, CSS, JavaScript같은 웹 기술을 기반으로 한다.

확장 프로그램은 확실하게 정의되고 이해하기 쉬운 단일 목적을 충족시켜야 한다. 하나의 확장 프로그램은 모든 컴포넌트와 기능들이 공통 목적에 기여한다면, 여러 컴포넌트와 기능들을 가질 수 있다.

사용자 인터페이스(User Interface)는 최소한이면서 의도가 있어야 한다.

khg0712

function a() {
  console.log('a func');
}
typeof a === "function"; //true

khg0712

var a = null;
!a && (typeof a === "object"); //true

khg0712

typeof undefined === "undefined"; //true
typeof true === "boolean"; //true
typeof 42 === "number"; //true
typeof "s" === "string"; //true
typeof {a:1} === "object"; //true
typeof Symbol() === "symbol"; //true
typeof null === "null"; //false
typeof null === "object" //true

khg0712

var a = 10, b = 2;
function exampleFunc(a,b) {
  var c = 1, d = 2;
  function child() {
      return a+b;
  }
  return child()+c+d;
}
exampleFunc(3,4);

khg0712

var a = 'k';
console.log(a);//k 출력
console.log(window.a);//k 출력