** 📌JavaScript 심화 **

실전 웹 서비스에 반드시 필요한 JS 핵심 3요소:

🎯 이벤트 처리 + 🎨 DOM 조작 + 🌐 Ajax 통신

완전 정리 + 실무 예시 + 면접 대비 포함

---

🧩 목차

1. 핵심 기술 3요소 개요
2. 이벤트 처리란?
3. DOM 조작이란?
4. Ajax 통신이란?
5. 실전 예제: 댓글 입력 → 서버 전송
6. 면접 대비 핵심 요약
7. 마무리 요약 + Notion 작성 팁

---

✅ 1. 핵심 기술 3요소 개요

기술	설명	주요 메서드
🖱 이벤트 처리	사용자 동작에 반응 (click, input 등)	.addEventListener()
🏗 DOM 조작	HTML 요소 생성/수정/삭제	.getElementById(), .innerHTML, .appendChild()
🌐 Ajax	서버와 페이지 새로고침 없이 데이터 주고받기	XMLHttpRequest, fetch()

---

✅ 2. 이벤트 처리란?

항목	설명
정의	버튼 클릭, 입력 등 사용자 행동에 반응하는 로직
사용 목적	사용자 인터페이스(UI) 반응 처리
주요 이벤트	click, input, submit, keydown 등

📌 예시

<button id="btn">눌러보세요</button>

<script>
document.getElementById("btn").addEventListener("click", function() {
  alert("버튼 클릭됨!");
});
</script>

---

✅ 3. DOM 조작이란?

항목	설명
정의	JS로 HTML 요소를 선택하거나 변경하는 행위
사용 목적	동적으로 요소 추가/삭제/수정 가능
관련 API	getElementById(), querySelector(), createElement(), innerHTML, value 등

📌 예시

<div id="output"></div>

<script>
document.getElementById("output").innerHTML = "<strong>변경된 텍스트!</strong>";

---

✅ 4. Ajax 통신이란?

항목	설명
정의	웹 페이지 전체 새로고침 없이 서버와 데이터 주고받는 기술
기술	XMLHttpRequest, fetch(), jQuery.ajax() 등
사용 예	댓글 등록, 검색 자동완성, 좋아요 처리 등

---

📌 fetch()를 사용한 Ajax 예제

fetch("server.jsp", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "content=댓글내용"
})
.then(response => response.text())
.then(result => {
  console.log("서버 응답:", result);
});

---

✅ 5. 실전 예제: 댓글 입력 → Ajax 서버 전송

---

📄 comment.jsp

<input type="text" id="comment" />
<button id="sendBtn">댓글 등록</button>

<ul id="commentList"></ul>

<script>
document.getElementById("sendBtn").addEventListener("click", function() {
  const content = document.getElementById("comment").value;

  fetch("saveComment.jsp", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: "content=" + encodeURIComponent(content)
  })
  .then(response => response.text())
  .then(result => {
    const li = document.createElement("li");
    li.innerText = content;
    document.getElementById("commentList").appendChild(li);
    document.getElementById("comment").value = "";
  });
});
</script>

---

📄 saveComment.jsp (서버 저장 처리)

<%@ page import="java.sql.*" %>
<%
  String content = request.getParameter("content");

  Connection conn = DB.getConnection();
  String sql = "INSERT INTO comments(content) VALUES(?)";
  PreparedStatement ps = conn.prepareStatement(sql);
  ps.setString(1, content);
  ps.executeUpdate();
  conn.close();

  out.print("success");
%>

---

✅ 6. 기술 면접 대비 핵심 요약 💬

질문	요점 정리
이벤트란?	사용자의 행동(클릭, 입력 등)에 JS가 반응하는 구조
DOM 조작이란?	JS로 HTML 요소를 제어하는 기술
Ajax란?	페이지 새로고침 없이 서버와 데이터 주고받는 기술
fetch() 장점은?	간결하고 Promise 기반으로 비동기 처리 편리함

---

✅ 7. 마무리 요약 🧠

• 🖱 이벤트 처리는 사용자와의 인터페이스 핵심
• 🏗 DOM 조작은 동적 UI 생성 및 반응을 담당
• 🌐 Ajax 통신은 서버와 빠르게 데이터 교환하는 핵심 기술
• ✅ 3가지 기술은 서로 연결해서 사용됨 (ex. 댓글 시스템)