모의해킹 취업반 스터디 1주차 [동적 페이지]

동적 페이지

- 사용자의 요청이나 입력에 따라, 내용이 바뀌는 웹 페이지를 말한다.
즉, 매번 같은 HTML을 보여주는 게 아니라, 요청할 때마다 서버에서 새로운 HTML을 생성해서 보여주는 페이지라고 할 수 있다.

 

예를 들어,

성적표를 나눠주는 웹 서버가 있다고 하자.

A, B, C

웹 서버: A_score.txt, B_score.txt, C_score.txt

만약 학생이 많다고 하면, 파일이 그많큼 엉청 많아 질 수 있다. 그리고 여기서 교장선생님이 바뀌어서 내용을 바꿔야 한다면, 1000개의 파일의 내용을 일일히 다 바꿔야 한다. 관리가 힘들어 진다.

네이버를 예를 든다면, 로그인 했을때, 네이버 가입자 수가 엉청나게 많을 것이다. 그러면 그 인원들의 파일을 하나하나 다 가지고 있기에는 무리가 있다.

이 부분만 바뀌면 된다.  여기만 새로 찍어내면 된다. 필요한 내용을 채워서 넣어주면 된다.

이걸 WAS 가 한다.

크게 웹서버는 3가지 구조로 볼 수 있다.

WEB, WAS, DB

각각의 정의와 역할을 알아보자.

1. WEB

- 웹서버는 클라이언트(브라우저)로부터 들어온 HTTP 요청을 처리하고, 정적 리소스를 전달하거나 WAS로 요청을 전달하는 역할을 하는 서버

즉, 웹 서버의 정해져 있는 파일을 주는 것이다. 그냥 전달 전달 전달 하는 것이다. 이것을 정적 페이지 라고 한다.

 

 

2. WAS (Web Application Server)

- WAS는 사용자의 입력이나 요청에 따라 결과를 계산하고, 그에 맞는 동적인 응답(HTML 등)을 생성한다.

예를 들어, 클라이언트가 score.php 파일을 달라고 요청한다. 웹이 이 파일을 보고 동적인 것을 확인하면, WAS보고 처리해달라고 한다. 그럼 WAS는 이 파일을 열어서 php 코드를 확인 후 그걸 페이지로 만들어서 다시 전달 해 준다. 

 

3. DB (Database Server)

- DB는 데이터를 저장하고 관리하는 데이터베이스 서버입니다.
회원 정보, 게시글 등 모든 데이터는 DB에 저장되며, WAS는 DB에 접근하여 데이터를 읽거나 수정한다.

 

전체적인 흐름도로 본다면,

브라우저가 WEB서버에 들어가면, 이것이 만약 동적 이면 WAS에게 전달해주고, WAS는 그 코드를 읽고 여기서 DB가 있다면 DB한테 달라고 요청하고, DB가 준 데이터를 가지고 WAS는 페이지를 생성해서 WEB한테 전달해서 WEB이 브라우저한테 띄우는 형식을 띄게된다.

 

 

WAS를 이용해서 동적 페이지를 실습 해보자.

 

먼저 webDev에 들어가서 그 파일안에 있는 dockerCMD를 실행하자

그 전에 실행되어 있는 docker 를 확인해보자.

sudo docker ps -a

만약 있으면, 밑에 명령어를 이용해서 삭제하자

sudo docker rm -f [CONTAINER ID]

 

이제 한번 실행해보자.

./dockerCMD &

실행이 됬다. 확인해보면,

1018 포트로 실행 된 것을 확인할 수 있다.

무슨 경로로 실행 되었냐면, webapp 여기로 실행이 되었다 이경로로 이동해주면 된다.

 

vi를 통해서 php 파일을 한번 만들어 보자.

이런 식으로 작성해서 score.php 로 저장해서 확인해 보자.

이렇게 나온 것을 알 수 있다. 이건 정적 페이지 이다. 이제 동적 페이지로 바꾸기 위해서 다른 걸 작성해 줘야한다.

이렇게 작성하고 저장 하면 된다.

그리고 들어가 보면,

이렇게 아무것도 안나오게 된다. 그럼 URL을 이용해서 한번 name을 넣어 보자.

http://192.168.72.130:1018/score.php?name=Pan

이렇게 나오는 것을 확인 할 수있다. 밑에 코드를 한번 확인 해보자.

<?php echo $_GET['name']; ?>

이 코드는 php코드이다. 전달받은 데이터를 화면에 출력한다 라는 뜻이다.

WEB 서버에서 처리했을 때 동적으로 확인 된다면, WAS에게 전달하는데 그때 이 코드를 보고 처리하게 된다.

여기서 페이지 보기를 해보면,

이렇게 나온다. 저 위에 코드는 왜 없을까? 그 코드는 WAS가 다 실행해서 전달하기 때문에, 우리 눈에는 볼 수 없는 것이다.

 

PHP

$_GET['name'] : GET Method로 전달받은 파라미터

파라미터란?

사용자가 웹서버에게 전달하는 데이

로그인을 한다고 하면 아이디와 패스워드를 전달 해줘야 되고,

만약 검색을 한다면 검색어를 전달 받아야 한다.

이 것들을 받기위해 파라미터가 존재한다.

파라미터를 받는 방식은 2가지가 존재

GET

GET : 파라미터를 URL에다가 붙여서 전달

http://192.168.72.130:1018/score.php?name=Pan

이런 식으로 전달하는데 ?로 구분한다. 그 뒤부터는 파라미터이다.

name라는 변수 안에다가 Pan이라는 것들 넣어서 보낸 것이 된다.

즉, WAS가 처리할 때 GET방식으로 받았을 때, name이라는 변수가 있네? 라고 해서 name 파라미터를 열어서 있는 내용을 보고 출력하는 것이다.

 

여기서

Front-End 와 Back-End를 알아보자면

 

 

Front-End (WEB)

- 클라이언트 측 코드 (브라우저가 실행 하는 코드)

즉, 사용자가 눈에 보이는 모든 것을 담당

- HTML, CSS, Javascript가 있음

Back-End (WAS)

- 서버 측 코드

즉, 사용자가 보지 못하는 영역, 서버쪽에서 처리되는 모든 영역

- PHP, ASP, JSP가 있음