본문 바로가기
Study/JSP

JS와 JSP 파일의 차이점, 그리고 JS 파일 JSP파일에서 사용

by 얏옹이 2023. 4. 5.
반응형

많이들 헷갈려(?) 하고 착각(?)도 하고 나조차도 많이 혼란스러운 JS와 JSP 파일은 뭐가 다를까...? 

 

사실 몰라도 크게 상관이 없을거같아서 그동안에는 그냥 무시하고 지나쳤었다.

 

하지만 이번에 기업 팀 프로젝트를 진행하면서 받은 프로젝트내에는 수많은 JS파일안에 수많은 코드들이 내포되어있고, JSP 파일에서는 별다른 구현부가 없다는것을 발견했다.

 

그동안 국비지원수업을 받다보면 JSP 파일에서 직접적으로 UI를 구현하고, Server와의 통신을 직접 JSP에서 호출하여 Controller를 통해 값을 구해오거나, Ajax를 직접 JSP 파일 내에서 선언하고 구현하여 값을 구해오곤 했는데...

 

이번 프로젝트 파일 코드 분석을 하다보니 의외로 JSP파일에서는 HTML 적인 요소들 외에 직접적으로 Script를 이용하여 구현하는점이 많이 없다는걸 발견하게 되었다.

 

수업시간에 배운 내용들과는 너무나도 달랐다. 왜 이렇게 되어있는것일까? 라는 생각에 찾아보기로 결정했다.

 

일단 JS는 Javascript 파일로 클라이언트측 스크립트 언어이다. 웹 브라우저에서 바로 실행되며,  이는 정적인 웹 문서에 동작을 부여하는 스크립트 언어이다.

 

반면 JSP파일은 Java Server Pages의 약자로, 서버측 웹 프로그래밍중 하나이다. HTML 코드 내에 직접 자바코드를 삽입하여 웹서버에서 동적으로 웹페이지를 생성해주고 웹브라우에게 돌려주는 Server측 언어라고 할수있다.

 

즉 JS는 클라이언트측 에서 실행되고, JSP파일은 서버측에서 실행된다.

간단하게 설명하자면 클라이언트측 = 사용자의 컴퓨터, 서버측 = 웹페이지를 제공하는 컴퓨터 라고 이해하면 좋을거같다.

 

사실 이러한 설명들도 잘와닿지않아서 코드분석을 해보다보니... 왠만한 기능적인 요소들은 다 JS에서 구현하고 JSP에서는 JS 파일을 읽어들여와 호출만 해주는식으로 진행되는거 같다 라는걸 느꼈다.

 

예시로 살펴보자.

 

반응형

 

먼저 기존 JSP에서 구현하는 방식을 택한다면

 

<script>

function test() {
	alert('테스트 버튼 클릭');
}

</script>
<input type="button" onclick="test();" value="테스트"/>

 

이렇게 한 JSP 파일 안에 HTML 요소들이 존재하고 해당 동작을 수행하는 script문이 동시에 존재할것이다.

 

그렇지만 JS 파일을 사용한다면 동작을 구현하는 부분들은 JS파일에서 별도로 관리되는것이다.

 

test.js라고 칭하고, 파일을 생성한 이후에 HTML 문서나 JSP 문서에서 해당 JS 파일을 불러오고 메소드를 호출해주기만 하면된다.

 

test.js

function test() {
  alert('테스트 버튼 클릭');
}

test.jsp

<script src="test.js"/> //test.js를 불러온다

<input type="button" onclick="test();" value="테스트"/> //해당 js파일내의 메소드를 호출해준다

 

동작은 동일하나, 동작구현의 코드들을 따로 관리할수있어 유지보수에 용이하며, js파일을 여러 JSP 파일에서 재사용 할수있어진다.

 

지금 기업프로젝트 진행하면서 Openlayers와 Geoserver를 이용하여 지도에 레이어를 표출해주는 작업을 진행하고있다.

잘 모를때는 JSP 파일내에서 지도 구현부터 지정까지 다 코드로 작성해주었지만, 현재는 JS파일로 분리를 해놓았다.

 

function mapinit() {
	let map = new ol.Map({
		target: 'total_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});
	let layer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms',
			params: {
				'LAYERS': ['EDU5:sigun_layer','EDU5:sigun_total_layer'],
				'FORMAT': 'image/png'
			}
		})
	});

	let vworldLayer = new ol.layer.Tile({
		source: new ol.source.XYZ({
			url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
		})
	});

	map.addLayer(vworldLayer);
	map.addLayer(layer);
	//보건맵
	let healthmap = new ol.Map({
							target: 'health_map',
							view: new ol.View({
								center: ol.proj.fromLonLat([127.0, 36.0]),
								zoom: 6.8
							})
						});
						let healthlayer = new ol.layer.Tile({
							source: new ol.source.TileWMS({
								url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:health',
								params: {
									'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
									'FORMAT':'image/png'
								}
							})
						});
						healthmap.addLayer(vworldLayer);
						healthmap.addLayer(healthlayer);
	//산업 맵
	let industrymap = new ol.Map({
						target: 'industry_map',
						view: new ol.View({
							center: ol.proj.fromLonLat([127.0, 36.0]),
							zoom: 6.8
						})
					});

					let industrylayer = new ol.layer.Tile({
						source: new ol.source.TileWMS({
							url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:industry',
							params: {
								'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
								'FORMAT':'image/png',
							}
						})
					});
	industrymap.addLayer(vworldLayer);
	industrymap.addLayer(industrylayer);
	
	//농업 맵
	let agriculturemap = new ol.Map({
		target: 'agriculture_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});

	let agriculturelayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:agriculture',
			params: {
				'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
				'FORMAT':'image/png',
			}
		})
	});
	agriculturemap.addLayer(vworldLayer);
	agriculturemap.addLayer(agriculturelayer);
	
	//수산양식
	let aquaculturemap = new ol.Map({
		target: 'waterfarm_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});
	let aquaculturelayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:aquaculture',
			params: {
				'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
				'FORMAT':'image/png',
			}
		})
	});
	aquaculturemap.addLayer(vworldLayer);
	aquaculturemap.addLayer(aquaculturelayer);
	
	//축산
	let livestockmap = new ol.Map({
		target: 'livestock_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});

	let livestocklayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:livestock',
			params: {
				'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
				'FORMAT':'image/png',
			}
		})
	});
	livestockmap.addLayer(vworldLayer);
	livestockmap.addLayer(livestocklayer);
	//교통
	let trafficmap = new ol.Map({
		target: 'trans_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});

	let trafficlayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:traffic',
			params: {
				'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
				'FORMAT':'image/png',
			}
		})
	});
	trafficmap.addLayer(vworldLayer);
	trafficmap.addLayer(trafficlayer);
	//전력
	let electricitymap = new ol.Map({
		target: 'elect_map',
		view: new ol.View({
			center: ol.proj.fromLonLat([127.0, 36.0]),
			zoom: 6.8
		})
	});

	let electricitylayer = new ol.layer.Tile({
		source: new ol.source.TileWMS({
			url: 'http://210.113.102.169:8090/geoserver/EDU5/wms?service=WMS&version=1.1.0&request=GetMap&layers=EDU5%3Asigun_category_layer&bbox=746368.7309%2C1458754.2808%2C1394213.4428%2C2068442.8942&width=768&height=722&srs=EPSG%3A5179&styles=&format=application/openlayers&viewparams=category:electricity',
			params: {
				'LAYERS':['EDU5:sigun_layer','EDU5:sigun_category_layer'],
				'FORMAT':'image/png',
			}
		})
	});
	electricitymap.addLayer(vworldLayer);
	electricitymap.addLayer(electricitylayer);
	
}

 

각 분야의 분포도를 다르게 해주기위해서 파라미터값에 따라 다른 분포도를 표시해주기 위하여 각각의 경로를 설정해두었다. 

 

기존에 JSP파일에서 구현했을때는 <body> 태그안에 저 코드들이 다 들어가있어서 너무 코드길이가 길어졌었고 재사용이 불가능했었는데 이렇게 js파일로 분리하니 재사용도 추후 가능해지고 JSP 파일내에 코드 길이도 줄어들었다.

 

사용은 JSP 파일에서 간단하게 CDN 방식으로 해당 js파일을 링크 걸어주고

 

메소드를 호출해주면된다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script src="${pageContext.request.contextPath}/js/report/categorymap/map.js"></script>
	<!-- openlayers cdn 방식 이용 -->
  	<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">

</head>
<script>
	$(function(){
		
		//맵 불러오기
		window.onload = function() {
			mapinit();
		}

 

페이지가 로드되는시점에 mapinit이라는 메소드를 호출해주기로 하였고. categorymap폴더안에 있는 map.js를 불러들여왔다. 

반응형
저작자표시 비영리 변경금지

'Study > JSP' 카테고리의 다른 글

Javascript 삼항연산자  (0) 2023.06.27
JSP Date객체의 메소드 toISOString()에 대해 알아보자.  (0) 2023.04.06
JSTL forEach  (0) 2023.02.15
Model(모델) 처리 방법 대표적인 4가지  (0) 2023.02.13
JSP Page에서 Java 클래스 Import하기  (0) 2023.01.20

관련글

티스토리툴바