처음부터 차근차근

Node.js - URL의 이해 본문

FrameWork/Node.js

Node.js - URL의 이해

HangJu_95 2023. 5. 30. 12:45
728x90

우리의 목표 : 자바스크립트를 이용해서 Node.js가 갖고 있는 기능을 호출하여 우리가 웹 애플리케이션을 Node.js로 만들 수 있게하는 것.

이제 Node.js의 영역으로 넘어가서 웹 애플리케이션을 구현하는 아주 중요한 스킬을 알아보자.

 => 주인공은 url 이다.

 

URL의 형식

이미지 참조 : 생활코딩 Egoing Node.js 강의 (https://opentutorials.org/module/3549/21046)

1) Protocol : 통신규칙

  • 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인가에 대한 부분.
  • HTTP : (Hyper Text Transfer Protocol) 웹서버와 웹브라우저가 서로 데이터를 주고 받기 위해서 만든 통신 규약.

 

2) Host (domain) : 호스트

  • 인터넷에 접속되어 있는 각각의 컴퓨터를 호스트라고 부른다.
  • (opentutorials.org)는 특정 인터넷에 접속되어 있는 컴퓨터를 가리킨다.

 

3) port : 포트 번호

  • 한 대의 컴퓨터 안에 여러대의 서버가 있을 수 있다. 클라이언트가 접속했을 때 그 중의 어떤 서버와 통신해야 할 지 정한다.
  • 우리는 3000번 포트에 있는 서버와 통신한다.
  • 3000번 포트에 우리의 Node.js 웹서버를 실행시킨 것이다.

 

if port = 80이라고 해보자.이때는 포트번호는 지정해주지 않아도 된다.웹서버는 굉장히 유명한 서버기 때문에 웹서버는 80번 포트를 쓴다 라고 전세계적으로 약속되어 있기 때문만약 우리가 http를 통해 접속 했다 -> 웹서버에 접속한 것이기 때문에 포트번호를 접속하면 자동으로 80번 포트와 통신

 

4) path : 파일어떤 파일인지를 가리킨다.

 

5) Query string : 쿼리 스트링

  • 쿼리 스트링의 값을 변경하면 웹서버에게 어떤 데이터를 전달할 수 있다. ex) (?id=HTML&page=12) : 내가 읽고 싶은 정보는 HTML이고 12페이지다.
  • 쿼리스트링의 시작은 ?로 하기로 약속했다.
  • 값과 값은 &로 구분한다.
  • 값의 이름과 값은 =로 구분한다.

 

URL을 통해서 입력된 값 사용하기

이미지 참조 : 생활코딩 Egoing Node.js 강의 (https://opentutorials.org/module/3549/21046)
위 주소로 사용자가 웹 애플리케이션에 접속을 했을 때 우리가 해야할 일은 저 ID값이 무엇이냐에 따라서 사용자에게 적당한 컨텐츠를 보여주는 것이다.

 

쿼리스트링에 따라 다른 정보를 보여주는 것을 해보자.https://stackoverflow.com/questions/8590042/parsing-query-string-in-node-js

 

Parsing Query String in node.js

In this "Hello World" example: // Load the http module to create an http server. var http = require('http'); // Configure our HTTP server to respond with Hello World to all requests. var server =...

stackoverflow.com

Stackoverflow에서 javascript - Parsing Query String in node.js - Stack Overflow 검색 Main.js 파일에 적용해보자.

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  console.log(queryData);
  console.log(_url);
  if(_url == '/'){
    _url = '/index.html';
  }
  if(_url == '/favicon.ico'){
    return response.writeHead(404);
  }
  response.writeHead(200);
  response.end(fs.readFileSync(__dirname + _url));
});
app.listen(3000);

터미널에 node main.js 입력하여 실행시킨 후 브라우저에 http://localhost:3000/?id=html 입력하여 서버에 접속하면 터미널 창에 다음과 같이 뜬다.

Pm2를 이용하여 Log 확인

url 모듈을 통해 받은 객체의 parse 메소드의 parameter로 _url을 넣어 실행하여 리턴된 queryData가 의미하는 것은 다음과 같은 객체인 것이다.

{ id: 'html' }

 

var http = require('http');
var fs = require('fs');
var url = require('url');
 
var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    console.log(queryData.id);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);
 
});
app.listen(3000);

다음과 같이 end메서드 부분의 인자를 queryData.id로 바꾸면 쿼리스트링에 따라서 다른 정보를 출력해 줄 수 있다.

 

APP 제작 - 동적인 웹페이지 만들기

일단 쿼리스트링에 따라서 다르게 표현되는 완성된 웹페이지를 만들어보자.

일단 정적인 페이지의 html 소스를 가져와보자

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  console.log(queryData.id);
  if(_url == '/'){
    _url = '/index.html';
  }
  if(_url == '/favicon.ico'){
    return response.writeHead(404);
  }
  response.writeHead(200);
  var template = `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>HTML</h2>
 

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

    <img src="coding.jpg" width="100%">
    </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
    </p>
  </body>
  </html>
 
  `;
  response.end(queryData.id);
});
app.listen(3000);

그리고 동적으로 바꾸고 싶은 부분들을 다음과 같이 처리한다.

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  var title = queryData.id;
  console.log(title);
  if(_url == '/'){
    title = 'Welcome';
  }
  if(_url == '/favicon.ico'){
    return response.writeHead(404);
  }
  response.writeHead(200);
  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>
   

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

    <img src="coding.jpg" width="100%">
    </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
    </p>
  </body>
  </html>

  `;
  response.end(template);
});
app.listen(3000);

그리고 숫자로 된 리스트목록에서 숫자를 없애고 점 리스트로 바꿔보자.

var template = `
// ...
    <ul>
      <li><a href="/?id=HTML">HTML</a></li>
      <li><a href="/?id=CSS">CSS</a></li>
      <li><a href="/?id=JavaScript">JavaScript</a></li>
    </ul>

위와 같이 template의 ol만 ul로 변경해준다.

 

이렇게 하면 모든 페이지의 리스트 스타일이 변경된다.

 

제목부분은 동적으로 바뀌고 있지만 본문은 여전히 정적이다.

https://velog.io/@effort_jk/Node.js-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9-%EA%B0%95%EC%9D%98-%EC%A0%95%EB%A6%AC#nodejs---10url%EC%9D%84-%ED%86%B5%ED%95%B4%EC%84%9C-%EC%9E%85%EB%A0%A5%EB%90%9C-%EA%B0%92-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

Node.js 생활코딩 강의 정리

자바스크립트 런타임 : Node.js의 강의 정리한 포스트입니다.

velog.io

https://opentutorials.org/module/3549/21047

 

App - 동적인 웹페이지 만들기 - Node.js

수업소개 동적인 웹 페이지를 생성하는 방법을 살펴봅니다. 강의 소스코드 main.js 변경사항  var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){

opentutorials.org

 

'FrameWork > Node.js' 카테고리의 다른 글

Node.js 파일 리스트 읽어오기  (0) 2023.05.30
Node.js 홈페이지 구현  (0) 2023.05.30
Node.js Not found 구현  (0) 2023.05.30
Node.js 파일 읽기 구현  (0) 2023.05.30
Node.js의 등장과 웹서버 만들기  (0) 2023.05.30
'FrameWork/Node.js' Related Articles more