๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
โœ’๏ธ Database & DBMS/MySQL

[MySQL & Spring Boot] ํšŒ์› ํ”„๋กœ์ ํŠธ _2~5) ์„œ๋ฒ„ ํฌํŠธ๋ฒˆํ˜ธ ์ง€์ • ~ ํšŒ์›๊ฐ€์ž… ๋กœ์ง ๊ตฌํ˜„

by A Lim Han 2024. 5. 26.

๐Ÿ’™ ํšŒ์› ํ”„๋กœ์ ํŠธ _2~5) ์„œ๋ฒ„ ํฌํŠธ๋ฒˆํ˜ธ ์ง€์ •๋ถ€ํ„ฐ ํšŒ์›๊ฐ€์ž… ๋กœ์ง ๊ตฌํ˜„๊นŒ์ง€

โ€ป ๋ณธ ํ”„๋กœ์ ํŠธ์™€ ๊ด€๋ จ๋œ ์ œ ๋ชจ๋“  ๊ฒŒ์‹œ๋ฌผ์€ ์ œ ๊ฐœ์ธ ๊ณต๋ถ€ ๊ธฐ๋ก ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ, ์ž๋ฃŒ ์ถœ์ฒ˜๋Š” '์ฝ”๋”ฉ๋ ˆ์‹œํ”ผ'๋‹˜์˜ [์Šคํ”„๋ง๋ถ€ํŠธ ํšŒ์› ํ”„๋กœ์ ํŠธ] ์ž…๋‹ˆ๋‹ค!

 

-->  https://www.youtube.com/watch?v=RhM1bQ76Tv0&list=PLV9zd3otBRt5ANIjawvd-el3QU594wyx7

 


 

1. application.yml ํŒŒ์ผ์—์„œ ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„ ํฌํŠธ๋ฒˆํ˜ธ ์ง€์ •

server:
  port: 8081

2. HomeController.java ํŒŒ์ผ์—์„œ ๊ธฐ๋ณธ ํŽ˜์ด์ง€ ์š”์ฒญ ๋ฉ”์„œ๋“œ ๊ตฌํ˜„

package com.codingrecipe.member.controller;

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

@Controller
public class HomeController {
    // ๊ธฐ๋ณธ ํŽ˜์ด์ง€ ์š”์ฒญํ•˜๋Š” ๋ฉ”์„œ๋“œ ๊ตฌํ˜„
    // Line 10์—์„œ ํ˜ธ์ถœ์ด ์˜ค๋ฉด Line 11์˜ ๋‚ด์šฉ์ด ๋ธŒ๋ผ์šฐ์ €์— ๋„์›Œ์ง„๋‹ค
    @GetMapping("/")
    public String index() {
        return "index";
    } // templates ํด๋”์˜ index.html ์„ ์ฐพ์•„๊ฐ€๋Š” ์ฝ”๋“œ
}

 

3. index.html ํŒŒ์ผ ์ƒ์„ฑ ํ›„ ๊ธฐ๋ณธ ์ฝ”๋“œ ์ž‘์„ฑ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
  <h2>Hello Spring Boot!!</h2>
</body>
</html>

4. MemberApplication.java ํŒŒ์ผ ์‹คํ–‰

package com.codingrecipe.member;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MemberApplication {

	public static void main(String[] args) {
		SpringApplication.run(MemberApplication.class, args);
	}

}

 

์ขŒ โžก๏ธ ์šฐ ๋กœ ์‹คํ–‰

5. MemberController.java ํŒŒ์ผ ์ƒ์„ฑ

package com.codingrecipe.member.controller;

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

@Controller
public class MemberController {

    // ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ์ถœ๋ ฅ ์š”์ฒญ
    @GetMapping("/member/save")
    public String saveForm() {
        return "save";
    }
}

6. save.html ์ƒ์„ฑ

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>save</title>
    <!-- jquery cdn -->
    <script
            src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
            crossorigin="anonymous"></script>
</head>
<body>
<!-- action์†์„ฑ: form์— ์ž‘์„ฑํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋””๋กœ ๋ณด๋‚ผ์ง€ ์ง€์ •ํ•˜๋Š” ์—ญํ•  ์ˆ˜ํ–‰ -->
<form action="/member/save" method="post"> <!-- ์ „๋‹ฌ๋˜๋Š” ๋‚ด์šฉ์ด ๋ณด์ด์ง€ ์•Š๊ฒŒ post ๋ฉ”์„œ๋“œ ์‚ฌ์šฉ -->
    <!-- name์†์„ฑ: ์„œ๋ฒ„๋กœ ์ „์†กํ•  ๋•Œ ๋ณ€์ˆ˜์ด๋ฆ„์˜ ์—ญํ• ์„ ์ˆ˜ํ–‰ -->
    ์ด๋ฉ”์ผ: <input type="text" name="memberEmail" id="memberEmail" onblur="emailCheck()"> <br>
    <p id="check-result"></p>
    ๋น„๋ฐ€๋ฒˆํ˜ธ: <input type="password" name="memberPassword"> <br>
    ์ด๋ฆ„: <input type="text" name="memberName"> <br>
    <input type="submit" value="ํšŒ์›๊ฐ€์ž…">

</form>
</body>
</html>