웹에플리케이션 만들기 – JS, PHP 프로그래밍 1 : 복습과 수업 예고

지금부터 프로그래밍 수업을 시작하겠습니다 이번 시간에 우리가 배울 내용은 PHP, 그리고 Javascript입니다

이 두 가지 언어를 통해서 이 프로그래밍에 대한 이야기들을 좀 더 진전시켜 볼 건데요 우리가 지금까지 살펴보았던 HTML, CSS 물론 프로그래밍 언어이긴 하지만 이런 언어들은 문서를 만드는데 적합한 언어에요 우리가 이번에 배울 PHP나 Javascript는 사람들이 프로그래밍이라고 하면 일반적으로 떠올리는 형태의 전형적인 프로그래밍, 프로그램들이라고 할 수가 있습니다 그래서 이 프로그래밍 언어들을 익히면 여러분은 Java나 Python이나 뭐, C나 이런 언어들을 익히는데도 큰 도움을 받을 수가 있습니다

지금까지 우리 배운 거를 좀 복습 겸 정리를 좀 하고 넘어가죠 우선 웹브라우저, 웹서버 뭐 이제 지겹게 보셨죠? 웹브라우저, 웹서버 사이에 상호 작용을 우리 한번 다시 살펴봐요 보시는 것처럼 웹브라우저에서 누군가가 주소에다가 acom/a

html이라고 입력하면 웹브라우저는 acom에 해당되는 웹서버를 찾아서 그 웹서버에게 ahtml을 내놓으라고 요청을 합니다 그러면 웹서버는 그 웹서버에 하드디스크나 SSD에 저장되어 있는 ahtml 파일을 읽어서 그것을 웹브라우저에게 다시 전송을 해주죠

그럼 웹브라우저는 웹서버가 전송한 ahtml이라는 내용의 파일을 해석하겠죠 그러면 웹브라우저는 위에 있는 HTML부터 차근차근 읽어 나갈 겁니다 이렇게 이런 순서로

그러다가 <style>이라고 하는 Tag를 만났어요 그리고 여기에는 생략되어있다는 얘기에요 어떤 CSS Tag가 들어간다는 것이죠 <style> Tag를 만나면 웹브라우저는 어떻게 동작 하냐면 여기서부터 <style> Tag고 끝나는 여기서부터 여기까지를 CSS의 문법에 따라서 해석하겠죠 그리고 그거에 따라서 화면에 표시를 할 겁니다

어디까지 이렇게 </style> Tag가 닫히는 지점까지 그 다음에 <script>라는 Tag가 나타났어요 이거 우리 아직 안 배운 겁니다

그러면 CSS랑 똑같이 웹브라우저는 이 <script> Tag가 끝나는 여기에서부터 시작 Tag가 끝나는 여기에서부터 이 부분을 Javascript의 문법에 따라서 해석하게 됩니다 그에 따라서 동작하겠죠 그리고 </script> Tag가 끝나는 이 지점 끝나는 </script> Tag가 나타나면 이제 다시 이 밑에 부분을 HTML 부분으로 해석하기 시작할 겁니다 그리고 여기에 또 <link> Tag를 만났어요

<link> Tag가 뭐였나요? CSS를 외부로 분리할 때 분리되어 있는 CSS를 사용할 때 사용하는 Tag가 <link> Tag 였죠 거기에 href라고 적혀있는 것을 웹브라우저가 보고 이 주소에 존재하는 acss라는 파일을 일단은 읽어야겠죠 그래서 여기 있는 acss라고 하는 파일은 어디에 있냐면 a

com이라고 하는 웹사이트에 있겠죠 그러면 웹브라우저는 다시 acom에게 acss라는 파일을 내놓으라고 요청을 합니다 그러면 웹서버는 이 서버 컴퓨터의 하드디스크에서 a

css라고 하는 파일을 찾아서 그것을 읽은 다음에 그것을 웹브라우저에게 다시 쏘아줍니다 그러면 웹브라우저는 acss라는 파일을 보고 그 파일에 있는 CSS 내용을 CSS 문법에 따라서 해석을 하겠죠 그래서 이 <body> Tag의 폰트 컬러를 붉은 색으로 지정한다 뭐 그렇게 적혀 있잖아요 그 작업이 끝난 다음에 다시 웹브라우저는 <script> Tag를 해석해서, 이 <script> Tag는 역시나 우리가 아직 배우지 않은 Javascript를 가져오는 Tag인데요

src라고 하는 속성에 있는 acom/ajs라고 하는 저 부분을 웹브라우저는 보고서 acom에게 ajs 파일 요청합니다

그럼 웹서버는 웹서버의 저장 장치에 들어 있는 ajs 파일을 읽어서 그것을 웹브라우저에게 전송을 하고요 웹브라우저는 ajs 파일의 내용을 보고서, 이게 뭔지 우리는 지금 몰라요 여기 있는 내용을 Javascript의 문법에 따라서 실행한 다음에 그 실행이 끝나면 여기 있는 이 HTML 코드를 다시 해석하기 시작하는 거죠

그렇게 쭉 내려가다가 hello world가 나오면 hello world를 이 화면에다가 적어 주겠죠 이렇게요 그 다음에 </body>까지 하고 HTML 해석이 끝나면 그러면 모든 해석 작업을 끝내게 되고 화면에는 요청한, 화면에는 사용자가 요청한 모든 정보가 표현되게 됨으로써 모든 작업이 끝나게 됩니다 이거는 지금까지 우리가 배웠던 내용을 총정리한 겁니다 그리고 여기에는 아직 우리가 배우지 않은 Javascript에 대한 언급도 일부 나와 있어요

지금 잘 모르는 부분은 우리가 뒤에서 배울 거니까 불안해하지 마세요 방금 우리가 살펴 본 언어들은 웹브라우저에 의해서 해석되는 그리고 웹브라우저 위에서 동작하는 언어들입니다 그래서 얘를 클라이언트(client) 쪽에서 동작하는 언어들이라고 하고요 지금부터 우리가 볼 것은 서버(server) 쪽에서 동작하는 언어들을 살펴볼 거예요 우선 웹브라우저가 있고 웹서버는 익숙하죠

그런데 없었던 것들이 생겼어요 PHP, 데이터베이스 이런 것들이 출현했는데 바로 이제부터 우리가 서서히 PHP, 데이터베이스라는 것들이 우리 수업에서 이렇게 부각되기 시작할 겁니다 그러면 어떻게 이것들이 상호작용하면서 이 웹 애플리케이션이 동작하는 가를 살펴보죠 그 전에 한 가지 여기에 있는 PHP, 데이터베이스라고 하는 것들은 다 설치해야 되는 소프트웨어들이에요 웹서버도 웹브라우저처럼 소프트웨어라는 겁니다

그거 잘 기억하셔야 되요 우선 웹브라우저에 누군가가 이렇게 주소를 입력했어요 뭐라고 했냐면 acom/aphp 저 얘기는 a

com에 해당되는 웹서버를 찾아가라는 뜻이죠 그리고 웹서버한테 aphp라는 파일을 요청하라는 뜻이에요 그러면 웹브라우저는 그것을 하겠죠 그럼 웹서버는 무엇을 보냐면 웹서버는 바로 a

php에서 php라고 하는 부분을 봅니다 그리고 웹서버는 HTML이 아니라는 것을 알 수 있겠죠 그러면 자신이 할 수 없는 일이라는 것을 웹서버는 알고 있어요 그러면 이것을 할 수 있는 담당자를 부를 겁니다

그 담당자가 바로 PHP인데요 PHP 우리가 이 PHP 인터프리터라고도 하고 또는 PHP 엔진이라고도 합니다 이 PHP 엔진에게 aphp라는 파일을 처리하라고 명령하는 거예요

웹서버가 이렇게요 그러면 PHP 엔진은 이 서버 컴퓨터에 저장장치, 뭐 하드디스크나 SSD죠 거기에서 aphp 파일을 읽어서 저 파일에 적혀있는 내용을 해석합니다

그런데 해석할 때 요 위에 있는 부분들은 그냥 그대로 쭉 넘어가요 그러다가 뭐가 있어요? 이렇게, 이렇게 생긴 기호가 나타나면 이 PHP 엔진은 이 아래쪽에 이렇게, 이 부분을 어떻게 해석 하냐면, 이상한 놈이 자꾸나오네요 어떻게 해석 하냐면 PHP의 문법에 따라서 해석합니다 즉 여기에 있는 이 기호는 그리고 이 기호는 지금부터 PHP가 시작된다, PHP가 이제 끝났다라는 것을 PHP 엔진에게 알려주는 그런 특수한 기호에요 약속된 기호

그러면 PHP 엔진은 여기 있는 이 부분을 해석하겠죠 여기에 데이터베이스에 topic에서 수업 제목들을 가져온다고 적혀있습니다 실제 PHP의 문법이 저렇지는 않아요 다만 여러분들한테 우리가 아직 PHP 문법을 배우지 않은 상태이기 때문에 제가 한국말로 그냥 적은 거예요 그러면 PHP 엔진은 저기에 있는 저 코드에 적혀있는 내용대로 데이터베이스에게 topic이라고 하는 테이블(table)에 제목들을 달라고 요청을 합니다

테이블이라는 것은 뭐냐면 이런 표에요 테이블이 영어로는 표라는 뜻입니다 그래서 이 데이터베이스에는 저런 표들이 저장이 되어 있습니다 그래서 그 표에서 이 제목에 해당되는 이 내용들을 데이터베이스가 찾아서 그것을 PHP 엔진에게 돌려줍니다 그러면 PHP 엔진은 여기에다가 이 구간에다가 이 정보들을 이렇게 결합을 시켜서 이런, 이렇게 HTML로 완성을 하는 거예요, PHP가

그 다음에 PHP에 해석이 끝나면 여기 PHP가 끝났다는 얘기죠 나머지를 그대로 출력해줍니다 이렇게요 그러면 PHP는 하나의 HTML 파일을 이렇게 만들 수 있게 되요 HTML 파일을 만들었습니다

그리고 그 HTML 내용을 뭐 파일이라기보다는 HTML을 만들어서 그것을 웹서버에게 전달해요 그러면 웹서버는 그 HTML의 정보, 완성된 HTML이라고 하는 이 정보를 웹브라우저에게 전송합니다 그러면 웹브라우저는 여기에 있는 이 코드, 이 HTML 코드를 해석해서 바로 이 웹브라우저의 화면에 출력하게 되는 것이죠 이것이 바로 서버 쪽에서 동작하는 흐름이에요 전체적인 흐름

그런데 우리가 아직 배우지 않은 것들에 대해서 언급을 했기 때문에 아마 여러분들의 입장에서는 추상적인 느낌이 드실 겁니다 그 추상적인 거는 어쩔 수 없고 일단은 두시고 그리고 곧 우리가 수업을 하면서 PHP, 데이터베이스를 배울 겁니다 그러면 그 때 배운 것들을 그렇게 추상적으로 비어있는 공간에다가 채워 넣는 것을 통해서 이 전체적인 흐름의 흐름을 완성하는 것이 우리 수업의 궁극적인 목표입니다 제가 계속해서 전체적인 맥락들, 전체적인 구조를 보여 드리고 있는데 우리 수업의 핵심은 바로 이 구조에요

그렇기 때문에 이 구조에 여러분들은 집중하셔야 되고 그리고 이 안에 있는 HTML, PHP, Javascript 이러한 각각의 구체적인 기술에 대한 이 세부적인 문법이나 이런 것들은 소홀히 하셔도 됩니다 아시겠죠? 이 전체적인 구조를 여러분들 마음속에 세우기 위해서 그 각각의 각론들을 우리가 도구로 활용하고 있는 것 뿐이라는 거 잘 염두에 두시고 수업을 따라와 주세요