본문 바로가기
국비교육/국비교육

day28 - 0901

Luver Duck 2022. 9. 1. 22:35

MVC 패턴

- 프로그램을 Model - View - Controller 로 나누어 개발하는 디자인 패턴

 

Model

- Controller가 호출을 하면 DB와 연동하여 데이터와 연관된 비즈니스 로직을 처리 (CRUD)

 

View

- Controller로부터 받은 Model의 결과값을 사용자에게 화면으로 출력

 

Controller

- Model과 View 사이의 인터페이스(데이터 교환의 중간자) 역할

- 사용자로부터 View에 요청이 있으면 Controller는 해당 업무를 수행하는 Model을 호출하고

  Model이 업무를 모두 수행하면 다시 결과를 View에 전달하는 역할을 합니다.

 

JSP를 사용하기 위한 설정

1. Spring Starter Project를 생성할 때 기존 5가지 의존성은 그대로 추가한다

- Spring Boot Devtools

- Spring Boot Actuator

- JDBC API

- Oracle Driver

- Spring Web

 

2. Spring Starter Project 생성 후 추가로 2가지 의존성을 직접 pom.xml에 추가해야 한다

1) JSTL (JavaServer Pages Standard Tag Library)

<!-- JSP를 사용하기 위한 의존성 -->
<dependency>
 	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>

 

2) Tomcat Embeded Jasper

<!-- 내장 서버에 JSP 처리 관련 규칙을 알려주는 의존성 -->
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
</dependency>

 

** 의존성 검색

https://mvnrepository.com/

 

** 의존성을 복사하여 pom.xml에 붙여넣기 할 때 version은 반드시 지워야 한다 (자동으로 관리됨)

 

3. Web, XML, Java EE and OSGI Enterprise Development 설치

 

1) Help - Install New Software 선택

 

2) Spring Tool Suite 4 - https://download.springsource.com/release/TOOLS/sts4/update/latest 검색 후

    맨 아래 Web, XML, Java EE and OSGI Enterprise Development 선택 후 finish

3) 설치 후 다음과 같이 JSP 파일을 만들 수 있게 된다

 

Spring boot와 JSP의 연동

1) src - main - webapp - WEB-INF에 views라는 폴더를 생성하고 hello.jsp 파일을 생성한다

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

 

2) src/main/java에 HomeController를 생성한 후 /hello Mapping을 통해 hello.jsp 파일을 리턴하도록 만든다

package com.kh.spring11.controller;

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

@Controller
public class HomeController {

	@RequestMapping("/hello")
	public String hello() {
		return "/WEB-INF/views/home.jsp";
	}
}

 

3) 인터넷 주소창에 다음 주소를 입력하면 다음과 같이 hello.jsp에 입력한 HelloJsp라는 글자를 볼 수 있다

 

view resolver

- controller의 return 경로를 입력할 때 사전에 설정해 둔 prefix(접두사)와 suffix(접미사)를 자동으로 붙여준다

- src/main/resources - application.properties에서 설정할 수 있다

# server
server.port=8888

# actuator
management.endpoints.web.exposure.include=beans,mapping,env

# jdbc
spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe
spring.datasource.username=khacademy
spring.datasource.password=khacademy

# view resolver
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

 

** view resolver를 설정하면 controller에서 return 경로를 다음과 같이 축약형으로 쓸 수 있다

- prefix에서 설정한 /WEB-INF/views/를 home 앞에 붙인다

- suffix에서 설정한 .jsp를 home 뒤에 붙인다

package com.kh.spring11.controller;

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

@Controller
public class HomeController {

	@RequestMapping("/hello")
	public String hello() {
		return "/WEB-INF/views/home.jsp";
		return "home";
	}
}

 

JSP 기초

JSP (Java Server Page)

HTML 페이지 안에 Java 코드 대신 템플릿 코드를 삽입하여 웹서버에서 동적으로 웹 페이지를 생성하여

웹브라우저가 표현할 수 있도록 전달해 주는 기술

 

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>
	
	</body>
</html>

- page language : 페이지에서 사용할 언어 (현재 Java만 사용 가능)

- contentType : 사용자(브라우저)가 받게 될 내용의 형태

   ** text/html은 text라는 대분류 속에 있는 html이라는 의미

   ** text/plain이면 작성한 코드 그대로를 사용자에게 보낸다

   ** audio/mp3이면 사용자에게 mp3 형태를 사용자에게 보낸다

   - charset : 사용자가 받게 될 내용의 인코딩(변환) 형태 (UTF-8)

- pageEncoding : 서버에서 내부적으로 인코딩(변환)이 일어날 때 적용될 인코딩 방식

 

** 주석의 종류

<!-- --> 사용자에게 보이는 주석
<%-- --%> 사용자에게 보이지 않는 주석
<%@ @> 설정용 주석

 

HTML (Hyper Text Markup Language)

- 하이퍼텍스트를 편집하기 위한 언어

  ** 하이퍼텍스트 : 일반 텍스트 문서와는 달리 링크를 통해 서로 연결되어 네트워크처럼 구성된 문서

- 태그(tag)를 기반으로 동작

- 시작 태그와 종료 태그가 있으며 해당 범위 내에 해당 태그의 효과를 부여

<%@ 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>
	
	</body>
</html>

 

큰 틀에서

<html></html> 문서의 범위 지정
<head></head> 화면에 표시하지 않을 정보를 설정할 영역 지정
<body></body> 화면에 표시할 정보를 설정할 영역 지정

 

<head></head> 내에서

<meta> - 웹 페이지의 보이지 않는 정보를 제공
<title></title> - 브라우저 툴바의 제목을 정의
- 즐겨 찾기에 추가 될 때의 페이지 제목 표시
- 검색 엔진의 검색 결과에서 페이지의 제목 표시

 

예외)

<!DOCTYPE> : 사용할 HTML 버전을 명시한다 (<!DOCTYPE html>의 경우 HTML 5를 의미한다)

 

<h#></h#> 태그

- 헤드라인 태그

<h1></h1>

h1
<h2></h2>

h2
<h3></h3>

h3
<h4></h4>

h4
<h5></h5>
h5
<h6></h6>
h6

 

<a></a> 태그

- 다른 페이지로의 연결(하이퍼 링크)을 정의

- href라는 속성으로 경로 설정

<a href = "경로"></a> 태그 범위 내에 해당 경로로 이동하게 하는 하이퍼링크 부여

** 경로 - 절대 경로와 상대 경로

<!-- 절대 경로(absolute path) 방식 -->
<a href = "http://localhost:8888/tag/test01"></a>
<a href = "//localhost:8888/tag/test01"></a>
<a href = "/tag/test01"></a>

<!-- 상대 경로(relative path) 방식 -->
<a href = "test01"></a>

절대 경로(absolute path) 방식 : 어떤 위치에서든 동일한 위치를 지정

- http://호스트명:포트명/경로

- url에서 http:는 반드시 포함하므로 생략 가능

- 서버의 위치와 포트 번호인 //localhost:8888 생략 가능

 

상대 경로(relative path) 방식 : 현재 위치에서부터 시작하는 경로

- 엔드 포인트(마지막 /의 위치)가 같다면 엔드 포인트까지의 경로인 /tag/ 생략 가능

./ 현재 위치
../ 현재 위치 기준 상위 디렉토리 위치

 

<img> 태그

- 이미지 태그

- src라는 속성으로 이미지의 위치 설정

  ** project 외부의 이미지는 불러올 수 없으므로 사전에 src/main/resources - static 폴더에 넣어두어야 한다

- width와 height 속성으로 이미지의 크기 설정

  ** 크기를 숫자로 설정하면 픽셀(px) 단위로 설정된다

  ** 크기를 % 단위로도 설정할 수 있다 - 이 경우 창 크기에 따라 크기가 자동 조정된다

  ** width를 % 단위로 설정할 경우 height는 비율에 맞게 자동으로 조정된다

- alt라는 속성으로 이미지가 없을 때 나올 글자 설정

<%@ 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>

	<!-- 절대 경로 -->
	<img src = "http://localhost:8888/image/cheetah.jpg" width = "1920">
	<img src = "http://localhost:8888/image/cheetah.jpg" width = "20%">
	<img src = "/image/cheetah.jpg" width = "20%">
	
	<!-- 
		상대 경로
		- 현재 위치 : http://localhost:8888/tag/test03
		- 목적 위치 : http://localhost:8888/image/cheetah.jpg
		** 상위 경로로 가기 : ../
	-->
	<img src = "../image/cheetah.jpg" width = "20%">
	
	<!-- alt 속성 -->
	<img alt = "치타 이미지" src = "../image/cheeta1h.jpg" width = "20%">
</body>
</html>

 

<form></form> 태그

- 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의

- action이라는 속성으로 폼을 전송할 위치를 설정

- method라는 속성으로 폼을 전송할 방식을 설정 (post로 한다)

- <input> 태그를 통해 사용자로부터 입력을 받을 수 있는 입력 필드(input field)를 정의

- <button></button> 태그를 통해 입력 값을 전송

 

<input> 태그

- name이라는 속성으로 전송할 데이터의 이름(변수명)을 설정

 

요청 메소드

GET 요청

- 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용
- URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링 (query string) 이라고 부른다.

- GET 요청은 길이 제한이 있다

- GET 요청은 중요한 정보를 다루면 안된다 (모든 파라미터 노출)

 

POST 요청

- 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용

- HTTP 메시지 body 부분에 담아서 전송된다

- POST 요청은 데이터 길이에 제한이 없다
- POST 요청은 브라우저 히스토리에 남지 않는다

 

 

 

'국비교육 > 국비교육' 카테고리의 다른 글

STS (Spring Tool Suite)  (0) 2022.09.04
day29 - 0902  (0) 2022.09.01
day27 - 0831  (0) 2022.08.31
day26 - 0830  (0) 2022.08.30
day25 - 0829  (0) 2022.08.30

'국비교육/국비교육' Related Articles

티스토리툴바