허허허 안녕하세요? 최근 자전거타다 다친 이연구원입니다. 오랫만입니다 포스팅은.. 최근 하드웨어성향이 짙어지면서 c 언어만 조물딱 거리다가 후본의 새로운 특허사업의 웹페이지를 살짝 거들게 되었습니다. 아직 브라우저 호환성 문제로 고칠것이 많지만..  어찌됬든 본문에 앞서 아래 키워드들을 한번 훑고 지나가겠습니다.

HTML / CSS / JS / XML / JQUERY / AJAX / BOOTSTRAP / JSON / CLIENT / WEBSERVER / WAS / HTTP / FTP

이미 훌륭하신 개발고수분들은 이것들의 상호 연관성이 한컷에 머리속에 그려지겠지만.. 이번 기회를 통해 웹개발의 기초적인 환경을 이해하고 넘어가고자 하며 비전공자 분들에게도 도움이 되셨으면 하네요!!

1. 클라이언트 / 서버 / 프로토콜

우선 흔히 말하는 웹은 아래 그림과 같이 클라이어트와 서버의 요청-응답 행위로 이루어지는 하나의 서비스 환경입니다.

클라이언트 : 말그대로 이 서비스의 고객이며 PC를 통해 서비스를 요청하고 그 결과를 전달받는 이용자들이라고 할수 있죠.  보통 서비스 요청은 URL의 형태입니다.

서버 : 서비스를 제공하는 주체로서 클라이언트의 요청에 대한 결과를 반환하는 역할을 합니다.  보통의 응답은 HTML, JS, CSS 의 형태입니다.

Hyper Text : 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 주로 컴퓨터나 다른 전자기기들을 통해 표시된다. [구글 위키 발췌]

HTTP(Hyper Text Transfer Protocol) : 클라이언트와 서버 사이에 데이터를 상호전달하기 위한 일종의 약속이자 규약입니다.

( 넘치는 학구열로 흔히 사용되는 단어 하나하나까지 일일이 집고 넘어가겠습니닷. 빱! 이니깐 !!!!  Basic of Basic… )

2. 요청과 응답을 위한 도구

요청과 응답에는 각각 그 행위를 할때 필요한 주체와 도구, 전달될 데이터가 존재합니다. 무슨소린고 하니.. 정의하고 갑시다.
요청은 클라이언트가 브라우저라는 도구를 통해서 URL을 전송하는 것이며
응답은 서버가 웹서버라는 프로그램을 통해서 HTML, JS, CSS와 같은 데이터를 전송하는 것이란 말입니다.

(웹서버를 표현할 그림이 떠오르지 않습니다.그림이 점점 진화해 갑니다. 점점 어마어마해집니다. )

3. 클라이언트(브라우저) – html, css, js, jqeury, xml, ajax

음.. 클라이언트는 브라우저라는 도구를 통해 데이터를 요청하고 수신된 데이터를 출력하는데 이 과정을 “웹브라우저에 요청한 웹페이지를 띄운다” 라고도 표현할 수 있겠네요. 때문에 웹페이지가 브라우저에 출력되는 과정에서 필요한 데이터(문서)들을 집고 넘어갈 까 합니다.

위 그림처럼 서버에 저장되어있던 3가지의 파일들이 브라우저 안에서 실행되면서 현제 보시는것과 같은 웹페이지가 출력된다는 말입니다.(아.. 뭔가 했던말 계속 하는것같다. 글을 엄청 못쓰는것같다.) 어찌됬든 나름의 용어정리 !

HTML(Hyper Text Markup Language) : 하이퍼 텍스트로 표현 된, 즉 사용자가 브라우저를 통해 눈으로 볼 수 있는 문서

CSS(Cascading Style Sheet) : markup language가 실제로 표시되는 방법을 기술하는 언어( 색이라던지.. 굵기라던지.. 간격이라던지…)

JS(JAVA Script): 객체기반의 스크립터 프로그래밍 언어로 웹브라우저 내에서 주로 사용된다. 음.. html이 단순히 글자를 표현하고 링크만 한다면 JS는 버튼이벤트와 같은 기능적인 요소를 작성한다고 생각하면 되겠다.

쉽게말하면 HTML이 뼈,  CSS가 살, JS가 그뉵!!!!!! 이라고 생각한다!!!이 3가지를 언급한김에 AJAX와 XML을 언급하고 넘어가야겠다.

XML (X-Markup Language) : 확장된 마크업 언어라니.. HTML과는 다르게 주로 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고받을수 있게 하여 HTML의 한계를 극복할 목적으로 만들어진 문서라고 한다. 웹서비스와 비동기적으로 데이터를 교환하기위함

AJAX( Java script and xml) : 웹개발 기법으로 대화식 웹 애플리케이션 제작을 위해 html, css, js, xml 를 사용한다. 사실 이걸 이해하는게 가장 중요한 것 같다.
3. 서버 – 웹서버와 was

다음은 서버쪽을 살펴볼 생각인데, 서버는 웹서버라는 프로그램 을 이용하여 요청(URL)을 수신하고 데이터를 전달한다고 했습니다.  흔히 JAVA하시는 분들이 알고계시는 아파치사의 apache!! 이것이 바로 웹서버 입니다. 그 외에도 MS의 IIS,  tMax의 WebtoB 등이 있네요. 하지만 그저 그런 기능밖에 없는 프로그램입니다 서버는 ! 미리 준비된 문서들을 그대로 보내기만 하는것이죠. 그라믄 클라이언트에서 데이터베이스에 데이터를 접근하고싶다는 요청을 한다면?

이처럼 서버 내에서 클라이언트의 요청을 동적으로 처리하기위해 서버내에서 외부 프로그램일 실행시켜 요청에 대한 결과물을 만드는 기법을 고안해 내었고 그것이 과거에 주로 쓰였던 CGI(Common Gateway Interface)입니다.

(허허..  사실 내가 적당한 그림을 그리고 있는건지 아직 잘 모르겠다.)

하지만 CGI 기법은 하나의 요청을 처리하기위해 CGI 프로그램을 실행시켜야 하고 그 다음 2번째 요청은 CGI 프로그램이 일처리를 끝낼때까지 기다려야만 했죠.

때문에 !! 등장한게 서블릿!! 콘테이너!! WAS !! 등 다양한 이름으로 불리우는 이것인데 이글에서는  WAS(Web Application Service) 서버라고 하겠습니다.

Web Server는 데이터베이스 처리등과 같은 동적처리가 필요할 경우 WAS 서버로 요청을 모두 던져버립니다.  객체단위로 처리하는 WAS덕에 비교적 짧은 시간에 많은량의 요청을 처리할 수 있게 되죠!

WAS의 종류로는

아파치사의 tomcat : 컨테이너 안에서 JSP를 실행 , spring framework가 있음
tMax의 JEUS (Java Enterprize User Solution), 한국산 WAS!!

정도가 있습니다.
(종종 톰켓이 엄밀히 따지만 WAS면 아니다 하는 이야기를 종종 접할수 있는데, 참고만 하시길..)

#asp나 php, jsp는 서버스크립트 언어로서 WAS에서 실행되는 프로그램이기도 하다.
#각각 호환되는 웹서버와 WAS를 선택하여 개발환경을 꾸려가는거다.

4. jQuery와 bootstrap

jQuery : JS는 개발자 하기에 따라 매우 엄청 어마무시하게 다양한 형태로 사용되며 사용하기가 꽤 번거롭습니다. 그중 쓸만한 라이브러리들을 모아 제공하는 Java Script 라이브러리 패키지라고 생각하시면 되겠습니다.
bootstrap: JS와 CS 라이브러리

=>jQuery 는 Form 요소에 대해 강점을 가지고 다양한 컨트롤을 제공하고 Bootstrap은 Layout에 중점을 두고 있다고 보시면 되겠습니다! div테그에 클레스만 부여해도 촤촤촵 만들어지니..

하.. 뭔가 부족하다 정리가 덜된느낌입니다. 나름 이해한대로 써보긴 했는데 잘못된 부분이 있다면 지적해주시고 도움이 된다면 더할나위 없이 좋겠네요 그럼 2만!