티스토리 뷰
아무데도 설명을 써 놓은곳이 없더라...
결국 개고생하며 나름 사용법을 알아내긴 했다..
일단 이전글에서 http://holy1017.tistory.com/33
프로젝트에 index.jsp가 추가되고
톰캣의 web.xml 의 웰컴 파일도 지우지 않은 상태이다.
일단 http://getuikit.com/ 가서
- 겟 스타티드
- 프로젝트 어쩌구(영어 어려워)
- 다운로드 소스
왜 메인화면에서 안받느냐면
메인에서 다운하면 말그대로 코드만 있다.
예제파일은 위에서 말한대에 있기때문인데.
기존의 코드를 복붙해가며 사용할 것이기 때문
아무튼 받은 파일을 압축 풀자
내가 노리는 예제파일은 uikit-master\docs 폴더의 layouts_frontpage.html 파일 이다
한번 열어봐서 미리 감상해보자.
이제 작업의 시간
이전글에서 만들었던 index파일을 열자
<body>태그 사이에 다음처럼 적자.
<body>
<!-- 메뉴 -->
<jsp:include page="nav.jsp"></jsp:include>
</body>
j같은 폴더의 nav파일을 실행시킨후 결과값을 jsp:include 태그 부분에 삽입한다.
<%@ include file 라는것도 있는데 이건 해당 파일의 소스를 그대로 복사 붙여넣기를 한다.
상황에 따라 용법이 매우 다르니 개념은 확실히 알고 있어야 한다.
현재 nav.jsp 부분에 빨간줄이 쳐질텐데
파일이 없어서 그런거다
그럼 파일을 만들자
index 랑 같은 위치인 /test/src/main/webapp 에다가 nav.jsp를 만들자
나머진 다 지우고 이코드만 남기도록 하자
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
아래부분에는 아까 다운로드 받은 파일의 소스를 훔쳐다 넣을거라서..
아까 받았던 uikit-master\docs 에서 layouts_frontpage.html 를 노트패드 또는 워드패드 또는 에딧 플러스 등으로 열어보자
메모장으로는 코드가 깨진다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontpage layout example - UIkit documentation</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/uikit.docs.min.css">
<script src="../vendor/jquery.js"></script>
<script src="js/uikit.min.js"></script>
</head>
그리고 layouts_frontpage 파일 맨 아래에서 아래 코드를 복사후 nav파일에다가 추가하자
화면이 일정 이하로 작아졌을때 보여주는 코드이다..
얘내들은 왤케 이렇게 불편하게 해놨지.
<div id="offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li class="uk-active"><a href="layouts_frontpage.html">Frontpage</a>
</li>
<li><a href="layouts_portfolio.html">Portfolio</a></li>
<li><a href="layouts_blog.html">Blog</a></li>
<li><a href="layouts_documentation.html">Documentation</a></li>
<li><a href="layouts_contact.html">Contact</a></li>
<li><a href="layouts_login.html">Login</a></li>
</ul>
</div>
</div>
마지막으로 그냥 출력할거를 layouts_frontpage 에서 적당히 찿아서 복사후(딴부분이여도됨) /test/src/main/webapp/content.jsp 에다가 넣자
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center"
style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Sample Heading</h1>
<p class="uk-text-large">Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
일단 코드들이 정상 입력됬는지 확인해보자
음... 뭐가 원인인지 한번 콘솔창을 보자.
아... 이런...
혹시 워크 스페이스를 한글로 만들었다면 저런 오류가 뜬다;;
log4j:ERROR Could not parse url [file:/D:/구글드라이브/home/.metadata/.plugins/org.eclipse.wst.server.core/tmp2/wtpwebapps/test/WEB-INF/classes/log4j.xml].
com.sun.org.apache.xerces.internal.util.URI$MalformedURIException: Path contains invalid character: 구
하지만 우리에겐 마븐이 있다
/test/pom.xml 파일을 열어서 <dependencies> 태그 다음에 빨간 내용을 추가하자
<dependencies>
//...
<dependency>
<groupId>xerces</groupId>
<artifactId>xercesImpl</artifactId>
<version>2.9.1</version>
</dependency>
//...
</dependencies>
저걸 입력후 저장하면 우측 하단에 워킹바가 뜨고나면 jar 파일이 자동으로 다운되고 적용 된다.
다시 서버 실행
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/test/css/uikit.docs.min.css] in DispatcherServlet with name 'appServlet'
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/test/js/uikit.min.js] in DispatcherServlet with name 'appServlet'
두줄이 뜬다.
뭐 당연한게. index 파일의 해더에 css js 파일 걸어놓고 실제 파일은 아무것도 안넣었기 때문인데..
위 두 워닝은 그이전 단계의 문제다.
http://holy1017.tistory.com/32
글을 보면 알다시피 /test/src/main/webapp/WEB-INF/web.xml 파일에
appServlet 라는 항목이 있다.
거기선 /test/css/uikit.docs.min.css 라는 요청이 들어올경우 무조건 자바 파일들을 뒤적거리지만...
애초에 해당 자바 파일을 만든적이 없으니 결국 No mapping found 가 뜨고만다.
그렇다고 css js 파일들을 일일이 jsp로 만드는 미친짓을 하면 안된다..
하면 안되에!!!
그러라고 만든거 아냐!!
자 그럼 어떻게 해야되느냐..
appServlet 항목의 /WEB-INF/spring/appServlet/servlet-context.xml 설정파일을 볼수 있다.
열어보자
<resources mapping="/resources/**" location="/resources/" />
라는 항목이 보일텐데 이게 무엇이냐면 jsp 파일 실행시 jsp 파일 안에서 resources/ 경로로 불러오는 파일들을 전부 /test/src/main/webapp/resources에서 가져온다는 뜻이다.
만약 예를들어
<resources mapping="/res/**" location="/sources/" /> 라고 한다면 jsp 파일 안의
<link rel="shortcut icon" href="res/favicon.ico" type="image/x-icon"> 태그는
필요에 따라서 폴더를 만들고 추가하면 된다
다시 홈페이지를 실행하면 콘솔창에 오류는 안뜬다..
하지만...너무 길어서 다음에..
2일후..
다시 서버를 실행해보자..
음... 뭔가 빠트렸나보다..
2일동안 뭘해야하는지 완전히 까먹었다..
아..
css프레임 워크 적용중이였지..
아무튼 크롬에서 오른족 클릭- 요소검사를 해보자.
특정 코드를 찿는게 아닌 오류가 어떤게 뜨는지 확인하기 위함이니 아무 위치에서 우클릭하면 된다
콘솔창을 보니 자바스크립트(자바와는 다르다!! 자바스크립트다!!)와 스타일파일과 제이쿼리까지 빠진걸 볼수있다
필수 3요소가 모조리 증발했으니 당연할수밖에..
제이쿼리만 빼고 경로가 잘못 적힌건 아니니 파일만 제대로 찿아서 넣자.
지난번에 받아뒀던 uikit-master폴더(이거 지우지 마라 이거가지고 계속 쓸거다)에서
uikit-master\docs\js 의 uikit.min.js
uikit-master\vendor 의 jquery.js
uikit-master\docs\css 의 uikit.docs.min.css <-이건 개조파일이기때문에 위 두개랑 다르게 무조건 넣자
을 넣어야하는데..
사실 uikit-master 이거 말고 http://getuikit.com/ 사이트의 메인화면에 있는 다운로드를 눌러서
https://github.com/uikit/uikit/releases/download/v2.23.0/uikit-2.23.0.zip
그 내용을 그대로 /test/src/main/webapp 에다가 넣어서 사용하는 편이 좋다.
앞으로 다른것들도 사용하기 때문에..
지금 당장 하도록!!
제이쿼리도 https://jquery.com/ 에서 다운받아서
Download the compressed, production jQuery 1.11.3 사용자용. 압축. 수정 어려움
Download the uncompressed, development jQuery 1.11.3 개발자용. 비압축. 편집이 쉬움
편한대로 받아서 js 폴더에 넣자
그리고 index 파일의 소스 경로도 제대로 수정하자.
이번엔 서버 재시작 할필요 없이 홈페이지를 새로고침만 해도 된다..
어이쿠 거의 다되긴 했는데 뭔가 오류가 뜨고 왼쪽위는 이미지 대신 네모가 뜬다..
http://localhost:8080/src/fonts/fontawesome-webfont.ttf 라는 알수없는 경로를 찿는데..
원인은 /test/src/main/webapp/css/uikit.docs.min.css 파일에 있다
해당 파일을 열고 컨트롤f 를 눌러서 fontawesome-webfont 라는걸 찿자
근데 아래처럼 정렬이 안되있는데 컨트롤 쉬프트 에프를 누르면 자동 정렬된다.
아무튼 찿아서 "../src/" 라는 부분을 모조리 지우자.. 또는 본인 파일위치에 맞게 수정.
상대경로는 구글링을 참조하자
서버 재시작 할필요 없다..홈페이지만 새로고침
여전히 오류가 뜨는데 이번엔 다른 오류다.
구글의 콘솔은 물론이지만
이클립스의 콘솔에서 오류가 떠버렸다!!
No mapping found ~~ No mapping found라고 뜨는데..
이건 서블릿이 정상 작동 했지만 해당파일이 없거나
서블릿 설정을 잘못했거나이다.
또 있을지도 모르지만 일단 이렇게 두개다
파일을 아까 확실히 넣었으므로 서블릿을 보자
/test/src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml
어이쿠 리소스 매핑이 빠져있다.
/test/src/main/webapp/WEB-INF/web.xml 에서
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>/</url-pattern> <- 이부분을 이렇게 설ㅈ장 안했다면 인식이 됬겠지만(흔히 사용되는 /*.do)
</servlet-mapping>
일단 우린 저렇게 했기때문에 소스파일을 읽어들이는게 아니라
무조건 자바 파일에서 등록된 매핑 정보를 찿게된다.
그러니 리소스 태그를 이용해서 마지막엔 폰츠 폴더를 검색하도록 설정하자.
이젠 서버를 재시작 해야한다.
/test/src/main/webapp/WEB-INF/web.xml 파이은 서버가 시작될때 한번만 읽기 때문
파일이 바귈때마다 읽게하는 방법이 구글링하면 나올지도 모르겠지만..
어지간하면 초기 세팅때 외엔 건들일 없다.
대부분 외부 xml로 빼서 관리하기때문
아무튼 서버 재시작
오오 오류도 엇고 이미지도 잘뜬다!!
일단 당장 적용법은 됬기에 이번 강좌는 끝.
자세한 설명은 해당 홈페이지에 잘 나와있다..만
영어 울렁증이 심하실 터이니 심심하면 쓰겠다...