JQueryBootStrap을 제작사 홈페이지에서 다운로드 받아 추가하는 방법 이외에 Mavendependencyscript만 추가하여 주면 프로젝트에 추가를 할 수 있습니다스크립트는 일반 예제에서 복사해 와도 되지만 프로젝트 별로 사용할 버전을 선택 해야 하기 때문에 그냥 복사하기 보다는 공신력이 있는 사이트를 이용해서 참조를 하는것이 좋습니다여기서 2곳의 사이트를 소개합니다.

 

https://mvnrepository.com/


mvnrepository.com에서는 라이브러리를 검색을 통하여 찾을 수 있습니다


maven jquery bootstrap


귀찮기는 하지만 검색을 하면 버전 별로 정보가 리스트 되고 리스트에서 원하는 버전을 선택 하면


maven jquery bootstrap


스크립트를 복사해올 수 있습니다. Gradle을 클릭 하면 Gradle용 스크립트가 나옵니다.

 


https://www.webjars.org/

 

webjars.org에서는 첫 화면에 자주 사용하는 라이브러리가 리스트 되어 있고 최신 버전으로 스크립트를 얻을 수 있습니다.


maven jquery bootstrap


만약 최신 버전이 아닌 예전 버전이 필요하다면 콤보 박스를 클릭하면 해당 라이브러지의 버전 정보가 리스트 되고 원하는 버전을 선택하여 


maven jquery bootstrap


상단 Build Tool:에 있는 Maven 버튼을 선택하면 스크립트를 얻을 수 있습니다.

 

복사한 스크립트는 pom.xml에 추가를 해줍니다.


                <dependency>

                   <groupId>org.webjars</groupId>

                   <artifactId>jquery</artifactId>

                   <version>3.4.1</version>

               </dependency>

               <dependency>

                   <groupId>org.webjars</groupId>

                   <artifactId>bootstrap</artifactId>

                   <version>4.4.1</version>

               </dependency>


그리고 Maven UpdateMaven install을 하면 추가된 라이브러리를 jsp에 사용할 수 있게 됩니다.

 

js 파일 위치


추가한 라이브러리를 jsp에서 사용하기 위한 path는 어떻게 하면 알 수 있을까요추가된 라이브러리의 .jar 파일을 확장하면 정확한 js 파일 위치를 찾을 수 있습니다.


maven jquery bootstrap


이렇게 찾은 위치를 script에 반영하면 됩니다.

<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>

 

bootstrap도 동일한 방법으로 위치를 확인 합니다.


maven jquery bootstrap


그리고 스크립트에 반영 합니다. bootstrap은 기본 제공 css를 사용하려면 cssjs를 모두 반영합니다.

<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">

 

사용 예

 

간단하게 JSP파일을 생성해서 잘 반영이 되었는지 사용을 해 봅니다.


 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

 

<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>

<script src="/webjars/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>

 

</head>

<body>

 

<div class="container">

 

<table class="table table-hover">

  <thead class="thead-dark">

    <tr>

      <th>codeId</th>

      <th>code</th>

      <th>codeNm</th>

      <th>codeDc</th>

    </tr>

  </thead>

  <tbody>

    <tr>

        <td>COM001</td>

        <td>REGC01</td>

        <td>단일 게시판 이용등록</td>

        <td>단일 게시판 이용등록</td>

        </tr>

    <tr>

        <td>COM001</td>

        <td>REGC02</td>

        <td>커뮤니티 등록</td>

        <td>커뮤니티 등록</td>

    </tr>

    <tr>

        <td>COM001</td>

        <td>REGC03</td>

        <td>동호회 등록</td>

        <td>동호회 등록</td>

    </tr>

    <tr>

        <td>COM001</td>

        <td>REGC04</td>

        <td>명함등록</td>

        <td>명함등록</td>

    </tr>          

  </tbody>

 

</table>

  

</div>

</body>

</html>


maven jquery bootstrap


잘 나오는 군요.  bootstrap을 사용하면 디자인을 없이도 어느 정도의 퀄리티 있는 사이트 제작이 가능 합니다.


- copy coding -


eclipse tomcat을 설치한 후 springmaven을 이용하여 추가하고 간단한 MVC 모델을 만들어 보겠습니다.  eclipse Version: 2019-03 (4.11.0).

 


1. Eclipse Apache-Tomcat 설치


기본 eclipsetomcat설치는 다음을 참고 하세요.

 

eclipse java apache-tomcat 설치 (Windows)



2. maven 프로젝트 생성


최근에는 maveneclipse에 포함되어 있는데 특별히 사용해야 하는 maven 버전이 있거나 최신 버전을 설치하여 사용하려면 다음을 참고 하세요.


maven 설치 eclipse 연동

 

maven project를 생성하기 위해 상단 메뉴에서

File > New > Maven Project

를 선택 하거나



maven spring mvc project


또는

File > New > Others

에서 선택을 합니다.  


maven spring mvc project


Next 버튼을 클릭 합니다.


maven spring mvc project


프로젝트 생성 위치는 workspace이고 수정이 필요 없으면 Next 버튼을 클릭 합니다.


maven spring mvc project


maven-archetype-webapp을 선택하고 Next 버튼을 클릭 합니다.


maven spring mvc project


Group Id”는 기본적으로 "com.test.maventest" 로 되어 있는데 수정을 해도 됩니다.  “Artifact Id” 는 적당한이름을 입력 합니댜여기서는 "mavenexample"로 하였습니다. “Package” 는 입력 값에 의해 " com.test.maventest.mavenexample" 으로 자동생성 됩니다.

입력이 완료 되면 Finish 버튼을 클릭 하면 프로젝트가 생성되고 생성된 프로젝트의 구조와 파일은 다음과 같습니다.

 

maven spring mvc project



3. 코딩

 

이제 MVC 모델로 코딩을 해보겠습니다.

 

3.1 pom.xml 편집


pom.xml을 이용하여 spring framework를 추가 합니다.


 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test.maventest</groupId>

  <artifactId>mavenexample</artifactId>

  <packaging>war</packaging>

  <version>0.0.1-SNAPSHOT</version>

  <name>mavenexample Maven Webapp</name>

  <url>http://maven.apache.org</url>

  <dependencies>

    <dependency>

      <groupId>junit</groupId>

      <artifactId>junit</artifactId>

      <version>3.8.1</version>

      <scope>test</scope>

    </dependency>

    <!--  신규 추가 작업 시작 -->

    <dependency>

      <groupId>org.springframework</groupId>

      <artifactId>spring-core</artifactId>

      <version>${spring.version}</version>

    </dependency>

    <dependency>

      <groupId>org.springframework</groupId>

      <artifactId>spring-webmvc</artifactId>

      <version>${spring.version}</version>

    </dependency>

    <!--  신규 추가 작업 종료 -->

  </dependencies>

  <build>

    <finalName>mavenexample</finalName>

  </build>

 

  <properties>

               <spring.version>4.0.2.RELEASE</spring.version>

  </properties>

 

</project>


3.2 Controller 생성

 

HelloWorldController.java

Class를 생성하려면 pom.xm에 설정한 것과 같이 package를 만들고 진행 해야 합니다. <groupId>com.test.maventest</groupId> 형태로 package를 새로 생성합니다.



maven spring mvc project


com.test.maventest 밑으로 controller, service, vo, dao, common등의 폴더를 생성해서 사용하면 됩니다여기서는 controller만 생성합니다. DB 이용까지 설명하면 너무 길어져서 다음기회에...


controller 폴더를 생성 합니다. 상단 메뉴에서

File > new > Folder

를 선택 하고


maven spring mvc project


maventest 하부에 controller를 입력하고 Finish 버튼을 클릭하여 controller 폴더가 생성 되었습니다. 이제 contoller 폴더에 class 파일을 하나 추가 합니다.


maven spring mvc project


New 에서 class를 선택 하고 Next 버튼을 클릭 합니다.


maven spring mvc project


파일 명을 HelloWorldController로 하여 생성하면 클래스만 있는데 코딩을 합니다.


 package com.test.maventest.controller;

 

@Controller

@RequestMapping("/helloWorld")

public class HelloWorldController {

        @RequestMapping(value = "/hello", method = RequestMethod.GET)

        public String hello(ModelMap model) {

               model.addAttribute("msg", "Hello World!");  // 데이터

               return "helloWorld"; // 리턴되는 jsp 파일명

        }

       

        @RequestMapping(value = "/displayMessage/{msg}", method = RequestMethod.GET)

        public String displayMessage(@PathVariable String msg, ModelMap model) {

               model.addAttribute("msg", msg);  // 데이터

               return "helloWorld";  // 리턴 파일명

        }

 

}


/helloWorld/hello : 내부에서 생성한 메시지 전달

/displayMessage/{메시지} : 외부에서 받은 메시지를 그대로 전달(또는 가공도 할 수 있겠죠?)

.

 

3.3. View 생성


/WEB-INF/ 폴더에 Controller에서 리턴 하는 값을 받을 화면을 helloWorld.jsp로 선언 했으므로 추가를 해 봅니다.  WEB-INF에 마우스 대고 우측 클릭해서 JSP 추가를 합니다.


maven spring mvc project


생성된 파일에 코딩을 추가 합니다.


 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

        <h1>Spring 4.0.2 MVC web service Test</h1>

       

        <h3>Return Message : ${msg}</h3>

 

</body>

</html>


controller 파일 addAttribute()에서 msg 넘겨주므로 받아서 보여 주는 jsp 입니다.

 

코딩도 끝입니다.

 

 

4. Configure


위에서 작성한 코드를 Spring MVC로 설정해 보겠습니다.  전에 설명한 Plug-in 방식으로 Spring을 추가하면 기본적으로 설정이 되어 있습다.

 

4.1 web.xml


파일 위치는

/mavenexample/src/main/webapp/WEB-INF/web.xml

servlet 파일의 위치와 파일명을 정의 합니다.

*-servlet.xml을 사용하기 위하여 dispatcher를 추가 합니다.


 <web-app>

  <display-name>Archetype Created Web Application</display-name>

 

  <servlet>

               <servlet-name>data-dispatcher</servlet-name>

               <servlet-class>

                       org.springframework.web.servlet.DispatcherServlet

        </servlet-class>

               <load-on-startup>1</load-on-startup>

        </servlet>

 

        <servlet-mapping>

               <servlet-name>data-dispatcher</servlet-name>

               <url-pattern>/</url-pattern>

        </servlet-mapping>

 

</web-app>


servlet-namedata-dispatcher라고 했으니 파일명은 data-dispatcher-servlet.xml가 되고 위치는 ‘/’로 했으니 web.xml과 동일한 위치로 /mavenexample/src/main/webapp/WEB-INF/ 여기에 생성합니다.

 

4.2 data-dispatcher-servlet.xml

 

data-dispatcher-servlet.xml 파일을 신규 생성 합니다. 주의할 점은 생성된 package명으로 기입해야 하는데 Spring에서 annotation을 사용하기 위해 component-scan을 등록하는 것으로 base-package를 입력 하면 그 하위 소스 코드를 Spring container가 실행 될 떄 정보를 읽어 옵니다.

<context:component-scan base-package="com.test.maventest" />


 <beans xmlns="http://www.springframework.org/schema/beans"

        xmlns:context="http://www.springframework.org/schema/context"

        xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

        xsi:schemaLocation="

        http://www.springframework.org/schema/beans    

        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

        http://www.springframework.org/schema/context

        http://www.springframework.org/schema/context/spring-context-3.0.xsd

        http://www.springframework.org/schema/mvc

        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

 

<context:component-scan base-package="com.test.maventest" />

 

        <bean

               class="org.springframework.web.servlet.view.InternalResourceViewResolver">

               <property name="prefix">

                       <value>/WEB-INF/</value>

               </property>

               <property name="suffix">

                       <value>.jsp</value>

               </property>

        </bean>

 

</beans>


파일을 생성한 위치는 아래와 같습니다.


maven spring mvc project



5. application 실행

 

5.1 Maven Update


pom.xml 파일을 수정했으니 반영을 위해 프로젝트에 마우스를 대고 우측 클릭

Maven > Update Project

을 선택하고


maven spring mvc project


update 할 프로젝트를 선택 합니다여기서는 하나만 생성 했으므로 하나만 나옵니다.


maven spring mvc project


update 하려는 프로젝트를 선택 하고 OK 버튼을 클릭 합니다.

 


5.2 Maven Build

 

maven build를 진행 합니다.

프로젝트에 마우스 우측 클릭 > Run As > Maven build


maven spring mvc project


그러면 build의 목표를 입력하는 창이 나타납니다.


maven spring mvc project


Goal에는 compile, test, deploy등이 있고 여기서는 package를 입력 하고 Run 버튼을 클릭 해서 war 파일을 생성 하려고 합니다.


maven spring mvc project


빌드에 성공 했습니다.

 

5.3 Was 실행

 

이제 프로젝트를 WAS에서 기동해 보겠습니다.

프로젝트에 마우스 우측 클릭 > Run As -> Run On Server

잠시 후 브라우저에 Hello World!가 나타 나는데


maven spring mvc project


이건 index.jsp 파일이고 우리가 생성한 MVC를 테스트 해 봅니다.


http://localhost:8080/mavenexample/helloWorld/hello 를 입력 합니다.


maven spring mvc project


입력한 데이터를 리턴 받는 테스트 입니다.

http://localhost:8080/mavenexample/helloWorld/displayMessage/Maven Test 오래 걸리네


maven spring mvc project


보낸 문자를 다시 받는 것도 잘 되는 군요.


'Java' 카테고리의 다른 글

axboot framework 설치  (2) 2019.05.29
Spring Tools 설치 Spring Boot (STS 4.4.2.1)  (4) 2019.05.28
maven 설치 및 eclipse 연동  (17) 2019.04.30
Eclipse Apache spring (plug-in) 설치  (0) 2019.04.15
eclipse java apache-tomcat 설치 (Windows)  (2) 2019.04.13


1. 다운로드

 

maven을 다운로드하기 위해 사이트에 접속 하고 좌측 메뉴에서 Download를 선택합니다.


https://maven.apache.org/download.cgi


좀 가까운 곳에서 다운로드 하려면 우측에서 mirror사이트를 선택 하고 change 버튼을 클릭 합니다.


maven install eclipse


조금 아래쪽으로 내려오면 Files에서 윈도우에 설치 하기 위해 zip으로 압축된 bin형태의 파일을 다운 받습니다.


maven install eclipse



2. 설치

 

설치는 적당한 위치에 압축을 풀어 주면 완료 됩니다.


maven install eclipse


저는 관리가 편하도록 project 폴더에 모두 모았습니다그리고 나중에 사용하기 위해 repository 폴더도 하나 생성 했습니다.



3. 환경설정

 

환경 변수에 등록을 하여 사용이 편리하도록 하는 작업 입니다.  탐색기 [ PC]에 마우스를 놓고 우측 버튼을 눌러 팝업 메뉴 에서 속성을 선택 합니다.  제어판에서 시스템을 찾아도 됩니다.


maven install eclipse


시스템 창이 나타나면 

 

maven install eclipse


고급 시스템 설정을 선택 합니다.


maven install eclipse


환경 변수를 선택 합니다.


maven install eclipse


새로 만들기 버튼을 선택하고 maven을 추가 합니다.


변수이름 : MAVEN_HOME

변수 값 : MAVEN 폴더의 경로(F:\project\apache-maven-3.6.1)


maven install eclipse


이번엔 Path에 추가 합니다


maven install eclipse


Path를 선택 하고 편집 버튼을 클릭하여 


maven install eclipse


메이븐의 bin 폴더를 추가해 줍니다이제 설치가 완료 되었는지 확인을 해봅니다.  

콘솔 창을 하나 열어서 mvn –version을 입력하고 엔터를 칩니다.


maven install eclipse


java path를 잡지 않은 경우에는 오류가 발생 합니다.   설정이 되어있지 않다면 메이븐과 동일한 방식으로 추가를 해줍니다.


maven install eclipse


maven install eclipse


다시 mvn -version


maven install eclipse


이번엔 명령이 잘 실행 되는 군요.

 

 

4. eclipse 설정

 

이제 eclipse에 연결을 해보겠습니다요즘엔 기본적으로 eclipsemaven이 포함되어 있어 그냥 사용해도 무방하지만 신규 버전으로 설치를 했으니 변경을 하고 관리도 편하게 변경을 해봅니다.


이클립스 상단 메뉴에서

Windows > Preferences

를 선택 합니다.


maven install eclipse


좌측 메뉴에서 Maven을 찾아 Installations를 선택 합니다.


maven install eclipse


현재 eclipseembedded되어 있는 3.5.3 버전을 사용 중 입니다새로 설치한 메이븐을 추가하기 위해 Add 버튼을 클릭합니다.


maven install eclipse


Directory 버튼을 클릭하여 maven 설치 위치를 선택 합니다Finish 버튼을 클릭 합니다.


maven install eclipse


체크박스를 새로 추가한 maven으로 변경 합니다.

 

이제 좌측에서 User Settings 메뉴를 선택 합니다.


maven install eclipse


Browse 버튼을 이용하여 새로 설치된 폴더의 settings.xml 파일을 선택 합니다.


maven install eclipse


maven install eclipse


settings.xml 파일의 위치가 변경 되었습니다.  이제 ropository를 처음에 생성해둔 곳으로 변경을 하도록 합니다.  파란색 (open file)을 선택하면 settings.xml 파일이 열립니다.  그럼 Apply와 Apply and Close 버튼을 클릭하여 설정을 반영합니다.

settings.xml 파일에서 <localRepository> 를 찾아 주석을 제거합니다.      


maven install eclipse


신규로 생성한 폴더의 위치로 입력을 합니다.


maven install eclipse


파일을 저장하고 다시 Windows > Preferences 창으로 가봅니다.


maven install eclipse


repository위치가 변경이 되었습니다.

 

수정 사항을 반영하려면 eclipse를 재시작 해야 합니다재시작 하면 뭔가를 계속 작업하고 있는데 변경된 설정에 맞게 repository 폴더로 파일을 다운받고 있는 것 입니다


maven install eclipse


repository 폴더에 가보면 파일들이 새로 다운로드 되었습니다설치 및 연동이 잘 되었습니다프로젝트를 하나 만들어 보면 될것 같습니다.



1

+ Recent posts