웹 페이지 만들기 - 기본 세팅

Pr_C1oser·2024년 4월 6일
1
  • 뭐든 일단 그냥 막 해보자.
    막히면 그 때의 내가 하겠지 뭐ㅋ

    제작 이유 : 복습 및 기록 (1도 기억 안나서)


인텔리제이로 웹 페이지 제작

https://start.spring.io/
위 링크에서 파일을 만들자.
편하다.

Lombok, Spring Web 추가 후 프로젝트 생성(GENERATE)

build.gradle파일의 dependencies에 아래 내용 추가

  • implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

완성된 build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.2.4'
	id 'io.spring.dependency-management' version '1.1.4'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
	useJUnitPlatform()
}

작성 후 gradle 꼭 적용하시고~

이거 좀 중요하다.
위 내용 추가 안하면 컨트롤러 코드 작성시 번거로운 작업을 해야 함.
templates에 html을 넣으면 안됨, static폴더에 html을 넣고 코드에도 확장자를 써야하는 엄청 귀찮을 일을 경험할 것임.
적어도 현재의 나는 그랬음.
사이트에서 처음에 프로젝트 생성시 뭘 넣으면 되는데 기억이 안남...

application파일의 확장자를 yml로 수정

  • application.yml

yml 작성

메인 페이지 코드 작성

package demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MainController {
    @GetMapping("/")
    public String MainPage() {
        return "Main";
    }
}

html 대충 작성, 귀찮으니까 스타일도 대충 때려넣기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 페이지</title>
    <style>
        /* CSS 스타일 시트 */
        body {
            font-family: Arial, sans-serif;
        }

        nav {
            background-color: #F2F2F2;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex; /* 가로로 나열하기 */
        }

        nav li {
            margin-right: 20px;
        }

        nav a {
            text-decoration: none;
            color: pink;
            font-weight: bold;
        }
    </style>
</head>
<body>
<header>
    <h1>환영합니다!</h1>
    <nav>
        <ul>
            <li><a href="/"></a></li>
            <li><a href="#">서비스</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">문의</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>우리의 서비스</h2>
        <p>우리는 최고의 서비스를 제공합니다.</p>
    </section>

    <section>
        <h2>우리의 이야기</h2>
        <p>우리는 XXXX년부터 사람들에게 최고의 경험을 제공해 왔습니다.</p>
    </section>
</main>

<footer>
    <p>© 2024 메인 페이지</p>
</footer>
</body>
</html>

이제 xampp 실행하고 프로젝트 실행 후 localhost:8080으로 가면 성공

캡처를 대충했지만 뭐 잘 알아보겠지


이걸로 가장 기본적인 세팅은 끝이다.
(참고로 db는 아직 연결 안함)

profile
g2jkj0274@gmail.com

0개의 댓글