참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 스프링부트는 회원가입과 로그인을 도와주는 스프링 시큐리티(Spring Security)를 사용할수 있다. 스프링 시큐리티란? 스프링 시큐리티는 스프링 기반 애플리케이션의 인증과 권한을 담당하는 스프링의 하위 프레임워크이다. 인증(Authenticate)은 로그인을 의미한다. 권한(Authorize)은 인증된 사용자가 어떤 것을 할 수 있는지를 의미한다. 스프링 시큐리티 설치 스프링 시큐리티 사용을 위해 다음과 같이 build.gradle 파일을 수정하자. dependencies { (... 생략 ...) implementation 'org.springframework.boot:spring-b..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 이번에는 질문 목록에 "해당 질문에 달린 답변 개수"를 표시할 수 있는 기능을 추가해 보자. 코드의 분량은 많지 않지만, 게시판 서비스를 더욱 서비스답게 만들어 주는 기능이다. 답변 개수는 다음처럼 게시물 제목 바로 오른쪽에 표시하자. 번호 제목 작성일시 이전 다음 질문 등록하기 th:if="${#lists.size(question.answerList) > 0}"로 답변이 있는지 조사하고, th:text="${#lists.size(question.answerList)}"로 답변 개수를 표시했다. #list.size(이터러블객체)는 이터러블 객체의 사이즈를 반환하는 타임리프의 유틸리티이다. 이..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 게시물 번호가 1부터 시작되는 문제 현재 질문 목록 화면을 유심히 보면 페이지마다 게시물 번호가 항상 1부터 시작되는 문제가 있다. 페이지를 이리저리 이동해 봐도 게시물 번호는 1부터 시작한다. 이 문제를 해결해 보자. 두번째 페이지로 이동하더라도 여전히 게시물 번호가 1부터 시작된다. 게시물 번호 공식 만들기 만약 질문 게시물이 12개라면 0페이지에는 12번째~3번째 게시물이, 1페이지에는 2번째~1번째 게시물이 역순으로 표시되어야 한다. 질문 게시물의 번호를 역순으로 정렬하려면 다음과 같은 공식을 적용해야 한다. 번호 = 전체 게시물 개수 - (현재 페이지 * 페이지당 게시물 개수) - ..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 SBB의 질문 목록은 현재 페이징 처리가 안되기 때문에 게시물 300개를 작성하면 한 페이지에 300개의 게시물이 모두 조회된다. 이번 장에서는 페이징(Paging)을 적용하여 이 문제를 해결해 보자. 만약 로컬서버가 실행 중이라면 로컬 서버를 중지하고 [Run -> Run As -> Junit Test]로 testJpa 메서드를 실행하자. 그리고 다시 로컬서버를 실행한 후에 브라우저에서 질문 목록을 확인해 보자. package com.gosari.repick_project; import com.gosari.repick_project.question.QuestionService; import..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 지금까지 만든 SBB로 질문 목록을 조회하고 질문을 등록하고, 다시 내용을 보고 답변을 달고 이렇게 조작을 하다 보면 아마도 불편함을 느끼게 될것이다. 그것은 바로 메인페이지(Home)로 돌아갈 수 있는 기능이 없기 때문이다. 이번에는 이러한 불편을 해소할 수 있는 내비게이션바를 만들어 보자. 내비게이션바는 모든 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 내비게이션바 내비게이션바는 모든 페이지에서 공통적으로 보여야 하므로 다음처럼 layout.html 템플릿에 추가해야 한다. SBB 로그인 항상 홈 페이지로 이동해 주는 'SBB' 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' ..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 이전 챕터에서 질문 등록과 답변 등록시 오류가 발생하면 다음과 같이 오류를 표시했다. 앞으로 추가적으로 만들 템플릿들에도 위와 같이 오류를 표시하는 부분이 필요하다. 이렇게 반복적으로 사용하는 문장은 공통 템플릿으로 만들고 필요한 부분에 삽입하여 쓸 수 있다면 편리하지 않을까? 이번 장에서는 위의 오류 메시지를 출력하는 부분을 공통 템플릿으로 작성하고 필요한 곳에 삽입하여 사용할 수 있도록 해보자. 오류 메시지 공통 템플릿 오류 메시지를 표시하는 공통 템플릿을 다음과 같이 작성하자. /src/main/resources/templates/form_errors.html 출력할 오류메시지 부분에 ..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 질문 등록 질문 등록을 하려면 먼저 "질문 등록하기" 버튼을 만들어야 한다. 다음처럼 질문 목록 하단에 버튼을 생성하자. question_list.html 번호 제목 작성일시 질문 등록하기 링크 엘리먼트( ... )이지만 부트스트랩의 btn btn-primary 클래스를 적용하면 버튼으로 보인다. 이제 "질문 등록하기" 버튼을 누르면 /question/create URL이 호출될 것이다. URL 매핑 그리고 컨트롤러에 /question/create에 해당되는 URL 매핑을 추가하자. package com.gosari.repick_project.question; import lombok.Req..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 HTML에 익숙한 독자라면 눈치겠지만, 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 표준 HTML 구조 표준 HTML 문서의 구조는 다음과 같아야 한다. [표준 HTML 구조의 예] (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. 부트스트랩을 적용하여 SBB 서비스를 이쁘게 만들어 보자. 부트스트랩 설치 우선 다음 URL에서 부트스트랩을 다운로드 하자. 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/ 점프 투 스프링부트부트스트랩 주의사항 부트스트랩은 3.x, 4.x, 5.x 등의 버전이 ..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 지금까지 질문 목록 화면과 질문 상세 화면을 만들었다. 하지만 좀 더 그럴싸한 화면을 만들기 위해서는 화면에 디자인을 적용해야 한다. 디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)를 사용해야 한다. 스태틱(static) 디렉터리 스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다. 스타일시트 스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자. textarea{ width: 100%; } input[type=submit]{ margin-top: 10px; } /*질문상세화면 css*/ style.c..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 질문 상세 링크 추 답변 등록 버튼 만들기 질문 상세 템플릿에 답변 저장을 위한 form, textarea, input 엘리먼트를 다음과 같이 추가하자. 버튼을 누르면 전송되는 form의 action은 타임리프의 "th:action" 속성으로 생성한다. 버튼을 누르면 POST 방식으로 /answer/create/ URL이 호출(submit)될 것이다. 하지만 아직 /answer/create/ URL에 대한 매핑이 없으므로 버튼을 누르면 다음과 같은 404 페이지가 나타난다. 이 오류를 해결하려면 답변 컨트롤러를 만들고 해당 URL에 대한 매핑을 처리해야 한다. 답변 컨트롤러 만들기 앞에서 질..
참고 링크 : https://wikidocs.net/book/7601 오라클DB와 intelliJ로 작업하였습니다 질문 상세 링크 추가하기 먼저 질문 목록의 제목을 클릭했을때 상세화면이 호출되도록 제목에 링크를 추가하자. 질문 목록 템플릿을 다음과 같이 수정하자. src/main/resources/templates/question_list.html 제목 작성일시 제목을 엘리먼트의 텍스트로 출력하던 것에서 링크로 변경했다. 타임리프에서 링크의 주소는 th:href 속성을 사용한다. 타임리프에서 th:href 처럼 URL 주소를 나타낼때는 반드시 @{ 문자와 } 문자 사이에 입력해야 한다. 그리고 URL 주소는 문자열 /question/detail/과 ${question.id} 값이 조합되어 /questio..
