Computer Science/JQuery

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax)

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax)웹에서 “로그인”, “게시글 목록 불러오기”, “댓글 등록”, “검색 자동완성” 같은 기능은페이지를 새로고침하지 않고도 서버와 데이터를 주고받아야 합니다.이때 많이 쓰는 방식이 Ajax입니다.이번 글은 $.ajax()를 중심으로,GET/POST 차이, JSON 처리, 자주하는 실수까지 “깊게” 정리합니다.1. Ajax가 뭐예요?Ajax는 한 문장으로 정리하면 이렇습니다.페이지를 새로고침하지 않고 서버와 통신해서 데이터를 가져오거나(조회) 보내는(저장) 방식예를 들어, 게시글 목록을 불러올 때 전체 페이지를 다시 불러오면 느리고 불편합니다.Ajax를 쓰면 “필요한 데이터만” 받아서 화면 일부만 바꿀 ..

2026. 3. 3. 09:06

Computer Science/JQuery

[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임)

[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임)jQuery에서 가장 “실무처럼 보이는” 구간이 바로 이벤트(Event)입니다.화면에 있는 버튼을 클릭했을 때, 입력창에 글을 썼을 때, 폼을 제출했을 때처럼사용자 행동(또는 브라우저 동작)에 반응해서 코드를 실행하는 개념입니다.이번 글은 단순히 .click()만 소개하는 게 아니라,왜 on()을 많이 쓰는지, 이벤트 위임이 왜 필요한지까지 “깊게” 정리합니다.1. 이벤트(Event)란 무엇인가?이벤트는 “어떤 일이 발생했다”는 신호입니다. 예를 들면 다음이 전부 이벤트입니다.클릭: click더블클릭: dblclick키보드 입력: keydown / keyup입력값 변경: ..

2026. 3. 2. 21:10

Computer Science/JQuery

[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop)

[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop)jQuery를 배우는 이유는 딱 한 문장으로 정리됩니다.“원하는 HTML 요소를 선택하고 → 내용을 바꾸고 → 상태를 바꾸기 위해서”입니다.이번 편은 그중에서도 가장 많이 쓰는 DOM 조작을 깊게 정리합니다.특히 처음에 많이 헷갈리는 text() vs html(), attr() vs prop() 차이를 확실히 잡고 갑니다.1. DOM 조작이 뭐예요?DOM 조작은 쉽게 말하면 화면에 있는 HTML 요소의 “내용/속성/스타일/상태”를 바꾸는 것입니다.예를 들어 아래는 전부 DOM 조작입니다.글자 내용 바꾸기 (text, html)input 값 넣기/읽기 (val)이미지 src 바꾸기 (attr)체크박스 ..

2026. 3. 2. 17:29

Computer Science/JQuery

[jQuery] 02. 선택자(Selector) 완전 정리

[jQuery] 02. 선택자(Selector) 완전 정리 (깊게)jQuery는 결국 “원하는 HTML 요소를 찾고 → 조작하는 것”이 핵심입니다.그 시작이 바로 선택자(Selector)입니다.선택자는 CSS 선택자와 거의 같은 문법을 쓰지만, jQuery만의 확장 선택자도 존재합니다.이번 글에서는 단순히 “#은 id, .은 class” 수준이 아니라실전에서 실수하지 않는 기준으로 깊게 정리합니다.1. 선택자 기본 문법 (가장 중요)기본 형태는 아래 한 줄입니다.$("선택자")그리고 이 선택이 성공하면, 결과는 DOM 자체가 아니라 jQuery 객체로 반환됩니다.즉, 하나를 선택하든 여러 개를 선택하든 결과는 “묶음”으로 생각하는 게 안전합니다.$(".item") // 여러 개 선택 가능$("#..

2026. 2. 25. 08:32

Computer Science/JQuery

[jQuery] 01. jQuery가 뭐예요?

[jQuery] 01. jQuery가 뭐예요?jQuery는 JavaScript를 더 쉽고 간결하게 사용하기 위해 만들어진 라이브러리입니다.HTML 요소를 선택하고, 이벤트를 등록하고, 화면을 바꾸는 작업을 훨씬 짧은 코드로 작성할 수 있습니다.예전에는 JavaScript 코드가 길고 복잡했기 때문에, 개발자들이 더 간단하게 작성할 수 있도록 jQuery가 등장했습니다.1. 왜 jQuery가 필요했을까?순수 JavaScript로 버튼 클릭 이벤트를 만들면 다음과 같습니다.📌 순수 JavaScriptdocument.getElementById("btn").addEventListener("click", function() { alert("클릭됨");});같은 기능을 jQuery로 작성하면 더 짧아집니다.📌..

2026. 2. 16. 23:27