Node.js

[생활코딩] Node.js 강의 2일차

jadePark 2021. 6. 18. 00:03

Node.js - URL로 입력된 값 사용하기

                1. 강의 내용
                  1.  URL의 이해
                    생활코딩 URL의 이해 강의자료
                    1) protocol 통신규칙
                    2) host(domian) 인터넷에 접속돼있는 각각의 컴퓨터
                    3) port 운영체제 통신의 종단점(= 연결되는 자리). 한대의 컴퓨터 안에 여러개의 서버가 있을 수 있다. 어떤 서버에 연결해줄지 알려주지 않으면 클라이언트가 접속했을때 어떤 서버와 통신할지가 애매해진다. 따라서 접속할 때 3000이라고 명시해주면, 3000에 연결돼있는 서버와 접속할 수 있게 된다. ex) app.listen(3000); 3000번 포트에 노드 js 웹서버를 실행시킨것이기에 접속했을때 localhost:3000 이라고 명시한것. 
                    4) path                     컴퓨터 안에 있는 어떤 디렉토리의 어떤 파일인지를 가리킨다.
                    5) query string  사용자가 입력데이터를 전달하는 방법 중 하나. ex) ?/id=HTML&page=12 예제와 같이 쿼리스트링값을 변경하면 웹 서버에게 어떤 데이터( = 내가 읽고 싶은 정보는 HTML이고 12페이지)를 전달 할 수 있다. 쿼리 스트링의 시작은 물음표로 하기로 약속돼있고 값과 값은 &를 쓰기로 약속돼있고 값의 이름과 값은 = 로 구분하도록 약속돼있다.
                  2. Node.js에서 URL을 통해서 입력된 값을 사용하는 방법
                    http:localhost/?id=HTML  이 query string에 맞게 다른 정보를 보여주는 것이 이번 강의의 목표.
                    1) var url = require('url');
                    node.js에 내장되있는 url이라는 모듈을 url이라는 변수명으로 사용할 것임을 적어줌. 
                    2) var queryData = url.parse(_url,true).query;
                    _url 문자열을  url 객체로 변화해 반환해준다. parseQueryString과 slashesDenoteHost는 기본값으로 false이다.
                    parseQueryString을 true로 설정해주면 url 객체의 query 속성을 객체 형식으로 가져온다.
                    url.parse(urlStr, [parseQueryString], [slashesDenoteHost])
                    3) response.end(queryData.id);
                    console.log(queryData)를 확인하면 { id: 'HTML' } 이런 형태다. id에 해당하는 'HTML'값만 넘겨주기위해 queryData.id를 적어준다. 
                2. 강의 코드
                   
                  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);
    console.log('url 값: '+_url);
    //url값을 추출하는 것을 통해서 원하는 값을 얻어낼 수 있다.
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
        return response.writeHead(404)
    }
    response.writeHead(200);

    //사용자가 접속한 Url에 따라서 파일을 읽어주는 코드
    response.end(queryData.id);
   
app.listen(3000);​

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

      1. 강의 내용
        1) 사용자가 입력한 query string에 따라 title,h2가 변경될 수 있게 한다
        전 시간에 배웠던 template literal을 활용해 ``안에 html 파일 내용을 붙여넣고 ,
        <title>WEB1 - ${title}</title> 와 <h2>${title}</h2>로 코드를 바꿔준다. (var title = queryData.id;) 
        2) 리스트의         href 태그를 /?id='사용자 입력' 으로 변경해 해당항목을 클릭하면 title, h2가 변경될 수 있게 한다.
        <li><a href="/?id=CSS">CSS</a></li> 
      2. 강의 코드
         
        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('url 값: '+_url);

    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>
  <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> 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);

 

Node.js - 파일 읽기

  1. 강의 내용 
    nodejs라는 폴더를 만들고 fileread.js, sample.txt 파일을 만들어준다. 
    nodejs폴더 추가 후 폴더 구조
    sample.txt에 아무 텍스트나 써주고 fileread.js에 파일을 읽을 수 있게 코드를 작성해준다.

    디렉토리 이동하기 전에는 web2에서 노드가 작동하게 되는데 읽으라고 적어준 sample.txt 경로는 nodejs 폴더이기에 undefined가 뜬다. 
    directory 이동 전 
    디렉토리를 이동시켜주고 파일을 'utf-8'을 적용해 읽어주면 sample.txt가 성공적으로 출력된다. 
    directory 이동후 결과
  2. 강의 코드
    var fs = require('fs');
fs.readFile('sample.txt','utf-8',function(err,data){
    console.log(data);
});
​

 

App - 파일을 이용해 본문 구현

  1. 강의 내용 
    queryString에 따라서 본문이 바뀌도록 만들어주는것이 이번 강의 목표
    1) data 폴더를 만들고 본문에 해당하는 내용의 파일들을 만들어준다. 
    data 폴더 추가 후 디렉토리 구조

    2) data/${queryData.id}에 맞게 desciption이 변경될 수 있도록 코드를 p태그 안을 ${description}으로 변경해준다.
    fs.readFile(`data/${queryData.id}`,'utf-8',function(err,description){
                             var template = ` ... <p>${description}</p>...`}

  2. 강의 코드
    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;

    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
        return response.writeHead(404)
    }
    response.writeHead(200);

    fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){

      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>${description}</p>
</body>
</html>
    `;
    response.end(template);
    })
    
});

app.listen(3000);​