Node.Js:URLと動的サイト

8189 ワード
node.js テキストリンク
URL

  • URLは、インターネットからサイトに接続するために入力するアドレスを含む一連の文字を表します.

  • URLには様々な情報が存在し、以下の例は情報によって異なる色である.それぞれの色に何の意味があるか見てみましょう.
    http://opentutorials.org : 3000/main ? id=HTML&page=12
    • 背景の色に基づいて、一人一人の意味を理解しましょう.
    http:プロトコル通信ルールを表します.
    ユーザーがサーバに接続するときにどのようにアクセスするかを示すプロンプト
    データを交換するために生まれたのがhttpです.
    opentutorials.org:host(domain)とは、インターネットに接続されている各コンピュータのアドレスです.
    3000:port番号.
    パソコンには複数のサーバーが接続できるので、その中のサーバーに接続するかどうかを区別できます.
    main:pathは、コンピュータにどのファイルを読み込むべきかを示します.
    id=HTML&page=12:query stringは、私が欲しいページ情報を表します.
    比喩でまとめる.
    私は大型図書館に行ってプログラミングを勉強します.
    そこにはテーマごとに異なるテーマ館(port)があり、その中でプログラミング館(port 3000)に行きます.
    そこにあるjs関連の書籍(path)を検索し、URL関連のページ(query stiring)を検索します.
    var url = require('url'); -> urlという名前のモジュールを使用します.Javaのimportとあまり差がありませんか?
    URLのquery stringを使用して動的Webサイトを作成する
    ビデオを見て人々が強調するノードjsのローカルリフレッシュ?何がいいのかさっぱりわかった…!犬の糞.
    JAVAとJavaScriptの基礎を築きましたが、簡単な説明だけを見て勉強するのはちょっと難しいです.
    cmdの仕事にも慣れていません...
    とにかく生活コードの中でノードjsの授業で学んだことに基づいてまとめます.
    整理した内容はコードを読んで、脚注でメモしました.
    //java에서 import시켜 객체를 생성시키는 것과 비슷하게 동작하는 것 같다.
var http = require('http');
var fs = require('fs');
var url = require('url');

//메소드의 형태가 servlet이랑 비슷한 것 같다. 정확한 설명이 없어서 해석이 어렵다.
var app = http.createServer(function(request,response){
  
  //요청받은 웹사이트의 url을 가져온다.
  //queryData는 query string부분을 가져오는 것 같다.
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
  //query string에서 id의 값을 추출해온다.  
  var  title = queryData.id;
  //콘솔에 잘 찍히는지 찍어봄
    console.log(queryData.id);
  
  //아래에 html코드와 연관되어 있는데, web버튼을 누르면 홈으로 돌아오는 개념이다.
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      //아마 잘못된 경로로 가면 404에러처럼 뜨게 만든 코드 같다.
      return response.writeHead(404);
    }
    response.writeHead(200);
  // ` <- 문자를 이용해 문서형태를 유지하며 붙여넣게 해준다.
  // 내가 지금까지 공부하면서 처음본거라 엄청 신기했다.
  //${}도 너무 신기했다. JAVA공부하면서 이런거 있었으면 했던 기능..
  // 있는데 아마 내가 몰라서 못썼겠지 ㅋㅋㅋㅋ
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        <li><a href="/?id=html">HTML</a></li>
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=JavaScript">JavaScript</a></li>
      </ol>
      <h2>${title}</h2>
      <p>본문 내용입니다. 그냥 내맘대로 수정함 보기 너무 안좋아서</p>
    </body>
    </html>
    `;
  	
  //요청이 반환될 떄 html코드가 나가게 해준 것 같다.
  //Servlet의 out.print("<h1>Hello World</h1>") 같은 개념인듯
  //위의 out은  PrintWriter out = response.getWriter(); 요거다.
    response.end(template);
    
});

//포트번호에 관련된 것 같다.
app.listen(3000);
    整理してみるとサーブレットと比較して勉強できるようになりました.
    初めて見た関数はありますか?でも技の動きを見て勉強するのは面白いです
    なぜ人々がコードコメントを提供する会社に入ったのか、青少年にとって大きな助けになったのかが分かったようです.
    まずコロナが終わってから先に学院に行きたいのですが...塾でわからないことを教えたり、習ったりしているうちに進歩してきたので、なんといっても、肥大していると集中しにくい
    こうかんしけん
    👍 asyncは深化を待つ