[ETC] 동적인 웹페이지 만들기

1. 동적인 페이지가 왜 필요한가 ?

 

웹에 글을 쓰는 순서는 이러하다..

 

빨래터 사이트에서 - 로그인 후 - 내 빨래터 이동 후 - 주 메뉴에서 혼자말 클릭 후 - 글쓰기 창에 글을 쓰고 - 글쓰기 버튼을 누른다.

 

동적인 페이지가 아니라면.. 글을 쓰고 글쓰기 버튼을 누르게 되면 페이지 새로 고침이 일어나서 혼자말 리스트 전체 데이터가 불러와진다.

 

동적인 페이지라면..

글을 쓰고 글쓰기 버튼을 누르면..

페이지 새로고침 없이 AJAX 통신으로 글 내용을 서버에 보내고 등록된 글에 대한 정보만을 불러와 글목록 상단에 추가해준다.

 

이렇게 부분적인 변경을 요하는 페이지라면 서버에서 전송되는 데이터 양을 현저히 줄일 수 있다.

이미지나 각종 컨텐츠가 많이 붙어있는 웹 페이지라면 서버의 트래픽 부하를 크게 줄여줄 것이다.

당연히 화면에 표시되는 속도도 빨라질 것이다.

 

그리고 새로운 글이 등록이 되었는지 알아보기 위해 페이지 새로고침을 하지 않아도 된다.

 

자바스크립트의 setTimeout 이나 setInterval 등의 함수와 Ajax 루틴을 연동시켜 주기적으로 새글이 있는지 알 수 있다.

 

동적인 웹 페이지의 장점은.. 트래픽, 속도, 실시간 부분에서 이점이 있다.

 

 

2. 동적인 페이지를 만들려면 어떤 요소들이 필요한가 ?

 

* 자바스크립트 코어에 대한 이해가 필요하다..

개인적인 생각으로 자바스크립트는 자유 분방한 언어이다.

언어에 대한 제약이 느슨하기 때문에 제대로 이해하지 못하면 많이 해깔리는 언어이다.

나 자신도 아직 어느정도 이해하고 있는지 확신이 가지 않는다.

특히 객체의 생성과 활용이 다양하고 함수와 객체의 구분이 모호하다.

개념을 제대로 이해하지 못하면 고난이도의 응용은 힘들다.

 

* HTML DOM을 다룰줄 알아야 한다..

웹페이지에 동적으로 무언가를 추가하거나 삭제/변경 하려면..

자바스크립트로 웹페이지의 DOM 객체들을 컨트롤 할 줄 알아야 한다.

각종 태그 엘리먼트들를 동적으로 생성하고 원하는 위치에 표시할 수 있어야 한다.

부라우저에서 지원하는 객체들에 대한 이해가 필요하고 프로퍼티와 메소드들을 적절히 활용할 줄 알아야 한다.

 

* AJAX 비동기 통신을 할 줄 알아야 한다..

자바 스크립트를 이용해 웹 페이지에서 서버와 통신에 필요한 정보들을 수집하고

수집된 정보를 비동기 통신을 이용해 서버에 전송하고 응답을 기다린다.

서버에서 응답이 오면 서버에서 보낸 응답 메시지를 가지고 원하는 정보를 추출해서 적절한 처리를 해준다.

 

* 서버스크립트(ASP, PHP, JSP, ...)를 다룰줄 알아야 한다.

서버는 기본적으로 클라이언트(브라우저)가 요청하는 페이지를 보내준다.

클라이언트에서 어떤 정보를 요구하느냐에 따라 다양한 정보를 보내줄 수 있다.

서버 스크립트 언어는 대부분 클라이언트에서 보내온 폼 데이터나 AJAX 비동기 통신으로 넘어온 POST/GET 데이터를 이용해서

그에 대한 적절한 처리를 한 후 적절한 결과값을 브라우저로 전송해 준다.

브라우저가 전체 페이지를 요구하면 전체 페이지를 보내주고..

AJAX 가 특정 부분에 대한 정보만을 요구하면 일부분의 데이터만 보내주게 된다.

서버는 언제나 클라이언트(브라우저)에게 달라는 대로 아낌없이 준다..

 

 

3. 만드는데 순서나 과정이 있는가?

 

이 부분에 대해서는 아직 개념을 확실히 잡지 못했지만 나름의 순서를 정해 보자면..

 

웹 브라우저는 이벤트 구동 방식으로 작동한다.

마우스로 무언가를 클릭하고 키보드로 텍스트를 입력한다.

그럴때 마다 브라우저에서는 이벤트가 발생한다.

 

마우스로 무언가를 클릭 했을 때 어떤 동작이 일어나야 한다.

그렇다면 클릭에 대한 이벤트에 어떤 행동을 부여해 준다.

그리고 이벤트에 대한 행동을 했으면 행동에 대한 어떤 결과가 있을 것이다.

이 결과는 대부분 화면에 무언가를 표시해 준다.

 

이벤트에 대한 행동을 시작해서 결과를 보여주기 전까지가..

자바스크립트 코드 실행이나 AJAX 를 통해 서버와 데이터를 주고받는 등의 작업이 이루어지는 시간이다.

중요한건 이 시간동안 내가 원하는 정보나 결과를 내가 원하는 위치에 출력해 주기 위해 적절한 컨트롤(프로그래밍)이 필요하다.

그리고 이런 컨트롤을 위한 루틴들은 페이지 내에서 서로 정보를 공유하면서 상호 연동되어 작동되게 된다.

 

프로그래머는 웹페이지에서 무작위로 발생하는 이벤트나 입력에 대해 합당한 규칙과 흐름을 만들어 주어야 한다.

 

그러기 위해서는 HTML DOM, 자바스크립트, 서버스크립트에 대한 전반적인 이해와 컨트롤이 필요하다.

출처 : http://blog.daum.net/comdomi/6