스프링부트 기초 - 2. 게시판 시작해보기
이전글
https://goodthinking.tistory.com/41
스프링부트 기초 - 1. 스프링부트 개요 & 프로젝트 설치 및 설정
개요 안녕하세요. 이번에 스프링부트를 공부하면서 블로그에 정리하면 좋을것같아 찾아왔습니다. 기존에 공부할땐 노션에 정리했는데 노션이 좋긴하지만, 블로그랑 성격이 조금 달라서 포트폴
goodthinking.tistory.com
시작
이전에는 설치와 설정을 간단하게 했습니다.
이번 포스팅부터는 간단한 게시판을 통해 CRUD를 구현해보겠습니다.
먼저 Spring Boot 는 기본적으로 톰캣 서버가 내장되어있어 따로 설정이 없어도 실행이 됩니다.
프로젝트를 실행 후 src >main >resources >static 폴더에다가 index.html 을 생성합니다.
웰컴 페이지가 정상적으로 작동하는지 확인해야겠죠?
src >main >java >package (com.example.crudProject) 에 있는 CrudProjectApplication 을 접속한 후
왼쪽에 재생버튼같이 생긴걸 누르면 Run 'Crud...' 가 있습니다 이걸로 서버를 Run 한 후
http://localhost:8080/
를 통해서 접속해보면..
요렇게 Wel Come 문구가 뜨면 웹페이지에 접속까진 성공입니다 !!
그러면 게시판을 만들어 볼까요?
그전에 기본 HTML 과 CSS로만 만들면 굉장히 귀찮고 지저분해질 수 있으니 손쉽게 만들 수 있는 부트스트랩을 사용하겠습니다.
http://bootstrapk.com/getting-started/#download
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치
bootstrapk.com
부트스트랩 홈페이지에서 기본템플릿을 적용하겠습니다.
위 페이지에서 밑으로 스크롤하다보면 기본템플릿 이 있습니다. 이 코드를 그대로 복사해 만들어보겠습니다.
먼저 src >main >resources >templates >main.mustache 를 생성합니다.
main으로 보여줄 페이지를 만드는 겁니다.
main.mustache 를 생성하고 저렇게 작성했습니다.
첫줄과 마지막줄 보시면 {{>layouts/header}} 와 같은게 있죠?
이 코드는 layouts 디렉토리에 있는 header & footer 를 include 즉, 호출하는 겁니다.
헤더와 푸터는 보통 웹페이지에서 거의 고정된 형태로 가기때문에 마치 변수처럼 저장해두고 호출해서 사용합니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>header.mustache 파일입니다. 기본 Bootstrap 의 navbar template 를 가져왔습니다.
<!-- site info -->
<div class="mb-5 container-fluid">
<hr>
<p> Wel Come CRUD Page - Study * <a href="#">Privacy </a> * </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>footer.mustache 파일입니다. 이렇게 템플릿으로 저장해두고 body 에서 메인부분만 수정하면 보다 빠르게 페이지 구현이 가능하겠죠?
그리고 http://localhost:8080/main 으로 접속을 시도하면???
왜 404에러가 나타날까요?
이유는 바로 Controller 를 설정해주지 않아서 주소가 등록이 되지않았다고 생각하시면 됩니다.
그러면 Controller 를 생성해보겠습니다.
src >main >java >CrudProjectApplication 패키지에 controller 패키지를 추가합니다.
컨트롤러를 생성한 후 @어노테이션을 통해 기능을 설정해야합니다.
@GetMapping("/articles")
public String List(Model model){
List<Article> articleList = articleRepository.findAll();
model.addAttribute("articleList", articleList);
log.info(String.valueOf(articleList));
return "main";
}
@Controller 로 해당 Class가 Controller 라는것을 지정해주고,
@GetMapping("/주소")
메서드로 해당 메소드 주소를 호출하면 main.mustache 를 반환해서 보여주는 것으로 호출 시 main 페이지를 보여주게 됩니다.
보시면 Header 와 Footer 가 정상적으로 호출되었고 main 페이지가 출력되었습니다.
다음엔 이 Main 페이지를 활용해 게시판을 생성해보겠습니다.