실무에서 api를 다루면서 get방식일때는 body값 전달이 안되는 걸로 알고 있었지만 curl로 호출시에는 get방식일때도 body값 전달이 가능하다는 것을 알았다.

http api 호출시와 curl 호출시의 차이점이 있어 정리하게 되었다.

 

1.GET 

브라우저 기반 HTTP 클라이언트에서는 GET body를 지원하지 않지 않아 JSP 에서 GET 방식으로 호출시 body값에 정보를 보낼 수 없다. body에 정보를 담아서 보내고 싶으면 POST 방식을 사용해야한다.

하지만 curl은 브라우저가 아니다. HTTP 요청을 거의 있는 그대로 보내기때문에 GET방식이여도 body값에 정보를 보낼 수 있다.

 

 

2.PATCH

curl에서는 호출 가능하지만, JSP에서 HttpURLConnection은 왜 PATCH 사용이 불가하다.

HttpURLConnection 은 오래된 JDK 표준 클래스고, 초기 설계 당시엔 PATCH가 표준 메소드가 아니었음.

그래서 내부적으로 GET, POST, PUT, DELETE, HEAD, OPTIONS, TRACE 만 지원한다.

 

HttpURLConnection conn =
    (HttpURLConnection) url.openConnection();

conn.setRequestMethod("PATCH"); // ❌

 

 

JSP 페이지는 서버에서 HTML 코드를 생성해 브라우저로 전달하고,
브라우저는 그 HTML 문서를 기반으로 document 객체를 만들어 자바스크립트로 조작할 수 있다.
이때 DOM(Document Object Model)에 접근할 때 자주 사용하는 속성이 .value와 .innerHTML이다.

어떤 값을 가져오냐에 따라 사용하는 게 달라 정리하고자 한다.

 


1. .value — 입력 요소의 값을 가져올때 사용

value는 주로 **입력 요소(form element)**에서 사용된다.
<input>, <textarea>, <select>와 같은 태그의 값을 가져오거나 변경할 때 쓰고,

.getElementById() 의 값을 가져올때 쓴다.

<input type="text" id="userName" value="홍길동"> 

<script> 
let name = document.getElementById("userName").value;
console.log(name); // "홍길동" 

// 값 변경 
document.getElementById("userName").value = "김철수"; 
</script>

 

2. .innerHTML — HTML 태그 안의 내용을 가져올때 사용

innerHTML은 <div>, <span>, <p> 등 일반 컨테이너 태그 내부의 내용을 가져오거나 변경할 때 쓴다.
태그 안에 들어있는 텍스트뿐 아니라 HTML 태그 구조 자체도 함께 다룰 수 있다.

<div id="greeting">안녕하세요</div> 
<script> 
let text = document.getElementById("greeting").innerHTML;
console.log(text); // "안녕하세요"

// 내용 변경 
document.getElementById("greeting").innerHTML = "<b>반갑습니다</b>";
</script>

 

 

** <input>에서는 사용 불가

input 태그는 닫는 태그 없이 속성으로 값이 지정되기 때문에

<input> 태그에 innerHTML을 사용하면 아무 값도 나오지 않는다.

<input type="text" id="test" value="1234">
<script>
console.log(document.getElementById("test").innerHTML); // 아무 것도 안 나옴 
console.log(document.getElementById("test").value); // 1234
</script>

 

 

 

- 정리표

.value <input>, <textarea>, <select> 입력값 읽기/쓰기 document.getElementById("id").value
.innerHTML <div>, <span>, <p> 등 태그 내부의 HTML 읽기/쓰기 document.getElementById("id").innerHTML
.textContent <div>, <span> 등 순수 텍스트만 읽기/쓰기 document.getElementById("id").textContent

 

생성자 장점

 

1.중복 호출 제거

생성자가 없던 시절에는 생성 직후에 어떤 작업을 수행하기 위해 메서드를 직접 한번 더 호출해야 했다.

생성자 덕분에 객체를 생성하면서 동시에 생성 직후에 필요한 작업을 한번에 처리할 수 있게 되었다.

//생성자 등장 전
MemberInit member = new MemberInit();
member.initMember("user1", 12, 80);

//생성자 등장 후
MemberConstruct member = new MemberConstruct("user1", 12, 70);

 

2.생성자 호출 필수

만약 member.initMember() 호출 하지 않을 경우 따로 오류가 발생하지는 않는다.

그저 member에 빈값이 들어간 채로 존재하게 된다. 결국 유령 회원이 등장하게 된다.

 

만약에 이 값들을 필수로 반드시 입력해야 한다면, 시스템에 큰 문제가 발생할 수 있다.

 

생성자의 진짜 장점은 객체를 생성할 때 직접 정의한 생성자가 있다면 직접 정의한 생성자를 반드시 호출 *해야 한다

참고로 생성자를 메서드 오버로딩 처럼 여러개 정의할 수 있는데, 이 경우에는 하나만 호출하면 된다

 

java 클래스의 경우 다음 생성자를 직접 정의했기 때문에 직접 정의한 생성자를 반드시 호출해야 한다 MemberConstruct(String name, int age, int grade) {...}  이렇게 직접 정의한 생성자를 호출하지 않으면 컴파일 오류가 발생한다.

 

java MemberConstruct member3 = new MemberConstruct(); //컴파일 오류 발생
member3.name = "user1";

//컴파일 오류 메시지
no suitable constructor found for MemberConstruct(no arguments) ```

 

컴파일 오류는 IDE에서 즉시 확인할 수 있는 좋은 오류이다.

이 경우 개발자는 객체를 생성할 때, 직접 정의한 생성자를 필수로 호출해야 한다는 것을 바로 알 수 있어 오류를 빠르게 찾을 수 있다.

 

생성자를 사용하는 경우 필수값 입력을 보장할 수 있으니깐, 아무 정보가 없는 유령 회원이 시스템 내 부에 존재할 수 없게 된다.

 

 

*** 이번 강의에서 좋은 프로그램은 무한한 자유도가 주어지는 프로그램이 아니라 적절한 제약이 있는 프로그램이라는걸 다시 한 번 배웠다.

JSP에서 ${} 값은 어디서 오는가? (Spring MVC 구조 완전정리)

Spring 기반 웹 프로젝트를 하다 보면 JSP에서 ${}로 데이터를 출력하는 경우가 많다.
하지만 이 ${} 값이 어디서 오는지, 또 DB를 수정하지 않고 화면에서만 바꾸는 방법이 궁금할 때가 있다.
이 글에서는 그 과정을 단계별로 정리한다.


1. Spring MVC 구조 복습

Spring MVC는 기본적으로 다음과 같은 흐름으로 작동한다.

 
[브라우저 요청] -> [Controller] -> [Model + View(JSP/HTML)] ↓--> [브라우저 응답]
  • Controller : 요청을 받고 어떤 View를 보여줄지 결정한다.
  • Model : View로 전달할 데이터를 담는 객체 (model.addAttribute("key", value))
  • View (JSP) : Controller에서 전달받은 데이터를 출력한다.

즉, JSP에서 ${}로 접근 가능한 값은 대부분 Controller가 Model에 담아서 전달한 데이터이다.


2. JSP에서 ${}로 접근 가능한 데이터

JSP에서 ${}로 접근할 수 있는 데이터의 종류는 다음과 같다.

구분설명
Model 데이터 Controller에서 model.addAttribute("name", value)로 전달한 데이터
Session 데이터 session.setAttribute("name", value)로 저장된 세션 데이터

결국 ${}는 **서버에서 이미 준비된 데이터(읽기 전용)**를 JSP가 출력하는 구조이다.


3. include된 JSP의 ${}는 어디서 오는가

<jsp:include>로 포함된 JSP는 별도의 Controller를 타지 않는다.
자신을 include한 JSP가 렌더링될 때 전달된 Controller의 Model 데이터를 그대로 공유한다.

즉, include된 JSP는 새로운 Controller를 호출하지 않고,
현재 View에 전달된 Model 데이터를 그대로 사용한다.


4. Controller 추적 방법

include된 JSP가 어떤 Controller의 데이터를 사용하는지 확인하려면 다음 두 단계를 거치면 된다.

  1. Controller 반환값 확인
    • JSP는 직접 실행되지 않는다.
    • Controller가 return "samplePage";와 같이 JSP 이름을 리턴해야 렌더링이 시작된다.
    • 즉, JSP 파일명과 동일한 이름을 리턴하는 Controller를 찾는다.
  2. Model 데이터 추적
    • JSP에서 ${id}를 사용한다면,
      Controller 내에서 model.addAttribute("id", ...)가 선언된 부분을 찾으면 된다.

5. JSP에서 ${} 값 변경하기 (DB 반영 없이 화면만 수정)

실무에서는 DB 수정이 어렵거나 권한이 없는 경우, 단순히 화면에 보이는 값만 변경해야 할 때가 있다.
이 경우 JSP에서 출력되는 ${} 값을 JavaScript로 변경할 수 있다.

 

 
//예시
<c:forEach var="a" items="${list}" varStatus="st">
	<p id="b${st.index}">${a.b}</p>
</c:forEach>

//${a.b} 값 변경 코드
<script>
document.getElementById("b2").innerText = "변경된 값";
</script>

 

**주의할 점

<script>가 반드시 forEach 이후에 위치해야 한다는 것이다.
그 이유는 forEach가 아직 DOM에 렌더링되기 전에 JavaScript가 실행되면 요소를 찾을 수 없기 때문이다.


6. 정리

  • ${}는 JSP에서 EL(Expression Language)로, Model이나 Session 데이터를 출력하기 위한 문법이다.
  • include된 JSP는 별도의 Controller를 타지 않고, include한 JSP의 Model 데이터를 공유한다.
  • 화면에서만 값을 바꾸고 싶다면 JavaScript를 사용하면 되며, 이는 DB에는 영향을 주지 않는다.

 

+ Recent posts