웹 개발 공부 일기장 1-2 (WAS)

저번에 웹 서버는 파일을 저장하고 있다가 우리가 파일을 요청하면 전달해준다고 배웠습니다.

하지만, 파일의 기본 틀이 똑같지만 어느 한 부분만 다를 경우 이 모든 파일을 저장할 경우 비효율적이며 큰 저장공간을 차지할 것입니다. .

 

예시로 우리가 네이버 홈페이지를 방문 후 로그인을 한다고 해보자! 로그인을 할 경우 기본적인 검색 창, 광고, 뉴스... 등 다른 부분은 모두 같지만 로그인한 사람마다 로그인한 부분의 이름이 다릅니다. (얼마나 많은 사람들이 네이버에 로그인을 할까요...?!!)

물론, 이름 부분만 바꿔서 여러 페이지를 저장한 후 각 로그인한 사람에게 페이지를 줄 수 있습니다. 하지만, 이럴 경우 로그인한 사람만큼의 파일이 필요하게 되며 사람이 많아질 수록 엄청난 양의 파일을 저장해야 됩니다.

 

이때, 사용할 수 있는 것이 동적페이지입니다.

 

동적 페이지 예시

 

index.php 파일 내용

적은 명령어가 아닌 name으로 넣어준 값이 나오는 것을 확일할 수 있다.

 

이렇게 <?php ... ?> 로 되어있는 부분을 동적으로 바꿔줄 수 있는데 이러한 파일들을 동적페이지라고 합니다.

 

동적 페이지를 이해하기 위해서는 WAS라는 것을 알아야 합니다. 

WAS(Web Application Server)는 DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 애플리케이션 서버입니다.

 

 

그림과 같이 우리가 브라우저를 통해 웹 서버에 파일을 요청하면, 웹 서버는 요청한 파일이 정적페이지이면 바로 우리에게 보내주지만, 만약 동적 페이지일 경우 웹 서버는 이를 처리하지 못하기 때문에 WAS에게 넘겨 처리를 요청합니다. 그리고 WAS가 모두 처리한 후 웹 서버에게 건내주면 웹 서버가 다시 우리에게 처리가 다 된 파일을 보내주는 식으로 응답합니다.

그래서 브라우저에서 페이지 소스보기를 하면 index.php의 코드는 볼 수 없고 다 처리된 결과물만을 우리는 볼 수 있습니다.

 

이로인해 Front-End && Back-End 도 이해할 수 있습니다.

Front-End와 Back-End를 들어본 적이 있을 겁니다.

전 시간에 했던 소스를 다 볼 수 있는 페이지로 브라우저가 실행하는 코드는 Front-End(HTML, CSS, Javascript ...등)

WAS에게 넘겨져 처리되는 코드 즉, 서버측에서 처리되는 코드는 Back-End(PHP, ASP, JSP ...등)

 

이제 동적페이지를 어떻게 처리하는지 알았습니다. 그럼 동적페이지를 처리하기 위한 데이터를 어떻게 보내야 할까요??

먼저 간단히 index.php코드를 설명하면,

<?php 부분은 동적 처리를 해야한다는 시작표시이며, echo 는 뒤의 문자를 출력하라는 뜻 입니다.

echo 뒤를 보시면 $_GET['name']이 있습니다. 여기서 $_GET은 get 메소드를 뜻입니다. 

이때 get 메소드는 URL에 적어서 요청을 보내는 것 말합니다.

즉, 정리해보면 URL의 파라미터에 name에 값을 넣어서 요청을 하면 name 값을 출력하라는 뜻입니다. 

 

이제 어떻게 parameter(예시에서 name값)을 전달할 수 있는지 보겠습니다.

바로 전 시간에 정리한 URL 요청을 확인해보면 ?parameter 라는 부분이 있습니다. 이 부분에 우리가 전달할 데이터를 넣어서 요청을 할 수 있습니다.

위에 예시를 보면 서버주소 뒤에 ?name=test 라고 적은 부분이 바로 이 부분입니다. 이렇게 ?뒤에 우리가 전달하고 싶은 데이터를 넣어서 전달할 수 있습니다.

 

GET 요청으로 데이터를 추가해서 보낼 수 있다는 것을 알았습니다.

하지만 GET 요청 말고도 POST 요청으로도 데이터를 보낼 수 있습니다.

 

GET은 URL에 추가하여 요청하는 데 POST는 어떻게 데이터를 보낼 수 있을까요??

POST는 요청을 할 때 URL에 추가하는 것이 아닌 body 부분에 추가하여 보낼 수 있습니다.

 

POST요청 예시

 

post.php 내용

input 칸에 hello 입력 후 제출한 결과

 

POST는 예시처럼 form 태그를 통해 데이터를 보낼 수 있습니다.

 

어떻게 된걸까??

input 태그로 우리의 입력을 받는다. 결과 예시를 보면 입력란이 있는 것을 확인할 수 있습니다.

우리가 입력한 데이터는 name이라는 이름을 가지게 됩니다.

-> (name="name")으로 지정 하였기 때문으로 만약 name="id"로 지정하면 우리가 입력한 데이터는 id라는 이름을 가지게 된다.

form 태그안에 이를 입력하여 submit 할 경우 메소드를 post로 지정하였기 때문에 웹 서버로 post 요청을 하게 됩니다.

그리고 php 코드를 통해 post요청으로 name 값을 받을 경우, 이를 출력하라고 하였기 때문에 예시처럼 hello를 입력하여 제출하면 hello가 출력됩니다.

 

만약, post로 받은 데이터를 다른 파일로 전송하고 싶을 경우 form 태그에 action 속성을 추가하여 원하는 파일로 데이터를 보내줄 수도 있다. 

 

action 속성을 추가한 post.php

이렇게 작성하면 test.php로 name값을 보내줄 수 있으며 test.php에서 $_POST["name"]을 통해 데이터를 사용할 수도 있다.

 

* 파라미터를 전달하는 방법에는 GET/ POST 가 있으며, 파라미터를 다른 페이지로 전달할 수도 있다.

 

과제.

로그인 페이지를 만들어 보고, 로그인 페이지를 CSS, Bootstrap을 통해 꾸며보기!!