목록IT 일기 (상반기) (398)
겉바속촉
점프투스프링부트 3-02 목표 : 페이징 적용하기 SBB의 질문 목록은 현재 페이징 처리가 안되기 때문에 게시물 300개를 작성하면 한 페이지에 300개의 게시물이 모두 조회된다. 이번 장에서는 페이징(Paging)을 적용하여 이 문제를 해결할 것. 대량 테스트 데이터 만들기 페이징을 구현하기 전에 페이징을 테스트할 수 있을 정도로 충분한 데이터를 생성하자. 대량의 테스트 데이터를 만드는 가장 간단한 방법은 스프링부트의 테스트 프레임워크를 이용하는 것이다. 다음처럼 테스트 케이스를 작성하자. [파일명:/sbb/src/test/java/com/mysite/sbb/SbbApplicationTests.java] package com.mysite.sbb; import org.junit.jupiter.api.Te..
점프투스프링부트 3-01 목표 : 내비게이션바 만들기 1. 내비게이션바 내비게이션바는 모든 페이지에서 공통적으로 보여야 하므로 다음처럼 layout.html 템플릿에 추가해야 한다. [파일명:/sbb/src/main/resources/templates/layout.html] SBB 로그인 항상 홈 페이지로 이동해 주는 'SBB' 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가했다. 이제 질문 목록 페이지를 요청하면 화면 상단에 다음과 같은 내비게이션바가 보일 것이다. 내비게이션바의 'SBB' 로고를 누르면 아무 곳에서나 메인 페이지로 돌아갈 수 있다. 'SBB' 로고를 눌러서 잘 작동하는지 확인해 보자. 그리고 부트스트랩 내비게이션바에는 재미있는 기능이 하나 숨어 있다. 아무 페이지나 접..
점프투스프링부트 2-16 목표 : 오류 메시지를 출력하는 부분을 공통 템플릿으로 작성해두기 1. 오류 메시지 공통 템플릿 오류 메시지를 표시하는 공통 템플릿을 다음과 같이 작성하자. [파일명:/sbb/src/main/resources/templates/form_errors.html] 출력할 오류메시지 부분에 th:fragment="formErrorsFragment" 속성을 추가했다. 2. 질문 등록 템플릿에 적용하기 이제 위에서 작성한 오류 메시지 공통 템플릿을 사용해 보자. 먼저 question_form.html 파일에 적용해 보자. [파일명:/sbb/src/main/resources/templates/question_form.html] 질문등록 제목 내용 타임리프의 th:replace 속성을 사용하면..
점프투스프링부트 2-05 목표 : 질문 등록 기능 만들기 1. 질문 등록 질문 등록을 하려면 먼저 "질문 등록하기" 버튼을 만들어야 한다. 다음처럼 질문 목록 하단에 버튼을 생성하자. [파일이름:/sbb/src/main/resources/templates/question_list.html] (... 생략 ...) 질문 등록하기 링크 엘리먼트( ... )이지만 부트스트랩의 btn btn-primary 클래스를 적용하면 버튼으로 보인다. 이제 "질문 등록하기" 버튼을 누르면 /question/create URL이 호출될 것이다. 2. URL 매핑 그리고 컨트롤러에 /question/create에 해당되는 URL 매핑을 추가하자. [파일명:/sbb/src/main/java/com/mysite/sbb/quest..
점프투스프링부트 2-14 목표 : 템플릿 상속 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 1. 표준 HTML 구조 표준 HTML 문서의 구조는 다음과 같아야 한다. [표준 HTML 구조의 예] (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. (... 생략 ...) 위에서 은 table 태그이고 ~ 처럼 table 태..
점프투스프링부트 2-13 목표 : Bootrstrap 프레임워크 사용해보기 1. 부트스트랩 설치 우선 다음 URL에서 부트스트랩을 다운로드 하자. 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.2/getting-started/download/ 부트스트랩은 3.x, 4.x, 5.x 등의 버전이 존재하고 메이저 번호(3, 4, 5)에 따라 그 사용방법이 다르다. 이 책은 부트스트랩 버전 5 기준으로 실습을 진행한다. 부트스트랩 다운로드 페이지 접속후 "Download" 버튼을 누르면 다음과 같은 파일이 다운로드 된다. bootstrap-5.2.3-dist.zip 압축파일 안에는 많은 파일들이 있는데 이 중에서 bootstrap.min.css 파일을 카피하여 스태틱 디렉터리에..
점프투스프링부트 2-12 목표 : 화면에 디자인 적용하기 1. 스태틱(static) 디렉터리 스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다. 스프링부트의 스태틱 디렉터리는 다음과 같다. /sbb/src/main/resources/static 2. 스타일시트 스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자. [파일명:/sbb/src/main/resources/static/style.css] textarea { width:100%; } input[type=submit] { margin-top:10px; } style.css 파일은 질문 상세 화면에 사용하기 위해 작성했다. 답변 등록시 사용하는 텍스트 창의 넓이를 100%로 하고 ..
점프투스프링부트 2-11 목표 : 질문에 답변을 등록하고 보여주는 기능 만들기 1. 답변 등록 버튼 만들기 질문 상세 템플릿에 답변 저장을 위한 form, textarea, input 엘리먼트를 다음과 같이 추가하자. [파일명:/sbb/src/main/resources/templates/question_detail.html] 버튼을 누르면 전송되는 form의 action은 타임리프의 "th:action" 속성으로 생성한다. 위와 같이 추가하고 질문 상세 페이지에 접속해 보자. 답변을 입력할 수 있는 텍스트창과 버튼이 생성되었다. 이제 버튼을 누르면 POST 방식으로 /answer/create/ URL이 호출(submit)될 것이다. 하지만 아직 /answer/create/ URL에 대한 매핑이 없으므로 ..
점프투스프링부트 2-10 목표 : 질문 상세 기능 추가 1. 질문 상세 링크 추가하기 먼저 질문 목록의 제목을 클릭했을때 상세화면이 호출되도록 제목에 링크를 추가하자. 질문 목록 템플릿을 다음과 같이 수정하자. [파일명: /sbb/src/main/resources/templates/question_list.html] 제목 작성일시 제목을 엘리먼트의 텍스트로 출력하던 것에서 링크로 변경했다. 타임리프에서 링크의 주소는 th:href 속성을 사용한다. 타임리프에서 th:href 처럼 URL 주소를 나타낼때는 반드시 @{ 문자와 } 문자 사이에 입력해야 한다. 그리고 URL 주소는 문자열 /question/detail/과 ${question.id} 값이 조합되어 /question/detail/${questio..