https://start.spring.io/
build.gradle / application.yml
<div th:each="card : ${cardList}" class="card border rounded mt-3">
<div class="p-2 d-flex justify-content-between">
<span class="font-weight-bold" th:text="${card.user.name}"></span>
<a href="#" class="more-btn">
<img src="https://www.iconninja.com/files/860/824/939/more-icon.png" width="30">
</a>
</div>
MVC 패턴으로 view에 타임리프 문법으로 데이터를 뿌리는데 자꾸 아래 런타임 에러가 발생.
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression
‘오타가 있나?’ 생각해서 꼼꼼하게 전부 확인해봤지만 오타는 찾을 수 없었다.
그리고 에러 문구 하단에서 Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field ‘name’ cannot be found on null 문구를 확인하고 디버깅으로 확인했지만 값은 제대로 들어오고 있는 상태.
‘제대로 넘어오고 있는데 대체 왜 null이라고 하는 걸까?’ 약 2시간을 view부터 역추적해서 코드를 확인했다.
그러나 코드에서 별다른 에러는 확인할 수 없었는데…
원인은 DB에 있었다.
과거 테스트 중에 null로 들어간 데이터가 있었던 것.
null로 들어와 not null로 수정 후, 테스트 데이터를 삭제하지 않아 계속해서 런타임 에러가 발생하고 있었다.
]]>그러나 많은 사람들이 @Autowired대신 @RequiredArgsConstructor를 권장하는데 그 이유는 무엇일까?
먼저, 둘의 차이부터 알아보자.
@Autowired를 활용한 DI를 필드 주입이라고 한다.
public class MyService {
@Autowired
private UserRepository userRepository;
}
이 Annotation을 특정 필드에 부여하면 Spring IoC Container 안에 존재하는 해당 Type의 Bean을 찾아 자동 주입해준다.
위 코드를 해석하자면 Spring IoC Container가 관리하고 있는 UserRepository 타입의 Bean이 userRepository 매개변수에 주입되는 것이다.
@RequiredArgsConstructor를 활용한 DI를 생성자 주입이라고 한다.
@RequiredArgsConstructor
public class MyService {
private final UserRepository userRepository;
}
해당 Class의 생성자를 자동으로 만들어주는 lombok Annotation이다.
private final 접근제어자로 선언된 멤버변수를 생성자 파라미터로 넣어준다.
둘 다 똑같이 스프링 컨테이너가 관리하는 빈(bean)을 주입받기 위해 사용된다.
즉, 외부에서 객체를 생성하지 않고 스프링이 알아서 생성해 주입하도록 하는 방식이라는 건 같은데…
어째서 @RequiredArgsConstructor를 권장할까?
public class A {
@Autowired
private B b;
}
public class B {
@Autowired
private A a;
}
프로그램 구현에 필요한 객체를 파악, 역할을 정의하여 만들고 객체들간의 상호작용을 통해 프로그램을 만드는 것
프로그램의 순서와 흐름을 먼저 세우고 필요한 자료구조와 함수를 설계하는 방식
하나의 큰 기능을 위해 작은 기능들로 나누어 처리하는 top-down 방식이며, 여러 함수가 데이터를 공유한다.
유지보수가 어렵고 재사용성이 낮으며, 보안 개념이 약하다.
| 항목 | 객체지향 프로그래밍 (OOP) | 함수형 프로그래밍 (FP) |
|---|---|---|
| 설계 방식 | 객체 중심의 설계 | 함수 중심의 설계 |
| 코드 구조 | 객체들 간의 관계와 메시지 전달 중심 | 함수 조합과 데이터 흐름 중심 |
| 주요 단위 | 객체(클래스 기반) | 함수(값처럼 취급되는 연산 단위) |
| 일급 객체 | 클래스 또는 객체 | 함수 자체가 일급 객체 |
| 상태 변화 | 객체 내부 상태를 바꿀 수 있음 | 상태 변화 지양, 불변성 추구 |
| 입력 → 출력 | 같은 입력이어도 상태에 따라 다른 결과 가능 | 같은 입력이면 항상 같은 출력 (순수 함수) |
장점
단점
추상화 필요한 정보만을 중심으로 구현
캡슐화 객체가 독립적인 역할을 할 수 있도록 데이터와 기능을 묶어 관리한다.
실제 구현되는 부분을 외부에 드러나지 않도록 은닉화가 가능하다.
상속성 다른 클래스의 기능을 물려받아 사용할 수 있다.
기존 코드를 재사용해 확장이 가능하다.
다형성 하나의 클래스나 메서드가 다양한 방식으로 동작이 가능한 것을 말한다.
오버라이딩: 자식 클래스에서 부모 클래스의 기능을 재정의 하는 것 오버로딩: 메서드명은 동일하지만 파라미터 타입, 수를 다르게 하여 재사용하는 것
단일 책임 원칙 (Single responsibility principle) 한 클래스는 하나의 책임만을 가진다.
클래스가 여러 기능을 갖게 될 경우 변경 사유가 많아지며, 변경할 경우 다른 기능에 영향을 끼친다.
개방-폐쇄 원칙 (Open/closed principle) 소프트웨어 개체(클래스, 모듈, 함수 등)는 확장에 대해 열려있어야 하고, 변경에 대해서는 닫혀있어야 한다.
새로운 기능을 추가할 경우, 수정이 아니라 확장할 것
리스코프 치환 원칙 (Liskov substitution principle) 자식 클래스가 부모 클래스를 대체할 수 있어야 한다.
인터페이스 분리 원칙 (Interface segregation principle) 클라이언트가 사용하지 않는 메서드에 의존하지 않아야 한다.
큰덩어리의 인터페이스를 구체적이고 작은 단위로 분리해 꼭 필요한 메서드만 이용할 수 있게 한다.
의존관계 역전 원칙 (Dependency inversion principle) 구체적인 구현이 아니라 추상화에 의존할 것
클래스간 의존성을 낮춰 유지보수를 편하게 하기 위함
| 구분 | 추상 클래스 | 인터페이스 |
|---|---|---|
| 목적 | 공통 기능 제공 (상속) | 규칙(계약) 정의 (구현 강제) |
| 키워드 | abstract class |
interface |
| 상속/구현 | 단일 상속만 가능 | 다중 구현 가능 |
| 메서드 | 추상 + 일반 메서드 둘 다 가능 | 기본적으로 추상 메서드, Java 8 이후 default, static 메서드 허용 |
| 변수 | 일반 변수 선언 가능 | public static final 상수만 선언 가능 |
| 생성자 | 있음 (생성자 호출 가능) | 없음 |
| 용도 | 유사한 객체들의 기본 기능 제공 | 서로 다른 클래스 간 기능 통일 목적 |
Method Area
Heap
Stack
PC Register
Native Method Stack
유효하지 않은 메모리인 가비지(Garbage)가 발생하는데 이를 알아서 정리해주는 것이 가비지 콜렉터이다.
배열을 사용하다 보면 여러가지 비효율적인 문제가 생긴다.
가장 큰 문제점은 크기가 고정적이라는 것이다.
배열의 크기는 생성할 때 결정되며 그 크기를 넘어가게 되면 더이상 데이터를 저장할 수 없다.
또 데이터를 삭제하면 해당 인덱스의 데이터는 비어있어 메모리가 낭비되는 등 여러 문제점들이 발생한다.
그렇기에 자바는 배열의 이러한 문제점을 해결하기 위해, 널리 알려져 있는 자료구조를 바탕으로 객체나 데이터들을 효율적으로 관리(추가, 삭제, 검색, 저장)할 수 있는 자료구조들을 만들어 놓았다. 이러한 자료구조들이 있는 라이브러리를 컬렉션 프레임워크라고 한다.
대표적으로는 List, Set, Map, Stack, Queue 등이 있다.
자바 플랫폼에서 웹, 앱을 개발할 때 사용하는 기술.
코드 안에 HTML 태그가 삽입된다.
유지보수 측면에서 굉장히 비효율적이기 때문에 대부분 사용하지 않는다.
서블릿과 반대로 HTML 내에 자바 코드를 삽입해 개발하는 형식.
서블릿과 마찬가지로 비효율적이다.
지역변수 중괄호 {} 내에서만 작동하는 변수
전역변수 클래스 내에 위치하기 때문에 전체 영역에서 사용이 가능한 변수이며 new로 초기화 시킬 수 있다.
정적변수 static 프로그램 시작과 동시에 메모리에 올라간다.
프로그램 종료 전까지 메모리에 위치한다.
public public이 붙은 변수나 메서드는 같은 프로젝트 안에서 사용 가능하다.
default 접근 제어자가 아무것도 붙지 않은 변수나 메서드는 default 상태로, 같은 패키지 안에서만 사용 가능하다.
protected protected가 붙은 변수나 메서드는 다른 패키지에서는 사용이 불가능하다. 다만, 상속 관계일 때는 다른 클래스에서 사용 가능하다.
private private이 붙은 변수나 메서드는 같은 클래스 내에서만 사용 가능하다.
보안 때문이라고 할 수 있다.
만약에 웹사이트에서 아이디와 비밀번호 같은 중요한 정보를 public 변수에 저장을 한다면 아무데서나 직접적으로 접근하여 그 값을 변경할 수 있기 때문에 노출되기 쉽다.
이런 중요한 변수들은 대부분 private를 붙여준다.
또한, 여러 사람들과 함께 프로그램을 만들다 보면 다른 사람이 내가 만든 중요한 변수나 메서드를 무분별하게 사용하여 값을 변경할 수 있는데, 이를 막기 위해 상황에 맞는 접근 제어자를 사용한다.
기본 자료타입(primitive type)을 객체로 다루기 위해서 사용하는 클래스들을 래퍼 클래스(wrapper class)라고 한다.
자바는 모든 기본타입(primitive type)은 값을 갖는 객체를 생성할 수 있다.
이런 객체를 포장 객체라고도 하는데 그 이유는 기본 타입의 값을 내부에 두고 포장하기 때문이다.
래퍼 클래스로 감싸고 있는 기본 타입 값은 외부에서 변경할 수 없다.
만약 값을 변경하고 싶다면 새로운 포장 객체를 만들어야 한다.
== 연산자와 String 클래스의 equals() 메소드의 가장 큰 차이점은 == 연산자는 비교하고자 하는 두개의 대상의 주소값을 비교하고, String클래스의 equals() 메소드는 비교하고자 하는 두개의 대상의 값 자체를 비교한다.
String == 비교 시 true가 나오는 이유는, String Pool (상수 풀) 때문이다.
자바에서 “hello”처럼 쌍따옴표로 지정된 문자열 리터럴은 JVM이 Heap이 아닌 특별한 영역인 “String Constant Pool”에 저장해, 똑같은 문자열 리터럴이 두 번 나오면 JVM은 같은 주소를 공유하게 한다.
즉, a와 b는 같은 메모리 주소를 참조하게 되기 때문에 true를 반환한다.
참고
]]>HTTP는 인터넷상에서 정보를 주고 받는데 사용되는 프로토콜로 HTTP는 암호화되지 않은 텍스트 데이터를 전송하므로 보안이슈가 발생할 수 있다.
HTTPS의 S는 Secure로 HTTP와 HTTPS의 가장 큰 차이점이다.
SSL(Secure Sockets Layer) 업그레이드 버전인 TLS(Transport Layer Security) 인증서를 이용해 데이터를 암호화해 주고받는다.
브라우저(클라이언트)와 서버(웹사이트) 사이에 전송되는 데이터를 암호화하여 인터넷 연결을 보호하기 위한 표준 기술이다.
SSL이 먼저 개발되었으며 이를 업그레이드 한 것이 TLS다.
현재 SSL은 사용하지 않고 있으며, 편의상 SSL 인증서라고 부르지만 이는 TLS를 의미한다.
HTTPS에서는 대칭키와 공개키 암호화 방식을 모두 사용한다.
대칭키 암호화 방식은 서버와 클라이언트가 암호화와 복호화에 같은 비밀키를 사용하는 방식으로 이는 데이터 전송 속도가 빠르고 간단한 암호화 방식이지만, 비밀키가 노출될 경우 보안성이 크게 떨어지게 된다.
따라서 HTTPS에서는 대칭키 암호화 방식을 사용하여 데이터를 암호화하고, 이 대칭키를 전달하는 과정에서 공개키 암호화 방식을 사용한다.
공개키 암호화 방식은 서버와 클라이언트가 각각 다른 비밀키를 가지고 있는 방식이다.
서버는 공개키를 클라이언트에게 제공하고, 클라이언트는 이 공개키를 이용하여 대칭키를 암호화하여 서버에 전달한다.
서버는 이 암호화된 대칭키를 자신의 개인키로 복호화하여 대칭키를 얻어내고, 이 대칭키를 사용하여 데이터를 암호화한다.
이 과정에서 중간에 도청자가 끼어들더라도, 공개키로 암호화된 대칭키를 해독할 수 없기 때문에 데이터의 기밀성이 보장된다.
또한, 서버 측의 개인키는 서버 외부에서 알 수 없도록 보안적으로 관리되기 때문에 데이터의 무결성과 인증성이 보장된다.
암호화/복호화 작업: HTTPS는 암호화를 사용하여 통신을 보호한다. 암호화 및 복호화 작업은 CPU를 많이 사용하므로, 작업량이 많아질수록 서버의 성능에 영향을 줄 수 있다.
-> HTTPS의 성능 이슈 중에서 가장 대표적인 것은 암호화/복호화 과정에서 발생하는 부하이다. 이러한 부하를 해결하기 위해 하드웨어 가속 기술을 사용할 수 있으며, 하드웨어 가속 기술은 SSL/TLS 암호화/복호화 과정을 CPU 대신 별도의 하드웨어 장치에서 처리함으로써 처리 속도를 향상시킨다.
핸드쉐이크 오버헤드: HTTPS 연결을 설정하는 과정에서 핸드쉐이크라는 절차를 거치게 됩니다. 이 과정에서 전송되는 데이터양이 많기 때문에, 핸드쉐이크 오버헤드가 발생할 수 있습니다.
-> 암호화 알고리즘 최적화: HTTPS에서 사용되는 대표적인 암호화 알고리즘으로는 AES, RSA, SHA 등이 있다. 이러한 알고리즘들은 성능 향상을 위해 최적화될 수 있다. 예를 들어, RSA 알고리즘은 키의 크기에 따라 처리 속도가 크게 달라질 수 있기 때문에 키 크기를 최소화하는 것이 좋다.
캐시 불가능: HTTPS에서는 캐시가 불가능하다. 왜냐하면, 캐시된 데이터가 변조될 가능성이 있기 때문이다. 따라서, 매번 요청할 때마다 서버에서 새로운 데이터를 가져와야 하므로 성능에 영향을 줄 수 있다.
-> 캐시: HTTPS의 경우 매번 인증서를 다운로드해야 하기 때문에 초기 연결 시간이 길어질 수 있다. 이를 해결하기 위해서는 캐시를 이용해야 한다. 캐시를 이용하면 인증서를 다운로드하지 않고 기존에 다운로드한 인증서를 사용함으로써 연결 시간을 단축시킬 수 있다.
-> 세션 재사용: HTTPS는 기본적으로 연결마다 새로운 세션을 생성한다. 이러한 세션 생성 과정은 처리 시간이 오래 걸리므로, HTTPS에서는 기존에 생성된 세션을 재사용하는 방법을 이용해 성능을 개선할 수 있다.
CDN 사용 제약: HTTPS 연결을 설정할 때, 도메인 이름이 반드시 일치해야 한다. CDN을 사용하는 경우 도메인 이름이 변경되므로 HTTPS를 사용하기 어렵다. 이러한 경우에는 CDN에서 HTTPS를 지원하도록 설정해야 한다.
-> CDN(Content Delivery Network): HTTPS에서 가장 큰 성능 이슈 중 하나는 지리적으로 떨어진 클라이언트와 서버 간의 지연 시간이다. 이를 해결하기 위해 CDN(Content Delivery Network)을 이용해야 한다. CDN은 전 세계에 분산된 캐시 서버를 이용하여 클라이언트와 가까운 서버에서 콘텐츠를 제공함으로써 지연 시간을 최소화 시킬 수 있다.
앞의 두 가지는 HTTPS의 성능 이슈를 해결하고 동시에 보안성 문제를 높이지 않는 방법이고, 뒤의 세 가지는 HTTPS에서 적용이 가능하나 보안성 문제와 관련된 취약점이 존재할 수 있어 충분한 보안 검사가 필요하다.
인증서 유효성 검증: HTTPS를 사용하면 서버는 클라이언트에게 인증서를 제공하여 신뢰성을 보장한다. 따라서 서버 측에서는 인증서의 유효성을 검증하여 위조된 인증서를 사용한 공격을 방지해야 한다.
암호화 강도: HTTPS는 암호화된 통신을 제공하여 데이터의 안정성을 보장한다. 그러나 암호화 알고리즘의 강도에 따라 보안 수준이 달라질 수 있다. 서버 측에서는 보안 수준이 높은 암호화 알고리즘을 사용하여 공격에 대한 대비를 해야한다.
취약한 SSL/TLS 버전 사용: 오래된 SSL/TLS 버전은 보안 취약점이 존재하여 공격자가 중간자 공격을 수행할 수 있다. 따라서 서버 측에서는 최신 버전의 SSL/TLS 프로토콜을 사용하여 보안 취약점을 방지해야 한다.
HTTPS 트래픽 감시: HTTPS 통신은 암호화되어 있기 때문에 보안 검사나 감시가 어렵다. 하지만 일부 악성코드는 HTTPS 트래픽을 통해 악성코드를 전파하거나 민감한 정보를 수집하는 등의 공격을 하기 때문에, 서버 측에서는 HTTPS 트래픽을 감시하고 이상한 패턴을 탐지할 수 있는 시스템을 구축해야 한다.
참고
]]>AJAX는 ‘Asynchronous JavaScript And XML’의 약자로, 말 그대로 JavaScript와 XML 형식을 이용한 비동기적 정보 교환 기법이다.
js 코드로 서버에 요청 / 응답을 할 수 있다.
새로고침 시 전체 페이지를 새로 가져오는 것이 아니라, 전체 페이지 중 일부만 가져오는 것이 가능하다.
이미지 하단의 뉴스 더보기 버튼이 여기에 해당하며, 누르면 뉴스 영역만 서버에 요청한다.
과거에는 다른 방법으로 ajax를 사용했으나, jquery 점유율이 높아지며 주로 jquery를 이용해 실행한다.
그럼 회원가입 시 아이디, 이메일 등의 간단한 중복검사는 어떻게 하는지 코드를 통해 알아보자.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="utf-8">
<title>bookmark</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div id="wrap" class="container">
<h1>add bookmark</h1>
<div class="form-group">
<label>name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="form-group">
<label>url</label>
<div class="d-flex">
<input type="text" id="url" class="form-control" placeholder="http:// or https://">
<input type="button" id="checkBtn" class="btn btn-primary ml-3" value="중복확인">
</div>
<small id="statusArea"></small>
</div>
<input type="button" id="addBtn" class="btn btn-success w-100" value="추가">
</div>
<script>
$(function () {
$("#checkBtn").on("click", function () {
$("#statusArea").empty();
let url = $("#url").val().trim();
if (!url) {
$("#statusArea").append('<span class="text-danger">url을 입력하세요.</span>')
}
$.ajax({
url:"/bookmark/duplicate"
, data:{"url":url}
,success:function(data) {
if (data.is_duplicate) {
$("#statusArea").append('<span class="text-danger">중복된 url입니다.</span>')
}
}
, error:function(error) {
}
});
});
$("#addBtn").on("click", function () {
let name = $("#name").val().trim();
let url = $("#url").val().trim();
if (!name) {
alert("이름을 입력하세요.")
return;
}
if (!url) {
alert("주소를 입력하세요.")
return;
}
if (!(url.startsWith("http://") && url.startsWith("https://"))) {
alert("양식에 맞춰서 입력하세요.")
return;
}
console.log(name);
console.log(url);
if ($("#statusArea").children().length<1) {
$.ajax({
type:"post"
,url:"/bookmark/add"
,data:{"name":name, "url":url}
,success:function(data) {
if (data == "success") {
location.href="/bookmark/list"
}
}
,error:function(error,xhr,status) {
alert("입력에 실패했습니다.")
}
});
}
});
});
</script>
</body>
</html>
비어있거나 중복확인 버튼을 눌러 중복일 경우 출력되는 메시지가 없을 경우 저장하도록 if ($("#statusArea").children().length<1) 조건문을 추가하였다.
그러나 문제는 중복확인을 한 번도 하지 않을 경우(이 또한 문구가 뜨지 않으므로)에도 저장이 된다는 것이었다.
(처음에는 $.ajax 안에 코드를 넣고 ‘이게 왜 되는 거지?’ 했던…. success 내부에 들어가는 것과 관계없이 ajax로 들어가는 순간 저장. success는 그냥 성공 시 출력을 담당한다 라고 생각하면 될듯함)
$(function () {
let isChecked = false;
$("#checkBtn").on("click", function () {
$("#statusArea").empty();
let url = $("#url").val().trim();
if (!url) {
$("#statusArea").append('<span class="text-danger">url을 입력하세요.</span>')
}
$.ajax({
url:"/lesson06/bookmark-duplicate"
, data:{"url":url}
, success:function(data) {
if (data.is_duplicate) {
$("#statusArea").append('<span class="text-danger">중복된 url입니다.</span>')
} else {
$("#statusArea").append('<span class="text-success">사용가능한 url입니다.</span>')
isChecked = true;
}
}
, error:function(error) {
alert("false")
}
});
});
$("#addBtn").on("click", function () {
let name = $("#name").val().trim();
let url = $("#url").val().trim();
if (!name) {
alert("이름을 입력하세요.")
return;
}
if (!url) {
alert("주소를 입력하세요.")
return;
}
if (!url.startsWith("http://") && !url.startsWith("https://")) {
alert("양식에 맞춰서 입력하세요.")
return;
}
console.log(name);
console.log(url);
if (isChecked) {
$.ajax({
type:"post"
,url:"/lesson06/bookmark-add"
,data:{"name":name, "url":url}
,success:function(data) {
if (data == "success") {
location.href="/lesson06/bookmark-list"
}
}
,error:function(error,xhr,status) {
alert("입력에 실패했습니다.")
}
})
} else {
alert("중복확인이 필요합니다.")
return;
}
});
});
그래서 isChecked라는 flag 변수를 사용했다. (현업에서도 이렇게 사용하는지는 모름….)
ajax를 사용하기 위해서는 필수로 알아야 할 설정값들이 있다.
| 구분 | 정의 | 값 |
|---|---|---|
| url | ajax 요청을 보낼 URL | - |
| type | HTTP 요청 방식 (기본값:get`) | get, post, delete, put |
| dataType | 서버로부터 응답받을 데이터 타입. 생략 시 jQuery가 MIME 타입을 보고 자동 결정 | xml, html, json, script, jsonp, text |
| contentType | 전송 시 데이터의 콘텐츠 타입 지정 (기본값: application/x-www-form-urlencoded; charset=UTF-8) |
application/json 등 |
| timeout | 요청 제한 시간 (ms 단위). 초과 시 실패 처리됨 | 숫자 (ex: 3000) |
| data | 서버로 전송할 데이터. Object, String, Array 등 사용 가능. Object일 경우 key-value 구조를 따르며, 값이 배열이면 자동 직렬화됨 |
{name: “홍길동”, age: 20} 등 |
| beforeSend | 요청이 전송되기 전에 실행되는 콜백 함수. false를 반환하거나 jqXHR.abort()를 호출하면 요청이 취소됨 |
function(xhr) { … } |
| success | 통신이 성공했을 때 실행되는 콜백 함수 | function(response) { … } |
| error | 통신이 실패했을 때 실행되는 콜백 함수 (단, jsonp 또는 cross-domain 요청은 해당 안 될 수 있음) |
function(xhr, status, error) { … } |
| complete | success 또는 error 후 항상 호출되는 콜백 함수 |
function(xhr, status) { … } |
@RequestMapping("/bookmark")
@Controller
public class Controller {
@Autowired
private BookmarkBO bookmarkBO;
@GetMapping("/view")
public String view() {
return "addBookmark";
}
@PostMapping("/add")
@ResponseBody
public String add(
@RequestParam("name") String name,
@RequestParam("url") String url) {
bookmarkBO.setBookmark(name,url);
return "success";
}
@GetMapping("/list")
public String list(Model model) {
List<Bookmark> bookmark = bookmarkBO.getBookmark();
model.addAttribute("bookmark", bookmark);
return "bookmarkList";
}
@ResponseBody
@GetMapping("/duplicate")
public Map<String, Object> isDuplicate(
@RequestParam("url") String url) {
boolean isDuplicate = bookmarkBO.isDuplicate(url);
Map<String, Object> result = new HashMap<>();
result.put("is_duplicate", isDuplicate);
return result;
}
}
redirect, foward를 주로 사용한다.
그 이유는 무엇일까?
일단 redirect를 하는 이유를 말하기 전에 foward와의 차이를 알아보자.
사이트에 회원가입이나, 결제, 게시판에 글을 쓸 경우 완료 페이지, 글목록으로 가는 경우가 이에 해당한다.
리다이렉트는 주로 안전 / 안정성을 위해 사용한다고 생각하는데, 요청이 정상적으로 이루어졌음에도 다시 요청하는 것을 방지한다.
만약 글쓰기나 회원가입 단계에서 실패할 경우 귀찮게 재입력하지 않도록 포워드를 사용할 수도 있는데 결제 실패 시에 포워드가 아닌 리다이렉트를 사용하는 이유는 무엇일까?
포워드는 동일한 요청을 내부에서 다시 처리하기 때문에, 클라이언트가 새로고침을 사용할 경우 에러 위험이 있으며, 내부에서 request 객체를 그대로 넘기므로 이전에 보낸 파라미터가 노출될 수 있기 때문이다.
또한, 실패 원인을 정확하게 클라이언트에게 보여줄 수 있다.
다만 단순 글쓰기의 경우, 민감한 정보가 아니기에 포워드를 사용할 수도 있다.
실습을 통해 조금 더 친해져 보자.
@RequestMapping("/weather-history")
@Controller
public class WeatherHistoryController {
@Autowired
private weatherHistoryBO weatherHistoryBO;
@GetMapping("/add-view")
public String addView() {
return "lesson05/addWeather";
}
@PostMapping("/add")
public String addWeather(
// @DateTimeFormat(pattern="yyyy-MM-dd") 'date' type 사용 시 convert해줘야 insert 가능
// LocalDate 대신 String으로 받아도 자동변환되어 DB에 저장됨
// DTO로 받을 경우 DTO class에 annotation!
@RequestParam("date") LocalDate date,
@RequestParam("weather") String weather,
@RequestParam("microDust") String microDust,
@RequestParam("temperatures") double temperatures,
@RequestParam("precipitation") double precipitation,
@RequestParam("windSpeed") double windSpeed,
Model model) {
weatherHistoryBO.setWeather(date, weather, microDust, temperatures, precipitation, windSpeed);
model.addAttribute("weather", weather);
// redirect 방법 두 가지
// parameter -> HttpServletResponse response
// method -> response.sendRedirect("절대경로")
return "redirect:/weather-history/list";
}
@GetMapping("/list")
public String weatherList(Model model) {
List<Weather> weatherHistoryList = weatherHistoryBO.getWeatherHistoryList();
model.addAttribute("weatherHistoryList", weatherHistoryList);
return "lesson05/weatherList";
}
}
@Service
public class weatherHistoryBO {
@Autowired
private weatherHistoryMapper weatherHistoryMapper;
public void setWeather(
LocalDate date, String weather, String microDust, double temperatures, double precipitation, double windSpeed) {
weatherHistoryMapper.addWeather(date, weather, microDust, temperatures, precipitation, windSpeed);
}
public List<Weather> getWeatherHistoryList() {
return weatherHistoryMapper.selectWeatherHistoryList();
}
}
@Mapper
public interface weatherHistoryMapper {
public void addWeather(
@Param("date") LocalDate date,
@Param("weather") String weather,
@Param("microDust") String microDust,
@Param("temperatures") double temperatures,
@Param("precipitation") double precipitation,
@Param("windSpeed") double windSpeed);
public List<Weather> selectWeatherHistoryList();
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.quiz.lesson05.weatherhistory.weatherHistoryMapper">
<insert id="addWeather" parameterType="com.quiz.lesson05.weatherhistory.Weather">
INSERT INTO `weather_history`
(
`date`
,`weather`
,`temperatures`
,`precipitation`
,`microDust`
,`windSpeed`
,`createdAt`
,`updatedAt`
)
VALUES
(
#{date}
,#{weather}
,#{temperatures}
,#{precipitation}
,#{microDust}
,#{windSpeed}
,NOW()
,NOW()
)
</insert>
<select id="selectWeatherHistoryList" resultType="com.quiz.lesson05.weatherhistory.Weather">
SELECT
`id`
,`date`
,`weather`
,`temperatures`
,`precipitation`
,`microDust`
,`windSpeed`
,`createdAt`
,`updatedAt`
FROM
`weather_history`
</select>
</mapper>
public class Weather {
private int id;
private LocalDate date;
private String weather;
private double temperatures;
private double precipitation;
private String microDust;
private double windSpeed;
private LocalDateTime createdAT;
private LocalDateTime updatedAT;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public LocalDate getDate() {
return date;
}
public void setDate(LocalDate date) {
this.date = date;
}
public String getWeather() {
return weather;
}
public void setWeather(String weather) {
this.weather = weather;
}
public double getTemperatures() {
return temperatures;
}
public void setTemperatures(double temperatures) {
this.temperatures = temperatures;
}
public double getPrecipitation() {
return precipitation;
}
public void setPrecipitation(double precipitation) {
this.precipitation = precipitation;
}
public String getMicroDust() {
return microDust;
}
public void setMicroDust(String microDust) {
this.microDust = microDust;
}
public Double getWindSpeed() {
return windSpeed;
}
public void setWindSpeed(Double windSpeed) {
this.windSpeed = windSpeed;
}
public LocalDateTime getCreatedAT() {
return createdAT;
}
public void setCreatedAT(LocalDateTime createdAT) {
this.createdAT = createdAT;
}
public LocalDateTime getUpdatedAT() {
return updatedAT;
}
public void setUpdatedAT(LocalDateTime updatedAT) {
this.updatedAT = updatedAT;
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- datepicker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/weatherHistoryStyle.css}">
<!-- 구글링한 datepicker 그대로 적용 -->
<script>
$(function() {
//input을 datepicker로 선언
$("#date").datepicker({
dateFormat: 'yy-mm-dd' //달력 날짜 형태
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
,changeYear: true //option값 년 선택 가능
,changeMonth: true //option값 월 선택 가능
,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
,buttonImageOnly: true //버튼 이미지만 깔끔하게 보이게함
,buttonText: "선택" //버튼 호버 텍스트
,yearSuffix: "년" //달력의 년도 부분 뒤 텍스트
,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip
,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 텍스트
,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
/* ,minDate: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후) */
});
//초기값을 오늘 날짜로 설정해줘야 합니다.
$('#date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
});
</script>
</head>
<body>
<div id="wrap">
<div class="contents d-flex">
<nav class="col-2">
<div class="logo d-flex justify-content-center mt-3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Emblem_of_the_Government_of_the_Republic_of_Korea.svg/800px-Emblem_of_the_Government_of_the_Republic_of_Korea.svg.png" width="25">
<span class="text-white font-weight-bold ml-2">기상청</span>
</div>
<!-- flex-column: 세로 메뉴 -->
<ul class="nav flex-column mt-4">
<li class="nav-item">
<a href="/weather-history/list" class="nav-link menu-font">날씨</a>
</li>
<li class="nav-item">
<a href="/weather-history/add" class="nav-link menu-font">날씨입력</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-font">테마날씨</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-font">관측 기후</a>
</li>
</ul>
</nav>
<section class="col-10 mt-3 ml-5">
<h3>날씨 추가</h3>
<form method="post" action="/weather-history/add">
<div class="d-flex justify-content-between mt-5">
<div class="d-flex align-items-center">
<div class="input-label">날짜</div>
<input type="text" class="form-control" id="date" name="date">
</div>
<div class="d-flex align-items-center">
<div class="input-label">날씨</div>
<select class="form-control" name="weather">
<option>맑음</option>
<option>구름조금</option>
<option>흐림</option>
<option>비</option>
</select>
</div>
<div class="d-flex align-items-center">
<div class="input-label">미세먼지</div>
<select class="form-control" name="microDust">
<option>좋음</option>
<option>보통</option>
<option>나쁨</option>
<option>최악</option>
</select>
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<div class="d-flex align-items-center">
<div class="input-label">기온</div>
<div class="input-group">
<input type="text" class="form-control" name="temperatures">
<div class="input-group-append">
<span class="input-group-text">℃</span>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="input-label">강수량</div>
<div class="input-group">
<input type="text" class="form-control" name="precipitation">
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
</div>
<div class="d-flex align-items-center">
<div class="input-label">풍속</div>
<div class="input-group">
<input type="text" class="form-control" name="windSpeed">
<div class="input-group-append">
<span class="input-group-text">km/h</span>
</div>
</div>
</div>
</div>
<div class="text-right mt-4 mb-5">
<input type="submit" class="btn btn-success" value="저장">
</div>
</form>
</section>
</div>
<footer class="d-flex align-items-center">
<div>
<img class="foot-logo-image" src="https://www.weather.go.kr/w/resources/image/foot_logo.png" width="120">
</div>
<div>
<small class="text-secondary">
(07062) 서울시 동작구 여의대방로16길 61 <br>
Copyright@2025 KMA. All Rights RESERVED.
</small>
</div>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/weather-history/style.css}">
</head>
<body>
<div id="wrap">
<div class="contents d-flex">
<!-- 메뉴 영역 -->
<nav class="col-2">
<!-- 상단 로고 -->
<div class="logo d-flex justify-content-center mt-3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Emblem_of_the_Government_of_the_Republic_of_Korea.svg/800px-Emblem_of_the_Government_of_the_Republic_of_Korea.svg.png" width="25">
<span class="text-white font-weight-bold ml-2">기상청</span>
</div>
<!-- 메뉴 -->
<!-- flex-column: 세로 메뉴 -->
<ul class="nav flex-column mt-4">
<li class="nav-item">
<a href="/weather-history/weather-list-view" class="nav-link menu-font">날씨</a>
</li>
<li class="nav-item">
<a href="/weather-history/add-weather-view" class="nav-link menu-font">날씨입력</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-font">테마날씨</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link menu-font">관측 기후</a>
</li>
</ul>
</nav>
<!-- 날씨 히스토리 -->
<section class="weather-history col-10 mt-3 ml-5">
<h3>과거 날씨</h3>
<table class="table text-center">
<thead>
<tr>
<th>날짜</th>
<th>날씨</th>
<th>기온</th>
<th>강수량</th>
<th>미세먼지</th>
<th>풍속</th>
</tr>
</thead>
<tbody>
<tr th:each="history : ${weatherHistoryList}">
<td th:text="${#temporals.format(history.date, 'yyyy년 M월 d일')}"></td>
<td th:switch="${history.weather}">
<img th:case="'맑음'" src="/img/sunny.jpg" alt="맑음">
<img th:case="'비'" src="/img/rainy.jpg" alt="비">
<img th:case="'구름조금'" src="/img/partlyCloudy.jpg" alt="구름조금">
<img th:case="'흐림'" src="/img/cloudy.jpg" alt="흐림">
<span th:case="*" th:text="${history.weather}"></span>
</td>
<td th:text="|${history.temperatures}°C|"></td>
<td th:text="|${history.precipitation}mm|"></td>
<td th:text="${history.microDust}"></td>
<td th:text="${history.windSpeed} + 'km/h'"></td>
</tr>
</tbody>
</table>
</section>
</div>
<footer class="d-flex align-items-center">
<div class="footer-logo ml-4">
<img class="foot-logo-image" src="https://www.weather.go.kr/w/resources/image/foot_logo.png" width="120">
</div>
<div class="copyright ml-4">
<small class="text-secondary">
(07062) 서울시 동작구 여의대방로16길 61 <br>
Copyright@20XX KMA. All Rights RESERVED.
</small>
</div>
</footer>
</div>
</body>
</html>
Model-View-Controller
웹개발에서 구조를 역할별로 분리해서 보다 효율적으로 개발, 유지보수를 하기 위해 사용한다.
처리 흐름으로 보면 View-Controller-Model인데, MVC가 아니라 VCM이 맞는 거 아닐까 싶었다.
그런데 왜 MVC라 부를까?
결론부터 말하자면 MVC는 처리 흐름이 아니라 관계 구조의 명칭이다.
controller가 중심이 되어 model과 view를 관리하는 구조다.
즉, model과 view를 controller가 연결하고 제어한다는 의미에서 MVC라 부른다고 한다.
spring MVC에서 model은 데이터와 비지니스 로직을 담당하는 핵심 요소로 실무에서는 DTO, service, repository 등으로 세분화 시켜 사용한다.
이렇게 model을 세분화 하는 이유는, 책임을 분산-강화 시키고 협업과 유지보수를 원활하게 하기 위함이다.
엔터티는 DB 스키마와 1:1 매칭되므로 API 응답에 엔터티를 직접 리턴하면 보안 문제가 발생할 수 있다.
즉 DTO를 사용하는 이유는 필요한 데이터만 포함하고 유연한 유지보수를 위해서다.
public class seller {
private String nickname;
private String profileImgUrl;
private Double temperature;
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getProfileImgUrl() {
return profileImgUrl;
}
public void setProfileImgUrl(String profileImgUrl) {
this.profileImgUrl = profileImgUrl;
}
public Double getTemperature() {
return temperature;
}
public void setTemperature(Double temperature) {
this.temperature = temperature;
}
}
controller에서 직접 repository를 호출하지 않고 service를 사용하는 이유가 있는데, 만약 controller에서 repository를 직접 호출한다면?
@Service
public class sellerBO {
@Autowired
private SellerMapper sellerMapper;
public void insertSeller(String nickname, String profileImgUrl, Double temperature) {
sellerMapper.insertSeller(nickname, profileImgUrl, temperature);
}
public seller sellerInfoView(Integer id) {
if (id == null) {
return sellerMapper.sellerInfoView();
} else {
return sellerMapper.sellerInfoSearch(id);
}
}
}
데이터 접근을 추상화하여 유지보수성을 높이기 위함이 목적이다.
서비스가 레퍼지토리를 통해 데이터를 가져오면, DB가 바뀌어도 서비스 로직을 그대로 유지할 수 있다.
즉 JPA, MyBatis 등 다양한 방식으로 쉽게 변경이 가능하다.
@Mapper
public interface SellerMapper {
public void insertSeller(
@Param("nickname") String nickname,
@Param("profileImgUrl") String profileImgUrl,
@Param("temperature") Double temperature);
public seller sellerInfoView();
public seller sellerInfoSearch(Integer id);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.quiz.seller.mapper.SellerMapper">
<insert id="insertSeller" parameterType="map">
INSERT INTO `seller`
(
`nickname`
,`profileImgUrl`
,`temperature`
,`createdAt`
,`updatedAt`
)
VALUES
(
#{nickname}
,#{profileImgUrl}
,#{temperature}
,NOW()
,NOW()
)
</insert>
<select id="sellerInfoView" resultType="com.quiz.seller.domain.seller">
SELECT
`nickname`
,`profileImgUrl`
,`temperature`
FROM
`seller`
ORDER BY
`id`
DESC LIMIT
1
</select>
<select id="sellerInfoSearch" resultType="com.quiz.seller.domain.seller">
SELECT
`nickname`
,`profileImgUrl`
,`temperature`
FROM
`seller`
WHERE
`id` = #{id}
</select>
</mapper>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="UTF-8">
<title>판매자 추가</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>판매자 추가</h1>
<form method="post" action="/seller/afterAdd">
<div class="form-group">
<label for="nickname">닉네임</label>
<input type="text" id="nickname" name="nickname" class="form-control col-4">
</div>
<div class="form-group">
<label for="profileImgUrl">프로필 사진</label>
<input type="text" id="profileImgUrl" name="profileImgUrl" class="form-control">
</div>
<div class="form-group">
<label for="temperature">매너 온도</label>
<input type="text" id="temperature" name="temperature" class="form-control col-4">
</div>
<input type="submit" value="추가" class="btn btn-primary">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="UTF-8">
<title>판매자 정보</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>판매자 정보</h1>
<img th:src="${seller.profileImgUrl}" width="200">
<div class="h1" th:text="${seller.nickname}"></div>
<div class="text-warning h3 font-weight-bold" th:text="${seller.temperature}"></div>
</div>
</body>
</html>
@RequestMapping("/seller")
@Controller
public class SellerController {
@Autowired
private sellerBO sellerBO;
@RequestMapping("/add")
public String addSellerView() {
return "seller/addSeller";
}
@PostMapping("/afterAdd")
public String addSeller(
@RequestParam("nickname") String nickname,
@RequestParam("profileImgUrl") String profileImgUrl,
@RequestParam("temperature") Double temperature) {
sellerBO.insertSeller(nickname, profileImgUrl, temperature);
return "seller/afterAddSeller";
}
@GetMapping("/info")
public String sellerInfoView(
@RequestParam(value = "id", required = false) Integer id,
Model model) {
seller seller = sellerBO.sellerInfoView(id);
model.addAttribute("seller", seller);
return "seller/sellerInfo";
}
}
참고
]]>package baekjoon;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.Scanner;
import java.util.StringTokenizer;
public class Step03 {
private static String String;
public static void main(String[] args) throws NumberFormatException, IOException {
Scanner scan = new Scanner(System.in);
StringTokenizer st;
BufferedReader br = new BufferedReader (new InputStreamReader(System.in));
BufferedWriter bw = new BufferedWriter (new OutputStreamWriter(System.out));
// https://www.acmicpc.net/problem/2739
System.out.println("구구단");
int a = scan.nextInt();
for (int i = 1; i < 10; i++) {
System.out.println(a + " X " + i + " = " + (a * i));
}
// https://www.acmicpc.net/problem/8393
System.out.println("입력 값까지의 합 구하기");
int b = scan.nextInt();
int sum = 0;
for (int i = 1; i <= b; i++) {
sum += i;
}
System.out.println(sum);
// https://www.acmicpc.net/problem/25304
int totalPrice = Integer.parseInt(br.readLine());
int totalCount = Integer.parseInt(br.readLine());
int price, count, sum = 0;
for (int i=0; i<totalCount; i++){
st = new StringTokenizer(br.readLine());
price = Integer.parseInt();
count = Integer.parseInt(st.nextToken());
sum += (price*count);
}
if (sum == totalPrice){
System.out.println("Yes");
} else {
System.out.println("No");
}
// https://www.acmicpc.net/problem/15552
int t = Integer.parseInt(br.readLine());
for (int i = 0; i < t; i++) {
st = new StringTokenizer(br.readLine());
int a = Integer.parseInt(st.nextToken());
int b = Integer.parseInt(st.nextToken());
bw.write((a+b) + "\n");
}
bw.flush();
br.close();
bw.close();
// https://www.acmicpc.net/problem/25314
System.out.println("byte");
int size = scan.nextInt();
if (size % 4 == 0) {
for (int i = 0; i < size / 4; i++) {
System.out.print("long ");
}
System.out.print("int");
} else {
System.out.println("false");
}
// https://www.acmicpc.net/problem/11021
int t = Integer.parseInt(br.readLine());
for (int i = 1; i <= t; i++) {
st = new StringTokenizer(br.readLine());
int a = Integer.parseInt(st.nextToken());
int b = Integer.parseInt(st.nextToken());
bw.write("Case #" + i + ": " + (a+b) + "\n");
}
bw.flush();
br.close();
bw.close();
// https://www.acmicpc.net/problem/11022
int t = Integer.parseInt(br.readLine());
for (int i = 1; i <= t; i++) {
st = new StringTokenizer(br.readLine());
int a = Integer.parseInt(st.nextToken());
int b = Integer.parseInt(st.nextToken());
bw.write("Case #" + i + ": " + a + " + " + b + " = " + (a + b) + "\n");
}
bw.flush();
br.close();
bw.close();
// https://www.acmicpc.net/problem/2438
int t = scan.nextInt();
for (int i = 1; i <= t; i++) {
for (int j = 0; j < i; j++) {
System.out.print("*");
}
System.out.println();
}
// https://www.acmicpc.net/problem/2439
int t = scan.nextInt();
for (int i = 1; i <= t; i++) {
for (int j = t - 1; j >= i; j--) {
System.out.print(" ");
}
for (int j = 0; j < i; j++) {
System.out.print("*");
}
System.out.println();
}
// https://www.acmicpc.net/problem/10952
for (int i = 0; i < 1;) {
st = new StringTokenizer(br.readLine());
int a = Integer.parseInt(st.nextToken());
int b = Integer.parseInt(st.nextToken());
bw.write((a+b) + "\n");
if (a == 0 && b == 0) {
break;
}
i--;
}
bw.flush();
br.close();
bw.close();
// https://www.acmicpc.net/problem/10951
while (scan.hasNext()) {
int a = scan.nextInt();
int b = scan.nextInt();
System.out.print(a+b);
}
// EOF - mac: control + d
}
}
Spring에서 지원하는 html 데이터 렌더링 라이브러리다.
컨트롤러에서 전달된 데이터를 사용하여 동적으로 html 페이지를 구성한다.
타임리프를 사용하기 위해서는 컨트롤러 먼저 구성해야 한다.
// 컨트롤러 구성 예시
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@RequestMapping("/thymeleaf")
@Controller
public class Lesson05Controller {
@GetMapping("/ex01")
public String ex01() {
return "thymeleaf/ex01";
}
}
th:with=”a=1”
<!-- <th:block>이 안에 변수를 선언하면 div와 달리 출력 시 태그가 보이지 않는다.</th:block> -->
<h4 th:text="'<b>bold</b>'"></h4> <!-- 출력: <b>bold</b> -->
<h4 th:utext="'<b>bold</b>'"></h4> <!-- 출력: bold -->
<div th:with="number=100"> <!-- 100을 number에 담는다. -->
<h4 th:text="${number}"></h4> <!-- 변수값 출력 (정석) -->
<h4>[[${number}]]</h4> <!-- 간소화 -->
</div>
주의해야할 점은 변수 태그 스코프 내에 있어야 변수 사용이 가능하다.
<div th:with="number1=100, number2=30">
<h4 th:text="'sum:' + ${number1 + number2}"></h4> <!-- 텍스트와 함께 사용 시 텍스트를 ''로 묶는다. -->
<h4>sum: [[${number1 + number2}]]</h4> <!-- ''로 묶지 않고 텍스트 출력하는 방법 -->
<h4 th:text="|sum: ${number1 + number2}|"></h4>
</div>
th:if / th:unless
th:switch / th:case
타임리프에는 else if, else와 같은 개념이 없다.
타임리프에서 if / unless는 태그를 나타낼지, 나타내지 않을지의 조건, switch / case는 일치되는 태그를 수행한다.
<!-- if, unless -->
<div th:with="age=30">
<h4 th:if="${age >= 20}">성인</h4>
<h4 th:unless="${age >= 20}">미성년자</h4>
<!--
unless는 거짓일 때 출력된다.
age >= 20의 조건은 '참이므로 성인이 출력'되며 미성년자는 출력되지 않는다.
반대로 조건이 age <= 20일 경우 '거짓이므로 미성년자가 출력'된다.
-->
</div>
<!-- switch, case -->
<div th:with="season=summer">
<div th:switch="${season}">
<h4 th:case="spring">spring</h4>
<h4 th:case="summer">summer</h4>
<h4 th:case="autumn">autumn</h4>
<h4 th:case="*">winter</h4>
</div>
</div>
<!--
출력: summer
어디에도 해당되지 않을 경우, 마지막 default 값인 winter 출력.
-->
th:each=”a : ${b}”
b를 a에 담아 반복한다. (중첩 반복문과 동일)
<!-- 숫자 반복 -->
<div th:each="value:${#numbers.sequence(0, 5)}">
[[${value}]]
</div>
<!--
출력
0
1
2
3
4
5
-->
<!-- status 추가 (두 번째 변수 명에 상태 저장) -->
<div th:each="value, status:${#numbers.sequence(16, 20)}">
<span th:text="${value}"></span>
status: <span th:text="${status}"></span>
count: <span th:text="${status.count}"></span>
index: <span th:text="${status.index}"></span>
first: <span th:text="${status.first}"></span>
last: <span th:text="${status.last}"></span>
</div>
status
위 메서드 외에도 IterationStatusVar에 들어가면 다양한 메서드들을 확인할 수 있다.
특정 값을 반복하려면 controller에 먼저 Model 객체가 있어야 한다.
이를 응용해 DB 데이터를 반복해 출력할 수 있다.
// controller
@GetMapping("/ex02")
public String ex02(Model model) {
// 1
List<String> fruits = new ArrayList<>(Arrays.asList("apple", "melon", "peach", "grape", "mango"));
model.addAttribute("fruits", fruits);
// 2
List<Map<String, Object>> users = new ArrayList<>();
Map<String, Object> user = new HashMap<>();
user.put("name", "tom");
user.put("age", 30);
user.put("hobby", "run");
users.add(user);
user = new HashMap<>();
user.put("name", "brown");
user.put("age", 20);
user.put("hobby", "eat");
users.add(user);
model.addAttribute("users", users);
return "lesson05/ex02";
}
<!-- List 반복문 - String -->
<div th:each="fruit, status:${fruits}">
<span th:text="${fruit}"></span>
count: <span th:text="${status.count}"></span>
index: <span th:text="${status.index}"></span>
</div>
<hr>
<!--
출력
apple count: 1 index: 0
melon count: 2 index: 1
peach count: 3 index: 2
grape count: 4 index: 3
mango count: 5 index: 4
-->
<!-- Map -->
<table class="table">
<thead>
<tr>
<th>no</th>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr th:each="user, status:${users}">
<td th:text="${status.count}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.hobby}"></td>
</tr>
</tbody>
</table>