비둘기의 블로그

💻STUDY/BACKEND STUDY

[Node.js] 3주차

coldNoodlePigeon 2022. 4. 1.
  • 생활코딩님의 WEB2 - Node.js 강좌를 수강하고 공부한 내용을 정리해서 올립니다.

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

var template=`
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${querydata.id}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ul>
      <h2>${querydata.id}</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);

백틱을 이용하여 template literal을 지정 후, ${querydata.id}를 삽입하여 화면에 표시되는 웹문서의 제목이 동적으로 변하도록 해주었다. id를 HTML, CSS 등으로 변경해주었더니 제목들이 변하는 것을 확인할 수 있었다. 

var title=querydata.id;

를 상단에 정의해주고, ${title}처럼 눈에 보기 좋게 변경할 수도 있다. 

 

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);

여기서 href 태그 속성에 연결 링크를 위와 같이 변경해주면, 웹문서를 이동할때마다 동적으로 url이 변경되고, 제목내용이 변경되는 것을 확인 가능하다. 

 

var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    console.log(queryData.id);
    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>

_url이 '/'이면, title을 Welcome으로 변경하게 해주었다. 초기 html 메인 페이지에서 위와 같이 변하는 것을 확인할 수 있었다. 

 

<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>

위와 같이 <ol> 태그를 <ul> 태그로 변경해주면, 모든 웹페이지가 동시에 <ul> 태그로 변경된 모습을 확인가능하다! 

 

파일 읽기

정보시스템의 핵심적인 메커니즘을 CRUD라 부름. 

C: CREATE (가장 중요!) 

R: READ

U: UPDATE

D: DELETE 

 

위와 같이 파일 디렉토리를 생성하고 sampe.txt에 아무 text를 넣고, fileread.js에 다음과 같이 작성했다. 

var fs=require('fs'); //file시스템을 다룰 수 있는 모듈 불러옴
fs.readFile('sample.txt',function(err,data){
  console.log(data);
}); //file 읽어옴

실행 시, 다음과 같은 결과가 출력된다. 처리할 수 없는 형태로 출력했기 때문에 위와 같은 결과가 나온다. 

 

var fs=require('fs'); //file시스템을 다룰 수 있는 모듈 불러옴
fs.readFile('sample.txt','utf8',function(err,data){
  console.log(data);
}); //file 읽어옴

이때, readFile 매개변수에 'uft8'을 추가해주면 

원하는 형태로 출력이 가능해진다. 

 

 

파일을 이용해 본문 구현 

 

다음과 같이 data 폴더를 새로 생성하여 본문의 내용을 각각 넣어주었다. 

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



});
app.listen(3000);

그리고 코드를 다음과 같이 수정하였다. fs.readFile()을 이용하여 해당 경로의 위치 (data폴더)에 queryData.id로 접근하여 'utf8' 형식으로 파일을 읽어오도록 하였다. <p></p> 태그 안에 본문의 내용을 불러올 수 있도록 ${description}을 태그 안에 넣어주었다. 실행 결과, 

본문 내용이 잘 나오는 것을 확인 가능하다. 

이때, data 폴더 안에 있는 파일 내용을 바꾸어도 실시간으로 반영이 된다. 실행될때마다 내용을 읽기 때문에 내용이 수정될떄마다 실시간으로 바뀔 수 있는 것. 

 

Javascript - Boolean 

boolean은 두가지 값이 존재한다. true, false가 있다. 

 

 

Javascript- 비교연산자 

console.log(1===1); //true
console.log(1===2); //false
console.log(1>2); //false
console.log(1<2); //false
console.log(1===1); //true
console.log(1===2); //false

 

Javascript- 제어문 

제어문을 이용하면 시간의 순서에 따라 실행되는 명령어들을 다른 순서로 출력하도록 할 수 있다. 

 

 

Javascript-조건문 

console.log('A');
console.log('B');
if(false){ //() 안에는 true/false의 boolean 값이 들어감.
  console.log('C1');
} else {
  console.log('C2');
}
console.log('D');

 

콘솔에서의 입력값 

명령어 실행 시 입력값을 주는 방법. 

var args = process.argv;
console.log(args[2]);
console.log('A');
console.log('B');
if(args[2] === '1'){
  console.log('C1');
} else {
  console.log('C2');
}
console.log('D');

args[2]에는 apps가 들어가므로 apps가 출력된다. 

 

 

Not found 구현 

console.log(url.parse(_url,pathname));

다음과 같이 출력해보면 주소가 있는 url의 경우 pathname이 '/'임을 확인할 수 있다. 따라서 

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 pathname=url.parse(_url,true).pathname;
    var title = queryData.id;

    if (pathname==='/'){
      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>
          <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>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(template);
  });
}else{
  response.writeHead(404); //웹서버가 200이라는 숫자를 브라우저에게 주면 파일을 성공적으로 전송했따는 의미.
  //전달해주지 못한다면 404를 전달.
  response.end("Not found");
}

});
app.listen(3000);

url의 pathname이 '/'인 경우에는 문서를 불러오도록 하고, 그렇지 않다면 response.writeHead(404)를 통해서 웹서버가 브라우저에 404 값을 전달해준다. 이는 파일이 성공적으로 전송되지 못했다는 의미이고. "Nof found"라는 글자도 띄우도록 해주었다. 

 존재하지 않는 파일을 불러오려고 하면 다음과 같이 화면이 뜨는것을 확인 가능하다. 

 

홈페이지 구현 

 

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 pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <body>
            <h1><a href="/">WEB</a></h1>
            <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>
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <body>
            <h1><a href="/">WEB</a></h1>
            <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>
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

if중첩문을 사용하여 홈페이지로 들어갔을때 undefined로 뜨는 것을 수정해주었다. 만약에 queryData.id의 값이 undefined라면, description과 title을 각각 지정해주고 readFile()을 통해 지정해준 문장이 나오도록 해주었다. 

홈페이지가 잘 나오는 모습 

 

Javascript-반복문

console.log('A');
console.log('B');
 
var i = 0;
while(i < 2){
  console.log('C1');
  console.log('C2');
  i = i + 1;
}
 
console.log('D');

i가 2보다 작을동안, 즉 2번 해당 문장들을 실행. 

 

Javascript- 배열 

var arr = ['A','B','C','D']; //배열 생성
console.log(arr[1]); //B
console.log(arr[3]); //D
arr[2] = 3; //A,B,3,D
console.log(arr); //['A','B',3,'D']
console.log(arr.length); //배열의 길ㅇ: 4
arr.push('E'); //['A','B',3,'D','E']
console.log(arr);

 

Javascript - 배열과 반복문 

var number = [1,400,12,34];
var i = 0;
var total = 0;
while(i < number.length){
  total = total + number[i];
  i = i + 1;
}
console.log(`total : ${total}`);

배열에 저장되어있는 수들을 더해서 total을 console.log()하도록 함. 

'💻STUDY > BACKEND STUDY' 카테고리의 다른 글

[Node.js] 7주차  (0) 2022.05.22
[Node.js] 6주차  (0) 2022.05.15
[Node.js] 5주차  (0) 2022.05.08
[Node.js] 4주차  (0) 2022.05.01
[Node.js] 2주차  (0) 2022.03.26

댓글

티스토리툴바