웹풀사이클 데브코스 2주차

 

웹의 구조

클라이언트와 서버로 구성된다. 

말 그대로 클라이언트는 고객이고 서버에게 요청을 한다고 보면 된다. 

 

클라이언트: 서비스를 이용하는 컴퓨터
서버: 서비스를 제공하는 컴퓨터

 

서버와 웹 브라우저는 어떻게 통신할까? 프로토콜을 통해 통신한다.

프로토콜은 서로 정보를 주고 받을 때 지켜야할 약속이며 서로 약속을 지며 통신해야한다.

 

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP를 사용하여 데이터를 주고받는다.

 

백엔드의 구조

클라이언트 ⇿ 웹서버 ⇿ 웹 어플리케이션 서버 ⇿ 데이터베이스

 

웹 서버 : 정적 페이지에 대해 대응

동적 페이지에 대한 처리는 직접 하지 않고, 웹 어플리케이션 서버에게 전달.

즉, 상호작용을 하지 않는다.

 

웹 어플리케이션 서버 : 동적페이지를 처리한다. 필요한 데이터 연산을 위해 데이터베이스와 연결되어있으며 조회/수정/삭제에 대한 처리를 요청

 

node.js

 

스크립트 언어이기만 했던 js가 node.js플랫폼을 통해서 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼

let http = require("http");//http 모듈을 사용할 수 있도록 해주는 require


function onRequest(request, response) {
	response.writeHead(200,{'Content-Type' : 'text/html'});
    response.write('hello world'); //body 부분
	response.end();
}
http.createServer(onRequest).listen(8888); //port번호 8888

http란?

HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜

HTTP 메세지 - request

HTTP 메세지 - response

• HTTP 프로토콜의 버전
• 요청의 성공 여부와, 그 이유를 나타내는 상태 코드
• 아무런 영향력이 없는, 상태 코드의 짧은 설명을 나타내는 상태 메시지
•  HTTP 헤더들
• 선택 사항으로 가져온 리소스가 포함되는 본문

아래를 확인하면 더 다양한 상태코드를 확인할 수 있다.

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드 - HTTP | MDN

 

 

데이터베이스란(DB)?

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스라고 한다.

데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 한다.

 

DBMS란?

데이터베이스를 운영하고 관리하기 위한 DBMS를 통해 데이터베이스를 사용한다. 즉, 데이터베이스를 관리하고 운영하는 소프트웨어를 DBMS(Database Management System)

 

다양한 브랜드가 있다. ex) oracle, Mysql, mariaDB

궁금해서 찾아본 DBMS 사용 랭킹

SQL

SQL은 데이터 베이스에 연산을 요청하기 위해 사용되는 언어로 데이터를 생성, 조회, 수정, 삭제 등과 같은 기능을 수행할 수 있습니다.

 

데이터 삽입: INSERT

데이터 선택: SELECT

데이터 수정: UPDATE

데이터 삭제: DELETE

 

 

DOCKER

도커는 리눅스의 응용 프로그램들을 프로세스 격리 기술들을 사용해 컨테이너로 실행하고 관리하는 오픈 소스 프로젝트이다.  도커 웹 페이지의 기능을 인용하면 다음과 같다: 도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다

 

 

host operating system: 운영체제

원래는 운영체제와 호환하며 설치를 하는데 그 위에 docker를 한겹 깐다.

docker는 컨테이너를 가지고 다님. 컨테이너 안에 설치를 한다. =>  os가 빠르고 가벼워짐, 어플리케이션도 독립적으로 유연하게 움직일 수 있다.

 

 

 

mairadb 접속하기 

docker exec -it mariadb /bin/bash

• mariadb라는 컨테이너
• mariadb안에 모든 환경을 구축해 놓은 것, 사용할 준비가 되어있음

 

mariadb -u root -p

• mariadb컨테이너를 실행시켜달라는 명령어
• user 이름은 root, password는 ? 이라는 명령어

위에서 MYSQL_ROOT_PASSWORD에 설정해주었던 비밀번호 root를 입력하면 된다.

 

아래처럼 나오면 실행이 된 것이다.

 

다음에 접속할 때는

 

docker exec -it mariadb /bin/bash

mariadb -u root -p

 

SQL : CREATE - 데이터베이스, TABLE 생성

 

• 방 확인: SHOW DATABASES;
• 방 만들기: CREATE DATABASE Tennis
• 방 들어가기: USE Tennis

 

DataBases를 보여준다. 처음 상태이다.

Tennis라는 데이터베이스 생성 후 확인해보기

 

Tennis 데이터베이스로 이동

=> INSERT - 테이블에 데이터 생성

 

데이터 테이블 조회: SELECT 컬럼명 FROM 테이블명

테이블 데이터 삽입: INSERT 칼럼명1,컬럼명2,.. INTO 테이블명 VALUE()

 

 

 

조건 붙이기 where

 

 

 

SQL : UPDATE- 데이터 수정

데이터 수정하기: UPDATE 테이블명 SET 컬럼명 = 수정할 값 WHERE 조건;

 

id가 bsu0404인 행의 pwd가 zzzz로 바뀌는 것을 볼 수 있다.

 

where를 쓰지 않고 update하는 경우

모든 행의 pwd가 1234로 바뀐 것을 확인할 수 있다.

SQL: DELETE - 데이터 삭제

테이블 데이터 삭제: DELETE FROM 테이블명 WHERE 조건;

삭제된 것을 볼 수 있다.

 

where가 없이 delete하는 경우

모든 행이 삭제된다.

 

서버 연결하기

• 현재 router에서 길 정해주기 : Request의 url에 따라 루트를 정해준다. requestHandler파일의 handle을 호출해 줌.
• server에서 서버 열어주기 : Request 받기
• index에서 server호출, router 넘겨주기

 

 

메인 페이지일 때 main.html를 보여줘보자

 

const fs = require("fs"); //file sync약자

const main_view = fs.readFileSync("./main.html", "utf-8");

 

function main(response) {

  response.writeHead(200, { "Content-Type": "text/html" });

  response.write(main_view);

  response.end();

}

 

response.write(main_view);

이 부분을 통해 main일 때 main.html을 보여준다.

 

하지만 확인해보면 img를 url로 읽으며 보여주지 못하고 있다. 

 

하지만 다음을 추가하여 이미지를 읽어올 수 있다.

function redRacket(response) {

  fs.readFile(".img/redRacket.png", function (err, data) {

    response.writeHead(200, { "Content-Type": "text/html" });

    response.write(data);

    response.end();

  });

}

function blueRacket(response) {

  fs.readFile(".img/blueRacket.png", function (err, data) {

    response.writeHead(200, { "Content-Type": "text/html" });

    response.write(data);

    response.end();

  });

}

function blackRacket(response) {

  fs.readFile(".img/blackRacket.png", function (err, data) {

    response.writeHead(200, { "Content-Type": "text/html" });

    response.write(data);

    response.end();

  });

}

let handle = {};

handle["/"] = main;

handle["/img/redRacket.png"] = redRacket;

handle["/img/blueRacket.png"] = blueRacket;

handle["/img/blackRacket.png"] = blackRacket;

requestHandler 전체코드 

더보기

 

클릭하면 url로 파라미터를 보내고 데이터베이스에 변화를 줘보자!

 

main.html의 버튼으로 경로, 쿼리데이터 지정

<input
          class="card_button"
          type="button"
          value="order"
          onclick="location.href='/order?productId=1'"
        />

 

server.js에서 queryData 추출

function start(route, handle) {
  function onRequest(request, response) {
    if (!request.url.includes("favicon.ico")) {
      let pathName = url.parse(request.url).pathname;
      let queryData = url.parse(request.url, true).query;
      route(pathName, handle, response, queryData.productId);
    }
  }
  http.createServer(onRequest).listen(8888);
}

let queryData = url.parse(request.url, true).query;

이 쿼리 데이타에서 productId를 뽑아서 넘겨준다. queryData.productId

 

requestHandler.js에서 쿼리데이터에 따라 테이블에 추가하기

function order(response, productId) {
  mariadb.query(
    "INSERT INTO orderlist VALUES(" +
      productId +
      ", '" +
      new Date().toLocaleDateString() +
      "');",
    function (err, rows) {
      console.log(rows);
    }
  );

  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("Order Page");
  response.end();
}



handle["/order"] = order;

 

받아온 데이터를 뿌려보기

 

main.js에서 경로 설정

<a href="./orderList">order list</a>

 

requestHandler.js에서 데이터를 받아오고 화면에 보여주기

const fs = require("fs"); //file sync약자
const orderlist_view = fs.readFileSync("./orderList.html", "utf-8");

const mariadb = require("./database/connect/mariadb");

function orderlist(response, productId) {
  mariadb.query("SELECT * FROM orderlist", function (err, rows) {
    response.writeHead(200, { "Content-Type": "text/html" });

    rows.forEach((element) => {
      response.write(
        "<tr>" +
          "<td>" +
          element.product_id +
          "<td>" +
          "<td>" +
          element.order_date +
          "<td>" +
          "</tr>"
      );
    });
    response.write("</table>");
    response.end();
  });
}

handle["/orderList"] = orderlist;

 

메인 화면

 

주문시

 

 

주문내역