인텔리가 '되고 싶은' 인텔리재이

[JSP + MyBatis] 2. 프로젝트 세팅 및 화면 출력해보기 본문

✨LEVEL UP🎇/PROJECT

[JSP + MyBatis] 2. 프로젝트 세팅 및 화면 출력해보기

인텔리재이 2023. 1. 25. 22:00

 

🕶 참고 포스팅

[JSP + MyBatis] 1. 프로젝트 생성 및 실행해보기

dependency 추가하기

프로젝트를 본격적으로 시작하기 앞서 필요한 세팅을 위해 dependency를 추가합니다.

프로젝트 구조 하단의 pom.xml 중 dependencies 사이에 JSP, MyBatis,MySQL 등 필요한 의존성을 추가합니다.

	<dependencies>
	
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>	
		
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>
		
    <!--JDBC -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
        
    <!--JSP -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
        <scope>provided</scope>
    </dependency>
		
    <!--MyBatis-->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.4</version>
    </dependency>

    <!--MySQL-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
		
    <!--JSTL : HTML에서 자바를 사용할 수 있게 도와주는 라이브러리-->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
		
	</dependencies>

 

구성요소를 추가하고 ctrl+s로 저장하면, 우측 하단에 변경사항이 저장됩니다.

혹은 프로젝트 우측 마우스클릭 - Maven - Update Project로 변경사항을 반영합니다.

application.properties 추가하기

프로젝트 구조 중, src - main - resources - application.properties에 내용을 추가합니다.

server.port = 8081

#JSP경로 설정
#prefix : 경로, suffix : 확장자명
spring.mvc.view.prefix: /WEB-INF/views/
spring.mvc.view.suffix: .jsp

#mysql DB 연동
spring.datasource.data-source-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/DB스키마이름
spring.datasource.username=유저명
spring.datasource.password=비밀번호

#mybatis
mybatis.type-aliases-package=kr.jobtc.mybatis
mybatis.mapper-locations=static/mapper/*.xml

- server.port 지정

  : Spring boot에 기본적으로 내장된 Tomcat server의 디폴트 포트번호는 8080입니다.

    8080 외에 다른 포트번호를 사용하고 싶을때 기재합니다.

- jsp 경로를 설정하는 내용

  : 만들어줄 화면의 위치와 화면의 확장자를 지정하는 내용입니다.

  : 저는 webapp - WEB-INF- views 폴더 내에 화면을 만들었기때문에 다음과 같이 작성했습니다.

- mysql DB 연동

  : mysql 계정 정보 및 미리 만들어둔 스키마 이름을 작성합니다.

- mybatis 설정

  : mybatis와 관련한 설정 부분입니다.

test 화면 출력하기

application.properties에 작성한 대로, webapp - WEB-INF- views 폴더 내에 테스트 화면을 만들고 출력해보겠습니다.

지정한 폴더에서 마우스 우클릭 - New - Other을 선택합니다.

jsp를 검색한 뒤, JSP File 을 선택합니다.

File 이름은 test.jsp 로 지정하겠습니다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>TEST!!</h2>
</body>
</html>

기본적으로 세팅된 구조에서, body 태그 안에 TEST!!!라는 내용을 추가하였습니다.

 

테스트 페이지 출력을 위해, src-main-java com.example.demo에 JspTest.java 파일을 생성합니다.

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class JspTest {
	@RequestMapping("/test")
	private String jspTest() {
		return "test"; // 생성한 jsp 파일명
	}
}

'주소창에 localhost:8081/test을 입력했을때, test.jsp에 작성한 내용을 출력하겠다' 는 내용입니다.

 

해당 내용을 저장 후 프로젝트를 다시 실행시킨 뒤,

브라우저 주소창에 localhost:8081/test를 입력 후 접속하여 화면이 잘 출력되는지 확인합니다.

 

JSP로 만든 첫번째 화면이 출력되었습니다!🎉

 

다음 포스팅에서는 DB에 저장된 데이터를 화면에 불러오도록 하겠습니다! 😀

 

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

'✨LEVEL UP🎇 > PROJECT' 카테고리의 다른 글

[JSP + MyBatis] 5. 게시글 작성하기 (insert)  (1) 2023.02.07
[JSP + MyBatis] 4. 화면에 부트스트랩(Bootstrap) 적용하기  (0) 2023.01.27
[JSP + MyBatis] 3. MySQL DB 연동하기  (0) 2023.01.25
[JSP + MyBatis] 1. 프로젝트 생성 및 실행해보기  (0) 2023.01.25
[React.js + Spring Data JPA] 1. 프로젝트 생성 및 세팅  (2) 2023.01.25
'✨LEVEL UP🎇/PROJECT' Related Articles more
Comments