9. 데이터 바인딩 & 밸리데이션 (1/4)
시작
직접 WEB 애플리케이션(로그인 화면)을 제작해보면서 데이터 바인딩이 무엇인지, 밸리데이션이 무엇인지 알아보겠습니다.
데이터 바인딩
화면에 입력한 유저 ID와 패스워드 등을 오브젝트로 받는 방법에 대해 설명합니다.
밸리데이션 (입력 체크)
유저 등록 시에 밸리데이션 방법에 대해서 설명합니다.
라이브러리 추가
이번부터는 Bootstrap이라고 하는 CSS 프레임워크를 사용합니다.
Bootstrap을 사용함으로써 나름 이쁜 화면을 간단히 만드는 것이 가능합니다.
(개발 현장에서도 많이 사용합니다.)
Bootstrap을 사용하는 방법에는 몇 가지 방법 있습니다만, 여기서는 제일 간단한 방법으로 webjars라는 라이브러리를 사용하여 Booststrap을 설정합니다.
webjars
webjars란, maven등과 같은 빌드 툴로, JavaScript나 Bootstrap 등을 간단하게 관리할 수 있는 라이브러리입니다.
webjars를 사용하기 위해선, pom.xml의 dependencies 태그 안에 아래의 두 개의 라이브러리를 추가합니다.
jQuery
pom.xml 에는 Bootstrap 외에도 jQuery 라이브러리를 추가합니다.
jQuery라는 것은 JavaScript 라이브러리입니다. JavaScript 코드를 그대로 쓰는 것을 보다 쉽게 알 수 있기 때문에 개발 현장에서도 많이 사용됩니다.
Bootstrap에 일부에 jQuery가 사용됩니다. 그로 인해 Bootstarp을 사용할 때에는 jQuery가 필요합니다.
pom.xml을 변경한 다음에는 maven 갱신을 시행합니다.
maven을 갱신하면 추가한 라이브러리를 다운로드합니다.
보시면 아시겠지만, Webjars 에는 Bootstrap 등과 같은 파일을 직접 다운로드하고 있습니다.
이 jar파일의 경로를 지정하는 것으로 css 파일이나 js 파일을 읽는 것이 가능합니다.
이 이후에 실제로 사용하는 방법에 대해서 설명하겠습니다.
화면 작성
데이터 바인딩, 밸리데이션의 기능을 코딩하기 전에 HTML 화면 먼저 작성해보겠습니다.
그 이유는 화면 작성과 데이터 바인딩 코딩을 같이해버리면 복수의 설명이 되기 때문에..
그러면 이제부터 로그인과 신규등록에 관한 화면을 만들어보겠습니다.
먼저 구성은 아래와 같습니다.
LoginController.java
내용을 말씀드리자면, http://localhost:8080/login에 GET 메서드, POST 메서드로 HTTP 요청(리퀘스트)이 온다면, login폴더 안에 있는 login.html에 화면을 전이한다는 것입니다.
각 메서드에 지정한 반환 값은 html 파일입니다.
html 파일은 src/main/resources/template 에서부터 지정되며, 그 이유로 return login/login이라는 것은 src/main/resources/template/login이라는 폴더 안에 login.html을 말하는 것입니다.
다음으로는 로그인 화면을 만들어보겠습니다.
login.html
포인트 1
Bootstrap을 사용하기 위해서는 jQuery와 Bootstrap의 파일을 읽어드릴 필요가 있습니다.
그렇기 때문에 <head> 태그 안에 추가했습니다.
통상 css 나 javascript 파일은 src/main/resources 안에 두어 파일을 읽습니다.
하지만 webjars를 사용하면 다운로드한 라이브러리 안에 파일을 src/main/resources안에 둔 것과 같이 파일을 읽을 수 있습니다. 또한 타임 리프에서 src/main/resources 안에 파일을 읽는 방법은 다음과 같습니다.
css 파일
th:href="@{src/main/resources부터의 파일 경로}"
js 파일
th:href="@{src/main/resources부터의 파일 경로}"
또한 jQuery의 js 파일을 읽은 후에 Bootstrap의 js 파일을 읽는 것과 같이 되어있습니다.
Bootstrap 파일 안에 jQuery를 사용하기 때문에, 먼저 jQuery 자기 자신을 읽지 않으면 안 됩니다.
Bootstrap을 사용하면 디자인성이 높은 화면을 간단히 제작할 수 있습니다.
사용 방법은 각 태그의 class속성에 Bootstrap에서 제공하는 몇 가지 클래스를 SET만 하면 됩니다.
그로 인해 class="XXX"와 같이 되어있는 태그는 Bootstrap을 사용하고 있다고 생각해주세요.
포인트 2
타임 리프를 이용하여 앵커 태그를 사용할 경우에는 th:href 속성을 사용합니다.
사용하는 방법은 컨트롤러 클래스 안에 @GetMapping 어노테이션의 괄호 안의 문자열을 지정하는 거뿐입니다.
문자열을 지정할 경우에는 @{'/xxx'}라고 하는 형식으로 전이처를 지정합니다. 또한 앵커 태그이기 때문에 HTTP 요청(request)은 GET 메서드로 송신됩니다.
다음은 유저 등록 화면용 컨트롤러를 제작해보겠습니다.
SignupController.java
포인트 1
타임 리프에 라디오 버튼의 값을 동적으로 변경하기 위해서는 Map을 사용합니다.
그 Map에 들어간 키와 값을 화면에 표시하는 것이 가능합니다.
위 소스에서는 initRadioMarriage()라고 하는 메서드 안에 Map에 값을 넣습니다.
그리고 유저 등록 화면에 GET 요청(request)이 올 경우, Model 클래스에 Map을 등록합니다.
이러함에 있어 화면으로부터 Map의 값을 취득할 수 있게 됩니다.
타임 리프로 라디오 버튼을 만드는 방법은 차후에 설명하겠습니다.
포인트 2
리다이렉트를 할 경우, 메서드의 반환 값에 redirect:/전이처 경로를 지정합니다.
리다이렉트를 하면 전이처에 컨트롤러 클래스의 메서드가 호출됩니다.
위 소스의 경우 http://localhost:8080/login에 GET 메서드로 HTTP 요청(request)이 보내집니다.
그리고 LoginController의 getLogin 메서드가 호출됩니다.
위 코드를 다시 설명해드리자면, http://localhost:8080/signup에 GET 메서드로 HTTP 요청(request)이 온다면, signup.html (유저 등록 화면)으로 전이합니다.
다만, http://localhost:8080/signup에 POST 메서드로 HTTP 요청(request)이 온다면, 로그인 화면으로 리다이렉트 합니다. /login에 리다이렉트 하기 때문에 LoginController의 GET 메서드를 호출합니다.
다음은 유저 등록 화면을 작성해보겠습니다.
signup.html
포인트
라디오 버튼을 코딩하기 위해서는 th:each 속성을 사용합니다.
th:each 속성은 확장 for문과 같이 사용합니다.
th:each
th:each="변수명 : ${<ModelAttribute의 키명>}" 형식으로 지정합니다.
이것으로 Model에 등록된 값을 반복해서 호출하게 됩니다. 또한, th:each 가 붙은 태그 안에는 Model에 등록된 값을 변수명으로 간단히 취득할 수 있습니다.
위 코드에서는 th:each 속성이 붙은 div 태그 안에는 item이라고 하는 변수를 사용합니다.
이 item 변수 안에는 SignupController 클래스에서 취득한 Map이 들어가 있습니다.
th:text
th:text에는 화면에 표시할 문자열을 지정합니다.
위 코드에서는 Map 클래스의 키(기혼, 미혼)를 표시합니다.
th:value
th:value에는 화면으로부터 Controller 클래스에 보낼 값을 지정합니다.
위 코드에서는 Map 클래스의 값(true, false)을 보냅니다.
th:action
로그인 화면에서는 form 태그 안에 action="/login"이라는 형태로 요청(request)처 URL를 지정했습니다.
이것은 통상 HTML 사용법입니다.
반면, 유저 등록 화면에서의 html에서는 th:action="@{/signup}"과 같이 요청(request)처 URL를 지정했습니다.
이것은 타임 리프의 사용 방법 중 하나입니다.
스프링 시큐리티를 사용하지 않는 경우에는 action="/login"과 같은 형태로 사용하여도 문제가 되지 않습니다.
하지만, 스프링 시큐리티를 사용할 경우에는 form태그의 th:action 속성을 사용하도록 해주세요.
관련 상세 내용은 추후에...
여기까지 작성이 완료되었으면 스프링 부트를 기동하여 아래의 URL을 입력해보겠습니다.
http://localhost:8080/login
신규등록은 여기로를 눌러보면...
이제 준비가 완료되었습니다.
다음 포스트부터는 본격적으로 데이터 바인딩, 밸리데이션에 대해서 설명해드리겠습니다.
'프로그래밍 > 스프링 부트' 카테고리의 다른 글
| 10. 데이터 바인딩 & 밸리데이션 (2/4) (0) | 2020.06.23 |
|---|---|
| 8. DI (4/4) (0) | 2020.06.18 |
| 7. DI (3/4) (0) | 2020.06.16 |
| 6. DI (2/4) (0) | 2020.06.16 |
| 5. DI (1/4) (0) | 2020.06.14 |
