728x90
반응형
SMALL
Day 4: 정적 자원 관리
📌정적 자원 관리
- 정적 자원은 CSS, JavaScript, 이미지 파일 등이다. - Spring Boot는 기본적으로 src/main/resources/static 디렉토리에 있는 파일을 정적 자원으로 처리한다. 따라서, 정적 자원을 해당 디렉토리에 추가하면 된다. 1.1 디렉토리 구조 만들기다음 디렉토리 구조를 생성한다. |
src/main/resources/static
├── css
│ └── styles.css
├── js
│ └── scripts.js
└── images
└── logo.png
1.2 CSS 파일 생성src/main/resources/static/css/styles.css 파일을 생성하고, 기본 스타일을 작성한다. |
/* styles.css */
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/*
body : 웹 페이지 전체를 감싸는 요소
font family : 기본 글꼴 설정 (글꼴은 Arial사용하고 없으면, sans serif 계열 글꼴 사용)
margin 0, padding 0 : 페이지의 기본 여백과 패딩을 없앰
(이렇게 하면 페이지가 브라우저 창의 가장자리에 딱 맞게 붙게됨)
*/
header{
background-color: #f8f9fa;
padding: 10px 0;
text-align: center;
}
/*
header : 페이지의 머리글 부분
backgroud color : 헤더 배경색 설정 (#f8f9fa = 연한 회색)
padding : 헤더 내부 위아래에 10픽셀 패딩준다. 좌우는 패딩이 없다.
text align : 헤더 안 텍스트 정렬 (가운데)
*/
footer{
background-color: #f8f9fa;
padding: 10px 0;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
/*
footer는 페이지의 바닥글 부분을 정의
background-color: #f8f9fa;는 푸터의 배경색을 헤더와 같은 연한 회색(#f8f9fa)으로 설정
padding: 10px 0;는 푸터 내부의 위아래에 10픽셀의 패딩
text-align: center;는 푸터 안의 텍스트를 가운데 정렬
position: fixed;는 푸터를 화면에 고정. 스크롤을 해도 항상 화면 하단에 고정.
width: 100%;는 푸터의 너비를 화면 전체 너비로 설정.
bottom: 0;는 푸터를 화면의 맨 아래에 위치.
*/
1.3 JavaScript 파일 생성src/main/resources/static/js/scripts.js 파일을 생성하고, 기본 스크립트를 작성한다. 전체 코드 동작 과정 1. 웹 페이지가 로드되기 시작한다. 2. 브라우저가 HTML을 파싱하고 DOM 트리를 완성한다. 3. DOM이 완성되면 DOMContentLoaded 이벤트가 발생한다. 4. DOMContentLoaded 이벤트가 발생하면 addEventListener로 설정한 콜백 함수가 실행된다. 5. 콜백 함수는 console.log를 사용하여 콘솔에 "JavaScript is loaded and working!" 메시지를 출력한다. |
// scripts.js
document.addEventListener("DOMContentLoaded", function() {
console.log("JavaScript is loaded and working!");
});
// DOMContentLoaded 이벤트가 발생했을 경우 특정 함수를 실행하도록 설정한다.
// document 객체는 현재 웹 페이지를 나타낸다.
// addEventListener 메서드는 특정 이벤트 발생시 호출할 함수를 지정한다.
// DOMContentLoaded 이벤트는 html 문서 구조가 완전히 로드되고 파싱되었을 때 발생한다.
// console.log 는 브라우저 콘솔에 메시지를 출력한다. javascript가 제대로 로드되는지 확인가능하다
1.4 이미지 파일 추가이미지 파일(logo.png)을 src/main/resources/static/images/ 디렉토리에 추가한다. |
📌기본 HTML 템플릿 작성
- Thymeleaf를 사용하여 기본 HTML 템플릿을 작성한다. - 이를 위해 src/main/resources/templates/ 디렉토리에 HTML 파일을 생성합니다. 2.1 HTML 템플릿 작성
src/main/resources/templates/home.html 파일을 생성하고, 기본 구조를 작성한다. |
<!DOCTYPE html> <!--html 문서임을 브라우저에 알려준다. -->
<html xmlns:th="http://www.thymeleaf.org">
<!-- thymeleaf 템플릿 엔진을 사용한다는 것을 선언한다 -->
<head>
<meta charset="UTF-8">
<title>Shopping Mall</title> <!--브라우저 탭에 표시될 웹 페이지 제목설정 -->
<link rel="stylesheet" th:href="@{/css/styles.css}">
<!--<link rel="stylesheet" th:href="@{/css/styles.css}">는 외부 CSS 파일을 포함한다.
여기서 th:href="@{/css/styles.css}"는 Thymeleaf 문법으로,
실제 경로를 템플릿에서 처리할 수 있게 한다. -->
</head>
<body>
<header>
<img th:src="@{/images/logo.png}" alt="Logo">
<H1>Welcome to the Shopping Mall!</H1>
</header>
<main>
<p>This is the home page of the shopping mall.</p>
<!-- 페이지의 본문 텍스트 -->
</main>
<footer>
<p>© 2024 Spring Shopping Mall</p>
<!-- 저작권 정보를 포함 -->
</footer>
<script th:src="@{/js/scripts.js}"></script>
</body>
</html>
📌 컨트롤러 작성
- HomeController를 작성하여 home.html 템플릿을 렌더링하도록 한다. 3.1 컨트롤러 작성src/main/java/com/example/springshoppingmall/controller/HomeController.java 파일을 생성하고, 다음과 같이 작성한다: |
package com.example.shoppingmall.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}
📌 애플리케이션 실행
- 이제 애플리케이션을 실행하고, http://localhost:8080/에 접속하여 결과를 확인한다. - 기본적인 정적 자원 관리와 HTML 템플릿 작성이 완료되었다. 4.1 애플리케이션 실행
- IntelliJ IDEA에서 SpringBootApplication 클래스를 실행하여 애플리케이션을 시작한다. - SpringBootApplication 클래스는 다음과 같다: |
package com.example.springshoppingmall;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringShoppingMallApplication {
public static void main(String[] args) {
SpringApplication.run(SpringShoppingMallApplication.class, args);
}
}
📌 결과 확인
웹 브라우저에서 http://localhost:8080/에 접속하여 페이지가 올바르게 표시되는지 확인한다.  |
728x90
반응형
LIST
'Spring > Spring 쇼핑몰 프로젝트' 카테고리의 다른 글
| [쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - Day 5: 데이터베이스 설정 (0) | 2024.08.07 |
|---|---|
| [쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - DAY 3: 컨트롤러와 뷰 (0) | 2024.07.12 |
| [쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - DAY 2: Spring Boot 시작하기 (0) | 2024.07.11 |
| [쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - DAY 1: 프로젝트 소개와 환경 설정 (0) | 2024.07.10 |
| [쇼핑몰프로젝트] ChatGPT를 이용하여 만드는 JAVA Spring 쇼핑몰 - 0.계획 커리큘럼 (0) | 2024.07.05 |