★KDT 2024-03-26☆SpringBoot-Maven-Model, 바인딩, textContent()

Model

---

@GetMapping("")//=> http://127.0.0.1/html5
public String html5(Model model){
    model.addAttribute("left",dir+"left");
    model.addAttribute("center",dir+"center");
    return "main";//view 페이지, main.html 페이지로 이동
}//end of html5

 

 Model인터페이스가 jsp/servlet의 HttpRequest랑 비슷한 역할을 한다

• Model 인터페이스는 스프링 MVC에서 사용되며 JSP/Servlet의 HttpServletRequest와 유사한 역할을 합니다.
• Model 인터페이스는 컨트롤러 메소드에서 뷰로 데이터를 전달하는 데 사용됩니다. 메소드 내에서 model.addAttribute() 메소드를 사용하여 데이터를 추가하고, 이 데이터는 뷰에서 사용할 수 있습니다.
• HttpServletRequest는 HTTP 요청에 대한 정보를 제공하는 반면, Model은 뷰에 전달될 데이터를 관리합니다. 따라서 Model을 사용하여 컨트롤러와 뷰 간에 데이터를 전달할 수 있습니다.
• 따라서 예제 코드에서 html5() 메소드는 Model 객체를 매개변수로 받아서 해당 모델에 "left"와 "center"라는 속성을 추가하고 있습니다. 이러한 속성은 "main" 뷰로 전달되어 해당 뷰에서 사용될 수 있습니다.

 

.textContent

---

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const ht1 = document.querySelector('#ht1').textContent;

    });//전체 함수 끝
</script>

<h1>html5 ch1문서</h1>


<h2 th:text="${testText}"></h2>
<h2 id="ht1">testText1</h2>
<h2 id="ht2">testText2</h2>
<h2 id="ht3">테스트3</h2>

 

.textContent는 DOM 요소의 텍스트 콘텐츠를 나타내는 속성입니다.

JavaScript에서 DOM 요소를 조작할 때, 요소의 텍스트 내용을 읽거나 변경해야 할 때 유용하게 사용됩니다. .textContent 속성은 해당 요소에 포함된 모든 텍스트를 가져옵니다.

예를 들어, 주어진 HTML에서 id가 "ht1"인 요소에 대한 .textContent를 가져오는 코드는 다음과 같습니다.

const ht1 = document.querySelector('#ht1').textContent;

 

여기서 document.querySelector('#ht1')은 HTML에서 id가 "ht1"인 요소를 선택하고, .textContent는 해당 요소의 텍스트 내용을 가져옵니다. 이것은 "testText1"이 될 것입니다.

즉, 위의 코드는 HTML에서 id가 "ht1"인 요소의 텍스트 콘텐츠인 "testText1"을 ht1 변수에 할당합니다.

 

let ht3 = document.querySelector('#ht3')

ht3.textContent = ht1;

 

id가 "ht3"인 요소를 선택하고, 텍스트 내용을 "ht1"의 텍스트로 넣어줍니다.

 

결과화면을 보시면 테스트3에서 testText1로 변경됨을 알 수 있습니다.

---

컨트롤러에서 값 넘겨주기

public String ch1(Model model){

    String testText = "테스트1";

    model.addAttribute("testText",testText);
    model.addAttribute("left",dir+"left");
    model.addAttribute("center",dir+"ch1");
    return "main";
}//end of ch1

 

model객체에 "테스트1"이 담긴 "testText"를 담아서 main으로 이동한다.

main에서는 위에 3개의 값들을 받아 아래와 같이 출력된다.

 

h2요소의 맨 첫번재 요소를보면 타임리프 타입으로 컨트롤러에서 넘겨받은 "testText"를 받아서 출력하고있다.

<h1>html5 ch1문서</h1>


<h2 th:text="${testText}"></h2>
<h2 id="ht1">testText1</h2>
<h2 id="ht2">testText2</h2>
<h2 id="ht3">테스트3</h2>

 

바인딩

---

스프링 부트는 요청 파라미터를 자동으로 메서드의 매개변수로 바인딩합니다.

<h2>css3 ch2문서</h2>
<hr>
<form action="/loginTest" method="post">
    <label>아이디<input type="text" name="id"/></label>
    <label>비밀번호 <input type="password" name="password"/></label>
    <h2><input type="submit" value="로그인"/></h2>
</form>

 

HTML 폼에서 사용자가 입력한 값들은 id와 password라는 이름의 파라미터로 전송됩니다. 이 파라미터들은 스프링 부트의 컨트롤러 메서드의 매개변수로 전달됩니다.

 

@PostMapping("/loginTest")
public String loginTest(String id, String password, Model model) {
    System.out.println("id= " + id + ", password= " + password);

    model.addAttribute("id", id);
    model.addAttribute("password", password);
    model.addAttribute("left", "css3/left");
    model.addAttribute("center", "css3/ch3");
    return "main";
}

 

여기서 @PostMapping("/loginTest") 어노테이션이 붙은 메서드 loginTest는 /loginTest 경로로 POST 요청이 올 때 실행됩니다.

 

컨트롤러의 메서드 시그니처에서 String id와 String password를 매개변수로 사용함으로써, 스프링은 요청에서 해당 파라미터들을 추출하고 메서드에 전달합니다.

 

 

 

따라서, 사용자가 폼에 입력한 아이디와 비밀번호는 컨트롤러의 loginTest 메서드의 매개변수인 id와 password로 전달되어 이를 이용하여 로직을 처리하게 됩니다.

---

여유가 되신다면 제 GitHub에 오셔서 좋은 코드들을 구경해주세요!

 

https://github.com/gimpo5975?tab=repositories

gimpo5975 - Overview