웹 프로그래밍 입문(1) - 시작하기에 앞서

개인적으로 웹 프로그래밍에 관심이 생겨서 부서도 옮기고 공부를 시작하게 되었다.

근데 뭔 기술이 이렇게나 많은지... 어디부터 어떻게 시작해야 할 지 난감하다;; ㅎㅎ

대충이라도 어떤 필요에 의해 개발 및 발전 되어 온 기술들인지 개념이라도 잡고 가려고 한다.

일단, '동적인 웹 콘텐츠' 를 만들어 서비스 한다고 가정하고, 그에 필요한 기술들을 학습해 보도록 하겠다.

현재 하고자 하는 업무에 필요한 지식을 잘 정리하고 있다고 생각되는

"Learning PHP, MySQL & JavaScript (with JQuery, CSS & HTML5 - 로빈 닉슨 저" 

책을 먼저 공부해 보기로 했다.

0. 시작하기에 앞서

1) 용어 정리

① HTTP (Hyper Text Transfer Protocol)

  - 웹 브라우저와 웹 서버 사이의 요청과 응답을 처리하는 통신 표준.

② HTML (Hyper Text Markup Language)

  - 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어

  - 별도 컴파일러가 필요치 않으며, 웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어

③ CSS (Cascading Style Sheets)

  - 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.

  - 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.

④ PHP (Hypertext Preprocessor)

  - HTML에 포함되어 동작하는 스크립팅 언어.

  - 별도의 실행파일을 만들 필요 없이 HTML 문서 안에 직접 포함시켜 사용

  - C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성할 수 있다.

  - 최초에는 ‘Personal Home Page Tools’이라 불렸으며, 오픈소스이다.

⑤ MySQL

  - 오라클 사가 관리 및 배포하고 있는 오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)이다.

  - 오픈소스로 개발되며, GNU GPL(GNU General Public License)과 상업용 라이센스의 이중 라이센스로 관리되고 있다.

⑥ JavaScript

  - 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.

⑦ DOM ( Document Object Model )

  - 객체지향 모델로써 구조화된 문서를 표현하는 형식이다.

  - DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.

  - http://www.w3.org/DOM/

⑧ Ajax

  - 비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자.

  - 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어

⑨ jQuery

  - 다양한 브라우저 간의 정보 불일치를 극복하기 위해 브라우저 간의 차이를 최소화 한 자바스크립트 라이브러리이다.

  - DOM(문서 객체 모델), Ajax, 이벤트, 애니메이션 처리를 쉽게 사용할 수 있도록 만들어 졌다.

  - 비슷한 라이브러리로 AngualarJs, MooTools, Prototype, script.aculo.us, YUI 등이 있다.

2) 분야별 개발자 역량

① 웹 백엔드(Back-end) 개발자

   - 자바, C#, 루비, 파이썬 등의 언어로 서버 쪽의 로직을 개발

   - 대부분의 경우 데이터베이스도 잘 알아야 한다.

② 웹 프론트엔드(front-end) 개발자

  - HTML/CSS, JavaScript를 주로 사용한다.

  - jQuery, Angular.js, React.js와 같은 라이브러리 활용 가능

  - node.js를 통해 웹 백엔드 개발까지 가능.

1. 동적인 웹 콘텐츠 소개

1) 요청/ 응답 절차

① 클라이언트/서버의 요청/응답 메세지 처리 과정

   

② 동적으로 변화하는 웹 페이지의 경우

   

2) PHP, MySQL, 자바스크립트, CSS, HTML5의 이점

① PHP 사용 

  - 예) Today is Tuesday. Here's the latest news. 를 웹 브라우저에 표시

<?php
    echo " Today is " .date("1").".";
?>
Here's the latest news.

  - '<?php'로 시작하면 웹 서버에게 PHP 프로그램으로 '?>'를 만날 때까지의 코드를 해석하라는 의미.

  - PHP는 유연한 프로그래밍 언어이기 때문에 다음과 같이 원하는 부분에만 적용 가능

Today is <?php echo date("1"); ?>. Here's the latest news.

  - 빠르고 HTML과 끊임없이 연동하는 스크립트 언어.

  - PHP를 사용하면 웹 서버를 제어하는 데 제한이 없다.

② MySQL 사용

  - 구조화된 Query가 포함된 관계형 데이터베이스.

  - 모두가 무료로 사용할 수 있고, 수많은 웹 서버에 설치돼 있다.

  - MySQL은 영어 구문의 명령을 사용하는 강력하고 뛰어난 속도의 DB 시스템이다.

  - 예) users라는 테이블이 있을 때 테이블의 열에 surname, firstname, email을 생성한 후 사용자를 추가하는 명령어

INSERT INTO users VALUES ( 'Smith', 'John', 'jsmith@mysite.com' );

  - 예) 이메일 주소에 해당하는 사람의 이름을 알려고 하는 경우 명령어

SELECT surname,firstname FROM users WHERE email='jsmith@mysite.com';

  - PHP를 사용하여, MySQL을 직접 구동하는 것이 가능하다. (프로그램을 돌리거나 커맨드라인 명령을 사용하지 않고)

③ 자바스크립트 사용

  - HTML 문서의 모든 요소에 스크립트 기능이 가능하게 고안.

  - 사용자와 동적인 상호작용 수단을 제공한다. (보안에 관련된 문제는 제외).

  - CSS와 병행해 사용하면, 서버 사이드가 아닌 웹브라우저에서 바로 동적인 효과 구현 가능.

  - 예) Today is Tue June 27 2017 01:23:45 를 웹 브라우저에 표시

<script type="text/javascript">          document.write("Today is " + Date());     </script>

  - 스크립트 태그 안에 있는 모든 구문을 자바스크립트로 해석하여 일반 텍스트와 조합하여 출력한다.

④ CSS 사용

  - 높은 수준의 동적인 상호작용 제공

  - 모든 HTML 엘리먼트의 면적, 색, 경계, 공백 등을 변경할 수 있다.

  - 간단한 코드 추가로 애니메이션 되는 변환/변형을 추가할 수도 있다.

  - Head 태그 내부 <style>과 </style> 사이에 몇 가지 규칙을 삽입하는 것으로 쉽게 추가 가능.

  - 예) <p>태그의 기본 설정을 변경, 포함된 문장을 양쪽 맞춤하고, Helvetica 글꼴을 지정.

<style>          p {               text-align:justify;               font-family:Helvetica;          }     </style>

2. Ajax 동작 과정의 예 - 새로운 사용자 등록할 때 입력한 계정이 기존에 등록돼 있는지 체크하는 과정.

1) 웹 서버는 계정 이름, 이름, 성, 이메일주소 등을 요구하는 웹 폼을 생성하는 HTML을 출력한다.

2) 자바스크립트를 HTML 파일에 포함시켜 두 가지 사항을 실시간으로 확인한다.

   ① 계정 이름 입력 박스에 텍스트가 입력됐는지 확인하고, 

   ② 사용자가 다른 곳을 클릭해 입력 박스가 비활성화 됐는지 확인한다.

3) 텍스트가 입력되고 입력 박스가 비활성화 되면 백그라운드의 자바스크립트 코드는 입력된 계정 이름을

   웹 서버에 있는 PHP 스크립트로 전달하고 응답을 기다린다.

4) 웹 서버는 전달 받은 계정을 검색하고 해당 계정이 이미 등록돼 있는지 확인한다.

5) 자바스크립트는 계정 이름 입력 박스 옆에 입력한 계정 이름이 유효한지 아닌지를 

   녹색 체크 마크나 붉은색 십자 마크 등을 통해 필요한 문구와 함께 보여준다.

6) 사용자가 사용할 수 없는 계정으로 웹 폼을 등록하려고 하면 자바스크립트는 등록을 중단하고 

   큰 그림이나 경고 창 등을 이용해 다른 계정 이름을 사용해야 됨을 사용자에게 강조해서 알려준다.

7) 추가로 이 과정에서 좀 더 발전된 형태는 사용자가 입력한 계정 이름을 바탕으로

   계정 이름을 추천하는 기능도 제공할 수 있다.