HTML에 익숙한 독자라면 눈치겠지만, 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동 하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. 표준 HTML 구조 표준 HTML 문서의 구조는 다음과 같아야 한다. [표준 HTML 구조의 예] (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일은 head 엘리먼트 안에 링크 되어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. 태그와 엘리먼트 (... 생략 ...) 위에서 은 table 태그이고 ~ 처럼 table..
웹 디자이너 없이 혼자서 웹 프로그램을 작성해 보았다면 화면 디자인 작업에 얼마나 많은 시간과 고민이 필요한지 알고 있을 것이다. 이번에 소개하는 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다. 부트스트랩을 적용하여 SBB 서비스를 이쁘게 만들어 보자. 부트스트랩 설치 우선 다음 URL에서 부트스트랩을 다운로드 하자. 부트스트랩 다운로드 - https://getbootstrap.com/docs/5.1/getting-started/download/ 주의사항 부트스트랩은 3.x, 4.x, 5.x 등의 버전..
지금까지 질문 목록 화면과 질문 상세 화면을 만들었다. 하지만 좀 더 그럴싸한 화면을 만들기 위해서는 화면에 디자인을 적용해야 한다. 디자인을 적용하기 위해서는 스타일시트(stylesheet, CSS파일)를 사용해야 한다. 이번 장에서는 SBB에 스타일시트를 적용해 보자. 스태틱(static) 디렉터리 스타일시트 파일은 스프링부트의 스태틱 디렉터리에 저장해야 한다. 스프링부트의 스태틱 디렉터리는 다음과 같다. /sbb/src/main/resources/static 스타일시트 스타일시트 파일은 스태틱 디렉터리에 저장해야 한다. 스타일시트 파일(style.css)을 다음과 같이 작성하자. [파일명:/sbb/src/main/resources/static/style.css] textarea { width:100..
앞 절에서 우리는 질문을 조회하는 기능을 만들었다. 이번에는 질문에 답변을 등록하고 보여 주는 기능을 만들어 보자. 질문 상세 화면에 답변을 입력하기 위한 텍스트 창(textarea)과 버튼을 생성하고, 이 버튼을 누르면 답변이 저장되도록 구현해 보자. MySQL 설정 및 연결 원래는 계속 h2-database를 이용하여 진행하여야 하는데, 솔직히 ui나 혹은 서버 재구동해야지만 h2-console을 들어갈 수 있고 그래서 MySQL Workbench를 활용하여 데이터베이스를 옮기려고 합니다. [파일명:/sbb/src/main/resources/application.properties] # MySQL DATABASE spring.datasource.driver-class-name=com.mysql.cj...
질문 상세 링크 추가하기 먼저 질문 목록의 제목을 클릭했을때 상세화면이 호출되도록 제목에 링크를 추가하자. 질문 목록 템플릿을 다음과 같이 수정하자. [파일명: /sbb/src/main/resources/templates/question_list.html] 제목 작성일시 제목을 엘리먼트의 텍스트로 출력하던 것에서 링크로 변경했다. 타임리프에서 링크의 주소는 th:href 속성을 사용한다. 타임리프에서 th:href 처럼 URL 주소를 나타낼때는 반드시 @{ 문자와 } 문자 사이에 입력해야 한다. 그리고 URL 주소는 문자열 /question/detail/과 ${question.id} 값이 조합되어 /question/detail/${question.id}로 만들어졌다. 이때 좌우에 | 문자없이 다음과 같이..
이전 장에서 질문 목록을 만들었다. 이제 질문 목록의 제목 링크를 누르면 질문 상세 화면이 보이게 할 것이다. 하지만 기능을 추가하기 전에 잠시 생각할 것이 있다. 우리는 QuestionController에서 QuestionRepository를 직접 사용하여 질문 목록 데이터를 조회했다. 하지만 대부분의 규모있는 스프링부트 프로젝트는 컨트롤러에서 리포지터리를 직접 호출하지 않고 중간에 서비스(Service)를 두어 데이터를 처리한다. 서비스는 스프링에서 데이터 처리를 위해 작성하는 클래스이다. 서비스가 필요한 이유 서비스가 필요한 이유는 무엇일까? 모듈화 예를들어 어떤 컨트롤러가 여러개의 레포지터리를 사용하여 데이터를 조회한후 가공하여 리턴한다고 가정해 보자. 이러한 기능을 서비스로 만들어 두면 컨트롤러..
루트 URL은 http://localhost:8080 처럼 도메인명과 포트 뒤에 아무것도 붙이지 않은 URL을 말한다. 우리는 아직 루트 URL에 대한 매핑을 만들지 않았기 때문에 브라우저에서 루트 URL에 접속하면 다음과 같은 404 페이지가 나타난다. 이번에는 루트 URL 호출시 404 페이지 대신 질문 목록을 출력하도록 해보자. 다음과 같이 MainContrller를 수정하자. package com.mysite.sbb; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotatio..
우리가 원하는 질문 목록은 다음 주소에 접속할 때 동작해야 한다. 로컬 서버를 실행하고 웹 브라우저에서 http://localhost:8080/question/list에 접속해 보자. 아마 다음과 같은 404 오류페이지가 나타날 것이다. 404 오류 해결하기 404 오류를 해결하려면 /question/list URL에 대한 매핑이 있는 컨트롤러가 필요하다. QuestionController.java 파일을 다음과 같이 신규 작성하자. [파일명:/sbb/src/main/java/com/mysite/sbb/question/QuestionController.java] package com.mysite.sbb.question; import org.springframework.stereotype.Controlle..