나의 블로그 만들기 프로젝트 (3일차)

개인 프로젝트/블로그 만들기

나의 블로그 만들기 프로젝트 (3일차) - index 페이지 로딩

coon94 2023. 3. 31. 21:34

오늘 공부할 주제

JSP란?

Controller와 RestController의 차이

Repository의 역할

Github 코드 보기

1. view와 resource폴더 만들기

yml 파일을 보면 spring.mvc.view.prefix는 /WEB-INF/views/로

설정하였기 때문에 springboot는 view에 해당하는 파일들을

기본설정인 webapp + prefix로 설정되며 suffix는 .jsp 이기에

최종적인 경로는 webapp/WEB-INF/views/ + @ /이름.jsp

로 설정된다고 생각하면 된다.

그래서 Spring boot 프로젝트에는 webapp폴더가 없기 때문에 main폴더

하위에 webapp폴더를 만든 후 왼쪽의 사진과 같이 폴더를 만들어준다.

또한 html파일의 구조를 include해서 사용할 경우 layout폴더를 이용하여 사용한다. 기본 index.jsp는 views폴더 하위에 위치하면 된다.

이제 css폴더와 js폴더는 resources 하위의 static의 하위에 생성해준다.

사용할 때는 static부터 경로를 찾을 수 있기 때문에

<link href="/css/style.css" rel="stylesheet">

이런식으로 작성해 주면된다.

2. index 페이지 만들기

<!-- jsp tag -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!-- jstl tag -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- security tag -->
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 이곳에 link, cdn 등을 작성 -->
</head>
<body>
    본문
</body>
</html>

기본적으로 html의 구조에 jsp, jstl, security tag를 각각 달아준다.

01. jsp tag를 사용하면 html 템플릿에서도 JAVA로직을 넣어 동적인 웹페이지를 쉽게 만들 수 있다.

02. jstl 문법을 사용하여 간단한 로직을 통해 if, 반복 등의 로직을 사용할 수 있다.

03. security tag를 넣어 템플릿 내의 session값을 보다 가시성 있게 사용할 수 있다.

자세한 사용과정은 차후에 차차 설명하겠다.

원하는 디자인의 index 코드를 짠 후에 해당 템플릿의 header와 footer를 나누어 include하겠다.

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <link href="style.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
<header class="navbar navbar-expand navbar-dark bg-dark bd-navbar">
    <a class="navbar-brand" href="#">Coon's home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">로그인</a></li>
            <li class="nav-item"><a class="nav-link" href="#">회원가입</a></li>
        </ul>
    </div>
</header>
</body>
</html>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<br/>
<div class="jumbotron text-center" style="margin-bottom:0">
    <p>😜 Copyright by Coon </p>
    <p>💌 010-222-2222 </p>
    <p>🏠 서울시 마포구 망원2동 </p>
</div>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="layout/header.jsp"%>

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-3 bd-sidebar">
            <ul id="navbar" class="nav">
                <br/>
                <li><a href="#">Side 1</a></li>
                <li><a href="#">Side 2</a></li>
                <li><a href="#">Side 3</a></li>
                <li><a href="#">Side 4</a></li>
            </ul>
            <br>
        </div>
        <div id="mArticle" class="article_skin">
            <div class="list_title">
                <h2 id="dkBody" class="tit_skin"><span class="screen_out">목록</span><span class="txt_title">분류 전체보기 (10)</span></h2>
            </div>
            <div class="list_content">
                <a href="#" class="link_post">
                    <strong class="tit_post">제목1</strong>
                    <p class="txt_post">내용1</p>
                </a>
                <div class="detail_info">
                    <a href="#" class="link_cate">개발/BE(Back-End)</a>
                    <span class="txt_bar">|</span>
                    <span class="txt_date">2023. 3. 31. 10:33</span>
                </div>
            </div>
            <div class="list_content">
                <a href="#" class="link_post">
                    <strong class="tit_post">제목2</strong>
                    <p class="txt_post">내용2</p>
                </a>
                <div class="detail_info">
                    <a href="#" class="link_cate">개발/BE(Back-End)</a>
                    <span class="txt_bar">|</span>
                    <span class="txt_date">2023. 3. 31. 10:33</span>
                </div>
            </div>
        </div>
    </div>
</div>
<%@ include file="layout/footer.jsp"%>