웹에플리케이션 만들기 – JS, PHP 프로그래밍 3 : 웹페이지에 코드 삽입하기

지금부터 프로그래밍에 대한 기본 문법을 살펴 볼 건데요 우리는 자바스크립트와 PHP라는 두 개의 언어를 서로 다른 언어를 동시에 익혀 갈 겁니다 그것을 통해서 여러분들이 하나의 언어만 배우면 사실 거의 모든 언어를 배우는데 있어서 기본적인 소양을 갖추게 되는 거라는 사실을 이해하실 수가 있을 겁니다

마치 한국어와 영어 둘 다 완전히 다른 언어이지만 이 세상에 거의 모든 언어들이 주어 동사 목적어라고 하는 요소를 다 가지고 있는 것처럼 이 프로그래밍 언어들은 대부분 공통적인 기능성을 가지고 있고 그것을 좀 더 각자의 언어의 취향에 따라서 다른 스타일의 문법들이 있을 뿐입니다 우선 살펴 볼 것은 이 프로그래밍 코드를 HTML에 삽입하는 이 방법에 대해 살펴 볼 건데요 우리 이전에 CSS 공부할 때 HTML 안에 CSS를 넣기 위해 스타일 태그를 사용한다는 거 그거 배웠었죠? 그것과 똑같이 자바스크립트와 PHP도 웹페이지 안에서 삽입해서 사용하는 언어이기 때문에 웹페이지라는 HTML이라는 이질적인 문법 안에 자바스크립트와 PHP가 공존하는 방법이 존재합니다 그게 뭔지를 살펴보자는 거에요 우선 새로운 디렉터를 하나 만들겠습니다

그 디렉토리의 이름은 “phpjs” js는 자바스크립트의 줄임말이고요 엔터 그리고 여기에다가 우리의 실습을 진행할게요 우선 첫 번째 파일은 그냥 간단하게 “1php”라고 하겠습니다 우선 php부터 설명을 좀 드릴게요

그리고 "localhost/phpjs/1php" 하고 엔터를 한번 쳐보세요 그러면 빈 화면이 뜰거에요 여기에서 1html 에다가 "Hello World" 입력하고 이 파일을 리로드를 해보면 "Hello World"가 그대로 출력되는 것을 볼 수가 있습니다

기본적으로 이 PHP파일은 HTML과 똑같이 동작합니다 제가 이 탬플릿에 있는 내용을 카피해서 그것을 1php에다가 붙여넣기를 했습니다 그리고 바디 안에다가 "Hello World"라고 입력하고 그리고 리로드를 해볼게요 이렇게 나왔죠? 이렇게 나오는 이 웹페이지의 소스코드를 한번 볼게요

오른쪽 클릭하고 페이지소스 보기를 하면 현재 화면에 출력되고 있는 이 화면에 대한 소스코드를 볼 수 있습니다 이게 소스코드의 내용이에요 우리가 PHP파일에 작성한 내용과 동일하게 화면에 표시되고 있죠? 그럼 좀 혼란스러우실 거에요 도대체 이건 PHP는 뭐야? 이런 생각이 드실 겁니다

그런 의문은 조금만 뒤로 미뤄두고 PHP의 시작을 알리는 코드를 한번 작성해 보겠습니다 여기서 “<?php” 라고 하면 저특수한 기호 여기 있는 이 특수한 기호는 지금부터 PHP가 시작된다는 것을 PHP 엔진에게 알려주는 역할을 하는 코드입니다 그리고 이렇게 "?>" 닫아주면 이제 PHP가 끝났다 라는 뜻이에요

여기에 시작"<?php" , 여기에 끝 "?>" 을 의미하는 약속되어 있는 기호라는 것이죠 그럼 여러분은 여기에다가 아직 우리가 배우지 않은 PHP의 코드를 여기에다가 적으시면 되는 거죠 그러면 PHP로 한번 화면에다가 "Hello World"라고 하는 텍스트를 출력해 보겠습니다 PHP에서 무언가를 출력할 때는 echo 라는 걸 씁니다 "echo" 그리고 문자를 사용할 때는 "Hello World"라는 기호를 써요

아시겠죠? 그리고 제가 "1php" 파일을 리로드를 해볼게요 거의 바뀐 게 없죠? 여기 소문자 였던게 대문자로 바뀌었을 뿐이네요 소스코드를 한번 볼까요? 페이지 소스보기를 하면 보시는 것처럼 "Hello World"라고 하는 텍스트가 출력되고 있습니다

그런데 좀 이상한 점이 보이죠? 뭐가 이상한 가요? 여기에 현재 웹브라우저에 소스코드를 보니까 HTML에서 소스코드를 보니까 바디까지는 똑같아요 여기까지는 똑같죠? 그렇죠? 내용이 똑같잖아요

그런데 여기 이쪽에 바디도 줄바꿈이 조금 달라 보이기는 하지만 어쨌든 똑같다는 걸 알 수가 있습니다 그러면 어디가 다른가요? 바로 이 부분과 이 부분이 다르죠? 똑같은 "1php"파일 임에도 불구하고 제가 지금 강조 표시한 부분이 다르게 나타나고 있어요 그것은 왜 그러냐면 바로 이 부분이 이 부분이 PHP엔진에 의해서 해석되어서 여기 "Hello World"라고 하는 이 텍스트를 이 웹페이지에 포함시키도록 동작했기 때문에 그렇습니다

그래서 여기 있는 이것이 소스고 여기에 있는 이 "Hello World"라고만 적혀있는 저 부분은 그 소스에 출력된 결과라는 것이죠 그럼 조금 다른 예를 들어 볼게요 여기에다가 제가 “10+10”을 해볼게요 그러면 이쪽에 소스코드에는 뭐가 찍힐 것인지를 한번 생각해보세요

“20”이 찍힙니다 즉 여기에 있는 echo라고 하는 부분을 PHP 엔진이라고 하는 것이 PHP 인터프리터라고 하는 것이 해석해서 그 해석된 결과를 여기에다가 이 위치에 웹페이지상에 이 위치에다가 탁 갖다 놨기 때문에 "20"이라는 숫자가 저기에 나타나는 거에요 이렇게 더하기와 같이 무언가를 더하는 이런 작업은 HTML이나 CSS는 할 수 없는 일이에요 하지만 PHP는 할 수 있는 일입니다

좀 혼란스러우실 수 있는데 조금 시간이 지나면 다 정리가 될 겁니다 머릿속에서 이게 PHP를 웹페이지에 삽입하는 방법입니다 그러면 자바스크립트를 한번 웹페이지에 삽입해볼까요? 이 PHP코드 위에다가 제가 “<h1>php</h1>" 라고 이렇게 적어놓을 게요

그리고 얘를 이건 소스코드구요 여기 있는 웹페이지를 리로드하면 PHP가 "20" 찍힌 것을 볼 수가 있죠? 그럼 이번에는 "<h1>JavaScript</h1>" 해볼게요 자바스크립트를 웹페이지에 추가시킬 때는 이렇게 하셔야 됩니다

”<script> " 그리고 "</script>" 로 끝내야 되요 여기 있는 이 코드는 HTML태그입니다 이거는 HTML 태그가 아니라 PHP만의 어떤 독특한 문법이에요 HTML태그 그리고 이 가운데 에다가 자바스크립트를 써주면

웹브라우저는 이 웹페이지를 이렇게 해석하다가 자바스크립트를 만나면 이 부분을 자바스크립트의 문법에 따라서 해석해서 거기에 적혀있는 대로 동작하고 그 다음부터, 여기서부터는 다시 HTML을 해석하는 모드로 변경되게 됩니다 그러면 문서에다가 이번에도 "Hello World" 를 한번 찍어볼게요 자바스크립트에서 어떤 정보를 화면에 표시할 때는 이런 명령을 씁니다 이명령의 문법에 대해서는 지금 모르셔도 됩니다

"documentwrite()" 그리고 저 괄호에다가 여러분이 화면에 출력하고 싶은 정보를 적어주시면 되요 예를 들어서 "documentwrite("Hello World");" 까지 한번 화면에 출력해보죠

보시는 것처럼 "JavaScript" 라고 뜨고 "Hello World" 라고 출력된 것을 볼 수가 있어요 이 "Hello World"는 뭐의 결과냐면 바로 여기에 있는 이 코드가 이렇게 화면에 출력이 된 겁니다 그러면 여기에 있는 이 코드를 이번에는 저 PHP처럼 "10+10" 으로 하고 저장을 한 다음에 리로드를 해보죠 그러면 이렇게 출력이 될 거에요

이렇게 출력되는 이유는 바로 여기있는 이 코드를 이 웹브라우저가 자바스크립트를 해석해서 그것을 여기에다가 이렇게 위치시킨 것이죠 여기까지 됐고요 그럼 여기에서 오른쪽 클릭해서 소스보기를 하게 되면 현재 이 웹브라우저가 이 화면에 표시하고 있는 이 웹페이지의 소스코드를 우리가 볼 수 있다고 말씀드렸죠? 소스보기를 한번 해봅시다 그러면 놀라운 결과가 여기에 있습니다

자바스크립트와 PHP의 차이를 극명하게 보여주는 화면이에요 보시는 것처럼 여기에 있는 이 "20"은 여기에 있는 세 줄의 코드 전체의 결과입니다 그렇죠? 그리고 여기에 있는 자바스크립트 태그로 시작해서 자바스크립트로 끝나는 부분은 바로 이 부분이에요 그리고 이 둘은 완전히 같은 코드입니다

같잖아요 딱 보시기에도 PHP와 자바스크립트의 차이가 극명하게 드러나는 대목입니다 왜 그럴까요? 결론적으로 말씀드리면 이 PHP는 서버쪽에서 실행되는 언어에요 서버 사이드언어입니다

여러 번 말씀드렸죠? 그렇기 때문에 서버에서 이 구문이 실행된 그 결과가 만들어져서 웹브라우저에게 전송이 됩니다 그러니까 당연히 웹브라우저에는 그냥 "20"이라고 찍혀있을 뿐입니다 그런데 자바스크립트는 웹브라우저가 해석해서 처리하는 언어입니다 따라서 서버에서는 얘를 손대지 않아요 그리고 웹브라우저에서 이 자바스크립트 코드를 해석해서 그것을 화면에 반영하기 때문에 여기에 있는 이 코드가 이렇게 화면에 출력되는 것이죠

누가 해석해서요? 웹브라우저가 해석해서 이전에 살펴봤던 PHP가 동작하는 원리에 대한 그림인데요 다시 한 번 보죠 웹브라우저가 웹서버에 "aphp" 즉 PHP파일을 요청을 하면 웹서버는 저것이 PHP파일이라는 것을 알면 자기가 할 수 없다는 것을 알고 PHP인터프리터

다른 말로는 PHP엔진 이라고도 부르는 저것에게 저 소프트웨어에게 저 파일의 처리를 위임합니다 그럼 PHP는 여기 있는 그림을 다시 한 번 보시죠

우리가 이전에 살펴봤던 것을 좀 더 간략화시킨 겁니다 웹브라우저에 "localhost/phpjs/1php" 라고 요청을 하고 엔터를 땅 치면 웹브라우저는 웹서버에게 "1

php"를 요청하게 되죠 그럼 웹서버는 이 사용자가 요청한 파일이 PHP파일이라는 것을 알 수가 있어요 그럼 그것을 자기가 처리할 수 없다는 것을 알고 PHP인터프리터에게 위임합니다 그럼 PHP인터프리터는 "1php" 라는 파일을 읽어서 거기에 있는 내용을 해석한 다음에 그 결과를 웹서버에게 전달을 하는 거에요

바로 이 PHP 인터프리터가 소스코드를 해석한 결과가 웹서버에게 전달되기 때문에 바로 이 단계에서 "<?php echo 10+10; ?>" 아까 우리가 작성했었던 코드있죠? 바로 이 부분이 "20"으로 바로 이 단계에서 바꿔치기된 상태의 웹페이지를 웹서버가 받게 됩니다 그 다음에 웹서버는 웹브라우저에게 그 내용을 전송하기 때문에 웹브라우저는 PHP 코드를 볼 수 없는 것이죠

하지만 자바스크립트는 웹브라우저에서 실행되는 언어이기 때문에 바로 여기 있는 이 스크립트를 자바스크립트가 보고서 여기 있는 코드를 자바스크립트의 문법에 따라서 실행한 다음에 그 결과를 화면에 반영한 것이 이것입니다 그래서 여기에 있는 "20"은 누가 처리한 거냐면 PHP 인터프리터라고 하는 것이 PHP 해석엔진이 이 "20"을 해석해서 처리한 결과인 것이고요 즉 서버쪽에서 처리된 결과인 것이고요

여기 있는 "20"은 웹브라우저에서 자바스크립트를 해석해서 처리한 결과이기 때문에 이것은 웹브라우저 쪽에서 실행된 것이고 그것을 우리는 클라이언트쪽 컴퓨터에 자원을 써서 사용한 결과이기 때문에 이거를 자바스크립트를 클라이언트쪽에서 동작하는 언어라고 부르는 겁니다 이미 이해가신 분들은 좀 반복되는 얘기라서 좀 지루하실 수도 있는데

중요한 내용이라서 그래요 이거를 이해 못하면 그 다음 부분에서는많이 헤맬 수밖에 없기 때문에 제가 좀 반복적으로 여러분들에게 이런 저런 방법을 동원해서 설명을 드린 겁니다 이 내용만 이해했으면 이번 영상의 목적은 달성된 거고요 이 다음 영상에서는 또 다른 이야기들을 해보도록 하죠