[spring] pom.xml org.apache.maven.plugin.war.WarMojo 에러
에러 사유 - 메이븐에서 라이브러리를 내려받다 빼먹고 내려받았거나, 오류때문에 내려받지 못한 경우이다.
해결법 - Windows7 기준.
C:\Users\${users}\.m2\repository에 있는 의존 라이브러리를 전부 날리고 프로젝트를 재생성하여 다시 받는다.
부트 스트랩 사용법 및 레이아웃
부트스트랩 사용법
부트스트랩에 CND로 연결된 HTML의 클래스명으로 사용한다.
예)
<div class="container-fluid"> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-md-4</div> <div class="col-sm-4" style="background-color:lavenderblush;">.col-md-4</div> <div class="col-sm-4" style="background-color:lavender;">.col-md-4</div> </div> </div> |
container : 고정폭 길이 레이아웃 설정.(브라우저 해상도에 맞춘다.)
container-fluid : 고정폭에 100% 길이로 설정되는 레이아웃.
row : 한 줄 만들기
col-sm-4 : 칸 만들기
칸 설명 전 사전 설명.
부트 스트랩은 12그리드 방식(프레임워크마다 그리드 수가 다르다.) 프론트앤드 프레임워크이다.
예)
<div class="col-sm-8"></div> = 8칸 차지 <div class="col-sm-4"></div> = 4칸 차지 부족하거나 많으면 짜놓은 프레임이 깨진다. |
칸 만들기(레이아웃 구성) 구성요소(-로 구분)
col xm sm md lg |
칸 구성을 의미. 핸드폰 화면 기준 태블릿 화면 기준 PC화면 기준 큰 PC화면 기준 |
부트스트랩 기본
부트스트랩3
부트 스트랩이란?
부트 스트랩은 빠르고 쉽게 웹 개발을 하기위해 JQuery기반의 프론트앤드 프레임워크로, 타이포그래피, form양식, 버튼, 테이블 네비게이션 등을 제공한다.(보통 CND방식으로 사용함.)
html5로만 작성되며 모바일 최적화 페이지를 만들기 위해 사용한다.
기본 형식
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--[if IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <scirpt src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Bootstrap</h1> </body> </html> |
ORM프레임워크 라이브러리
ORM 프레임워크 ibatis
http://archive.apache.org/dist/ibatis/binaries/ibatis.java/ibatis-2.3.4.726.zip
ORM 프레임워크 mybatis
http://blog.mybatis.org/p/products.html
https://github.com/mybatis/mybatis-3/releases
DB설치 경로 및 연동
DB설치 경로
C:\app\Administrator\product\11.2.0\dbhome_1
DB연동에 필요한 OJDBC6 경로
C:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib
자바 6버전 이상에서 필요한 jar 파일 : ojdbc6
톰캣 7버전과 가장 잘 맞는다.
JDK에 넣어서 귀찮음 방지하기
C:\Program Files\Java\jre1.8.0_111\lib\ext
에 ojdbc6.jar 넣어놓기.
HTML _ AJAX. JQuery로 파일 불러오기
<script> $(function(){ $.get("item.xml", function(data) { $("#treeData").append("<tr>" +"<td>id</td>" +"<td>name</td>" +"<td>price</td>" +"<td>description</td></tr>"); $(data).find('item').each(function(){ var $item = $(this); $("#treeData").append( "<tr><td>" +$item.attr("id")+"</td><td>" +$item.attr("name")+"</td><td>" +$item.find("price").text()+"</td><td>" +$item.find("description").text()+"</td></tr>"); }); }); }); </script> |
<script> $(document).ready(function(){ $.getScript("test.js"); $('#submit').click(function(){ var msg = call($('.username').val()); $('#message').html(msg); return false; }); }); </script> |
└JavaScript 불러오기
$(function(){ $('#submit').click(function(){ var username = $('.username').val(); var sendData = 'username='+ username; $.post("welecom.jsp", sendData, function(msg) {$('#message').html(msg);} ); return false; }); }); |
└post방식으로 jsp 불러오기
HTML _ AJAX. JQuery로 자손엘리먼트 가져오기
$(function(){ $("#menu1").click(function(){ $("#message1").load("menu.html"); return false; }); }); $(function(){ $("#menu2").click(function(){ $("#message2").load("menu.html li"); return false; }); }); |
<script> $(function(){ $("#menu1").click(function(){ //몽고DB에 사용되는 형태 $.ajax({url:'menu.html', dataType:"html", success: function(data){$('#message1').html(data);}}) return false; }); }); $(function(){ $("#menu2").click(function(){ $.ajax({ url:'menu.html', dataType:"html", success: function(data){$('#message2').html($(data).find('li'));} }) return false; }); }); </script> |
menu.html은 menu.html안에 있는 내용 가져오기
menu.html li는 menu.html안에 있는 li엘리먼트 가져오기(자손 엘리먼트 가져오기)
AJAX
AJAX _자바 스크립트와 XML을 합친 비동기식 언어로, 동적인 데이터 처리에 좋다. _JS가 클라이언트쪽 스크립트라면 AJAX는 서버측 스크립트이다. _AJAX를 사용하면 서버에서 결과페이지가 오지 않고 데이터만 변화한다. _브라우저 자신이 서버에 다녀오는 것이 아니기 때문에 URI변경은 없다. |
HTML _ JQuery에서 AJAX구현
<head> <script> $(function(){ $("button").click(function(){ $("P").load("sample1.txt"); }); }); </script> </head> <body> <button>변경</button> <p>변경</p> </body> |
<head> <script> $(function(){ $("button").click(function(){ $("#container").load("resource.html"); }); }); </script> </head> <body> <button>서버로부터 데이터 가져오기</button> <div id = "container">데이터 가져오기 전</div> </body> |
HTML _ javascript에서 AJAX구현
<body> <p id ="demo"> Let AJAX</p> <button type="button" onclick="loadDoc()">Change Context</button> <script> function loadDoc() { var xhttp; //1.객체생성 if(window.XMLHttpRequest){ xhttp=new XMLHttpRequest(); } else{//for ver. IE6, IE5 xhttp=newActiveXObject("Microsoft.XMLHTTP"); } //2 응답을 받아왔을 때 처리할 형식 정의 xhttp.onreadystatechange = function(){ //readstate속성이 변경될 때마다 해당 function 호출 if(xhttp.readyState == 4 && xhttp.status == 200){ //readstate = 4는 응답 완료 상태 //stuatus = 200은 정상적으로 페이지 호출 성공 //alert(xhttp.responseText); document.getElementById("demo").innerHTML = xhttp.responseText; } }; // 3. open, send 함수 설정 //get방식으로 요청 데이터를 받을 페이지, true는 비동기통신을 지정 xhttp.open("GET", "ajax_info.html", true); xhttp.send(); } </script> </body> |