① HTML(Hyper Text Markup Language )
웹 상에서 실행되는 페이지의 구조를 기술하기 위한 언어이며 확장자는 .html이다. HTML문서는 웹 페이지를 구성하기 위한 컨텐츠를 정의하기 위한 목적으로 사용되며 미리 정의 되어 있는 tag가 실행되며 결과 페이지가 만들어진다. 태그는 <>안에 정의되어 있으며 속성을 통해 여러 가지 설정을 정의할 수 있다.
현재는 2014년 10월에 HTML5가 웹 표준으로 지정되고 ActiveX를 걷어내기 위해 한국인터넷진흥원(KISA)이 인터넷 이용환경 개선사업을 본격 추진하면서 HTML5로 모두 교체되는 추세이므로 반드시 HTML5를 이용해서 웹 페이지를 작성하는 방법을 알아야 한다. 그러나 HTML4의 요소가 HTML5의 base이므로 HTML4의 요소부터 학습할 것이다.
② CSS(Cascading Style Sheets)
CSS는 웹 페이지를 꾸미거나 레이아웃을 정의하기 위해 사용되는 기술이다. 앞에서 우리는 HTML을 이용하여 웹 페이지의 구조를 정의한다고 했다. 이렇게 정의한 웹 페이지를 예쁘게 꾸미거나 레이아웃을 설계하거나 하는 등의 작업은 모두 CSS에서 이루어진다.
국내의 대부분의 기업에서 운영하는 웹 사이트를 구성하는 웹 페이지들은 이러한 표준이 잘 지켜져 있으며 이는 우리가 사용하는 인터넷 익스플로러를 통해서도 확인할 수 있다.
인터넷 익스플로러를 통해 www.naver.com사이트에 접속해 보자.
위와 같이 예쁘게 잘 배치되고 작성된 웹 페이지에 적용된 CSS를 없애버리면
그냥 웹 페이지를 구성하고 있는 컨텐츠들이 단순히 나열되듯 작성되어 있는 것을 확인할 수 있다.
[보기]-[스타일]-[기본스타일]을 선택한다.
③ 자바스크립트
자바스크립트는 인터렉티브한 웹 페이지를 작성하기 위한 기술로 반응형 웹을 작성하기 위해 필요한 기술이다.
자바스크립트는 언어 이름에서도 알 수 있지만 스크립트 언어이다. 스크립트 언어란 다른 응용 프로그램 안에서 돌아가는 프로그램을 의미하며 자바스크립트 또한 소스 자체가 클라이언트로 전송된 후 웹 브라우저에 탑재되어 있는 자바스크립트 엔진에 의해 인터프리터 방식으로 실행되는 언어이다. HTML문서 내부에 <script>태그로 삽입되어 실행되는 전형적인 스크립트 언어이다. 클라이언트에게 보여질 웹 페이지를 작성하는 기술에 대한 자세한 내용은 다음과 같은 사이트를 참고하면 된다.
http://www.w3schools.com/html/default.asp
④ JQuery
JQuery도 Front-end웹을 만드는 기술이며 모든 브라우저에서 실행할 수 있는 자바스크립트 라이브러리이다.
자바스크립트를 이용해서 여러 줄의 복잡한 로직으로 구현해야 하는 내용을 간단하게 함수로 정의해 놓았으며 다시 JQuery를 확장해서 작성한 JQuery 라이브러리인 JQuery UI나 다른 플러그인 들은 규모도 크고 종류가 많기 때문에 웹 페이지를 디자인할 때 많이 사용되고 있으며 이미 국내에서도 다양한 사이트에서 적용하고 있는 기술이다.
⑤ Servlet & JSP
서버에서 실행되는 Application이며 클라이언트의 요청을 분석해서 서버의 리소스를 접근하거나 DBMS의 데이터를 조작하는 등의 작업을 처리한다.
우리가 웹사이트에 접속한 후 서비스를 이용하기 위해서 로그인을 먼저 해야 한다. 이때 로그인 아이디와 패스워드를 입력하고 로그인 버튼을 누르면 클라이언트가 입력한 아이디와 패스워드가 서버에 전달되는데 전달된 값을 이용해서 SQL을 실행하는 DAO의 메소드를 호출하는 작업을 수행하는 것이 바로 Servlet&JSP이다.
⑥ 웹 서버
요청을 받아서 요청을 처리하고 서비스를 제공하는 컴퓨터를 우리는 서버라고 한다. 웹 서버는 웹 클라이언트인 브라우저에서 입력하는 요청을 분석하고 미리 준비되어 있는 Web Application을 찾아서 브라우저로 전송한다. 이때 웹 서버가 클라이언트 쪽으로 전송하는 데이터는 HTML문서이며 웹 상에서는 HTML문서만 실행할 수 있다. 이렇게 실행되는 문서는 서버의 하드디스크에 파일의 형태로 저장되어 있으며 이를 정적 HTML이라 한다.
이런 정적 HTML문서는 어떤 클라이언트가 접속하더라도 모두 동일한 결과를 전송한다. 웹 서버라고 해서 뭔가 거창하고 대단하며 일반인들이 접근할 수 없는 컴퓨터가 아닌가 생각할 수 있을 것이다. 웹 서버를 만드는 작업은 간단하다. 위에서 말한 기능을 수행할 수 있는 프로그램을 설치하면 바로 웹 서버가 되는 것이다. 이런 기능을 제공하는 보편적인 프로그램으로는 IIS서버와 Apache서버가 있다.
⑦ 웹 어플리케이션 서버(Web Application Server)
웹 서버에서 실행되는 정적 HTML문서는 어떤 클라이언트가 실행해도 모두 동일한 결과를 보여 준다고 했다. 이렇게 실행 되는 정적 HTML만 가지고는 우리가 표현할 수 있는 것에 한계가 있을 것이다. 당장 우리가 알고 사용하고 있는 모든 웹 사이트들을 생각해보자. 반드시 로그인을 해야 서비스를 제공하는 사이트들이 대부분이며 로그인을 했을 경우 누가 로그인을 했냐에 따라 각각 다른 결과를 응답페이지로 만들어낸다. 디자인이 달라진다는 의미가 아니라 페이지에 출력되는 데이터가 달라진다는 의미이다.
우리가 쉽게 접할 수 있는 포털 사이트의 게시판을 보자. 포털 사이트의 게시판은 지속적으로 게시물이 추가되고 게시물이 삭제되면서 접속할 때 마다 다른 화면을 보여준다. 서버 단에 연결된 DBMS에서 데이터를 조회하여 결과를 만들어 내기 때문이다. 이렇게 실행 결과로 만들어지는 웹 페이지를 동적HTML이라 한다. 이러한 동적 HTML기술을 만들어내는 Web Application은 PHP, ASP, Servlet & JSP가 있다. 우리는 자바를 배웠으니 당연히 Servlet&JSP를 이용해서 동적 HTML을 만들어야 한다.
그런데 문제가 있다. 앞에서 설명했던 Web Server는 클라이언트의 요청을 당겨오고 응답을 넘겨줄 수는 있지만 자바를 해석할 수 있는 능력이 없다. 자바를 해석하기 위해 우리는 Servlet Container와 JSP Container를 추가적으로 설치해야 한다. 물론 그런 불편함을 피하기 위해 실제로 사용되는 Servlet Container와 JSP Container들은 모두 Web Server를 포함하고 있으며 이를 우리는 Web Application Server 즉, WAS라 한다. WAS의 종류로는 Oracle사의 WebLogic, IBM의 WebSphere , TMAX의 JEUS등이 있다. 이 WAS들은 모두 실제 현업에서 사용되는 WAS들이며 Servlet&JSP뿐만 아니라 트랜잭션관리, 보안, 클러스터링, e-비즈니스 구축 등을 지원하는 고가의 소프트웨어들이다.
특히 JEUS는 국내기업에서 개발한 제품이며 국내 시장에서 대략 40%정도의 점유율을 기록하고 있다고 한다.
어쨌든 우리는 수업시간에 사용하는 서버이므로 Apache에서 제공하는 Tomcat을 이용할 것이다. Tomcat도 웹에 대한 지원은 훌륭하게 지원하고 있다.