세리프 따라잡기

nodejs app제작(not found, 홈페이지 구현), 반복문, 배열(추가 및 제거) 본문

Node.js

nodejs app제작(not found, 홈페이지 구현), 반복문, 배열(추가 및 제거)

맑은 고딕 2021. 1. 5. 01:37

9. not 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 title = querydata.id;

  console.log(url.parse(_url, true)); //사용자가 루트(패스 정보가 없는 상태: ex. localhost:3000)로 접속했는가 아닌가를 구분하고 이 코드에 어떤 내용이 담겨있는지를 묻는 것.

  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); //위치 조정+앞선 if코드 없앰.
    response.end(template);
  })


});
app.listen(3000);
  • not 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; //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); //writehead(200)의 200은 접속이 잘 되었는지 아닌지, 주소가 이전 되었는지를 기계와 기계가 서로 통신하기 위해 규칙을 정한 값. 이 값을 주면 성공적으로 파일을 전송했다는 뜻이다. 반면 404가 온다면 파일을 찾을 수 없다는 뜻이다.
    response.end('not found');
  }; // 정상적으로 작동. 웹 주소 / 다음에 아무거나 친다면 not found 라는 결과값이 나온다. [ex. localhost:3000/adad = not found 출력.]

}); // 홈은 undefined로 표시된다. [다음 코드에서 홈페이지 구현할 것]
app.listen(3000);

10. 홈페이지 구현

  • 조건문을 이용해서 조건에 따라 다르게 동작하는 앱 만들기
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 === '/'){ //홈이든 페이지를 가든 특별한 경로가 붙지 않기 때문에 pathname은 똑같이 /. 즉, 구분할 수 없다. 때문에 구분할 수 있게 if문을 추가한다.
    if(querydata.id === undefined){ //id값과 undefined(정의 되지 않은 데이터라는 뜻)이 같다면, home이라는 뜻이다. undefined는 자바 스크립트에서 없는 값을 호출하려고 할 때 나옴.
    fs.readFile(`data/${querydata.id}`, 'utf8', function (err, description) { //참고로 이 줄의 코드(fs~{}까지)는 제거해도 문제가 없는 코드줄. 후에 제거할 예정.
      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);
    }); // querydata.id 값이 undefined 라면 이 코드가 실행된다.
      } 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);

11. 반복문 (Loop statement)

console.log('a');
console.log('b');

var i=0; //0부터 시작
while (i<1) { //이 또한 불리언을 사용하는데, true만 쓴다면 무한루프가 발생한다. 때문에 몇 번 반복할 것인지를 적어주어야 한다.
    console.log('c1');
    console.log('c2');
    i=i+1; // 반복문이 호출될때마다 기존 i의 값에 1을 더한다. 이때 여전히 true 상태라면 false 상태에 마주칠 때까지 실행된다.
}
console.log('d'); // 1보다 작기에 단 1번만 실행된다. 정상 출력.

12. 배열 (Array data type)

  • 코딩을 하다보면 정보(데이터)가 무수히 많아지게 되고, 정리하지 않으면 찾기가 어려워진다. 이를 해결하기 위한 도구가 배열이다.
var arr=['a', 'b', 'c', 'd']; //배열은 대괄호[]안에 넣고 싶은 데이터를 넣어주면 된다. 이때 넣는 데이터는 숫자, 불리언 등 상관이 없다. + 배열은 만든 뒤 호출할 수 있어야 하기에, 변수를 사용해준다. 이게 배열 생성 방법.
console.log(arr[1]); //읽는 방법, 배열 안에 있는 데이터를 호출할 때는 []를 똑같이 써주며, 이때 호출하고 싶은 데이터가 'b'라면 0부터 카운트되기 때문에 '1'을 입력해주면 된다.
console.log(arr[3]); //d 출력
arr[2]=3; // 2번째 자리에 있는 c값을 3으로 변경해주는 것. 이렇게 수정해주면 된다.
console.log(arr); //전체 배열 출력
console.log(arr.length); //배열 안의 값이 몇 개인지 알아내는 코드. length를 활용한다.

+ 배열을 원하는 위치에 추가하고 제거하는 함수들 모음

  • 추가 (add)
  • push
var arr=['a', 'b', 'c', 'd'];
arr.push('e'); //push를 이용해 배열 끝에 e값을 추가하기.
console.log(arr); //끝에 e가 추가된 것을 볼 수 있다.
  • unshift
var arr=['a', 'b', 'c', 'd'];
arr.unshift('1'); //unshift를 이용해 맨 앞에 1값을 추가하기.
console.log(arr); //앞에 1이 추가된 것을 볼 수 있다.
  • 삭제, 제거 (remove)
  • pop
var arr=['a', 'b', 'c', 'd'];
arr.pop(); //pop을 이용해 맨 끝의 d를 제거하기.
console.log(arr); //d가 사라진 것을 볼 수 있다.
  • shift
var arr=['a', 'b', 'c', 'd'];
arr.shift(); //shift를 이용해 맨 앞의 a를 제거하기.
console.log(arr); //a가 사라진 것을 볼 수 있다.
  • splice - 추가 및 제거 (둘 다 가능) / 문법: .splice(위치, 삭제 건수(추가할 경우는 0으로, 제거할 거면 몇 개를 제거할 것인지를 적으면 됨), 요소(넣고 싶은 데이터값을 입력, 여러개 가능));
var arr=['a', 'b', 'c', 'd'];
arr.splice(1, 0, '1', '2'); //splice는 splice(위치, 삭제 건수(추가할 경우 0으로 표기), 요소(~))의 문법으로 적으면 된다.
console.log(arr);//1의 위치에 1,2가 추가된 것을 볼 수 있다.  이때 한 개만 추가할 수도, 여러개를 추가할 수도 있다.
var arr=['a', 'b', 'c', 'd'];
arr.splice(1, 2,); //위치에 1번과 삭제 건수 2건을 적음으로, 1번째 칸의 2개 배열인 b,c를 제거하기.
console.log(arr); // b,c가 삭제된 것을 볼 수 있다. [출력값: a, d]

13. 배열과 반복문 (array & loop)

  • 배열에 반복문을 사용하기 [정적]
var num = [1,400,12,34,5];
var i=0; // 반복문 전에 초기화 해주기
while(i<5){ // 숫자가 5개 있으니 5개 미만으로 설정, 하지만 이는 정적으로 작성한 것이기 때문에 앞선 배열 뒤에 추가를 해도 출력되지 않고, 제거된 부분이 있어도 undefined로 출력된다.
    console.log(num[i]);
    i=i+1;
} //배열 5개 정상 출력.
  • 위 코드를 동적이게 수정한 것
var num = [1,12,34,505];
var i=0;
while(i<num.length){ //이렇게 범위를 정하면 위의 코드와 다르게 추가 및 제거에 따라 동적이게 처리할 수 있다.
    console.log(num[i]);
    i=i+1;
} // 정상 출력 확인.
  • 배열에 반복문을 사용하여 간편하게 출력
var num = [1,12,34,505];
var i=0;
var total =0; //초기화
while(i<num.length){
    total=total+num[i];
    i=i+1;
}
console.log(`total: ${total}`); //총 값: 552가 나옴. 정상 출력

 

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

nodejs에서 동기와 비동기, callback, 패키지 매니저(pm2), html form, 글쓰기 ui 생성  (0) 2021.01.06
nodejs에서 파일 목록 알아내기, 글 목록 출력하기, 함수 문법  (0) 2021.01.05
nodejs에서 파일을 읽는 기능 정리, 자바 스크립트 중요 문법 3가지, 콘솔 입력값에 대해  (0) 2021.01.01
nodejs에서 template literals과 URL에 대해  (0) 2020.12.31
helloworld 입력과 자바 스크립트(javascript) 간단 문법 정리  (0) 2020.12.31
'Node.js' Related Articles more
Comments