1. Spring 게시판 무작정 따라하기

프로젝트 세팅부터 템플릿 레이아웃 구성까지.
Aug 14, 2024
1. Spring 게시판 무작정 따라하기
💡
프로젝트 세팅부터 템플릿 레이아웃 구성까지.

1. Spring 프로젝트 세팅

JDK 와 JAVA 버전을 동일하게
JDK 와 JAVA 버전을 동일하게
notion image
 
notion image
notion image
 

1.1 라이브러리

notion image
implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-mustache' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
프로젝트 생성할 때 넣었던 dependencies 들이 들어가 있는걸 볼 수 있음

1.2 실행

notion image
notion image
내장톰캣 (스프링 내부에 톰캣이 내장되어 있음)
notion image
페이지는 나오지 않으나 제대로 실행이 되었음을 알 수 있음.
 

2. 페이지 생성

notion image
src→ main → resources → static 폴더 내부에 html 파일들 삽입
notion image
notion image
notion image
notion image
http://localhost:8080/detail.html 파일 이름으로 해당 페이지를 찾을 수 있다.

2.1 스프링 애플리케이션의 동작

  • WAS (Web Application Server): 스프링 애플리케이션은 아파치와 톰캣(내장)과 함께 설치되며, 이를 WAS(웹 애플리케이션 서버)라고 한다. 여기서 애플리케이션의 포트 번호는 기본적으로 8080으로 설정된다. 외부에서 이 애플리케이션에 접근할 때는 localhost:8080으로 접속함
  • 정적 파일 처리: URL을 통해 localhost:8080 요청을 보낼 때, 아파치는 정적 파일(html, png 등)만 응답할 수 있다. 예를 들어, localhost:8080/detail.html로 요청을 보내면, 이는 스프링 애플리케이션의 static 폴더에서 detail.html 파일을 찾게된다.
  • 동적 파일 처리: URL에 확장자 없이 요청이 들어오면, 예를 들어 localhost:8080/hello, 아파치는 톰캣에게 처리를 위임한다. 톰캣은 /hello로 매핑된 자바 파일을 찾아 컴파일하고, 실행한 결과를 응답함. 이와 같이 동적 컨텐츠톰캣이 처리한다.
  • 템플릿 엔진: 정적 파일은 변하지 않는 컨텐츠를 제공한다. 그러나 동적 컨텐츠 생성을 위해 템플릿 파일이 필요하다. 스프링에서는Mustache, Thymeleaf 같은 템플릿 엔진을 사용하여 JSP와 유사한 역할을 수행하고, 동적인 HTML 페이지를 생성할 수 있다. (Mustache 를 사용하여 만들것)

2.2 Mustache 템플릿 엔진과 컨트롤러 설정하기

  1. templates 에 있던 html 파일을 board 디렉토리에 에 복사 후 mustache 로 확장자 변경(shift+F6)
notion image
빈폴더가 되면 폴더 이상해져서 .keep 생성함
빈폴더가 되면 폴더 이상해져서 .keep 생성함
  1. 플러그인 다운로드
notion image
 
  1. main → java → shop.mtcoding.blog 폴더 내부에 board(이름 임의 지정) 패키지 생성 후 BoardController.java 생성
  1. 어노테이션 입력 후 주소를 매핑한다. 주소 매핑이란 @GetMapping("/board") 부분. 이렇게 지정하면 localhost:8080/board 로 요청 시 return ”board/list”; 에 있는 페이지가 표시된다.
notion image
@GetMapping("/board") public String list(){ return "board/list"; } @GetMapping("/board/1") public String detail(){ return "board/detail"; } @GetMapping("/board/save-form") public String saveForm(){ return "board/save-form"; } @GetMapping("/board/1/update-form") public String updateForm(){ return "board/update-form"; }
notion image
요청한 주소로 연결이 된다. 그런데 글자가 깨지는 문제가 있음.
notion image
application.properties 에서 인코딩을 설정을 한다.
 

2.3 Mustache 템플릿 레이아웃 구성: 부분 템플릿 만들기

💡
반복적이고 고정된 부분은 부분 템플릿으로 만들 수 있다. 문법 {{>경로}}
notion image
notion image
레이아웃 폴더 추가 후 헤더, 푸터 파일 생성
notion image
Doc~ /nav 까지 header 에 넣기
notion image
footer~ </html> 까지 footer 에 넣기
notion image
mustache 파일 최상단, 최하단에
{{>layout/header}} , {{>layout/footer}} 입력 (서버 다시 열어야 적용 된 화면이 보인다.)
 
 
Share article

[HootJem] 개발 기록 블로그