대학을 졸업해서 처음 웹개발을 시작했을 때, javascript와 java의 역활적 그리고 수행되는 시점(주체)를 모르고 뛰어들어 많은 삽질을 했었습니다.
대학에서 공부를 열심히 안해서 그랬겠지만요 ㅋ
이 글은 웹 개발은 해본적이 없지만, 웹 개발자가 되고 싶은데 자바는 뭐고 자바스크립트가 뭔지 구분이 안되는 분들에게 조금 도움이 될만한 글입니다.
스마트폰 열풍에 의해 웹개발자 보다는 어플개발자를 목표로 하시는 분들도 많겠지만 여전히 웹개발의 수요가 높고 웹은 스마트폰에서도 활용가능하기 때문에 비선호(몸 값이 상대적으로 낮으므로 ㅋㅋ)할 수 있지만 여전히 웹개발을 진입하시는 분들을 위해(?^^;) 미천하나마 간단하게 정리해봅니다.
(찾아와서 보시는 분들이 많진 않겠지만.....ㅡ0ㅡ;)
그림이 이해된다면 아래 글은 안읽으셔도 됩니다. ㅡ0ㅡ;
웹개발자는 참 불쌍한(?) 존재입니다.(안드로이드 개발자도 같은 길을 걷게 될거라 확신합니다만 ㅋㅋ)
웹은 크게 서버와 사용자로 나뉩니다.
사용자는 웹브라우저(인터넷 익스플로러, 파이어폭스, 크롬 등등)을 이용해서 웹서핑을 합니다.
이때 도메인은 곧 서버가 됩니다.
WAS, Web Application Server는 흔히 Apache, Tomcat, Resin, jeus, IIS 등등 많이 있죠.
Apache와 같이 WAS에 저장되어 있는 단순 HTML을 별다른 가공없이 사용자에게 전송하는 서버도 있으나, 대부분의 경우 동적 컨텐츠를 제공하기 위해 상황에 맞는 필요한 HTML을 만들어 사용자에게 전송합니다.
Tomcat 의 경우 jsp(java)를 이용해 HTML을 생성해서 사용자에게 전송하지요.
결론적으로 어떤 서버든 사용자에게 전송하는 것은 완성된 HTML 이라는 겁니다.
(ajax나 특수한 용도에 필요한 xml, json 등 기타 적인 요소는 논외로 하겠습니다.)
이때 동적인 요소에 대한 부분은 DB에서 데이터를 연동하죠.
그리고 DB와 연결하고 가공하여 정보를 만들어 내는데 필요한 언어들이
DB의 SQL문, WAS에서 사용되는 JAVA나 ASP 등이 있습니다.
기본적으로 WAS를 이용하여 JAVA등의 언어로 DB에서 데이터를 가져와 기본적인 HTML 가공하여 사용자에게 보여줄 HTML을 반환합니다.
이 부분, 서버측의 개발은 모두 웹개발자의 영역입니다.
(DB관련 DBA부분은 논외)
사실 서버사이드만 생각하면 웹개발자가 짜증나고 피곤할 일이 많지 않습니다만, 사용자측에 해당되는 HTML과 JAVASCRIPT, CSS를 손대면서 문제가 발생합니다.
우선 HTML, CSS는 웹 디자이너의 영역으로 기본적인 UI(USER INTERFACE)는 디자이너가 만들어줍니다.
(영세업체는 아닐 수 있지만....)
하지만 요즘은 UI가 단순히 버튼 클릭하면 다른 페이지가 호출되는 시대가 아니죠....
간단하게는 마우스를 올려놓으면 메뉴가 펼쳐지거나, 웹쇼핑의 경우 우측에 졸졸 따라다니며 오늘 본 상품 등이 표시되는 것들은 고정된 표현을 하는 HTML만으로는 되지 않습니다.
이것을 현란하게 사용자에게 편한 기능을 제공하기 위해 JAVASCRIPT가 사용됩니다.
오래전에는 순수 JAVASCRIPT를 이용하여 구현했지만, 요즘은 수많은 라이브러리들 개발을 쉽고 편하게 할 수 있도록 만들어져있습니다.
잘 가져다 사용하는 것도 능력입니다. ^^
http://mootools.net/demos/?demo=Drag.Move
요즘은 JQUERY라 인기이고 저도 현업에서 사용중이긴 하지만, 완성형 라이브러리로 크로스브라우징이 잘 되는 라이브러리 중 하나가 무툴즈(Mootools)입니다.
prototype, mootools, jquery, yahooUI, dhtmlx 등등 라이브러리 종류는 많고 제공하는 범위도 천차만별이니 천천히 찾아보세요. ^^;
초심자로써 자바스크립트에 대한 부분은 한가지만 명심하면 됩니다.
웹브라우저에서 구동되는 언어.
그래서 이미 사용자에게 전송된 html 자원 외에는 사용할 수 없다는 것만 명심하면 됩니다.
예를들어 자동차 선택을 하는 것을 만들어야한다.
라면 우선 제조사와 차종 정도로 간단하게 나눠봅시다.
ajax, iframe 등을 이용하여 사용자 모르게 서버와 통신하지 않으면, 기본적으로 모든 제조사, 차종 정보를 트리구조 형태의 자원으로 html을 전송할때 어떤 식으로든 (자바스크립트 변수에 넣는다든지)해서 스크립트로 해야합니다.
예)
<script>
var car = { '현대' : { '아반떼' }, { '소나타' } }
</script>
와 같은 json형태로 정보를 갖는다고 가정하면,
<script>
var car = {
<%
String maker = "";
String carName = "";
for(Car car : CarList){
if(!maker.equals(car.getMaker()){
if(!"".eqauls(car.getMaker())
out.print("}");
out.print("{'");
out.print(car.getMaker());
out.print("' : ");
maker = car.getMaker();
}
if(!carName.equals(car.getCarName()){
if(!"".eqauls(car.getCarName())
out.print("}");
out.print("{'");
out.print(car.getCarName());
out.print("' : ");
carName = car.getCarName();
}
}
if(!"".eqauls(cat.getCarName())
out.print("}");
if(!"".eqauls(cat.getMaker())
out.print("}");
%>
};
</script>
대충 이런식의 코딩이 가능하겠지요.
위의 예는 오류가 있을지 모르겠습니다만 대충 그렇단 거고.....^^;
결과적으로 아래의 jsp 코드는 WAS가 처리하면 위의 html 코드로 만들어 사용자에게 던져줍니다.
결과적으로 위의 html을 만들기 위에 아래와 같이 작업해야한다는 거지요..
다만 데이터가 많아지면 불필요한 정보가 많이 넘어가므로 요즘에는 ajax로 제조사에 해당되는 차종만 요청해서 처리하는 형태로 구현합니다.
기존에도 iframe으로 비슷하게 했엇지요. ^^;
웹을 전혀 모르면
var car = <%= car %>;
로 java와 javascript 간에 데이터를 주고받으려는 엉뚱한 생각을 할 수도 있지요...ㅎ
이 단순한걸 너무 장황하게 설명해버렸네요. ㅡ0ㅡ;
대학에서 공부를 열심히 안해서 그랬겠지만요 ㅋ
이 글은 웹 개발은 해본적이 없지만, 웹 개발자가 되고 싶은데 자바는 뭐고 자바스크립트가 뭔지 구분이 안되는 분들에게 조금 도움이 될만한 글입니다.
스마트폰 열풍에 의해 웹개발자 보다는 어플개발자를 목표로 하시는 분들도 많겠지만 여전히 웹개발의 수요가 높고 웹은 스마트폰에서도 활용가능하기 때문에 비선호(몸 값이 상대적으로 낮으므로 ㅋㅋ)할 수 있지만 여전히 웹개발을 진입하시는 분들을 위해(?^^;) 미천하나마 간단하게 정리해봅니다.
(찾아와서 보시는 분들이 많진 않겠지만.....ㅡ0ㅡ;)
그림이 이해된다면 아래 글은 안읽으셔도 됩니다. ㅡ0ㅡ;
웹개발자는 참 불쌍한(?) 존재입니다.(안드로이드 개발자도 같은 길을 걷게 될거라 확신합니다만 ㅋㅋ)
웹은 크게 서버와 사용자로 나뉩니다.
사용자는 웹브라우저(인터넷 익스플로러, 파이어폭스, 크롬 등등)을 이용해서 웹서핑을 합니다.
이때 도메인은 곧 서버가 됩니다.
WAS, Web Application Server는 흔히 Apache, Tomcat, Resin, jeus, IIS 등등 많이 있죠.
Apache와 같이 WAS에 저장되어 있는 단순 HTML을 별다른 가공없이 사용자에게 전송하는 서버도 있으나, 대부분의 경우 동적 컨텐츠를 제공하기 위해 상황에 맞는 필요한 HTML을 만들어 사용자에게 전송합니다.
Tomcat 의 경우 jsp(java)를 이용해 HTML을 생성해서 사용자에게 전송하지요.
결론적으로 어떤 서버든 사용자에게 전송하는 것은 완성된 HTML 이라는 겁니다.
(ajax나 특수한 용도에 필요한 xml, json 등 기타 적인 요소는 논외로 하겠습니다.)
이때 동적인 요소에 대한 부분은 DB에서 데이터를 연동하죠.
그리고 DB와 연결하고 가공하여 정보를 만들어 내는데 필요한 언어들이
DB의 SQL문, WAS에서 사용되는 JAVA나 ASP 등이 있습니다.
기본적으로 WAS를 이용하여 JAVA등의 언어로 DB에서 데이터를 가져와 기본적인 HTML 가공하여 사용자에게 보여줄 HTML을 반환합니다.
이 부분, 서버측의 개발은 모두 웹개발자의 영역입니다.
(DB관련 DBA부분은 논외)
사실 서버사이드만 생각하면 웹개발자가 짜증나고 피곤할 일이 많지 않습니다만, 사용자측에 해당되는 HTML과 JAVASCRIPT, CSS를 손대면서 문제가 발생합니다.
우선 HTML, CSS는 웹 디자이너의 영역으로 기본적인 UI(USER INTERFACE)는 디자이너가 만들어줍니다.
(영세업체는 아닐 수 있지만....)
하지만 요즘은 UI가 단순히 버튼 클릭하면 다른 페이지가 호출되는 시대가 아니죠....
간단하게는 마우스를 올려놓으면 메뉴가 펼쳐지거나, 웹쇼핑의 경우 우측에 졸졸 따라다니며 오늘 본 상품 등이 표시되는 것들은 고정된 표현을 하는 HTML만으로는 되지 않습니다.
이것을 현란하게 사용자에게 편한 기능을 제공하기 위해 JAVASCRIPT가 사용됩니다.
오래전에는 순수 JAVASCRIPT를 이용하여 구현했지만, 요즘은 수많은 라이브러리들 개발을 쉽고 편하게 할 수 있도록 만들어져있습니다.
잘 가져다 사용하는 것도 능력입니다. ^^
http://mootools.net/demos/?demo=Drag.Move
요즘은 JQUERY라 인기이고 저도 현업에서 사용중이긴 하지만, 완성형 라이브러리로 크로스브라우징이 잘 되는 라이브러리 중 하나가 무툴즈(Mootools)입니다.
prototype, mootools, jquery, yahooUI, dhtmlx 등등 라이브러리 종류는 많고 제공하는 범위도 천차만별이니 천천히 찾아보세요. ^^;
초심자로써 자바스크립트에 대한 부분은 한가지만 명심하면 됩니다.
웹브라우저에서 구동되는 언어.
그래서 이미 사용자에게 전송된 html 자원 외에는 사용할 수 없다는 것만 명심하면 됩니다.
예를들어 자동차 선택을 하는 것을 만들어야한다.
라면 우선 제조사와 차종 정도로 간단하게 나눠봅시다.
ajax, iframe 등을 이용하여 사용자 모르게 서버와 통신하지 않으면, 기본적으로 모든 제조사, 차종 정보를 트리구조 형태의 자원으로 html을 전송할때 어떤 식으로든 (자바스크립트 변수에 넣는다든지)해서 스크립트로 해야합니다.
예)
<script>
var car = { '현대' : { '아반떼' }, { '소나타' } }
</script>
와 같은 json형태로 정보를 갖는다고 가정하면,
<script>
var car = {
<%
String maker = "";
String carName = "";
for(Car car : CarList){
if(!maker.equals(car.getMaker()){
if(!"".eqauls(car.getMaker())
out.print("}");
out.print("{'");
out.print(car.getMaker());
out.print("' : ");
maker = car.getMaker();
}
if(!carName.equals(car.getCarName()){
if(!"".eqauls(car.getCarName())
out.print("}");
out.print("{'");
out.print(car.getCarName());
out.print("' : ");
carName = car.getCarName();
}
}
if(!"".eqauls(cat.getCarName())
out.print("}");
if(!"".eqauls(cat.getMaker())
out.print("}");
%>
};
</script>
대충 이런식의 코딩이 가능하겠지요.
위의 예는 오류가 있을지 모르겠습니다만 대충 그렇단 거고.....^^;
결과적으로 아래의 jsp 코드는 WAS가 처리하면 위의 html 코드로 만들어 사용자에게 던져줍니다.
결과적으로 위의 html을 만들기 위에 아래와 같이 작업해야한다는 거지요..
다만 데이터가 많아지면 불필요한 정보가 많이 넘어가므로 요즘에는 ajax로 제조사에 해당되는 차종만 요청해서 처리하는 형태로 구현합니다.
기존에도 iframe으로 비슷하게 했엇지요. ^^;
웹을 전혀 모르면
var car = <%= car %>;
로 java와 javascript 간에 데이터를 주고받으려는 엉뚱한 생각을 할 수도 있지요...ㅎ
이 단순한걸 너무 장황하게 설명해버렸네요. ㅡ0ㅡ;