5/23 생활코딩

* 오늘의 진도

 PHP

  입출력 그리고 폼과 HTTP

 

10. 입출력 그리고 폼과 HTTP

지금까지 우리가 배웠던 예제에서는

'우리가 지금부터 배우게 될 형태의 입력'은 없었다.

 

= 누가, 언제, 어떻게 실행해도 항상 동일한 출력값을 받는 프로그램이었다.

= 사용자와 상호작용하지 않는, 일방적으로 결과를 출력하는 프로그램

 

우리에게는 무언가를 입력하면, 그것을 계산하거나 처리해서

그 처리된 결과를 우리에게 보여주는 프로그램이 필요하다.

 

∴ 어떻게 PHP 앱에 입력하는가를 보자.

 

여기에서 입력은 egoing,

출력은 Welcome, egoing이다.

 

즉, 내가 어떤 값을 입력하느냐에 따라 출력되는 내용이 달라졌다.

= 25.php라는 앱이, 우리의 입력값에 따라 다른 출력값을 보내준다.

= 유저와 상호작용하는 앱이 되었다.

 

∴ 아래의 네모친 부분은 사용자가 입력한 정보를 받아서

그 정보의 값에 따라서 치환해주는 영역이다.

그리고 'name' 부분에는 우리가 입력한 값의 이름이 들어온다.

이 url에서 ?의 의미는

? 앞부분은 25.php라는 앱을 찾아내는 주소이고

? 뒷부분은 이 주소가 가리키는 앱으로 전달되는 값이 들어오는 영역이다.

물음표 뒷부분을 더 자세히 보면

= 앞부분은 값의 이름이고

= 뒷부분은 값이고

=는 값의 이름과 값을 구분하는 구분자이다.

 

이름이 id인 값, 이름이 password인 값을 출력한다.

값과 값을 구분할 때는 &라는 구분자를 사용한다.

이것을 좀더 유저프렌들리한 환경으로 만들어보자. ↓

 

10. 입출력 그리고 폼과 HTTP - HTML Form

폼을 통해서 좀더 편리하게 정보를 서버로 전송하는 방법을 알아보자.

 

이것들은 모두 사용자의 생각/정보를 시스템에 전달 & 서버로 전송하는 기능을 한다.

= 입력 컨트롤

 

태그들의 이름은 input이다.

input 태그의 type에 따라 다르다.

ID와 PW를 입력하고 '질의 보내기' 버튼을 누르면 url이 바뀐다.

 

submit 버튼을 눌렀을 때 url 을 보면 2.php라는 앱으로 이동됐음을 볼 수 있다.

이 이동의 근거는 form 태그의 action 속성에 기술되어있는 값인 2.php로,

submit 버튼을 누르면 입력 컨트롤에 입력돼있는 값들이 2.php로 전송된다.

 

form 태그의 경우, form 태그 안에 있는 컨트롤에 입력된 값들이

submit 버튼에 의해서 전송됐을 때,

어떤 url로 그 정보들을 보낼 것인가를, action에 지정하는 것이고,

어떤 방식으로 보낼 것인가를 method(get)에 지정하는 것이다.

 

이것이 우리가 PHP와 같은 앱을 사용하는 이유이다.

∵ HTML만으로는 or 아파치와 같은 웹서버만으로는

이렇게 상호작용하는 웹서비스/웹앱을 만들 수 없다.

 

예제에서 살펴본 두 가지 파일

① HTML - form에 대한 정보가 담겨있다.

② PHP 앱 - 그 form에서 전송한 데이터를 받아서 화면에 출력해준다.

 

 

우리가 웹브라우저에서 url을 입력하고 엔터를 치면

이 브라우저가 클라이언트 컴퓨터를 거쳐서, 인터넷을 거쳐서, 서버에 도착하면

서버 컴퓨터에 설치되어 있는 웹서버에 도착한다.

 

그럼 웹서버는 서버 컴퓨터에 저장되어 있는 HTML 문서를 찾아서, 그것을 읽은 다음에

그 HTML 문서를 요청한 브라우저로 그 정보를 쏴준다.

 

그럼 브라우저는 그 정보를 받아서 거기 있는 HTML 태그를 해석해서

거기 적혀있는 대로 화면을 구성해준다.

 

우리가 방금 했던 것에서는 form을 만들어줬다.

그리고 사용자가 값을 입력하고 submit 버튼을 누르면

브라우저가 다시 웹서버를 찾아간다.

 

그 때 url 뒤에 확장자가 php인 PHP 앱의 이름이 적혀있다.

그 뒤에 물음표가 있고,

그 뒤에 name=egoing&password=111111 이라고 적혀있는 상태로

웹서버로 데이터가 전송된다.

 

 

웹서버가 이 정보를 받아서 확장자를 보니까 자기가 처리할 수 없는 확장자이다.

그래서 웹서버 옆에 있는 PHP 엔진을 호출해서

APP.php 라는 파일을 열어서 그것을 처리해서 그 결과를 보여달라고 요청한다.

 

그러면 PHP 엔진은 웹서버가 지시한대로 APP. php 파일을 찾아서 그 내용을 읽어서

거기에 있는 PHP 코드를 쭉 해석한다.

 

 

그런데 이 과정에서 웹서버가 PHP 엔진에게 또 하나의 정보를 준다.

바로 사용자가 전송한  input 정보이다.

 

그러면 PHP는 이 코드를 해석하다가 $_GET[ ] 이라는 코드를 만나게 된다.

그러면 여기에다가 사용자가 입력한 정보를 치환시켜서 그 PHP 코드를 처리한다.

 

그리고 PHP 코드의 처리된 결과를 웹서버에게 돌려주고

웹서버는 그것을 취합해서 웹브라우저에게 다시 쏘아준다.

 

이렇게 해서 나온 결과가 아까 보았던 "Welcome, ~~"이다.

 

다음 동영상에서는 데이터를 전송할 때,

get 방식으로 전송할 수도 있고, post 방식으로 전송할 수도 있는데,

그 차이를 살펴보면서

HTTP 프로토콜에 대해서도 잠깐 살펴보겠다.

10. 입출력 그리고 폼과 HTTP - 입력과 출력  GET vs POST

지금까지 우리가 데이터를 서버 쪽에 전송할 때 사용했던 방식은 get 방식이었다.

이번에는 post 방식에 대해 알아볼 것이다.

 

get 방식 - 어떠한 정보를 서버로 전송할 때,

 url 뒤에 물음표를 붙이고 그 안에 데이터를 기술해서 서버쪽으로 전송하는 방식

 특징: url상에 서버로 전송하는 데이터가 포함되어 있다.

 

post 방식 - url에 데이터를 적지 않고 서버에 전송할 수 있다.

 이것이 어떻게 가능한가?

 - HTTP(서버와 클라이언트가 커뮤니케이션할 때 사용하는 프로토콜)를 열어서

 실제로 post 방식으로 데이터를 전송하는 흐름을 봐야 안다.

 

그에 앞서서 우리가 만들었던 앱을

post 방식을 사용해서 사용자의 정보를 서버로 전송하도록 변경해보자.

 

우리는 두개의 앱을 가지고 있다.

① HTML - 데이터를 전송하는 역할

② PHP - 전송된 데이터를 수신하는 역할

 

데이터를 전송하는 방식을 get 방식에서 post 방식으로 바꾸려면

데이터를 전송하는 쪽과 수신하는 쪽 모두 post 방식으로 하도록

코드 상의 수정이 필요하다.

 

여기서 method는 (데이터 전송) 방식/방법이라는 뜻이다.

method를 get에서 POST로 바꾸면,

이 ① HTML 문서는 POST 방식으로 데이터를 전송할 준비가 된 것이다.

 

이것은 PHP 앱의 코드이다.

이것을 통해서 우리가 알 수 있는 것은?

 

$_POST['id'](가 뭔지는 나중에 배울 거지만)에 GET이라고 적혀있으면,

GET으로 넘어오는 이름이 id인 값을 받는 것이고,

 

이것을 POST로 하게 되면,

이름이 id인 값 중에 POST 방식으로 전송되는 데이터를 받는다.

 

즉, 어떤 방식으로 데이터를 수신했느냐에 따라서

우리가 받을 수 있는 방법이 달라진다.

 

아무것도 붙어있지 않은 깔끔한 4.php만 출력되고 있다.

→ 데이터가 실제로 어디로 들어가는지 사용자에게 감춰진다.

∴ POST 방식은 GET 방식보다 보안성이 좋다.

 

물론 서버쪽으로 전송되는 데이터가 노출된다는 점에서

기술적으로는 큰 차이가 없지만,

최소한 엔드 유저, url을 보는 사용자에게 데이터가 노출되지 않는다는 점에서는

공격에 노출될 확률이 낮아진다.

 

 

지금부터는 POST 방식이 어떻게 동작하는지 보기 위해서 

HTTP 프로토콜의 내부를 살펴볼 것이다.

∵ POST 방식이 데이터를 전송할 때는 HTTP 프로토콜 내부적으로 동작한다.

 

Fiddler라는 프로그램을 이용한다.

- 서버와 클라이언트 사이에 주고받는 통신의 내용을 우리가 열람할 수 있게 해준다.

 (이 통신은 HTTP라는 통신 규약을 따른다.)

 

Fiddler가 실행된 상태에서 3.html이 띄워져 있는 브라우저를 refresh 해보았다.

 

호스트는 인터넷에 접속되어 있는 컴퓨터들을 뜻한다.

나는 localhost라고 하는 도메인에 위치하고 있는 컴퓨터에 접근하고 있다.

 

프로토콜은 HTTP 프로토콜로 접근/통신하고 있다.

 

내가 접근한 url은 /IO_form/3.html이라는 파일을 웹서버에게 요청하고 있다.

 

 

서버가 있고 클라이언트(브라우저)가 있다.

브라우저에 url을 입력하고 엔터를 쳤을 때

우리는 서버에게 달려간다.

 

그러면 서버는 이 브라우저가 요청한 청보를 돌려준다.

 

이 때 서버와 클라이언트가 교신할 때 사용하는 약속이 프로토콜, 구체적으로는 HTTP이다.

 

그러면 구체적으로 클라이언트는 서버에게 어떤 정보를 전송하고

서버는 클라이언트에게 어떤 정보를 전송할까?

= 실제로 HTTP 프로토콜이 어떻게 생겼는지를 보자.

 

 

Raw 탭을 눌렀을 때 나오는 정보이다.

(이 전 그림에서 빨간 글씨로 클라이언트와 서버를 반대로 썼다.)

 

클라이언트가 서버에 요청을 보낼 때,

클라이언트가 서버로 전송하는 메시지 = 윗 단

 

서버가 클라이언트에게 보내는 메시지 = 아랫단

 

윗 단을 먼저 보자.

제일 먼저 GET이 나온다.

즉 여기(윗 단 전체)에 있는 이 HTTP 프로토콜의 메시지(정보)는

GET 방식으로 작성된 데이터라는 뜻이다.

 

그 뒤에 나오는 주소는,

이 주소로 이 데이터를 전송할 것이라는 뜻이다.

 

그 뒤에 HTTP/1.1은

현재 이 데이터(윗 단 전체)가 HTTP 프로토콜이라는 뜻이고,

HTTP 프로토콜의 버전 중 1.1 버전에 의해서/맞게 준수하고 있는 정보라는 뜻이다.

 

셋째 줄의 User-Agent는 웹브라우저와 같은 말이다.

그 뒤에 나오는 것은 이 웹브라우저는 모질라에서 만든 것이고

윈도우에서 동작하고 있고 Geckp라는 파이어폭스 엔진을 쓰고 있고

파이어폭스 24버전을 쓰고 있다

 

이러한 정보도 클라이언트가 서버로 전송하고 있다.

 

트래픽 분석하는 프로그램들이

이 사이트로 접속하고 있는 브라우저의 종류와 비율을 통계낼 수 있는 이유가 바로 이것이다.

 

뒤쪽의 정보들은 알 필요가 없다.

 

 

그럼 이런 정보를 받은 웹서버는

여기서 요청하는 3.html 파일을 읽어서 그 결과를 클라이언트에게 보내준다.

어떤 메시지를 보내는지 아랫 단을 살펴보자.

= HTTP 응답 메시지의 내용

위쪽 내용은 웹서버가 클라이언트에게 전달하는 부가적인 정보들이다.

- HTTP 1.1 버전으로 응답하겠다.

- 200은 정상적으로 요청을 받았고 정상적으로 데이터를 보내주겠다는 뜻이다.

  만약 이 웹브라우저가 요청을 했는데 3.html이라는 파일이 존재하지 않으면

  200 대신에 404가 뜨면서 404 Not Found가 나온다.

- 응답한 웹서버는 아파치이다.

 

아래쪽에 3.html 파일의 내용이 이 HTTP 문서 안에 들어있다.

이 내용을 서버가 클라이언트(브라우저)에게 전송하면

브라우저는 이 메시지 전체에서 이 html 문서에 해당되는 부분을 추출해서

그 내용을 가지고 웹페이지를 만들어 내는 것이다.

 

이 3,html의 내용이 바로 아래 그림인데,

여기서 '질의 보내기'를 누르면 어떻게 변하는지 보자.

한 줄이 추가됐는데 아까와 다르게 4.php이다.

 

즉, 브라우저가 submit 버튼을 눌렀을 때, 서버로 데이터를 전송하는데,

4.php라는 php 앱으로 데이터를 전송했다는 뜻이다.

 

Raw도 보자.

 

윗 단(클라이언트가 서버에게 보내주는 내용)을 보자.

맨 밑 줄을 보면, form에 입력된 사용자의 정보가

HTTP 메시지 안에 숨겨진 상태로

클라이언트에서 서버로 전송되고 있다는 것을 볼 수 있다.

 

아랫단(서버가 클라이언트에게 응답하는 내용)을 보자.

그러면 서버(아파치)는 정보를 받았는데, 요청한 파일이 4.php이다.

아파치는 php가 확장자인 앱을 처리할 수 없으므로 php 엔진에게 위임한다.

 

그러면 php 엔진이 해석해서 결과를 아파치에게 전달하고,

그 결과가 바로 제일 아랫줄의 egoing, 111111이다.

 

그러면 아파치는 php가 제공해준 이 결과(egoing, 111111)와

그 위에 있는 HTTP 정보를 결합해서 HTTP 응답 메시지를 만들어내고,

그것을 클라이언트로 다시 전송한다.

 

그러면 클라이언트인 브라우저는 이 정보를 받아서 화면에 출력하기 때문에,

그 결과인 이것이 화면에 출력되는 것이다.

 

 

→ 어느 때 POST 방식을 쓰고, 어느 때 get 방식을 쓰는가?

 

서버 쪽으로 ID와 비밀번호를 전송하는 방법은 POST 방식을 써야 한다.

∵ url에 ID와 비밀번호가 포함되는데,

 사용자가 아무것도 모르고 이 url을 복사해서

 다른 사람에게 링크를 걸거나, SNS에 링크를 걸 수 있다.

 그러면 그 링크를 본 사람들은 그 사람의 ID와 비밀번호를 알게 된다.

 = 굉장히 심각한 보안 이슈

∴ 사용자가 입력한 정보. 서버에 저장하거나 서버로 제출되는 정보에는 get 방식을 쓰면 안 된다.

 

클리앙 사이트의 어떤 정보를 다른 사람에게 공유하고 싶은데

POST 방식으로 데이터를 전송한다면,

url 뒤쪽의 정보(정보에 대한 식별자 or 주소)가 없이 공유되기 때문에,

그 특정 페이지를 링크 걸 수 없다.

 

∴ 어떤 정보에 대한 링크를 사용할 때는

 url 안의 정보로 사람들이 도달할 수 있도록

 get 방식을 사용해야 한다.

 

 

지금은 네트워크라는 주제가 낯설 수 있는데,

나중에 php 공부 끝나고 나서

인터넷, 네트워크, TCP/IP 라는 주제에 대해서 틈틈이 공부해야 한다.