[내배캠 4일차] jQuery와 자바스크립트 / 자바 스크립트를 쓸 때 알아둬야 할 개념들

미니 프로젝트에서 만들었던 방명록!!!!

인데 수정을 좀 하고싶었다.
수정 버튼을 누르면 prompt에서 고쳐지도록 했었는데 원래 썻던 내용이 적혀있지않아서 작성내용의 일부만 고치고싶을때는 번거로웠따..

그래서 수정버튼을 눌렀을때 그 안의 내용을 담아오기!!!!

let entryHtml = `
  <div class="guestbook-entry" data-id="${doc.id}" data-password="${data.password}">
    <span class="nickname">${data.nickname}</span>:<span class="message">${data.message}</span> 
      <span class="edit-delete-icons">
        <span class="edit-icon" style="cursor: pointer; margin-left: 10px;">✏️</span>
        <span class="delete-icon" style="cursor: pointer; margin-left: 10px;">❌</span>
    </span>
  </div>
`;

이게 방명록으로 생성되는 html 객체다!

아래는 기존의 수정 함수였다

        $(document).on("click", ".edit-icon", function () {
            let entry = $(this).closest(".guestbook-entry"); // 해당 div 찾기
            let password = entry.data("password"); // 숨겨진 비밀번호 가져오기
            let userPassword = prompt("비밀번호를 입력해주세요:");

            // 비밀번호 검증
            if (String(password) === userPassword.trim()) { //맞당ㅆ음
                let newMessage = prompt("수정할 내용을 입력하세요:");
                if (newMessage !== null) {
                    // Firestore에서 해당 문서 수정하기
                    let docId = $(this).closest('.guestbook-entry').data("id"); // 이곳에서 문서 ID를 가져옵니다.
                    let docRef = doc(db, "IPv4-guestbook", docId);
                    updateDoc(docRef, {
                        message: newMessage
                    }).then(() => {
                        alert("수정되었습니다!");
                        location.reload();  // 또는 해당 부분만 업데이트하는 방식으로 수정 가능합니다.
                    }).catch((error) => {
                        alert("수정에 실패했습니다.");
                        console.error("Error updating document: ", error);
                    });
                }
            } else {
                alert("비밀번호가 틀렸습니다." + userPassword);
            }
        });

처음 기능을 만들었을땐 기능이 나와야한다는 것에만 급급?해서 긁어오기 위주였다. 해보고 되면 되네! 하고 끝.
오늘은 제이쿼리 함수에 대해서 좀 알아볼까 한다.

먼저 제일 중요한 첫줄

        $(document).on("click", ".edit-icon", function () {
            let entry = $(this).closest(".guestbook-entry"); // 해당 div 찾기

".edit-icon" 클래스를 가진 객체를 "클릭" 햇을 때 함수가 작동한다.
여기서 받아오는 entry는
이 edit-icon이 속한 guestbook-entry 전부이다.

그럼 받아온 entry안에 message라는 클래스를 찾고 거기 html요소를 출력하면되겠지ㅏ?!?!?!??!?!

---

JavaScript/jQuery로 html 요소접근하기

jQuery로 접근

$(document).on("click", ".edit-icon", function () {
    let entry = $(this).closest(".guestbook-entry"); // 클릭된 아이콘의 부모 div
    let messageText = entry.find(".message").html(); // message 클래스의 HTML 가져오기
    console.log(messageText);
});

entry = JQuery 객체 << (find 함수로 객체 하위 요소들을 찾을 수 있음)
-> 실제로 엔트리만 받아오고 console로 찍어보면 Object객체로 뭔가 많이 포함되어있음. . .(안에 find 함수도잇따)

.message = css에서나오지만 클래스를 명시할떈 앞에 . 붙임

.html() : 요소 안의 html "내용"을 가져오는거임!! (html 요소 그대로 출력 o)
.text() : 요소 안의 text "내용"만 가지고옴 (텍스트 내용만 가져옴)

html() vs text()

<div class="example">안녕 <b>나</b></div>

만약 이런 파일을 출력한다고 치면 html과 text는 각가 아래와같이 출력하게된다.

let htmlContent = $(".example").html(); // "안녕 <b>나</b>"
let textContent = $(".example").text(); // "안녕 나"

JavaScript

document.addEventListener("click", function (event) {
    if (event.target.classList.contains("edit-icon")) {
        let entry = event.target.closest(".guestbook-entry"); // 클릭된 아이콘의 가장 가까운 부모 div
        let messageElement = entry.querySelector(".message"); // message 클래스를 가진 요소 찾기
        console.log(messageElement.innerHTML);
    }
});

JavaScript/jQuery 비교

비교 항목	jQuery	JavaScript(Vanilla)
문법	짧고 간결해서 직관적인 코드 작성 가능	jQuery보다는 길고 복잡함
호환성	모든 브라우저에서 일관된 동작 보장	브라우저별로 코드 차이가 날 수 있음
DOM 조작	$()로 선택과 조작이 가능	document.querySelector 혹은 document.getElement~() 사용
특수 기능?	fadeIn(), SlideUp() 같은 메서드 제공	CSS 애니메이션 or JS로 직접 구현
Ajax	.ajax() 메서드로 요청 가능	fetch() 또는 XMLHttpRequest 사용해야 함
성능	무거운 라이브러리 (속도 비교적 느림)	순수 속도는 더 빠르다
파일 크기	jQuery 라이브러리를 추가해야 함	추가 라이브러리 없이 사용 가능

뭐 그렇다고한다
표로 정리해보면 jQuery용 시크릿 쥬쥬마술봉 표를 보는거같은데
실제로 jQuery보다는 여러가지 프레임워크를 제공하는 JavaScript 쪽이 요새는 많이 이용된다고 한다.!!

📌 바닐라 자바스크립트 (Vanilla JavaScript)

아무런 프레임워크나 라이브러리(jQuery, React, Vue 등)를 사용하지 않은 순수한 자바스크립트

그냥 자바스크립트 자체를 그렇게 부른다.
이제 이 자바스크립트에서 Vue.js , React.js, Node.js ,Next.js 어쩌고.js 엄청 많은 프레임워크들이 요새는 많이 사용되는 것 같다.. (채용시장 잡디보면 엄청 기재 많이 되어잇음 ㅜㅛ ㅜ)

결론

✅ 바닐라 자바스크립트(📌 Vanilla JS) = 그냥 "순수한 자바스크립트"
✅ "바닐라로 만들었다" = React, Vue 없이 순수 JS로 UI 구현했다는 뜻!
✅ 간단한 프로젝트에는 바닐라 JS가 가볍고 빠르다

그뒤론 아직까지 발표영상이랑 발표자료를 제작중이다..

다했다
다시 공부를 하겟따

---

JavaScript 특징

JavaScript의 특징

1️⃣ 동적(인터프리터) 언어

• 컴파일 없이 실행(런타임에 해석됨)
• 코드 변경 후 즉시 반영 가능
  .

2️⃣ 멀티 패러다임 지원

• 객체 지향 프로그래밍(OOP)
• 함수형 프로그래밍(Functional)
• 📌프로토타입 기반
  .

3️⃣ 비동기 처리 지원 (이벤트 기반, 📌Non-blocking I/O)

• setTimeout, setInterval, Promise, 📌async/await 지원
• 싱글 스레드지만, 이벤트 루프를 통해 비동기 작업 처리 가능
  .

4️⃣ 동적 타입(Dynamically Typed)

• 변수 선언 시 타입 지정 불필요 (let x = 10; x = "hello"; // 가능)
• 타입이 유연하지만, 버그 발생 가능성이 있음 (== vs === 비교 주의)
  .

5️⃣ 자동 형 변환(Type Coercion)

• 자동 변환 때문에 예상치 못한 결과가 나올 수 있음.
• ===(엄격한 비교) 사용 권장.
  .

6️⃣ 웹과 긴밀한 연결 (DOM 조작, 이벤트 핸들링)

• HTML/CSS 조작 가능 (document.querySelector, innerHTML 등)
• 클릭, 입력 등 사용자 이벤트 처리 가능 (addEventListener)
  .
  7️⃣ 모듈 시스템 (ES6 이후 지원)
• import/export 문법으로 코드 분리 가능
• 📌CommonJS (require()) 방식도 있음 (Node.js)
  .

8️⃣ 브라우저 환경 + Node.js 실행 가능

• 브라우저에서 실행 (HTML
• 서버에서 실행 (Node.js)

---

모르는 단어랑 표현이 너무많다 ㅋㅋ 알아볼 것들은 뒤에 정리해야겠다..

📌정리

📌프로토타입

나온 위치
2️⃣ 멀티 패러다임 지원

• 객체 지향 프로그래밍(OOP)
• 함수형 프로그래밍(Functional)
• 📌프로토타입 기반

자바 스크립트는 용도에 따라서 여러 구현 방식을 적용할 수 있음.
https://youtu.be/wUgmzvExL_E?si=3PS-m3VkjtK2iqzM

function machine(){
	this.category = car;
  	this.price = 1000;
 }
 var car = new machine()

보통 오브젝트를 새로 생산할떄 이런 방법을 많이 쓰는데, 자바스크립트에서만 존재하는 특별한 기능으로 이것을 다르게 표현가능하다.
= 프로토타입

✅ 자바 스크립트에서 객체를 생성하면 알아서 .prototype 이라는 속성ㅇ이 생긴다.(프로토 타입 = 유전자 라고 생각하기)
✅ 객체.prototype.(원하는속성) = (value) << 생성되는 모든 자식에 적용됨.

왜 그럴까?
우리가 컴퓨터에게 Object에서 자료를 뽑을 때,
만약 해당 객체에 없는 속성을 뽑아내려고 한다. (위 예시에서 car.name 을 물어봤다고 치자)
해당 객체는 name이라는 속성이 없음.
하지만, 컴퓨터는 포기하지 않고 부모(유전자)한테도 물어보러감 -> 있으면 그거라도 출력하려고 함.
거기도 없으면 부모의 부모까지... 무한반복임

정리하면

✅ 오브젝트에서 자료를 뽑을 때 일어나는 일.
1. 직접 자료를 가지고 있으면 그거 출력
2. 없으면 부모 유전자 한테 물어보고 있으면 그거 출력
3. 없으면 부모의 부모 유전자 ...
4. 없으면 부모의 부모의 부모 ...

이걸 프로토 타입 체인이라고 함!!!!!!!!!!!!!!!!!

이걸 어케알아?

  var array = [2,5,12,3,1]
  array.sort()
  array.length

여기서 var인데 어케 sort를 바로쓸수잇쬬??? <<프로토 타입 체인에서 나온 거임
이거 응용으로 우리가 통상적으로 쓰는 객체(예시, Array)에 내가 원하는 함수를 prototpye에 저장해놓으면
그뒤로 나오는 모~~~든 array에 그 함수를 쓸 수 있게된다.

📌Non-blocking I/O

참고 강의 : https://youtu.be/XNGfl3sfErc?si=Kw1Oj7klHMvRtGRl
얘는 묶어서 볼 필요가 있다.

Blocking I/O와 Non-blocking I/O
Synchronous(동기), Asynchronous(비동기)

Synchronous(동기) - Blocking I/O

(실제론 4번까지 안감)

위의 그림은 동기 입출력이다.
순서대로 우리가짠
코드(Process) - fopen()
-> File 이라는 입출력 인터페이스
-> Kernel에 있는 File System(NTFS)
-> H/W으로 존재하는 SSD,HDD
-> Kernel에 있는 File System(NTFS)
-> File 이라는 입출력 인터페이스
-> return 출력

Asynchronous(비동기) - Non-Blocking I/O

비동기는 어떻게 다른가?

여기서는 멀티스레드가 나온다
OS한테 "야! 나 저거 파일 읽어야하니깐 좀 해줘! 하고 다시 돌아감" ㅋㅋ
순서대로
코드(Process) - fopen()
-> File 이라는 입출력 인터페이스
-> Kernel에 있는 File System(NTFS)
-> return 출력

OS가 언제 안바쁠지 몰라서 I/O 처리가 언제 일어날지 모른다
=>I/O Request 가 Pending됐따

📌async/await

async/await는 자바스크립트에서 비동기 코드를 더 직관적으로 작성할 수 있도록 해주는 기능이다
같이 묶여서 사용되지만 각각이 역할이 다름

😡Promise
아니 배워도배워도 긑이없네
자바스크립트는 기본적으로 단일 스레드(single-threaded) 언어라서 한 번에 하나의 작업만 수행할 수 있음.
근데 비동기 처리를 위해 자바스크립트 런타임과 브라우저가 비동기 작업을 처리하고 결과를 반환하는 "방식"임

앞에서 파일 읽기!! 하는건 ㄹㅇ H/W IO이 필요해서 커널이 하는거고 그럴 이유없으면
위에서 설명할때 커널이 하는 역할로 자바 스크립트 런타임과 브라우저가 비동기 작업을 하는 것임..

다시올아와서

✅ async와 await 차이점

async	await
함수 앞에 붙여서 비동기 함수로 만듦	async 함수 내부에서만 사용 가능
Promise를 반환함	Promise가 처리될 때까지 기다림
자동으로 Promise.resolve()로 감싸짐	Promise의 결과값을 반환

딱봐도 먼저훌렁 제출해버리는 함수인데 특수상황에 기다려야하면 await쓴다 이런 늬낌같음..ㅎ

async function fetchUserData() {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    let data = await response.json(); // JSON 변환도 기다려야 함
    console.log(data);
}

fetchUserData();

• fetch()는 Promise를 반환하므로 await으로 기다림.
• response.json()도 Promise를 반환하므로 await을 또 사용해야 함.

만약에 이런 비동기 코드를 적절하게 사용하지 않으면 .then(~).catch(~); 를 써서 작업순서를 정해줌

function fetchUserData() {
    fetch("https://jsonplaceholder.typicode.com/users/1")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
}

fetchUserData();

일케

• async/await은 동기 코드처럼 보이지만 내부적으로는 비동기적으로 동작함.
• then() 체인은 가독성이 떨어지고 콜백 중첩이 생길 수 있음.

<정리하면>
✅ async → 함수가 무조건 Promise를 반환하도록 만듦.
✅ await → Promise가 끝날 때까지 기다리고 결과값을 반환함.
✅ async/await을 사용하면 코드를 더 직관적으로 작성할 수 있음.

⚠️ 하지만 비동기 작업을 병렬로 처리해야 할 경우에는 Promise.all()을 활용하는 게 더 효율적일 수도 있음!

굿.