브라우저에서 HTML, CSS를 동적으로 제어하기 위해 만들어진 언어

Node.js : 서버측에서 실행되는 JS

UI : User Interface

API : Application Programing Interface

코드의 형태를 띄고 있는 인터페이스. ex) alert Interface

복잡한 코드를 띄고 있음에도 불구하고 API를 통해 보다 간단한 개발이 가능하도록 해주는 인터페이스.

Document → DOM (Document Object Model) → Window 순으로 서칭 범위를 넓혀가며 필요한 기능 찾기

Index | Node.js v19.4.0 Documentation

언어 - JS

• typeof : 데이터형을 알려주는 기능 (like var_dump)

    alert(typeof "1");

• 일치연산자

    alert(1=='1'); // true
    alert(1==='1'); // false
    // ===같은 경우 값과 데이터형이 모두 정확히 일치해야 true를 반환한다.
    -------------------------------
    alert(0 === -0); // true
    alert(NaN === NaN); // false
    -------------------------------
    alert(1!=1); // false
    alert(1!==1); // false

• 0 : false / 나머지 : true

• 변수 선언시 var로 한다. & for와 while문 형식은 java와 동일

    var i = 1;
  
    for(var i = 0; i < 10; i++) {
        alert(i);
    }
  
    while(i < 10) {
        alert(i);
    i++;
    }

함수 선언1, 2 & 익명함수

// 함수 선언 방법 1
function numbering(start) {
    while(start < 10) {
        console.log(start);
        start++;
    }
    return 'successful';
}

// 함수 선언 방법 2
numbering = function() {
    while(start < 10) {
        console.log(start);
        start++;
    }
    return 'successful';
}

// 정의와 호출을 같이 하는 방식...이름이 필요 X -> 익명함수
// 1회성으로 작성할 때 사용하는 테크닉
(function() {
    while(start < 10) {
        console.log(start);
        start++;
    }
    return 'successful';
})();

배열

• 대괄호([])는 배열을 만드는 기호이다.

var id = ['1', '2', '3']

alert(id[0]);
alert(id[1]);
alert(id[2]);
---------------------------
// 배열에 원소 추가하기
id.push('4'); // 끝에 4 추가
id.concat(['5', '6']); // 끝에 5, 6 추가
id.unshift('0'); // 배열의 처음에 0 추가, 기존 값들의 색인(index)은 1씩 증가(shift)
id.splice(2,0,'1.5'); // 2번째 인덱스에 0개를 삭제한 후 1.5를 끼워넣는다.
---------------------------
id.pop(); // 맨 끝 원소 삭제
---------------------------
id.sort(); // 오름차순 정렬
id.reverse(); // 내림차순 정렬

객체(Object)

• 연관배열 or 맵 or 딕셔너리와 같다.

// 객체 선언 방법1
var grades = {'a' : 88, 'b' : 89, 'c' : 90};

// 객체 선언 방법2
var grades = {};
grades['a'] = 88;
grades['b'] = 89;
grades['c'] = 90;

//객체 선언 방법3
var grades = new Object();
grades['a'] = 88;
grades['b'] = 89;
grades['c'] = 90;

//객체 호출방법
alert(grades.a); // 88
alert(grades['a']); // 88

• 객체는 객체를, 함수를 담을 수도 있다.

var grades = {
    'list' : {'a' : 100, 'b' : 90, 'c' : 80}
    'show' : function() {
        alert('Hello world');
    }
    'this' : function() {
        alert(this); // this : 이 함수가 속해있는 객체를 가리키는 변수
    }
}

alert(grades['list']['a']); // 100
**alert(grades['show']); // function() { ~~ }
alert(grades['show']()); // Hello world**

var grades = {
    'list' : {'a' : 100, 'b' : 90, 'c' : 80}
    'show' : function() {
        for(var level in this.list) {
            console.log(level, this.list[level]);
        }
    }
}

모듈

<script src="greeting.js"> </script>

js파일을 따로 빼서 만듦으로서 유지보수에 적합하게 만든다. (모듈화)

• 모듈 → 라이브러리 (ex) JQuery

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

정규표현식

1. 컴파일
   1. 패턴(대상)을 찾는다.
2. 실행
   1. 추출 (exec), Test(test), 치환(replace) 등의 작업을 실행한다.

• 자바스크립트에서의 정규표현식

    // 정규표현식 표현방법 1
    var pattern = /a/; // / 사이의 패턴을 찾는다.
  
    // 방법 2
    var pattern = new RegExp('a'); // Regular Expression(a)를 찾는 객체를 하나 만듦.

    pattern.exec('abcde'); // ['a'] // abcde 중에 a를 찾는 것. 없으면 null을 리턴.
    pattern.test('abcde'); // true - a 존재함
    pattern.test('bcde'); // false - a 존재하지 않음
    var str = 'abcdef';
    str.replace(pattern, 'A'); // 'Abcdef'
  
    var oi = /a/i; // i 는 대소문자 구분을 하지 않고 찾는다.
    var xg = /a/;
    "abcdea".match(xg); // ['a']
    var og = /a/g; // g 는 중복을 허용한다.
    "abcdea".match(og); // ['a', 'a']
    var ig = /a/ig;
    "AbcdeAa".match(ig); // ['A', 'A', 'a']

• 캡쳐

    (\w+)\s(\w+) ... 하나 이상의 문자(a-Z,0-9)그룹 후 공백 후 하나~
    ex) A B | 0 r | 등등
  
    var pattern = /(\w+)\s(\w+)/; // $1 : coding, $2 : everybody
    var str = "coding everybody";
    var result = str.replace(pattern, "$2, $1"); // everybody, coding
  
    즉, 그룹을 지정하고 그 그룹을 가져와 사용한다 : 캡쳐

함수지향

var vscope = 'global';
function fscope() {
    var vscope = 'local';
    alert(vscope);
}
fscope(); // local
alert(vscope); // global

function fscope() {
    vscope = 'local';
    alert(vscope);
}
fscope(); // local
alert(vscope); // local

var를 사용하지 않고 선언하면 global 선언이 되므로 값이 변경된다.

var선언을 습관화하자. for 코드의 재사용성

유효범위의 대상

JS는 함수에 대해서만 유효 범위를 제한한다. for 문이나 기타 {} 안의 변수들은 다른 언어들과 달리 함수의 {}만 아니면 사용 가능하다는 것이다.

• 정적(Lexical) 유효범위

var i = 5;

function a() {
    var i = 10;
    b();
}

function b() {
    alert(i);
}

a(); // 5

비동기 처리

Ajax - Asynchronous Javascript And XML

리로딩을 하지 않고 서버와 웹 브라우저가 내부적으로 소통하는 기술

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$.get(
    'http://~~',
    function(result) { // $.get이 위 url에서 가져온 데이터를 result로 function인자에 넣어줌.
        console.log(result); // 사용자에게 어떤 처리를 위임한다 -> 콜백
    }, 'json'
);
</script>

클로저

Closure

내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가리킨다.

function outter() {
    var title = 'coding everybody';
    return function() {
        alert(title);
    }
}
inner = outter();
inner(); // coding everybody

function factory_movie(title) {
    return {
        get_title : function() {
            return title;
        },
        set_title : function(_title) {
            title = _title;
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
alert(ghost); // Ghost in the shell
alert(matrix); // matrix

var arr = []
  for(var i = 0; i < 5; i++) {
    arr[i] = function(id) {
      return function() {
        return id;
      }
    }(i);
  }
  for (var index in arr) {
    console.log(arr[index]());
  }

Arguments

유사 배열 성격을 띈 객체

• 매개변수의 수를 나타내는 2가지 방법
  1. 함수.length : 함수에서 정의된 인자의 수를 나타냄
  2. arguments.length : 함수에 실제로 전달된 인자의 수를 나타냄

함수의 호출

• Function.apply, Function.call

  • function.apply(맥락, 배열) 을 인자로 받는다.

  • 맥락 : 함수가 실행될 맥락을 의미한다.

      o1 = {val1:1, val2:2, val3:3}
      o2 = {v1:10, v2:50, v3:100, v4:25}
      function sum() {
          var _sum = 0;
          for(name in this) {
              _sum += this[name];
          }
          return _sum;
      }
      alert(sum.apply(o1)); // 6
      alert(sum.apply(o2)); // 185

객체지향

이론

• 추상화 : 복잡함 속에서 필요한 관점만을 추출하는 행위
• 부품화가 중요한 것임에는 분명하지만 그 보다 중요한 것은 적절함이다.
• 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑하는 것이다.  바로 그렇게 그룹핑 한 대상이 객체(Object)다.
• 즉 내부의 동작 방법을 단단한 케이스 안으로 숨기고 사용자에게는 그 부품의 사용방법만을 노출하고 있는 것이다. 이러한 컨셉을 정보의 은닉화(Information Hiding), 또는 캡슐화(Encapsulation)라고 부른다. 자연스럽게 사용자에게는 그 부품을 사용하는 방법이 중요한 것이 된다.
• 인터페이스는 부품들 간의 약속이다.

실재

• 객체 내 변수 : Property (Java에서는 Field)

• 객체 내 함수 : Method

• 생성자

  • 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

    function Person(name){
      this.name = name;
      this.introduce = function(){
          return 'My name is '+this.name; 
      }
    }
    var p1 = new Person('egoing'); // egoing
    document.write(p1.introduce()+"<br />");
    
    var p2 = new Person('leezche');
    document.write(p2.introduce()); // leezche

• 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다.

• 전역객체

  • JS에서 모든 객체는 기본적으로 전역 객체의 property이다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다. 전역객체의 이름도 호스트환경에 따라서 다른데, 웹브라우저에서 전역객체는 window이지만 node.js에서는 global이다.

    function func(){
      alert('Hello?');    
    }
    func(); // Hello
    window.func(); // Hello
    
    var o = {'func':function(){
      alert('Hello?');
    }}
    o.func(); // Hello?
    window.o.func(); // Hello?

  • 결국 함수도 전역 객체의 프로퍼티이기 때문에 여기서 this는 window라는 전역 객체를 가리킨다. Node.js에서는 global

      function func(){
          if(window === this){
              document.write("window === this");
          }
      }
      func();

• This

  • 함수와 this : this는 함수가 소속되어 있는 객체를 가리키며 디폴트는 전역 객체를 가리키게 된다.

  • 메소드와 this : 객체 소속인 method의 this는 그 객체를 가리킨다.

      var 0 = {
          func : function() {
              if (o === this) {
                  document.write("o === this");
              }
          }
      }
      o.func();

  • 생성자와 this : new func(); → 생성자 new를 통해 객체 선언을 해준다.

      var funcThis = null;
      function Func() {
          funcThis = this;
      }
      var o1 = Func(); // 함수 저장 -> 함수에서 this 호출 -> 전역 객체인 window
      if (funcThis === window) {
          document.write('window </br>');
      }
      var o2 = new Func(); o2 객체 저장 -> 객체에서 메소드 호출 -> this는 o2를 가리킴
      if(funcThis === o2) {
          document.write('o2 </br>');
      }

  • Apply와 Call

      function sum(x,y) {return x+y;}
      var sum2 = new Function('x', 'y', 'return x+y;');
      sum2(1,2); // 3
      // 함수 Literal을 만들어 준다. (리터럴:보다 편한 문법체계, 객체리터럴, 배열리터럴 등)

      var o = {}
      var p = {}
       function func() {
          switch(this) {
            case o:
              document.write('o<br />');
              break;
            case p:
              document.write('p<br />');
              break;
            case window:
              document.write('window<br />');
              break;
          }
        }
        func();
        func.apply(o);
        func.apply(p);
      // 즉, 함수는 자바와 달리 객체에 소속되지 않고, window객체, o객체, p객체에 apply된다.

• 상속 : prototype

    function Person(name) {
        this.name = name;
      }
      Person.prototype.name = null;
      Person.prototype.introduce = function() {
          return 'My name is ' + this.name;
      }
  
      function Programmer(name) {
        this.name = name;
      }
      **Programmer.prototype = new Person();
    // 상속을 위해서는 생성자의 프로토타입에 상속받고자 하는 객체를 생성해주면 된다.
        Programmer.prototype.coding = function() {
            return "hello world";
        } // 상속된 객체에서 함수를 추가한 케이스. 마찬가지로 prototype 사용.**
  
        function Designer(name) {
            this.name = name;
        }
        Designer.prototype = new Person();
        Designer.ptototype.design = function() {
            return "beautiful";
        }
  
      var p1 = new Programmer('john');
      document.write(p1.introduce() + "<br />");
        document.write(p1.coding() + "<br />");
        var p2 = new Designer('sarah');
        document.write(p2.introduce() + "<br />");
        document.write(p2.design() + "<br />");

• Prototype (원형) → 상속 지원을 위한 개념

  • 객체 안에 원하는 메소드가 존재하지 않으면, 계속해서 상위 객체로 올라가서 찾는다.
  • 이 기능이 prototype을 통해 가능해진다.
    • 생성자는 기본적으로 함수이다. 함수 앞에 new를 붙여 생성자가 만들어지며, 이렇게 콜된 값은 객체를 리턴한다.
    • func.prototype은 객체를 보유하고 있다. 즉, prototype은 객체를 가질 수 있는 funcf라는 객체의 property이다. → Prototype 체인 개념도 나올 수 있음.

표준 내장 객체의 확장

표준 내장 객체를 상속받아 커스텀 메소드들을 작성함으로서 확장을 이룰 수도 있다.

Object(Default)

모든 객체는 기본적으로 object를 상속받고 있으며, 따라서 object를 확장할 수도 있다.

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 확인한다. 만약 prototype으로 상속 받은 객체라면 false를 리턴한다.

데이터타입

객체와 비객체(Primitive type)로 나눌 수 있다.

• 비객체 ( = Primitive type)
  • number
  • string
  • boolean
  • null
  • undefined
• 나머지는 객체
• 비객체임에도 property식 접근이 가능한 이유는 “Wrapper Object” 기능 때문이다.
• Wrapper Object
  • String, Number, Boolean이 존재한다.
  • property식 접근이 일어날 때 해당 객체를 만들어 사용한 후 바로 삭제된다.

참조

• 비객체 (이하 primitive type) 들은 복제되지만 객체는 참조된다.
• 객체는 다른 말로 참조 데이터형이라고도 부른다.

var a = 1;
var b = a;
b = 2;
console.log(a); // 1

var a = {'id':1}; // 데이터형이 객체이므로 참조형이다. 즉, 값이 바뀌면 같이 바뀐다.
var b = a;
b.id = 2;
console.log(a.id); // 2

var a = 1;
function func(b){
    b = 2;
}
func(a);
console.log(a); // 1

var a = {'id':1};
function func(b){
    b = {'id':2}; // b에 새로운 객체를 전달했으므로 a는 상관이 없다.
}
func(a);
console.log(a.id);  // 1

var a = {'id':1};
function func(b) {
        b.id = 2;
}
func(a);
console.log(a.id); // 2

WEB - JS

• 이벤트 ( onclick ) 약 10~20개 정도의 이벤트를 정의해 놓았다.

    <input type="button" value="hi" onclick="alert('hi')">

• this

    <input type="button" value="night" onclick="
      var target = document.querySelector('body');
      if(this.value === 'night') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        this.value = 'day';
      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
      }
    ">

• 함수

함수를 콜할 때 this 를 매개변수로 넣으면 이는 함수가 속한 태그를 넘긴다.

만약 매개변수가 없다면 함수 내 this는 전역 객체를 가리키게 된다.

<input type="button" value="night" onclick="
  nightDayHandler(this);
">

function nightDayHandler(self) {
      var target = document.querySelector('body');
      if(self.value === 'night') {
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = 'day';

• 파일 정리

<script src="colors.js"> // color관련 작업 코드들을 독립 파일로 빼서 만든다.
  </script>

DOM

[JavaScript] DOM이란 무엇인가?

html을 구성하는 element들을 node 개념으로 바라보고, 더 나아가 객체로 대하는 방식

JQuery

AJAX

JSON

Host: www.~ Accept: ~ Accept-Language: en-us // Request Headers Accept-Encoding: ~ // 브라우저 데이터가 많아 압축된 경우, 어떤 방식으로 압축했는지 표현 User-Agent: ~ // 웹 브라우저의 다른 말 Content-Length: ~ If-Modified-Since: ~ // 가장 최근 받은 파일을 기록. 웹서버가 응답할 때 자신의 파일과 비교하여 자신이 최근이면 전송. 아니면 전송X -------------------------------------------- / blank line seperating headers & body

HTTP/1.1 200 OK //http1.1ver, 200:Success의미, OK:성공! Date: Sat, 07 Jan 2023 12:41:39 GMT Server: Apache Vary: Accept-Encoding Content-Encoding: gzip // gzip으로 압축되어 있다. X-Content-Type-Options: nosniff X-Frame-Options: sameorigin Content-Length: 185 // 총 컨텐츠 길이: 185 (Byte) Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Content-Type: text/html; charset=UTF-8 // html타입, 인코딩 방식:UTF-8

Personal HomePage 과제용 서버 내 파일 접근시 15.164.95.148(과제 서버 ip)/example2.php(파일 이름)?q=ip-172-31-16-249(내 노트북 ip) 접근자의 ip주소를 url 파라미터로써 요구하는 함수가 존재한다? 데스크톱으로 접근하니 ?q=ip-172-31-16-249(내 노트북 ip)가 없어도 접근 가능하다. php파일 생성시 ‘touch 파일이름.파일형식’ 경로는 /var/www/html PHP : 웹 서버상에서 쓰는 웹 프로그래밍 언어(PHP, JSP, ASP.NET 등이 있다.) 직관적인 코드 작성 가능, 코드의 양 역시 적음. 텍스트 처리에 특화되어 있어 HTML문저 처리에 적합함. HTML, CSS, JavaScript를 알아야 함. Php.ini-production vs php.ini-development Production : 보안, 퍼포먼스, 실용중심적. Recommended Development : 에러가 발생하면 해당 에러들을 출력해주기 때문에 개발환경에서만 쓰이는 데 추천함. 보안상 문제가 생길수도 있기 때문 레지스트리? Visual C++ 2015, apache, php간의 관계? 문법 기본 PHP는 키워드, 클래스, 함수, 사용자 함수 이름의 대소문자를 구분하지 않는다. 종류 PHP recommanded style HTML 스트립트 스타일

SGML 스타일 ASP 스타일 <% … %> 위 3,4번 스타일은 short_open_tag 활성화시 정확히 인식 가능한 듯 서버별 이식성 문제를 피하기 위해 PHP 권장 스타일을 사용하는 것이 좋다. 이중 주석 X 변수 선언시 달러 기호($)를 사용한다. $변수이름 = 초깃값; 따로 타입을 명시하지 않는다. 해당 변수에 대입하는 값에 따라 자동으로 결정된다. 처음에 어떤 타입의 값을 주었다 해도 다른 타입의 값이 들어갈 때마다 자동으로 타입 변환이 일어난다. 언어 구조(Language construct) echo() 실제로는 함수가 아니기 때문에 인수를 전달할 때 괄호는 상관 없다. 가변 길이 인수와 같이 함수 문맥으로는 사용 불가 두 개 이상의 인수를 전달할 때는 괄호를 사용하지 못한다. 조건&반복문 조건문 반복문 '; $i = 0; while($i < 3) { echo '2
'; $i = $i + 1; } echo '3
'; ?> 함수 gettype() : ~의 타입 리턴 strlen() : 문자열의 길이 리턴 nl2br() : 의 new line을
로 리턴 file_get_contents() : 의 파일의 컨텐츠들을 리턴 echo file_get_contents("data/".$_GET['id']); var_dump() : 의 값과 타입을 출력 isset() : 의 값이 set되고 null이 아니면 true. unset() : ~의 값을 null로 만듦. PHP는 컨텐츠를 html로 자동으로 만들어준다. php : 인터페이스, 함수 같은 느낌 data라는 디렉토리에 정보만 추가해주면 php가 알아서 기존 웹사이트에 추가해준다. HTML은 정적이지만 PHP는 동적이다. : html 구문 도중 php 구문이라는 것을 명시한다. PHP Data Types Scalar types 싱글값을 hold하고 있는 변수를 의미한다. bool true, false 두 값만으로 나뉜다. false로 인식되는 값들 : false keyword (int) 0, -0, (float) 0.0, -0.0 “”, ‘’ (empty string), “0” array() or [] (empty array) null The SimpleXML objects created from attributeless empty elements. 나머지는 true로 인식된다. int integer값을 hold하며, php가 실행되는 플랫폼에 따라 표현 가능한 integer가 달라진다. PHP_INT_SIZE : 특정 플랫폼에서의 표현 가능한 정수의 사이즈를 상수 형태로 나타낸다. float floats, doubles, 실수들로 알려져 있다. string 큰따옴표나 작은따옴표로 둘러쌓인 characters의 연속 Compound types Compound data includes the values that contain more than one value. array key와 value를 연결한 정렬된 map이다. array functions 들을 찾아 해결해보자. indexed array : index로 value들을 연결한 배열 '; // leezche echo $coworkers[3].'
'; // taeho var_dump(count($coworkers)); // int(4) array_push($coworkers, 'graphittie'); var_dump($coworkers); // array(5) { [0]=> string(6) "egoing" [1]=> string(7) ?> // "leezche" [2]=> string(4) "duru" [3]=> string(5) // "taeho" [4]=> string(10) "graphittie" }

associative array : string으로 value들을 연결한 배열. []로 묶어 표현한다. <?php

$prices = [ 'laptop' => 1000, 'mouse' => 50, 'keyboard' => 120 ];

echo $prices['laptop']; // 1000 echo $prices['mouse']; // 50 echo $prices['keyboard']; // 120 object OOP 개념의 객체와 같은 존재. properties(필드), behaviors(메소드)와 같은 값들을 가진다. callable iterable Special types resource The resource type holds a reference to an external resource, e.g. a filehandle or a database connection. null The null type has one value called null that represents a variable with no value. Else php문에 수식을 넣으면 계산이 된 값을 웹사이트에서 출력한다. 문자열의 결합 : .(dot) 이라는 concatenation operator를 통해 문자열들을 결합한다. echo "hello "."world"; // hello world 문자열의 길이 // int strlen (string $string)

php 어플리케이션의 입력으로 URL parameter를 사용하는 방법 127.0.0.1/parameter.php?name=egoing&address=서울 ? 뒷부분은 url parameter, &는 파라미터간 구분자이다.

왜 쿼리 ‘질의’라고 했을까? 예전 프리코스에서 공부할 때 나름 DB역할을 했던 클래스나 다른 각종 기능 단위의 클래스에 대해 ‘객체가 일을 하도록 해라’ 라는 설정과 비슷한 컨셉인 것 같다. 그런데 막상 쿼리를 비롯해서 sql 구조를 잠깐 살펴보니 그런 컨셉은 아니었다. 결국 DB 수정 권한을 부여하는 명령어를 통해 조절하는 것 같다. Html과 php의 차이 : html은 웹 브라우저에서 소스를 해석하여 보여주지만, php는 서버에서 해석하여 html 코드로 만들어 브라우저에 전달하는 형식이다. SQL DB나 파일의 내용 중 원하는 내용을 검색하기 위해 몇 개의 code나 key를 기초로 질의하는 것을 말한다. 데이터베이스용 언어를 SQL(Structed Query Language)라고 한다. 특정DB에서 원하는 조건의 데이터를 조작하는 언어의 집합(문장)을 쿼리라고 한다. 구문은 크게 3개의 범주로 나뉜다. 데이터 정의어(DDL) 데이터베이스를 정의하는 언어이며 데이터의 생성, 수정, 삭제 등 데이터 전체의 골격을 결정하는 역할을 하는 언어이다. CREATE : 데이터베이스, 테이블 등을 생성하는 역할을 한다. ALTER : 테이블을 수정하는 역할을 한다. DROP : 데이터베이스, 테이블을 삭제하는 역할을 한다. TRUNCATE : 테이블을 초기화시키는 역할을 한다. 데이터 조작어(DML) ‘정의된’ DB에 입력된 레코드를 조회, 수정, 삭제하는 등의 역할을 한다. SELECT : 데이터 조회 INSERT : 데이터 삽입 UPDATE : 데이터 수정 DELETE : 데이터 삭제 데이터 제어어(DCL) DB에 접근하거나 객체에 권한을 주는 등의 역할을 하는 언어이다. GRANT : 특정 DB 사용자에게 특정 작업에 대한 수행 권한 부여한다. REVOKE : 특정 DB 사용자에게 특정 작업에 대한 수행 권한 박탈, 회수한다. COMMIT : 저장되지 않은 모든 데이터를 DB에 저장하고, 현재의 트랜잭션을 종료하는 역할을 한다. (트랜잭션 : 쪼갤 수 없는 업무 처리의 최소 단위, 데이터베이스를 변화시키기 위해서 수행하는 작업(select, update, insert, delete 등)의 단위를 뜻한다.) ROLLBACK : 트랜잭션의 작업을 취소 및 복구하는 역할을 한다. PHP와 MySQL을 연동하는 API mysql mysqli procedual(함수형) mysqli_connect(”주소”, “user”, “password”, “database”); object-oriented(객체지향형) mysqli::__construct pdo 테이블 생성 CREATE TABLE author( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(30) NOT NULL, profile VARCHAR(200) NOT NULL, PRIMARY KEY(id) );

HyperText Markup Language

Internet : 도시(운영체제) / Web : 건물(앱.exe)

Web site : 웹페이지들의 그룹

웹사이트를 만들 때는 순서가 중요하다.

Disqus

tawk.to

1. 웹-브라우저(Client)
2. 웹-서버(Server)

2017년 기준 150여개가 넘는 Tag가 존재한다.

태그별 인기도 확인 : html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br 등

HTML Study | Advanced Web Ranking

• 웹 프로그래밍의 핵심은 ‘접근성’이다. 소외되는 사람들이 없도록 html의 의미를 정확히 이해하고 코드를 작성하도록 노력하자.

문법

Tag

닫지 않는 태그는 볼드로 표시 : 주로 감싸야하는 컨텐츠가 없는 태그가 해당.

중첩해서 사용 가능

1. : HyperText Reference, 링크
   1. <a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">
      1. target=”_blank” : 링크 페이지를 새창에서 열게 해주는 속성
      2. title=”~” : 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능
2. : 볼드체
3. : underline
4. <h1~6> : 대제목 2, 3, 4, … 부제2, 부제3, 부제4, …
5. <br> : 줄바꿈

6. : paragraph, 단락을 설정한다. 단락과 단락의 간격이 고정이어서 간격이 자유로운 br태그를 선호한다. 1. HTML은 정보를 표현하지만, CSS는 정보를 꾸미는 역할, CSS로 p태그의 간격 한계 극복 가능 2. CSS : `<**p** style="margin-top:45px;">` - p태그의 위쪽에 45픽셀(px)만큼의 여백(margin) 생성 3. 따라서 ‘단락의 경계’가 목적인 경우 p태그가 바람직하며, CSS로 간격 조절까지 가능해졌다.

7. : 이미지 삽입 태그. Tag만으로는 부족한 정보를 보충하기 위해 Attribute라는 문법을 사용한다. 그 중에서 src를 사용한 예시를 본다.
   1. <img src=”이미지 링크.파일 형식” width=”~%”> 와 같이 표현한다.
      1. width : 이미지의 크기를 다루는 속성, src : 이미지의 위치 속성
      2. 만약 로컬 데이터베이스에 존재하는 이미지를 불러오고자 한다면, src=”디렉토리까지의 경로/이미지파일 이름.해당 파일 형식” 으로 지정한다.
   2. <input ~> : 각각 상황에 맞춰 검색해보자.