[TIL]201229


1.コード状態


  • ノードにデバッグ
    "scripts": {
        "start": "nodemon --inspect server/basic-server.js",
      }, // nodemon도 --inspect를 지원하니 nodemon으로 쓸것
  • 最初からブレークポイントがありました.
  • "scripts": {
        "start": "node --inspect-brk server/basic-server.js",
      },

  • ルート
    条件付き(url&method)ブランチ
  • 要求されたURLは、要求された方法に従って分岐される.

  • URL
    すべてURLですが、サーバー上で処理する場合はエンドポイントのみ表示されます.

    -/endpoint//endpointは異なります.
  • /endpoint/:表示ディレクトリ
  • /endpoint:表示ファイル
  • トレーススラッシュ
    URLの末尾に貼られたスラッシュ(/)を、テールスラッシュ(テールスラッシュ)と呼びます.
    要するに、同じURLにトレーススラッシュが指定されている場合、ファイルのチェックを省略することで、ブラウザとサーバの通信中に処理/応答速度がやや向上する可能性があります.
    1.URLに後続スラッシュがある場合(目次)
    URLに後続スラッシュが存在する場合、サーバはこの要求されたリソースをディレクトリと見なします.
    ディレクトリが存在する場合は、ディレクトリの「基本ファイル」(Ex.index.html)を確認します.
    2.URLにスラッシュが付いている場合(目次)
    トレーススラッシュがURLに存在しない場合、サーバはこのリクエストのリソースをファイルと見なします.
    まず、同じ名前のファイルがあるかどうかを確認し、ない場合はディレクトリを確認し、基本ファイルを確認します.
    URLの末尾に「/」をつけるのはなぜですか?
    [WEB/ネットワーク]トレーススラッシュ–URLの後の"/"の意味

  • 解析HTTPオブジェクト(Node.jsより)
    const http = require('http');
    
    //서버를 만드는 과정
    // 콜백의 parameter로 반드시 request, response 두가지가 들어가야한다.
    // 서버를 통해 항상 요청이 들어갈텐데 request객체를 이용하여 요청을 처리/구현한다.
    http.createServer((request, response) => { //request에 대한 response를 한번에 받아오는 것이 아니다.
      const { headers, method, url } = request;
      let body = [];
      // on method는 이벤트를 붙이는 것이다.
      // like element.addEventListener("click", () => { // 클릭했을 때 });
      request.on('error', (err) => { // 요청에서 에러가 났을때
        console.error(err);
      }).on('data', (chunk) => { // 데이터가 왔을 때
        body.push(chunk); // 버퍼를 body에 차곡차곡 쌓아서
        // 버퍼를 chunk로 이름 붙임, chunk(조각이라는 의미를 갖고있다)
        // chunk를 콘솔로그로 찍으면 하기에 나타낸 Buffer형태로 나온다
        // buffer, 여기서의 chunk는 +연산자로도 사용 가능하다
      }).on('end', () => { // 요청이 끝났을 때
        body = Buffer.concat(body).toString(); //* 버퍼를 body에 concat해서 스트링화 시킨다
        // 너무 긴 바디가 있을수 도 있다. 
        // 청크가 한번에 와야하는데 부분만 먼저 오고 나머지부분이 오면 합쳐야 하기 때문에
        // 여기서부터 새로운 부분입니다.
    
        response.on('error', (err) => {
          console.error(err);
        });
    
        response.statusCode = 200;
        response.setHeader('Content-Type', 'application/json');
        // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다.
        // response.writeHead(200, {'Content-Type': 'application/json'})
    
        const responseBody = { headers, method, url, body };
    
        response.write(JSON.stringify(responseBody));
        response.end();
        // 항상 요청이 있으면 응답으로 마무리 해줘야 한다.
        // 없으면 응답없는 요청이 된다. → 한참 기다리다가 타임아웃이 걸린다.
        // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다.
        // response.end(JSON.stringify(responseBody))
    
        // 새로운 부분이 끝났습니다.
      });
    }).listen(8080); // 8080 포트로 서버를 연다는 의미
  • Buffer:データフラグメント
    -ユーチューブのビデオを見ている間に、断片的なデータをセグメント化して送信します.
    -バッファ:バッファが分割され、受信バッファ
  • streaming:bufferを受信するとすぐに再生できるものをストリームと呼ぶ.
    -流れ:川や川のように流れているデータ
    Buffer形状
  • データは必ずしも文書ドキュメントではない場合があります.
  • bufferは16進数で現れる.
  • Bufferクラスインスタンス!
  • どちらかと思うと便利です.
  • <Buffer 7b 0a 20 20 20 20 22 75 73 65 72 6e 61 6d 22 3a 22 74 65 73 74 31 22 2c 0a 20 20 20 20 22 74 65 78 74 22 20 3a 20 22 74 65 73 74 22 2c 0a 20 20 20 20 ... 17 more bytes>
    インターネットからデータをインポートするときはテキストではありません.
    -画像、ビデオ
    -テキスト形式でない場合、内部はBufferのようにバイナリファイルとして存在します.
    body = Buffer.concat(body).toString();
    // ↓ 
    <html>
      <head>
      </head>
      <body>
        // 바디
      </body>
    </html>

  • Browserのネットワーク
    -General:一般内容
    -response Headers:応答(サーバが応答をどのように与えるかを決定できる)、応答にCORSを設定することでCORS問題を解決できます.
    -要求Headers:要求時のヘッダファイル
    -Request Payload:要求されたペイロード(トラック上の貨物)

  • .concat():文字列にも使用できます
    'hello'.concat('world') // 'helloworld'

  • payload:データから必要な部分のみを抽出し、残りの部分はプロトコルオーバーヘッドを占有する
    - payload = http body
    1{
    2    "status":"OK",
    3    "data": {
    4        "message":"Hello, world!"
    5    }
    6}
    // "Hello, world!"가 payload이다

  • TODAY MOOD


    今日の私はもっと落ち着いている.🥰