Todo
- 네비게이션 바
- 폼 만들기
- 웹(html, css, javascript)
- 제약 검증 기능 사용하기
닉네임(3-20자, 필수 입력)
이메일(이메일 형식, 필수 입력)
패스워드(5-80자, 필수 입력)
Thymeleaf
<html lang="en" xmlns:th="http://www.thymeleaf.org">- 타임리프 사용하기 위해서는 다음과 같은 설정 필요
<a class="navbar-brand" href="/" th:href="@{/}">- th로 시작하는 attribute 사용하자.
- href 값을 타임리프로 랜더링 시 "@{/} 이 값으로 변환해준다. @ 값은과 / 은 서블릿 컨텍스트에 따라 달라진다. 서블릿 컨텍스트를 다른 path로 지정할 경우를 대비해서 @ 를 붙이자. 모든 경로를 표시하는 값에 대해서는 @를 붙이기.
- 타임리프로 랜더링 하지 않을 경우 href="/" 을 사용한다.
ServletContext 란?
web의 프로그램적인 의미는 디렉토리 개념으로 서블릿 컨테이너 내에서 애플리케이션 단위로 서블릿을 관리하게 되며 하나의 애플리케이션에서 즉, web application내에 있는 모든 서블릿들을 관리하며 정보공유할 수 있게 도와 주는 역할을 담당하는 놈이 바로 ServletContext 이다.
compact middle packages
project 경로 보는 compact middle packages가 기본적으로 설정되어있는데 이럴 경우 비어있는 것은 보여주지 않는다. 그래서 option을 꺼서 확인해보자. 서버쪽에서 렌더링 하지 않아도 프론트엔지니어가 서버를 안띄워도 개발을 할 수 있는 장점이 있다! 둘다 동작하도록! 😀😀
<form class="needs-validation col-sm-6" action="#"
th:action="@{/signup}" th:object="${signUpForm}" method="post" novalidate>
<div class="form-group">
<label for="nickname">닉네임</label>
<input id="nickname" type="text" th:field="*{nickname}" class="form-control"
placeholder="yuri lee" aria-describedby="nicknameHelp" required minlength="3" maxlength="20">
<small id="nicknameHelp" class="form-text text-muted">
공백없이 문자와 숫자로만 3자 이상 20자 이내로 입력하세요. 가입후에 변경할 수 있습니다.
</small>
<small class="invalid-feedback">닉네임을 입력하세요.</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('nickname')}" th:errors="*{nickname}">Nickname Error</small>
</div>th:object : 타임리프가 제공하는 스프링을 위한 기능이다. th object에다가 어떤 객체를 제공하면 이 객체를 form tag를 채우는 객체로 사용한다. 그리고 이 form 안에서 객체가 들고 있는 property들을 별(*)을 참조해서 사용할 수 있다. signUpForm 라는 인스턴스 안에 닉네임이라는 property를 input의 필드로 사용하는 것이다. 그 말은 input의 value를 property 값으로 사용한다. 등 ..
- needs-validation 을 사용하면 html 로 검사를 할 수 있다.
<script type="application/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) { //이벤트가 발생했을 때
if (form.checkValidity() === false) { //유효하지 않으면 submit이 안되도록!
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())
</script>input tag 안에 있는 required 를 반드시 필수로 값을 제공해야 한다. type 이 email이면 email type으로 검증시켜준다. 이에 해당하지 않으면 invalid-feedback에 해당하는 text를 보여준다. 처음에는 안보여주다가 form에 error가 발생하면 보여준다.
SignUpForm.java 만들고, 모델에다가 view를 전달하자.
부트스트랩, 타임리프를 이용해서 채워줌. 근데 에러 발생.. 왜 ? 아직 signUpForm을 만들지 않았기 때문 ! 회원가입 할때 받아올 데이터들 저장할 수 있는 SignUpForm.java를 생성해준다.
스프링 시큐리티 추가 설정
하지만 로고 이미지 파일이 뜨지 않는데 이것은 스프링 시큐리티와 연관되어 있다.
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring()
.requestMatchers(PathRequest.toStaticResources().atCommonLocations());
//static resources은 스프링 시큐리티 필터를 적용하지 말아라!
}static resources에 대해서 시큐리티 필터를 적용하지 않겠다는 설정을 SecurityConfig.java에 추가해준다. 이후에 AccountControllerTest 에 sign-up form 도 추가!
Spring Model 객체
Controller의 메서드는 Model이라는 타입의 객체를 파라미터로 받을 수 있다.
순수하게 JSP Servlet으로 웹 어플리케이션을 만들 때 보통 request나 session 내장객체에 정보를 담아 jsp에 넘겨주곤 했는데 Spring에서는 Model이라는 녀석을 쓴다.
즉 request.setAttribute() 와 비슷한 역할을 하는 것.
spring dev tools 를 디팬던시에 넣어놨기 때문에 서버를 껐다가 킬 필요가 없다. bulid project를 눌러주면 재반영된다.
출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발
https://velog.io/@msriver/Spring-Model-%EA%B0%9D%EC%B2%B4
https://m.blog.naver.com/PostView.nhn?blogId=crint&logNo=90068104505&proxyReferer=https:%2F%2Fwww.google.com%2F
