DEVELOPMENT/Spring

[스프링부트 완전정복] 2. 스프링 부트 개발 환경 설정 및 예제 맛보기

Tiny Commit 2025. 10. 1. 11:47

1. 개발환경 설정

2025.04.01 - [벡/Spring] - 1. 프로젝트 환경설정

 

1. 프로젝트 환경설정

1. 프로젝트 생성1. 사전자바 17버전https://docs.aws.amazon.com/corretto/latest/corretto-17-ug/downloads-list.html Downloads for Amazon Corretto 17 - Amazon Corretto 17Thanks for letting us know this page needs work. We're sorry we let you down.

marin-1104.tistory.com

 

 

 

 

2. 스프링 부트 애플리케이션 구현 맛보기

  1. 프로젝트 생성: https://start.spring.io/
  2. 스프링 스타터 프로젝트 생성
  3. 프로젝트 이름과 패키지 설정
  4. 의존 라이브러리 설정

 

 

1. 웹페이지 작성하기

  • 웹파일 생성 ( src/main/resources/static/)
  • 웹 페이지 작성 (hello.html)
<html>
<head>
    <title>Welcom</title>
</head>
<body>
    <h1>Hello</h1>
Hello, SpringBoot.
</body>
</html>

 

 

2. 프로젝트 실행하기

 

 

 

 

 

3. [도서 쇼핑몰] 시작페이지 만들기

1. 부트스트랩 CSS 적용하기

부트스트랩이란?

  • 웹디자인을 쉽게 하기 위해 CSS 클래스 선택자와 스타일시트, 자바스크립트 플러그인을 모아놓은 강력한 프론트엔드 프레임워크입니다. 
  • 웹 프로젝트를 개발할때 가장인기있는 HTML, CSS, JS 프레임워크입니다. 
  • 데모나 프로토타입을 만들때 유용하며, 자바스크립트 액션도 라이브러리로 제공하여 사용할 수 있다. 

웹 페이지 부트스트랩 CSS 적용하기

<html>
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-QWTKZyjpPEjISv5WaRU90FeRpok6YctYmDr5PnlYt2bRjX0MJhjY6hW+ALEwIH" 
          crossorigin="anonymous">
</head>
<body>
<div class="container py-4">

    <header class="pb-3 mb-4 border-bottom">
        <a href="/welcome.html" class="d-flex align-items-center text-body-emphasis text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                 fill="currentColor" class="bi bi-book-half me-2" viewBox="0 0 16 16">
                <path d="M8.5 2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.983v9.223c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492M8.783 2.015c.936-.587 2.187-.94 3.423-1.014 1.53-.093 3.042.672 3.994 1.105a5.5 5.5 0 0 0 2.5 11a.5.5 0 0 0 .707.455c.882-.342 1.74-.881 2.68-1.409 1.42-.953 2.933-1.877 3.738-2.5.78-.633.79-1.814-.019-3.222-.877-1.378-1.39-2.862-2.681-1.02a.5.5 0 0 0 .5-.5V3.5c0-.933-.455-.952-.433-1.28-.5-2.8-.5-3.0 1.105.610 413.809.985.936 8 1.783z"/>
            </svg>
            <span class="fs-4">BookMarket</span>
        </a>
    </header>

    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold">도서 쇼핑몰에 오신 것을 환영합니다</h1>
            <p class="col-md-8 fs-4">BookMarket</p>
        </div>
    </div>

    <div class="row align-items-md-stretch text-center">
        <div class="col-md-12">
            <div class="h-100 p-5">
                <h2>Welcome to Web Market!</h2>
            </div>
        </div>
    </div>

    <footer class="pt-3 mt-4 text-body-secondary border-top">
        <span class="text-body-secondary">&copy; BookMarket</span>
    </footer>

</div>
</body>
</html>

 

 

 

 

 

 

 


연습문제

01. 개발 환경에 필요하지 않은 것?

  • 정답: 웹 서버: 아파치 톰캣
  • 이유: 스프링 부트는 이미 내장 톰캣을 제공하므로 별도로 설정할 필요 없음.

 

02. Gradle과 Maven에 대해 옳지 않은 것?

  • 정답: Gradle은 멀티 프로젝트 전환이지만 Maven은 적합하지 않다.
  • 이유: Maven도 멀티 프로젝트를 지원하므로 틀린 설명임.

 

 

 


출처 : 송미영, 『 스프링부트 완전정복: 개념부터 실정 프로젝트까지 』길벗캠퍼스 (2024).