![15. 네비게이션 바 - 점프 투 스프링부트(게시판 만들기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbx6n8n%2FbtrUZX2TH3N%2FgKXw0KGQECFucIKm0TW5Sk%2Fimg.png)
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전 입니다. 내비게이션 바 메인페이지로 돌아갈 수 있는 기능을 구현한 내비게이션 바를 만들어보자. 내비게이션바는 모든 페이지에서 공통적으로 보여야 하므로 layout.html 템플릿에 추가해야 한다. 파일경로 : /practice/src/main/resources/templates/navbar.html 게시판 연습 로그인 항상 홈 페이지로 이동해 주는 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가했다 (추후 구현) layout.html을 수정하자. (... 생략 ...) navbar.html을 통해 내비게이션 바를 분리 한 뒤 th:replace를 사용하여 포함..
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전 입니다. 오류 메시지 공통 템플릿 오류 메시지를 표시하는 공통 템플릿을 작성하자 파일 경로 : /practice/src/main/resources/templates/form_errors.html 출력할 오류 메세지 부분에 th:fragment="formErrorsFragment" 속성을 추가했다 필요한 템플릿에 적용하기 question_form.html 질문등록 제목 내용 타임리프의 th:replace 속성을 사용하면 공통 템플릿을 템플릿 내에 삽입할수 있다. div 엘리먼트를 form_errors.html 파일의 th:fragment 속성명이 formErrorsFragmen..
![13. 질문 등록과 폼 - 점프 투 스프링부트(게시판 만들기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKCnwH%2FbtrUV4OXbUH%2FGXswl3Upc0J4C4AcwBp6r1%2Fimg.png)
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다 자바 8, 스프링부트 2.7.7버전 입니다. 질문 등록 질문 등록을 위한 질문 등록 버튼을 question_list 템플릿에 생성하자 (... 생략 ...) 질문 등록하기 링크 엘리먼트(..)에 부트스트랩의 btn btn-primary 클래스를 적용시켜 버튼화 했다 "질문 등록하기" 버튼을 누르면 /question/create URL이 호출될 것이다. URL 매핑 컨트롤러에 /question/create에 해당되는 URL 매핑을 추가하자 (... 생략 ...) public class QuestionController { (... 생략 ...) @GetMapping("/create") public String qu..
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전입니다. 표준 HTML 구조 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 표준 HTML구조는 아래와 같다 (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. 템플릿 상속 앞에서 작성한 질문 목록..
![11. 부트스트랩 - 점프 투 스프링부트(게시판 만들기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkgIIE%2FbtrUYpyg9Ju%2F0uigPxuUvBw8wn6tnAn6wK%2Fimg.png)
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전입니다. 부트스트랩 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.2/getting-started/download/ 해당 링크에서 5.2.3버전의 부트스트랩을 다운로드한 후 bootstrap.min.css 파일을 스태틱 디렉터리에 저장하자 압축 파일 경로 : bootstrap-5.2.3-dist..
![10. 스태틱 디렉터리와 스타일시트 - 점프 투 스프링부트(게시판 만들기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0J3N3%2FbtrU6XUn4Ie%2Fd8lNXiIsee0t0fcwvN52j1%2Fimg.png)
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전입니다. 스타일시트 스타일시트 파일은 스프링부트의 스태틱 디렉토리에 저장해야 한다 스타일시트 파일(style.css)을 작성하자 파일경로 : /practice/src/main/resources/static/style.css textarea { width:100%; } input[type=submit] { margin-top:10px; } 템플릿에 스타일 적용 스타일시트 파일을 질문 상세 템플릿에 적용하자 템플릿 최상단에 style.css를 사용할 수 있는 링크를 추가했다. (... 생략 ...) static 디렉터리에 style.css 파일이 위치하지만 /static/style..
해당 게시글은 점프 투 스프링부트 교재를 통한 개인 학습 용도이며 기초 세팅은 생략하였습니다. 자바 8, 스프링부트 2.7.7버전입니다. 답변 등록 버튼 만들기 이제 버튼을 누르면 POST 방식으로 /answer/create/ URL이 호출(submit)될 것이다. 하지만 아직 /answer/create/ URL에 대한 매핑이 없으므로 버튼을 누르면 다음과 같은 404 페이지가 나타난다. 답변 서비스 만들기 답변을 저장하는 AnswerService를 작성하자 package com.example.board.answer; import java.time.LocalDateTime; import org.springframework.stereotype.Service; import com.example.board.q..