Coding/Web 개발 스터디

코딩공부일지_13

fatihohn 2019. 12. 19. 02:06

 

[PHP MySQL 데이터베이스 기반 게시판 만들기]
191218_필요 기술 모으기
 
오늘은 W3schools.com에서 php 와 mysql 데이터베이스 기반 게시판을 만들기 위해 필요한 기술들에 대해 공부했다. 이론 공부도 하다보니까 재미가 붙는다. 
 
 
<AJAX>
AJAX란 무엇인가?
  • AJAX는 프로그래밍 언어가 아니다.
  • AJAX는 웹페이지에서 웹 서버에 접근하기 위한 기술이다.
  • AJAX는 Asynchronous Javascript And XML의 줄임말이다.
    • ( Asynchronous : 1. not existing or occurring at the same time. 2. COMPUTING•TELECOMMUNICATIONS controlling the timing of operations by the use of pulses sent when the previous operation is completed rather than at regular intervals.) : 여기서 두 번째 정의에 해당하는데, 이전 작동에 의해 만들어진 신호에 의해서 다음 작동을 한다는 의미인듯.
 
**XML 기술을 이해하기 위해서 아래 문서를 살펴봤다.
<PHP XML Parsers>
XML이란 무엇인가?
  • XML언어는 웹사이트 사이에서 공유하기 위해 데이터를 구축하는 방법 중 하나다. 
  • RSS 피드와 팟캐스트 같은 웹 기술이 XML로 쓰였다.
  • XML은 만들기 쉽다. HTML과 비슷해보이지만, 작성자가 커스텀 태그를 만들 수 있다.
 
XML Parser란 무엇인가?
  • Parser는 일종의 프로그램 언어 간 번역기라고 할 수 있다. (API랑 비슷한건가? 뭐가 다른지는 아직 잘 모르겠다.)
  • XML문서를 읽고, 수정하고, 생성하고 조종하려면 XML parser가 필요하다.
  • PHP에는 크게 두 가지 종류의 XML parser가 있다.
    • Tree-Based Parsers
    • Event-Based Parsers
<임시방편>
방금 자바스크립트 getElementById() 함수를 보고 생각이 났는데, 게시판 게시물을 가져올 때 만약 게시판 데이터베이스의 모든 필요한 정보를 가져오는 php 파일을 만들어두고, 각각의 게시물마다 id를 게시물 번호로 지정한 다음, 자바스크립트로 그 id를 가진 게시물을 불러온다면...내가 며칠 동안 막혔던 기능을 구현할 수 있다. 
 
[웹브라우저 ->자바스크립트(클릭한 id 값에 해당하는 게시물 정보 불러오기) ->모든 정보 php페이지(모든 정보 요청) -> 데이터베이스]
[웹브라우저 <- 자바스크립트(id 값 획득 <- 모든 정보 php 페이지(게시물 별 id값 제시) <- 데이터베이스]
 
하지만 이 방법의 문제는 어떤 php 페이지에서는 데이터베이스의 모든 정보를 구현해내야하는 시스템적 부하를 견뎌내야하므로 구동 속도가 저하될 수 있다는 점이다.  
 
일단 해보고 되는지 파악이나 해볼까: 오늘은 이론을 더 공부하고 내일 시도해보자.
 
<AJAX>
다시 AJAX로 돌아오자.
  • AJAX는 브라우저에 내장된 XMLHttpRequest 객체(웹서버에 데이터를 요청하기 위함)와 자바스크립트, HTML DOM(데이터를 보여주거나 사용하기 위함)을 사용한다. 
  • AJAX는 이름에서 자바스크립트로 XML문서를 어쩐다는 의미를 가지고 있지만, 그냥 텍스트나 JSON텍스트 데이터를 전송하기 위해서도 사용된다.
  • AJAX의 장점은 드러나지 않게 웹서버와 데이터를 주고 받아서 웹페이지가 비동기적으로(asynchronously) 업데이트 되도록 한다는 점이다. 즉, 웹페이지를 통째로 리로드하지 않고도 일부를 업데이트 할 수 있다는 것.
    • [AJAX의 작동원리]
    1. 웹페이지에서 이벤트가 일어난다(페이지가 로드되고, 버튼이 클릭된다).
    2. 자바스크립트가 XMLHttpRequest 객체를 생성한다.
    3. XMLHttpRequest 객체는 웹서버에 요청을 전송한다.
    4. 서버는 요청을 수행한다.
    5. 서버는 웹페이지에 응답을 보내준다.
    6. 자바스크립트가 응답을 해석한다.
    7. 자바스크립트가 해당 기능을 수행한다.
 
[XMLHttpRequest 객체]
XMLHttpRequest 객체는 AJAX의 주춧돌이다.
 
  • 모든 웹브라우저는 XMLHttpRequest 객체를 지원한다.
  • XMLHttpRequest 객체는 드러나지 않게 웹서버와 데이터를 주고받을 수 있다. 즉, 웹페이지를 통째로 리로드하지 않고도 일부를 업데이트 할 수 있다. 
 
  • XMLHttpRequest 객체 만드는 법.
    • variable = new XMLHttpRequest();
    • 예) var xhttp = new XMLHttpRequest();
 
[도메인 간 액세스]
  • 보안상 이유로 요즘 브라우저들은 도메인 간 액세스를 어용하지 않는다.
  • 즉, XML파일과 웹페이지가 모두 로드되려면 둘이 같은 서버에 있어야 한다.
 
 
[XMLHttpRequest 객체 기본 함수]
기본 함수
설명
new XMLHttpRequest()
새로운 XMLHttpRequest 객체를 만든다
abort()
현재 요청을 취소한다
getAllResponseHeaders()
header information을 반환한다
getResponseHeader()
특정 header information을 반환한다
open(method, url, async, user, psw)
요청을 구체화한다
 
method: 요청 방식 GET or POST
url: 파일 경로
async: true (비동시적) or false (동시적)
user: 사용자 이름(선택사항)
psw: 비밀번호(선택사항)
send()
서버에 요청을 보낸다
GET 요청에 사용됨
send(string)
서버에 요청을 보낸다
POST 요청에 사용됨
setRequestHeader()
label/value 쌍을 전송하는 header에 붙여준다
 
[XMLHttpRequest 객체 속성]
속성
설명
onreadystatechange
readyState 속성이 바뀌었을 때 불려나온 함수를 정의한다
readyState
XMLHttpRequest의 상태를 유지(hold)한다
0: 요청이 시작되지 않음
1: 서버 연결이 시작됨
2: 요청 받음
3: 요청 수행중
4: 요청 수행 완료, 응답 준비됨
responseText
응답받은 데이터를 string으로 출력한다
responseXML
응답받은 데이터를 XML 데이터로 출력한다
status
요청의 상태 번호를 출력한다
200: "OK"
403: "Forbidden"
404: "Not Found"
모든 상태 번호 목록을 보려면 다음 링크 클릭 Http Messages Reference
statusText
status 텍스트(e.g. "OK" or "Not Found")를 출력한다.
[서버에 요청 보내기]
  • XMLHttpRequest 객체는 서버와 데이터를 교환할 때 사용된다.
  • 서버에 요청을 보내기 위해서 open()과 send()를 사용한다.
    • xhttp.open("GET", "ajax_info.txt, true);
    • xhttp.send();
함수
설명
open(method, url, async)
요청의 type을 정함
 
method: 요청 type: GET or POST
url: 서버 (파일)경로
async: true (비동기적) or false (동시적)
send()
서버에 요청을 전송 (GET에 사용)
send(string)
서버에 요청을 전송 (POST에 사용)
[GET을 쓸 것인가? POST를 쓸 것인가?]
  • GET은 POST보다 빠르고 간단하고, 대부분의 경우에 사용가능하다.
  • 하지만, 아래 경우에는 무조건 POST 요청을 사용한다: 
    • 캐시된 파일이 선택사항이 아닌 경우(서버 상의 파일이나 데이터베이스를 수정하는 경우)
    • 서버에 많은 양의 데이터를 전송하는 경우(POST는 용량 제한이 없다)
    • 사용자의 입력(input; 규정되지 않은 문자열을 포함할 수 있음)을 전송하는 경우
    • ***위와 같은 경우에 POST는 GET보다 더 강력하고 안정적이다
[GET 요청]
  • 예) 단순한 GET 요청:
    • xhttp.open("GET", "demo_get.asp", true);
    • xhttp.send();
 
  • 위의 예시처럼 작성하면 캐시된 결과를 받을 수도 있다. 이것을 방지하기 위해서 URL에 특정 ID를 달아준다. 
    • xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
    • xhttp.send();
    • ***이 예시는 아직 이해가 잘 안된다. Math.random()이 정확히 어떤 의미인지 찾아봐야겠다.
 
  • GET을 이용해서 정보를 send 하고 싶으면, 정보를 URL 뒤에 달아주면 된다.
    • xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
    • xhttp.send();
 
[POST 요청]
  • 예)단순한 POST 요청:
    • xhttp.open("POST", "demo_post.asp", true);
    • xhttp.send();
 
  • HTML form과 같은 데이터를 POST 하려면 HTTP header를 setRequestHeader()와 함께 추가한다. send() 함수에 전송하고자 하는 데이터를 구체화해준다.
    • xhttp.open("POST", "ajax_test.asp", true);
    • xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    • xhttp.send("fname=Henry&lname=Ford");
함수
설명
setRequestHeader(header, value)
HTTP header를 요청에 추가한다
  header: header 이름을 지정한다
  value: header value를 지정한다
[url - 서버 상의 파일]
  • open() 함수의 url 값은 서버 상의 파일 주소(경로)이다.
    • xhttp.open("GET", "ajax_test.asp", true);
  • 파일은 아무 파일이나 가능하다(.txt, .xml, 또는 .asp나 .php같은 서버 스크립트 파일 - 요청을 돌려보내기 전에 서버 상에서 작동할 수 있음 - 도 가능).
 
[Asynchronous(비동기적) - True or False?]
  • 서버 요청은 비동기적(asynchronously)으로 전송되어야한다.
  • open() 함수의 async 값은 true로 지정되어야 한다:
    • xhttp.open("GET", "ajax_test.asp", true);
  • 요청이 비동기적으로 전송됨으로서, 자바스크립트는 서버 응답을 기다릴 필요가 없고, 대신: 
    • 서버 응답이 오기 전까지 다른 스크립트를 실행한다
    • 응답이 준비된 후에 응답과 반응한다
 
[onreadystatechange 값]
  • XMLHttpRequest 객체를 사용하면 요청에 응답이 왔을 때 작동하도록 함수를 정의할 수 있다.
  • 바로 이 함수가 XMLHttpResponse 객체의 onreadystatechange 값에서 정의된다.
    • xhttp.onreadystatechange = function() {
    •   if (this.readyState == 4 && this.status == 200) {
    •     document.getElementById("demo").innerHTML = this.responseText;
    •   }
    • };
    • xhttp.open("GET", "ajax_info.txt", true);
    • xhttp.send();
  • 이후에 이와 관련된 심화과정 있음
 
[동시적(Synchronous) 요청]
  • 동시적 요청(synchronous request)를 실행하려면 open() 함수의 세 번째 값을 false로 바꾸면 된다:
    • xhttp.open("GET", "ajax_info.txt", false);
  • 때때로 async = false가 간이 테스트로 쓰이곤 한다. 옛날 자바스크립트에도 이런게 있긴 하다.
  • 코드가 서버가 준비될 때까지 기다리므로 onreadystatechange 함수가 필요하지 않다.
    • xhttp.open("GET", "ajax_info.txt", false);
    • xhttp.send();
    • document.getElementById("demo").innerHTML = xhttp.responseText;
  • 동시적 XMLHttpRequest(async = false)를 쓰게되면 자바스크립트가 서버 응답이 준비될 때까지 멈춰버리므로 쓰지 않는 것이 좋다. 서버에 부하가 많거나 느리다면 어플리케이션이 그걸 기다리거나 멈춰버린다.
  • 이 기능은 웹 표준에서 제거되는 중이지만 앞으로 오랜 시간이 걸릴 것이다.
  • 현대적 개발 도구들은 이 기능을 사용했을 때 경고를 날리는게 권장되고있고, 발생시 InvalidAccessError를 뿜을 수 있다.