웹 개발 기초 공부 2

WEB (정적 페이지)

• 파일을 단순히 전달해주는 역할

WAS (동적 페이지)

• PHP 같은 동적 코드를 실행하여 결과물을 만들어 웹 서버로 전달하는 역할

이제 이 WAS에 대해 직접 실행해 보고 다뤄보는 시간을 가져보겠습니다.

현재 위치 /home/student/WebBasic/

먼저 cd ../ 명령어를 입력해서 상위 디렉토리로 이동한 후, webDev 디렉토리로 이동했습니다.
그리고 ls -al 명령어를 입력하여 숨김 파일을 포함한 모든 파일을 확인할 수 있게 했습니다.
그다음, sudo docker ps -a 명령어를 입력하여 현재 시스템에서 모든 컨테이너의 상태를 확인해 보았습니다.

여기까지는 잘 나오는지 확인만 해둡니다.

 

dockerCMD 실행

dockerCMD 파일을 백그라운드 모드에서 실행하기 위해 ./dockerCMD &를 입력했습니다. 이렇게 하면 다음과 같이 출력됩니다

*[&] = 백그라운드 모드로 실행 후에도 터미널을 계속 사용할 수 있게 해줍니다.

그리고 엔터를 누르고 ls 명령어를 입력하면 현재 경로인 webDev에 dockerCMD 파일이 있는 것을 확인할 수 있습니다. dockerCMD 파일 안에는 웹 서버를 실행시키는 코드가 있어, 이를 통해 웹 서버가 실행 중임을 알 수 있습니다.

또 알아두어야 할 것은 포트 번호가 기본 80에서 1018번으로 변경되었다는 것입니다. 따라서 서버에 요청을 할 때는 1018번 포트를 명시해 주어야 합니다.

그리고 하나 더 알아야 할게 있습니다.
Docker 컨테이너 studentWeb이 Exited 상태에 일때, 컨테이너를 재시작 해야합니다.

"sudo docker start studentWeb" 입력해주고,

재시작이 됐는지 "sudo docker ps " 입력하여 확인해주면 됩니다.

 

이제 앞으로 webApp에서 웹 서버를 구축하는 작업을 시작하겠습니다.

 

동적 페이지 작성

이제 동적 페이지를 만들어보겠습니다.
vi score.php 명령어를 입력하여 PHP 파일을 생성한 후, 작성하고 싶은 HTML 코드를 넣어줍니다.

 

작성이 끝나면, esc 키를 누른 후 :wq를 입력하여 저장 및 종료합니다.

 

혹시나 제대로 저장되었는지 확인해보기 위해 cat score.php 명령어로 작성한 HTML 코드를 다시 확인해봅니다

오케이 코드가 잘 저장된 것을 확인한 후, 웹 브라우저를 열고 해당 URL을 입력합니다

http://192.168.136.123:1018/score.php를 입력해주면

이렇게 입력하면 의도한 대로 페이지가 명확하게 실행되는 것을 확인할 수 있습니다.

 

동적 기능 추가

지금까지는 동적 페이지 같은 정적 페이지 였습니다. 이제 동적인 작업을 추가해 동적페이지를 완성시켜 보도록 합시다.

다시 "vi score.php"로 들어가서

기존 html 코드에 "<p>UV SHIELD</p>"에

"<?php echo $_GET["color"]; ?>"를 넣어준다면 다음과 같은 결과가 나옵니다.

<p> UV SHIELD: <?php echo $_GET["color"]; ?></p>

이 코드는 사용자의 요청으로 전달된 color 값을 받아서 표시하는 역할을 합니다.

 

그 다음

웹 브라우저를 실행한 후, 다음과 같이 URL에 값을 전달하여 동적 페이지를 확인해봅니다.

http://192.148.136.129:1018/score.php?color=red 다음과 같이 입력해봅니다.

페이지에서 UV SHIELD: red라는 결과값을 확인할 수 있습니다.

 

PHP 코드 해석

이제 PHP 코드를 자세히 살펴보겠습니다:

이 코드는 HTML에서 사용하는 태그처럼, <?php ?>는 PHP 언어 실행 방식입니다. 그 안에서 echo $_GET["color"];는 다음과 같이 해석됩니다:

• echo: PHP에서 출력하는 함수
• $_GET: 용자가 요청한 값을 전달(파라미터)하고 저장하는 코드

🔶파라미터 : 사용자가 웹서버에 전달하는 데이터를 말합니다.

 

우리가 이 PHP 코드를 통해 "UV SHIELD: red"라는 결과값을 도출했고
이를 페이지 소스 코드로 보면

<?php echo $_GET["color"]; ?>는 사라지고 <p>UV SHIELD: red</p>만 남아있습니다.
이를 이상하게 여길 수 있지만, PHP는 서버 측에서 코드를 실행하여 완성된 HTML 코드만 클라이언트로 전달하는 역할을 하기 때문입니다.

따라서 클라이언트 측에서는 완성된 HTML 코드만 보이고,
서버 측에서만 PHP 코드를 확인할 수 있습니다.
이것을 서버 측 소스코드라고 부릅니다.

 

+더 알아가면 좋은것들+

Front-End & Back-End

 

Back-End = 서버 측 코드 (php,asp,jsp)

Front-End = 클라이언트 측 코드 (html,css,js)