• isolation : 여러 transaction들이 동시에 실행될 때도 혼자 실행되는 것처럼 동작하게 만든다. https://velog.io/@yu_ri_son/Database-Transaction-ACID

Dirty read

• commit 되지 않은 변화를 읽음

Non-repeatable read (Fuzzy read)

• 같은 데이터의 값이 달라짐

Phantom read

• 없던 데이터가 생김

이상 현상들이 모두 발생하지 않게 만들 수 있지만, 제약 사항이 많아져서 동시 처리 가능한 트랜잭션 수가 줄어든다. => 결국 DB의 전체 처리량(throughput)이 하락하게 된다.

⬇️

일부 이상 현상은 허용하는 몇 가지 level을 만들어서 사용자가 필요에 따라 적절하게 선택할 수 있도록 하자!

⬇️

Isolation Level

• Serializable : 위 세 가지 현상 뿐만 아니라 아예 이상한 현상 자체가 발생하지 않는 level을 의미한다.

애플리케이션 설계자는 isolation level을 통해 전체 처리량(throughput)과 데이터 일관성 사이에서 어느 정도 거래(trade)를 할 수 있다.

standard SQL 92에서 정의한 isolation level의 비판 (논문: A Critique of ANSI SQL Isolation Levels)

1. 세 가지 이상 현상의 정의가 모호하다.
2. 이상 현상은 세 가지 외에도 더 있다.
3. 상업적인 DBMS에서 사용하는 방법을 반영하여 isolation level을 구분하지 않았다.

Dirty write

• commit 안 된 데이터를 write 함
• rollback 시 정상적인 recovery는 매우 중요하기 때문에 모든 isolation level에서 dirty write를 허용하면 안 된다!

Dirty read (+)

• abort가 발생하지 않아도 dirty read가 될 수 있다.

Phantom read (+)

• 같은 조건을 두 번 읽는 경우가 아니더라도, 서로 연관된 데이터가 있는 경우에도 발생할 수 있다.

Lost update

• 업데이트를 덮어 씀

Read skew

• inconsistent한 데이터 읽기

Write skew

• inconsistent한 데이터 쓰기

Snapshot Isolation

• concurrency control이 어떻게 동작할 지, 그 구현을 바탕으로 정의됨
• Type of MVCC(Multi Version Concurrency Control)
• 트랜잭션 시작 전에 commit된 데이터만 보임
• First-committer win!

실무에서의 isolation level

• 주요 RDBMS(MySQL, ORACLE, PostgreSQL, SQL Server)는 SQL 표준에 기반해서 isolation level을 정의한다.
• RDBMS마다 제공하는 isolation level이 다르다.
• 같은 이름의 isolation level이라도 동작 방식이 다를 수 있다.
• 사용하는 RDBMS의 isolation level을 잘 파악해서 적절한 isolation level을 사용할 수 있도록 해야 한다.

• 스케쥴 내에서 commit된 트랜잭션이, rollback된 트랜잭션이 write했던 데이터를 읽은 경우
• rollback을 해도 이전 상태로 회복 불가능할 수 있기 때문에 이런 스케쥴은 DBMS가 허용하면 안 된다.

Recoverable schedule

• 스케쥴 내에서 그 어떤 트랜잭션도 자신이 읽은 데이터를 write한 트랜잭션(의존하고 있는 트랜잭션)이 먼저 commit/rollback 되기 전까지는 commit하지 않는다.
• rollback할 때 이전 상태로 온전히 돌아갈 수 있기 때문에 DBMS는 이런 스케쥴만 허용해야 한다.

Cascading rollback

• 하나의 트랜잭션이 rollback하면 의존성이 있는 다른 트랜잭션도 rollback해야 한다.
• 여러 트랜잭션의 rollback이 연쇄적으로 일어나면 처리하는 비용이 많이 든다.

⬇️

데이터를 write한 트랜잭션이 commit/rollback한 뒤에 데이터를 읽는 스케쥴만 허용하자!

⬇️

Cascadeless schedule

• (avoid cascading rollback)
• 스케쥴 내에서 어떤 트랜잭션도 commit되지 않은 트랜잭션들이 write한 데이터는 읽지 않는 경우

⬇️

Strict schedule

• 스케쥴 내에서 어떤 트랜잭션도 commit되지 않은 트랜잭션들이 write한 데이터는 쓰지도, 읽지도 않는 경우
• rollback할 때 recovery가 쉽다. 트랜잭션 이전 상태로 돌려놓기만 하면 된다.

Concurrency control makes any schedule serializable

➡️ 코드 간소화 적용

Schedule

• 여러 트랜잭션들이 동시에 실행될 때 각 트랜잭션에 속한 operation들의 실행 순서
• 각 트랜잭션 내의 operation들의 순서는 바뀌지 않는다.

Serial schedule

• 트랜잭션들이 겹치지 않고 한 번에 하나씩 실행되는 스케쥴
• 한 번에 하나의 트랜잭션만 순차적으로 실행되므로 좋은 성능을 낼 수 없어 현실적으로 사용할 수 없는 방식

Nonserial schedule

• 트랜잭션들이 겹쳐서(interleaving) 실행되는 스케쥴
• 트랜잭션들이 겹쳐서 실행되므로 동시성이 높아져서 같은 시간 동안 더 많은 트랜잭션들을 처리할 수 있다.
• 단점! : 트랜잭션들이 어떤 형태로 겹쳐서 실행되는지에 따라 이상한 결과를 초래할 수 있다. -> lost update

Conflict ( of two operations)

1. 서로 다른 트랜잭션 소속
2. 같은 데이터에 접근
3. 최소 하나는 write operation

• 세 가지 조건을 모두 만족하면 conflict이다.
• read-write conflict, write-write conflict ...
• conflict operation은 순서가 바뀌면 결과도 바뀐다.

conflict equivalent ( for two schedules)

1. 두 스케쥴은 같은 트랙잭션들을 가진다.
2. 어떤(any) conflicting operations의 순서도 양쪽 스케쥴 모두 동일하다.

• 두 조건 모두 만족하면 conflict equivalent
• Conflict Serializable : serial schedule과 conflict equivalent일 때

고민 : 성능 때문에 여러 트랜잭션들을 겹쳐서 실행할 수 있으면 좋다. 하지만 이상한 결과가 나오는 것은 싫다! 해결책 : conflict serializable한 nonserial schedule을 허용하자! 구현 : 여러 트랜잭션을 동시에 실행해도 스케쥴이 conflict serializable하도록 보장하는 프로토콜을 적용한다.

<?php
$conn = mysqli_connect("localhost", "root", "111111");
mysqli_select_db($conn, "database_name");
$result = mysqli_query($conn, "SELECT * FROM table_name");
?>

개선 코드

<?php
require("config/config.php");
require("lib/db.php");
$conn = db_init($config["host"], config["duser"], config["dpw"], config["dname"]);
$result = mysqli_query($conn, "SELECT * FROM <table_name>");
?>

• db.php

  <?php
  function db_init($host, $duser, $dpw, $dname) {
  ㅤㅤ$conn = mysqpli_connect($host, $duser, $dpw);
  ㅤㅤmysqli_select_db($conn, $dname);
  ㅤㅤreturn $conn;
  }
  ?>

• config.php

  <?php
  $config = array(
  ㅤㅤ"host"=>"localhost",
  ㅤㅤ"duser"=>"root",
  ㅤㅤ"dpw"=>"111111",
  ㅤㅤ"dname"=>"<db_name>"
  );
  ?>

<?php
$conn = mysqli_connect("localhost", "root", "111111");
mysqli_select_db($conn, "database_name");
$result = mysqli_query($conn, "SELECT * FROM table_name");
?>

• write.php

  <?php
  $conn = mysqli_connect("localhost", "root", "111111");
  mysqli_select_db($conn, "database_name");
  $result = mysqli_query($conn, "SELECT * FROM table_name");
  ?>
  

• process.php

  <?php
    $conn = mysqli_connect("localhost", "root", "111111");
    mysqli_select_db($conn, "database_name");
    $sql = "INSERT INTO table_name (title, description, author, created) VALUES ('".$_POST['title']."', '".$_POST['description']."', '".$_POST['author']."', '".now())";
    $result = mysqli_query($conn, $sql);
    header('Location: http://localhost/index.php');
  ?>

• 3.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form action="http://localhost/project_php/3.php" method="POST">
      <p>
        <label for="text">제목 : </label>
        <input type="text" id="text" name="title" />
      </p>
      <p>
        <label for="main_text">본문 : </label>
        <textarea
          name=""
          id="main_text"
          cols="30"
          rows="5"
          name="description"
        ></textarea>
      </p>
      <input type="submit" />
    </form>
  </body>
  </html>
  

- 3.php

```

<?php
$conn = mysqli_connect("localhost", "root", "111111");
mysqli_select_db($conn, "database_name");
$result = mysqli_query($conn, "SELECT * FROM table_name");
while ($row = mysqli_fetch_assoc($result)) {
  echo $row['id'];
  echo $row['title'];
  echo $row['author'];
  echo "<br />";
}
?>

완성 코드↓

<?php
$conn = mysqli_connect("localhost", "root", "111111");
mysqli_select_db($conn, "database_name");
$result = mysqli_query($conn, "SELECT * FROM table_name");
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="http://localhost/project_php/style.css" />
  <title>PHP Project</title>
</head>

<body id="target">
  <header>
    <h1>
      <a href="http://localhost/project_php/index.php">JavaScript</a>
    </h1>
  </header>
  <nav>
    <ul>
      <?php
      while ($row = mysqli_fetch_assoc($result)) {
        echo "<li><a href='http://localhost/index.php?id=" . $row['id'] . "'>" . $row['title'] . "</a></li>" . "\n";
      }
      ?>
    </ul>
  </nav>
  <div>
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'" />
  </div>
  <article>
    <?php
    if (empty($_GET['id']) == false) {
      echo file_get_contents($_GET['id'] . ".txt");
    }
    ?>
  </article>
</body>

</html>

-index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Index</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
  </body>
</html>

-page1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - History</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Creation at Netscape</h2>
      <ul>
        <li>
          The first popular web browser with a graphical user interface, Mosaic,
          was released in 1993. Accessible to non-technical people, it played a
          prominent role in the rapid growth of the nascent World Wide Web.[11]
          The lead developers of Mosaic then founded the Netscape corporation,
          which released a more polished browser, Netscape Navigator, in 1994.
          This quickly became the most-used.
        </li>
        <li>
          During these formative years of the Web, web pages could only be
          static, lacking the capability for dynamic behavior after the page was
          loaded in the browser. There was a desire in the flourishing web
          development scene to remove this limitation, so in 1995, Netscape
          decided to add a scripting language to Navigator. They pursued two
          routes to achieve this: collaborating with Sun Microsystems to embed
          the Java programming language, while also hiring Brendan Eich to embed
          the Scheme language.
        </li>
        <li>
          Netscape management soon decided that the best option was for Eich to
          devise a new language, with syntax similar to Java and less like
          Scheme or other extant scripting languages.[5][6] Although the new
          language and its interpreter implementation were called LiveScript
          when first shipped as part of a Navigator beta in September 1995, the
          name was changed to JavaScript for the official release in December.
        </li>
        <li>
          The choice of the JavaScript name has caused confusion, implying that
          it is directly related to Java. At the time, the dot-com boom had
          begun and Java was the hot new language, so Eich considered the
          JavaScript name a marketing ploy by Netscape.
        </li>
      </ul>
    </article>
  </body>
</html>

-page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Features</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Features</h2>
      <p>
        JavaScript supports much of the structured programming syntax from C
        (e.g., if statements, while loops, switch statements, do while loops,
        etc.). One partial exception is scoping: originally JavaScript only had
        function scoping with var; block scoping was added in ECMAScript 2015
        with the keywords let and const. Like C, JavaScript makes a distinction
        between expressions and statements. One syntactic difference from C is
        automatic semicolon insertion, which allow semicolons (which terminate
        statements) to be omitted.
      </p>
    </article>
  </body>
</html>

-page3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Security</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Security</h2>
      <p>
        JavaScript and the DOM provide the potential for malicious authors to
        deliver scripts to run on a client computer via the Web. Browser authors
        minimize this risk using two restrictions. First, scripts run in a
        sandbox in which they can only perform Web-related actions, not
        general-purpose programming tasks like creating files. Second, scripts
        are constrained by the same-origin policy: scripts from one Web site do
        not have access to information such as usernames, passwords, or cookies
        sent to another site. Most JavaScript-related security bugs are breaches
        of either the same origin policy or the sandbox. There are subsets of
        general JavaScript—ADsafe, Secure ECMAScript (SES)—that provide greater
        levels of security, especially on code created by third parties (such as
        advertisements).[78][79] Closure Toolkit is another project for safe
        embedding and isolation of third-party JavaScript and HTML.[80] Content
        Security Policy is the main intended method of ensuring that only
        trusted code is executed on a Web page.
      </p>
    </article>
  </body>
</html>

• php

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello world</title>
  </head>
  <body>
    <?php
    $result = (1 == 1);
    if ($result) {
        echo "참";
    } else {
        echo "거짓";
    }
    $list = array("one", "two", "three");
    echo $list[2];
    echo count($list);
    ?>
    <ol>
        <?php
        $i = 0;
        while ($i < 10) {
            echo "<li>hello world</li>";
            $i = $i + 1;
        }
        ?>
    </ol>
    <ul>
        <?php
        $list2 = array("one", "two", "three");
        $j = 0;
        while ($j < count($list2)) {
            echo "<li>" . $list2[$j] . "</li>";
            $j = $j + 1;
        }
        ?>
    </ul>
  </body>
  </html>

• Javascript

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello world</title>
  </head>
  <body>
    <script>
      result = 1 == 1;
      if (result) {
        document.write("참");
      } else {
        document.write("거짓");
      }
      list = new Array("one", "two", "three");
      document.write(list[2]);
      document.write(list.length);
    </script>
    <ol>
      <script>
        j = 0;
        while (j < 10) {
          document.write("<li>hello world</li>");
          j = j + 1;
        }
      </script>
    </ol>
    <ul>
      <script>
        list2 = new Array("one", "two", "three");
        j = 0;
        while (j < list2.length) {
          document.write("<li>" + list[j] + "</li>");
          j = j + 1;
        }
      </script>
    </ul>
  </body>
  </html>

간단한 로그인 기능 구현하기

• php

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello world</title>
  </head>
  <body>
    <?php
        $pwd = $_GET["pwd"];
        if($pwd == 1111){
            echo "안녕하세요.";
        } else {
            echo "다시 입력해주세요.";
        }
    ?>
  </body>
  </html>

• Javascript

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello world</title>
  </head>
  <body>
    <script>
        pwd = prompt("비밀번호를 입력하세요.");
        if(pwd == 1111){
            document.write("안녕하세요.");
        } else {
            document.write("다시 입력해주세요.");
        }
    </script>
  </body>
  </html>

함수

• php

  <!DOCTYPE html>
  <html lang="en">
  

• Javascript

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello world</title>
  </head>
  <body>
    <script>
      function hello() {
        document.write("Hello!!!");
      }
      hello();
      function add(a, b) {
        document.write(a + b);
      }
      add(2, 5);
    </script>
  </body>
  </html>

• 크롬 - 자바스크립트 콘솔
• Bitnami 폴더 --- apache2 - logs - error.log

문자와 숫자 / 변수 / 비교

• php

  <?php
    $name = "sonyuri";
  ?>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello world</title>
  </head>
  <body>
    <?php 
        echo "10"+"10"; // 20
        echo "10"."10"; // 1010
        echo "Hi, ".$name;
        var_dump(1==1);
    ?>
  </body>
  </html>

• Javascript

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello world</title>
  </head>
  <body>
    <script>
        document.write("10"+"10");  // 1010
        name = "sonyuri";
        document.write("Hi, " + name);
        document.write(1==1);
    </script>
  </body>
  </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
    <h1>php</h1>
    <?php 
        echo "Hello world";
    ?>
</body>
</html>

Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
    <h1>Javascript</h1>
    <script>
        document.write("Hello world");
    </script>
</body>
</html>

• php ---> Server side Language Javascript ---> Client side Language

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <style>
        h1,h2 {
            color:red;
            font-size:10px
        }
        h2 {
            text-decoration:underline;
            border:1px solid red;
        }
        #selected {
            border:red 1px dotted;
            padding:30px;
            margin:10px;
        }
        img {
            float:left;
        }
    </style>
</head>
<body>
    <h1> 대제목 </h1>
    <h2> 중제목 </h2>
    <h3> 소제목 </h3>
    <ul>
        <li> ~ </li>
        <li id="selected"> ~ </li>
        <li> ~ </li>
    </ul>
    <img src=" ~ " />
    ~ 내용 ~
</body>
</html>

Box model

• border / padding / margin / height / width

Designing HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title> 타이틀 </title>
    <style>
        header {
            border-bottom:1px solid gray;
            padding:20px;
        }
        nav {
            border-right:1px solid gray;
            width:200px;
            height:600px;
            float:left;
        }
        nav ol {
            list-style:none;
        }
        article {
            float:left;
            padding:20px;
        }
    </style>
</head>
<body>
    <header>
        <h1> 대제목 </h1>
    </header>
    <nav>
      <ol>
          <li><a href=" ~ link ~ "> ~ </a></li>
          <li> ~ </li>
          <li> ~ </li>
      </ol>
    </nav>
    <article>
        <h2> 소제목 </h2>
        <ul>
            <li> ~ </li>
            <li> ~ </li>
            <li> ~ </li>
        </ul>
    </article>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title> 타이틀 </title>
</head>
<body>
    <header>
        <h1> 대제목 </h1>
    </header>
    <nav>
      <ol>
          <li><a href=" ~ link ~ "> ~ </a></li>
          <li> ~ </li>
          <li> ~ </li>
      </ol>
    </nav>
    <article>
        <h2> 소제목 </h2>
        <ul>
            <li> ~ </li>
            <li> ~ </li>
            <li> ~ </li>
        </ul>
    </article>
</body>
</html>

• "Semantic Web" ---> header / nav / article

• 웹 어플리케이션을 만드는 순서 : { 구상 -> 기획(계획) -> 디자인 && 개발 -> 테스트 } 의 반복
• 작은 것부터 시작하라
• 복잡도와 경우의 수 - '지수폭발'!

기획

• UI(사용자가 시스템을 제어하는 조작 장치) 모델링(사용자의 입장에서 동작하는 기능을 가상으로 만들어 보는 것)
• 모델링 도구 : 손그림, 펜슬(http://pencil.evolus.vn/), 발사믹(https://balsamiq.com), 파워포인트

인터넷과 웹

• 인터넷과 웹의 관계 : 도시-집, 도로망-대중교통

• 1960년대 인터넷의 등장

• 1990년대 웹의 등장(팀 버너스 리)

• 웹브라우저 <-------> 웹서버

• 통신 규약 HTTP, 실제 웹페이지의 정보를 담은 언어 HTML

서버와 클라이언트

• 서버 <--------> 클라이언트

• 웹서버 <------> 웹브라우저

• 요청 <--------------> 응답

• BITNAMI 윈도우 : https://bitnami.com/stack/wamp 맥 : https://bitnami.com/stack/mamp 리눅스 : https://bitnami.com/stack/lamp