php와 자바스크립트의 다른 코드삽입 방법

php와 자바스크립트의 다른 코드삽입 방법

Summary:

웹 어플리케이션 만들기 강의노트를 이어갑니다.


html에 php코드 삽입하기

css와 마찬가지로 자바스크립트와 php도 웹 페이지에 삽입해서 사용하는 언어이기 때문에 html 안에 자바스크립트, php가 공존하는 방법을 배울 것이다.

먼저 ‘phpjs’ 폴더를 만들고 1.php 파일을 생성한다. 생성한 php파일이 제대로 만들어졌다면 사파리나 크롬 주소창에 ‘http://127.0.0.1:8080/phpjs/1.php’를 입력했을 때 빈 창이 나온다. 이 때 폴더 생성은 꼭 htdocs 에 해준다. 자신이 임의로 저장한 위치에 php를 만들면 서버가 알아듣지 못한다.

잘못된 디렉토리(왼쪽)와 제대로 설정된 디렉토리(오른쪽)

디렉토리 오류 시 php 파일을 찾을 수 없음

정상적으로 세팅되었을 때 출력되는 화면

php 파일은 기본적으로 html과 똑같이 동작한다. html에 php의 시작과 끝을 알리는 코드는 <?php ... ?>다. <?~>은 html코드가 아닌 php만의 독특한 문법이며 … 안에 php 코드가 들어간다. 이 부분은 php엔진에 의해 해석되고 php엔진은 … 코드를 웹페이지에 포함시키도록 동작한다.

php에서 무언가를 출력할때는 echo "출력문자";, echo 수식; 등으로 표현한다. 아래 코드는 Hello world와 10+20을 출력하는 코드인데 이를 저장하고 웹페이지를 새로고침해보면 원래 코드와 약간 다르다는 것을 알 수 있다. 웹에서 소스코드보기를 실행하면 <?php echo ... ?> 는 없고 Hello world20만 남아있다.

php엔진이 echo ... 부분을 해석하여 그 결과를 html의 해당 위치에 가져다놓았기 때문이다. 특히 10+10 같은 수식의 결과를 웹에 표현하는 작업은 html, css만으로는 불가능하다. php가 있다면 할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
    echo "Hello world";
    echo 10+10;
     ?>
  </body>
</html>

위 코드를 실행했을 때 출력결과와 소스코드


html에 JavaScript코드 삽입하기

자바스크립트를 html에 붙이기 위해서는 <script>...</script>를 쓴다. css가 <style></style>을 쓰는 것과 유사하다.

자바스크립트로 웹페이지에 무언가 출력하고 싶을 때는 document.write(출력내용); 코드를 쓴다. 지금은 Hello world, 10+10을 출력할 것이기 때문에 사이에 아래 코드를 작성하고 웹페이지를 리로드해본다.

웹페이지 상의 로드결과는 php와 자바스크립트가 똑같다. 하지만 소스코드를 보면 둘이 같지만은 않다는 것을 알 수 있다. 앞서 php 태그를 이용했을 때는 소스코드가 20 그 자체였지만 자바스크립트를 쓰면 웹에서 소스코드를 볼 떄와 내가 작성한 소스코드가 정확히 일치한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
    document.write("Hello world");
    document.write(10+10);
    </script>
  </body>
</html>

위 코드를 실행했을 때 출력결과와 소스코드


php와 JavaScript의 차이

php는 서버쪽에서 실행되는 언어다. 그렇기 때문에 내가 에디터로 소스코드를 입력하여 저장하면 서버는 이 구문이 실행된 그 결과를 만들어서 웹 브라우저로 전송된다. 반면 자바스크립트는 웹브라우저가 해석하여 처리하는 언어이기 때문에 서버는 내가 작성한 코드를 건들지 않고 웹브라우저에서 내가 작성한 코드를 해석해서 화면에 반영한다.

즉, 웹브라우저에서 .php 파일을 요청했을 때 웹서버는 이 php파일을 자기가 담당할 수 없다는 것을 알고 php엔진(=php 인터프리터)에게 이 파일을 처리하라고 시킨다. 그러면 php엔진은 php소스코드를 읽고 해석한 다음, 그 결과를 웹서버에게 전달한다. 바로 이 단계에서 내가 작성했던 echo 10+10;20으로 바뀐 것이다. 웹서버는 php엔진으로부터 받은 이 결과물을 웹브라우저로 전송하게 되고 결국 웹브라우저는 php코드를 볼 수 없다.

한편 자바스크립트는 웹브라우저에서 실행되는 언어라서 웹브라우저 쪽에서 document.write(10+10); 코드를 해석하고 처리한다. 따라서 20은 클라이언트 컴퓨터 쪽의 자원을 써서 사용한 결과가 된다. 이 과정 때문에 자바스크립트를 클라이언트 쪽에서 동작하는 언어라고 부르는 것이다.

에디터에서 작성한 코드(왼쪽) 웹페이지 소스코드보기(오른쪽)

출력 결과


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora