dltjdgur327

STS가 설치되었다면 이제 Spring프로젝트를 생성하도록 하겠습니다.

마우스 우클릭 - New - Spring Legacy Project

1. project name 입력

2. Spring MVC Project 선택

해당 workspace에서 처음 spring 프로젝트를 생성하게 되면 필요한 파일을 다운로드 하게 됩니다.

다음은 패키지명 입력

이렇게 Finish를 누르게 되면 하단의 Progress에서 필요한 maven을 다운로드 하는 것을 확인할 수 있습니다.

이렇게 프로젝트 생성하였습니다. 만약 프로젝트를 생성하자마자 바로 프로젝트에서 에러가 나온다면 maven을 삭제하였다가 다시 설치해주셔야 합니다. http://dltjdgur327.tistory.com/26 <<< 이 링크에 해당 오류 해결하는 방법을 정리하였습니다.

그리고 tomcat과 연동하여 웹페이지를 띄워보겠습니다.

서버에서 아래 링크를 클릭하시거나 우클릭 - New - Server를 누르셔도 됩니다.

그리고 다운로드 하신 tomcat의 버전에 맞는 것을 선택하여 주세요.

저는 9.0 을 선택하였습니다.

그 다음은 tomcat이 설치되어 있는 경로를 찾아주세요. Next 클릭!!

그리고 서버에 프로젝트를 추가해주어야 합니다. 아까 생성해둔 프로젝트를 add 해줍니다.

이렇게 tomcat에 프로젝트까지 add하고나서 tomcat을 실행하도록 합시다.

http://localhost:8080/myapp/

이렇게 Hello world 화면이 나오면 성공!!

http://localhost:8080/myapp/

> 여기서 8080은 tomcat의 기본포트번호고 /myapp/ 이 부분은 처음에 생성할 떄 입력했던 패키지 이름입니다.

저와 패키지 이름이 다르시다면 이부분을 알맞게 입력하시면 됩니다.

하지만 경로는 절대경로를 이용하는 것이 좋습니다.

따라서 url부분 "/myapp/" 부분을 없애고 "/" 로 설정하려면 tomcat에서 수정할 수 있습니다.

Path를 설정하는 부분에서 모두 지우시고 "/" 만 입력하시면 됩니다.

이렇게 설정하시면

http://localhost:8080/

이 경로가 기본 경로가 되는 것입니다.

그리고 tomcat의 설정을 변경하였을 때에는 항상 재기동을 해주세요.

다시 실행하였을 떄 정상적으로 화면은 나오지만 한글 인코딩이 되어있지 않습니다!

아래의 코드를 home.jsp 상단에 붙여넣어 주세요. pageEncoding이 설정되어 있지 않아 한글이 깨져서 나오게 되었던 겁니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

이렇게 정상적으로 출력되게 됩니다.

지금까지 프로젝트 생성과 기본 tomcat 설정 방법이였습니다.

추가로 궁금하신 부분을 댓글 남겨주세요 :)

jquery 플러그인 중에 굉장히 유용하게 사용한 플러그인을 소개하려고 합니다.

바로 slick 이라는 플러그인인데요.

http://kenwheeler.github.io/slick/

사이트에 들어가면 사용방법을 친절하게 설명해주고 있습니다. 물론 영어지만요...

여기에서 slick을 다운로드 해줍니다. Download Now!!

다운받은 slick 폴더를 사용하려고 하는 프로젝트에 붙여넣어주세요

저는 WebContent 아래에 붙여넣었습니다. 그리고 기본적인 index.jsp 에서 테스트를 진행해보았습니다.

다운받은 slick 폴더 안에는 css파일과 js파일이 있습니다.

!!! 여기서 경로는 파일위치에 맞게 변경하여 사용해주세요.

그리고 jquery를 통해 원하는 옵션을 설정하여 실행시켜주면 됩니다.

dots는 아래의 점을 표시하는 옵션이고

infinite는 루프 무한대로하는 옵션이라고 보시면 됩니다.

<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">

	<div class="your-class" align="center" style="width: 500px; left: 600px;">
		<div><h3>1</h3></div>
		<div><h3>2</h3></div>
		<div><h3>3</h3></div>
		<div><h3>4</h3></div>
	</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('.your-class').slick({
		dots: true,
		infinite: true
	});
});
</script>

전체적인 내용입니다. div 태그안에 원하는 내용을 넣어주시면 slick을 사용하실 수 있습니다.

slick의 옵션의 종류가 많기 때문에 원하는 옵션은 직접 사용해보시고 입맛대로 추가하시면 되겠습니다.

war 파일도 함께 첨부하겠습니다.

slick.war

궁금하신 사항은 댓글 부탁드리겠습니다!

이클립스 인코딩 설정 방법!!

먼저 windows - preferences

여기에서 General - Workspace - Other - UTF-8 을 선택해주세요.

그 다음 CSS 파일 설정

HTML 파일 설정

JSP 파일 설정