6주차 정리

22-1학기/WINS_모의해킹

6주차 정리

road23 2022. 7. 13. 19:01

Node.Js 1~14.boolean

1. 수업소개

1990년 웹이 처음 등장하면서 인류는 정보를 웹페이지로 표현할 수 있게 되었고 인터넷을 통해서 웹페이지를 전송할 수 있게 되었다.

웹페이지의 html의 구조를 바꾸려면 많은 노력이 필요하고, 수동으로 바꾸는 게 힘들기 때문에 귀찮고 반복되는 html의 작성 작업을 기계에게 시키기 위해 server side application을 만들었다.

2. 수업의 목적

목록을 숫자가 아니라 숫자가 없는 목록으로 만들기 위한 코드를 작성하기

<ul>태그를 <ol>태그로 바꾸는데 만약 웹페이지가 1억개라면, 1억번 수정해야 한다. 이렇게 비효율적인 상황에서 구원해 줄 수 있는 도구가 바로 nodejs이다.

자바스크립트를 이용하고 있는 nodejs를 이용해서 우리의 웹사이트에 방문하는 사용자에게 컨텐츠에 대한 읽기, 쓰기, 수정, 삭제의 4 가지의 작업을 웹을 통해서 할 수 있도록 제공한다.

3. 설치

웹브라우저 위에서 돌아가는 웹사이트 또는 웹페이지 또는 웹애플리케이션을 만들기 위해 html이라고 하는 컴퓨터 언어의 문법에 따라서 호출함으로써 웹애플리케이션을 만들게 되는 것이다. nodejs도 마찬가지이다.

nodejs 런타임을 운영체제에 설치해야 한다.

3.1. 설치(Windows)

윈도우키 + R키 누르기 : 창이 뜨는데 그 창에 cmd 입력하기(터미널 콘솔)

cmd를 입력하면 터미널 콘솔 창이 뜬다.

뜨는 창에 node -v를 입력했을 때 아래와 같이 v~라고 출력되면 node.js 설치에 성공한 것이다.

창에 node라고만 입력하고 엔터를 치면 아래와 같이 '>'처럼 생긴 화면이 뜨는데, 여기에서 우리는 자바스크립트라는 문법을 이용해서 nodejs가 갖고 있는 기능을 확인할 수 있다.

> console.log(1+1);

을 입력했을 때 숫자 2가 뜨면 성공적으로 실행이 된 것이다.

여기서 나갈 때는 Ctrl+C를 두 번 누르거나(컨트롤키를 누른 상태로 c를 두 번 누르기) .exit을 누르면 나각게 된다.

바탕화면에 새로 만든 nodejs파일을 atom을 이용해서 add project file로 만든다.

그리고 nodejs에 helloworld.js파일을 만들고, console.log(1+1);을 입력한다.

어떤 작업을 할 때마다 직접 타이핑하는 것은 어려운 일이다. 따라서 자주 사용되는 작업은 위의 화면처럼 파일에다가 코드를 작성해놓고 nodejs한테 저 파일을 실행하라고 명령하는 방법을 살펴볼 것이다.

현재자신이 머물고 있는 디렉토리가 "현재 머물고 있는 파일"이라는 의미이다. 또, 입력하는 명령이 현재 이 디렉토리에 있는 파일과 디렉토리들을 대상으로 실행될 것이라는 의미이다.

cd C:\Users\lin19\Desktop\nodejs명령어를 입력한다. 명령어를 복사 붙여넣기할 때는 오른쪽 마우스를 누르면, 붙여넣기가 된다. 이 명령어를 입력하면 C:\Users\lin19\Desktop\nodejs로 이동하게 된다.

dir을 입력해서 현재 디렉토리에 존재하는 파일들을 출력할 수 있다.

그러면 helloworld.js파일을 볼 수 있다.

여기서 node helloworld.js라고 명령어를 입력하면, 위의 사진처럼 숫자 2가 뜨면 잘 실행한 것이다.

즉, 앞으로는 이렇게 "cmd"창에서 cd C:\Users\lin19\Desktop\nodejs 명령어를 입력해서 C:\Users\lin19\Desktop\nodejs로 이동한 다음에 "node 파일이름.js"를 입력해서 파일을 실행할 것이다.

4. 공부방법

nodejs로 만든 웹애플리케이션을 만드는 게 목표이다.

그러기 위해선 nodejs가 갖고 있는 기능을 실행시켜야 한다.

그리고 nodejs 기능을 실행하기 위한 조작 장치는 자바스크립트라는 컴퓨터 언어이다.

5. node.js로 웹서버 만들기

웹브라우저가 있고 웹서버가 있으면 웹브라우저에 주소를 입력해서 요청을 하면 웹서버는 그 요청에 따른 정보를 찾아서 응답해주는 관계에 있다.

https://github.com/web-n/web1_html_internet에서 소스코드 다운받기

cmd창에 "cd C:\Users\lin19\Desktop\web2-nodejs"명령어를 입력해서 C:\Users\lin19\Desktop\web2-nodejs 디렉토리로

이동한 다음에 "node main.js" 명령어로 main.js 파일을 실행시킨다. 그러면 아래 사진에서처럼 아무것도 안 뜨는데

크롬에다가 "localhost:3000"을 입력하면 아래 사진처럼 홈페이지가 나오는데, 이렇게 되면 잘된것이다.

cmd 창에 Ctrl+c키를 누른 후에 홈페이지를 다시 접속해보면 아래 사진처럼 접속이 안되는 것을 알 수 있다.

즉, nodejs가 현재 웹서버로서 동작하고 있다.

"프로그래밍적으로 사용자에게 전송할 데이터를 생성한다" nodejs가 갖고 있는 힘이다.

6.1. JacaScript 문법 - Number Data type

컴퓨터를 사용하는 가장 중요한 이유 : 데이터를 어떻게 처리할 것인가

-> 어떠한 데이터가 있고, 각각의 데이터는 어떻게 처리하는가가 가장 중요하다.

자바스크립트가 지원하는 데이터 타입의 종류 : Number, String, Boolean, Array, Object....

web2-nodejs폴더에 syntax라는 폴더 만들기

cmd창에 2가 나오면 정상적으로 처리가 된 것이다.

6.2. JavaScript 문법 - String

' '따옴표로 묶어주면 문자열을 더한다는 의미

이항연산자인 +의 양 옆에 ' ' 따옴표로 표시된 문자열이 입력되어 있으면, 자바스크립트는 +를 더하기라는 산술연산자가 아니라 문자와 문자를 더하는 결합연산자로 바꿔서 실행을 한다.

-> 어떤 데이터냐에 따라서 연산자가 바뀐다.

7.1. JavaScript 문법 - 변수의 형식

Variable : 변수

= : 대입연산자 , 오른쪽에 있는 값(상수)을 왼쪽에 있는 변수에 대입해서 변수의 값을 오른쪽의 값으로 만드는 연산자

대입연산자 왼쪽에는 항상 변수가 온다.

// : 주석, comment

변수를 만들 때는 앞에 'var'을 붙여주는 습관 만들기

ex) var a = 1;

a = 2;

-> 변수를 처음 선언할 때 var을 붙였으면 다음에 그 변수의 값을 수정할 때는 앞에 var을 붙이지 않아도 됨

8. JavaScript 문법 - Template literals

Template literals(strings) : 자바스크립트에서 문자를 표현하는 편리한 방법

줄바꿈을 하는 경우에는 줄바꿈을 하려는 줄 끝에다가 역슬래쉬를(\) 해줘야 함.

-> 그런데 이 줄바꿈은 코드상에서 줄바꿈이 됐을 뿐 실제로 문자가 표현될 때는 줄바꿈이 없다.

그렇기 때문에 '\n\'을 해주면 줄바꿈이 표현되서 출력됨.

~키의 아래에 있는`(악센트)가 탬플릿 리터럴의 시작과 끝을 나타내는 기호이다.

-> 문자를 끊고 더하는 복잡한 기능 없이 ${변수 이름}을 써주면 그 위치에 변수가 출력되서 나오고, 괄호 안에서 변수 치환과 계산이 자유롭게 된다.

9. URL의 이해

자바스크립트를 이용해서 nodejs가 가지고 있는 기능을 호출하면 웹애플리케이션을 nodejs로 만들 수 있다.

우리가 웹페이지를 만들고 가져오는 정보들은 웹페이지에 있는 정적인 파일들을 가지고 있다.

웹페이지를 보면, ~.php는 같지만 뒤에 있는 숫자인 키의 값이 다른 것을 통해, 같은 파일이지만 키 캆을 다르게 만들어 클라이언트(웹브라우저)에게 서로 다른 페이지를 만들어 보내고 있다는 것을 확인할 수 있다.

URL의 형식

1. 프로토콜 통신 규칙(protocol) : 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인가에 대한 부분,

사용하는 통신 규칙을 맨 앞인 이 부분에 적는다.

http : hypertext transfer protocol, 웹브라우저와 웹서버가 서로 데이터를 주고 받기 위해서 만든 통신 규칙

ftp

2. 도메인 네임 (domain name, host) : 어떤 특정한 인터넷에 접속되어 있는 각각의 컴퓨터를 가리키는 주소

3. 포트 번호(port) : 한 대의 컴퓨터 안에 여러 대의 서버가 있을 수 있다. 그러면 클라이언트가 접속했을 때 많은 서버 중에 어떤 서버와 통신할 지가 애매하다. 그래서 해당 포트 번호와 연결된 서버와 통신하게 하도록 만들주 는 번호이다.

ex) main.js파일에서 app.listen(3000);명령어는 3000번 포트에 nodejs 웹서버를 실행시킨 것이다. 웹서버는 80번 포트를 사용하는데 이 사실은 전세계적으로 약속되어 있고, http를 통해서 접속한 것은 웹서버에 접속한 것을 의미한다. -> 기본값이 80임

4. path : 컴퓨터 안에 있는 어떤 디렉토리의 어떤 파일인지를 가리킨다.

5. query string : query string 값을 변경하면 웹서버에게 어떤 데이터를 전달할 수 있다. query string의 시작은 '?'로 하기로 약속되어 있다. 값과 값은 '&'를 쓰기로 약속되어 있다. 값의 이름과 값은 '='로 구분하도록 약속되어 있다.

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

본격적으로 웹애플리케이션 만들어보기

query string알아내는 법

url.parse(request.url, true).query;를 하면 쿼리 데이터가 나온다

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

쿼리스트링의 아이디 값인 코드를 복사해서 <title>태그에 ${}의 괄호 안에 붙여넣기한다. & ol태그를 ul태그로 바꾼다.

->쿼리스트링과 타이틀이 동적으로 바뀌는 것을 확인할 수 있다.

-> 웹애플리케이션에서 가장 중요한 부분인 정보를 동적으로 생성하는 것을 실행할 수 있음.

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

12. Node.js의 파일 읽기 기능

정보를 다루는 핵심적인 처리 방법

-Create

-Read

-Update

-Delete

기본적으로 제공하는 기능들을 그룹핑해놓은 각각의 그룹들이 모듈이다.

13. APP 제작 - 파일을 이용해 본문 구현

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

쿼리 스트링에 따라서 파일명이 변경된다.

이렇게 내용을 수정하면 노드js를 껐다 키지 않아도 리로드하면 바로 반영된다.

-> 페이지가 열릴 때마다 html파일의 내용을 읽어서 화면에 출력해주고 있기 때문이다.

14. JavaScript - Boolean

Boolean : 추상적인 제 3의 데이터 타입

Comparison operator : 비교연산자, Boolean을 활용하는 연산자

Conditional statement : 조건문

Boolean은 true와 false 두 가지로 이루어져 있는 데이터 타입이다.