코딩/웹개발
JQuery 기초
americanoallday
2025. 1. 21. 16:27
JQuery란
JQuery는 자바스크립트의 라이브러리 입니다.
JQuery의 역할
기본 자바스크립트로 하려면 복잡하고 긴 코드를 작성해야 하는 작업들을, 간단하고 짧게 처리할 수 있게 도와줍니다.
• HTML 요소 선택 및 조작 (DOM 조작)
웹페이지의 텍스트, 스타일, 구조를 쉽게 변경.
• 이벤트 처리
클릭, 마우스 이동, 키보드 입력 같은 이벤트를 간단히 다룸.
• 애니메이션 효과
요소를 숨기거나 나타내는 등의 애니메이션을 쉽게 구현.
• AJAX 요청
서버와 데이터를 주고받는 작업을 단순화.
예제 1)
| [결과 확인하기!] 버튼 클릭 전 | [결과 확인하기!] 버튼 클릭 후 |
 |
 |
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박'];
$('#q1').empty();
fruits.forEach(element => {
let temp_html = `<p>${element}</p>`;
$('#q1').append(temp_html);
});
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
];
$('#q2').empty();
people.forEach(element => {
let temp_html = `<p>${element['name']}는 ${element['age']}살</p>`;
$('#q2').append(temp_html);
});
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>예제 2)
| save 버튼 클릭 전 | save 버튼 클릭 후 | 포스팅박스의 save버튼 클릭 후 |
 |
 |
 |
주요 코딩
<script>
function openclose() {
$('#postingbox').toggle();
alert('예제 : img url : https://i.namu.wiki/i/laydpkflXnNPz4VS-n8ebzHfCq2_5DknORBVt-BNAoLJ14XDOvrrj5-uHAYfChnKBWQku_G6wVFQDwvm9nPmQxt1j9ReKiCPSE9E6tyX4D8iNGAJrz-7BouWNhJtooQTB9Fq7qzna7tTCIVJow8kxQ.webp, title : 니엔, info : 누구 없어? 귀사 스태프에게 여기에서 잘 살 수 있다고 들었는데. 자고 먹는 건 공짜, 노는 것도 충실하다고… 어? 관계자 이외 출입금지? 그런 말 하지 마, 조금은 내 체면도 세워달라구.');
}
function makecard(){
let image = $('#image').val();
let title = $('#title').val();
let info = $('#info').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${info}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>
`;
$('#card').append(temp_html);
}
</script>
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my album</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
/* 구글 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
* {
font-family: "Dongle", serif;
font-size: 25px;
font-weight: 40;
font-style: normal;
/* 전체 폰트 설정 */
}
.mytitle {
display: flex;
/* 가로로 나열 */
flex-direction: column;
/* 세로로 나열 */
align-items: center;
/* 가운데 정렬 */
justify-content: center;
/* 가운데 정렬 */
padding: 10px;
height: 250px;
color: white;
background-image: url('https://i.namu.wiki/i/5ds_q1g5Wk07lNIzBMAixUbI8CbswV8Ky5wnfMKzxJQy0Nmcfywo2X46xivPd8yoLAv4trjtd4lPMEgKkEY9a-sFyP6NqnU9Ne13AUEY6RmRUP2LkyuDuM8ZAbJnU-1jnydqWoc0DmHUuS0U4zJcKQ.webp');
/* 이미지 경로 */
background-position: center;
background-size: cover;
/* 이미지를 꽉 채우도록 */
}
.mytitle>button {
width: 150px;
height: 50px;
color: black;
margin-top: 100px;
padding: 0px 15px;
background-color: white;
border: 1px solid white;
/* 1픽셀 실선 화이트 테두리 */
border-radius: 5px;
/* 테두리 둥글게 */
}
.mycards {
width: 1000px;
margin: 30px auto 0 auto;
}
.mypostingbox {
width: 500px;
height: 600px;
margin: 30px auto 0 auto;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgb(121, 121, 121);
/* 그림자 */
border-radius: 10px;
}
.mybtn {
display: flex;
/* 가로로 나열 */
flex-direction: row;
align-items: center;
/* 가운데 정렬 */
justify-content: center;
/* 가운데 정렬 */
}
.mybtn>button {
margin: 10px;
}
</style>
<script>
function openclose() {
$('#postingbox').toggle();
alert('예제 : img url : https://i.namu.wiki/i/laydpkflXnNPz4VS-n8ebzHfCq2_5DknORBVt-BNAoLJ14XDOvrrj5-uHAYfChnKBWQku_G6wVFQDwvm9nPmQxt1j9ReKiCPSE9E6tyX4D8iNGAJrz-7BouWNhJtooQTB9Fq7qzna7tTCIVJow8kxQ.webp, title : 니엔, info : 누구 없어? 귀사 스태프에게 여기에서 잘 살 수 있다고 들었는데. 자고 먹는 건 공짜, 노는 것도 충실하다고… 어? 관계자 이외 출입금지? 그런 말 하지 마, 조금은 내 체면도 세워달라구.');
}
function makecard(){
let image = $('#image').val();
let title = $('#title').val();
let info = $('#info').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${info}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>
`;
$('#card').append(temp_html);
}
</script>
</head>
<body>
<div class="mytitle">
<!-- <h1>My Album</h1> -->
<button onclick="openclose()" >save</button>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="album image">
<label for="floatingInput">album image</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="album title">
<label for="floatingInput">album title</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="info" placeholder="album info">
<label for="floatingInput">album info</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="album date">
<label for="floatingInput">album date</label>
</div>
<div class="mybtn">
<button onclick="makecard()" type="button" class="btn btn-dark">save</button>
<button type="button" class="btn btn-outline-dark">close</button>
</div>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/hv89BrLORvOQ3aOZ8VwXwqlDOAbW8Ibs-R-nkk4EUQExNOH3MAuE7mgmxPux7TGue4R4IKF_p6EdTpOjcj65cyTyu5cZ6jbdA0yYnfygeCCVh7HnYcW2UiaPc2IgThR0-f1qiv701gisIBpnIWImgw.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">위셔델</h5>
<p class="card-text">살카즈 용병 리더 W, 지금은 정식으로 위셔델이라고 개명. 런디니움 전쟁 동안 로도스 아일랜드의 런디니움 특별 작전팀과 긴밀히 협력하며
수차례에 걸쳐 군사위원회의 움직임을 저지했다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/hd2fMBRQDIw_DzpT92W-Iej18e1F1JMjgUTNvZ5tgtMuyh3vfeCqGE9tTrLvKqrzYuHfAjY37B1f8TakjCPQlC8FrCWIg-O2RzhCCO0KXQrPksyvtHmDL8niO11NkM5lKuSOLCfJuw1FQr0FBbARLw.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">골든글로우</h5>
<p class="card-text">드디어 도착했다⋯ 안녕하세요, 박사님. 새로 오퍼레이터로 부임한, 골든글로우입니다. 앞으로의 지도, 잘 부탁드립니다.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/js7WW_VUzT5pSn148nRCEC1bU1-U218Pi1F7qk79Gmm1fhILYHL7Ss2_dPBvvK6668Lm7tT7L2YKmRUPCBMUDAaFPVMZUJJh6EgtGBaiHYTVqVioZgpJgQIc--PZ6MP41JAVOTYA0GHCcOWk9QfzUQ.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이네스</h5>
<p class="card-text">전 살카즈 용병 리더. 과거 잠시 동안 카즈델의 혼란스러운 내전에 참여했으며, 체르노보그 사건이 발생할 때까지 죽은 것으로 위장해
모두의 시야에서 철저히 모습을 감췄다. 이후 이네스는 종적을 감추었으나, 최근 런디니움 사건을 통해 모습을 드러내고 공식적으로 로도스 아일랜드와 연락을 재개했다.
그동안 그녀가 무슨 일을 겪었는지 알 방법은 없지만, 아스카론의 보증 아래 로도스 아일랜드와 전략적 협력 조항을 체결했다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/-kBTAxFqCf2SD0Ft0deiYTJl9We2z7-m847Fp9RxzrOQCRqwRTTX-Sug3CAs7upqYbJLhBDhsbXESenBm8ZwLKG_GJ5LG-t_CTg47OVRXYRO_RxLsW436ZIx2W3fNHw3LXyQM2ls9sZ5-DY8UDgxDA.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">리드 더 플레임 섀도우</h5>
<p class="card-text">리드, 로도스 아일랜드 빅토리아 남부 사무소 체류 기간 동안 이탈 신청을 했으나 최근 다시 로도스 아일랜드와 연락이 재개되었다. 현재
더블린이라는 이름의 작은 부대를 이끌고 빅토리아에서 활동 중이며, 폭력으로 억압받는 타라인 구출이 주요 행동 목표다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
예제 3)
| record 버튼 클릭 전 | record 버튼 클릭 후 | postingbox의 save버튼 클릭 후 |
 |
 |
 |
주요 코드
<script>
let a = 'hello';
console.log(a);
function openclose() {
$('#postingbox').toggle();
alert('예제 : img url : https://i0.wp.com/www.hyungjoo.me/wp-content/uploads/image.png?fit=1280%2C720&ssl=1 , title : 진격의 거인, info : ');
}
function makecard(){
let image = $('#image').val();
let title = $('#title2').val();
let grade = $('#grade').val();
let temp_html = `
<div class="col">
<div class="card">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${grade}</p>
</div>
</div>
`;
$('#card').append(temp_html);
}
</script>
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myFlix</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
* {
font-family: "Dongle", serif;
font-size: 25px;
font-weight: 40;
font-style: normal;
/* 전체 폰트 설정 */
}
.main {
width: 100%;
background-image: url('https://resize-image.vocus.cc/resize?norotation=true&quality=80&url=https%3A%2F%2Fimages.vocus.cc%2F646c1291-1607-49a4-a3ac-1bd8cc514bd8.jpg&width=740&sign=QRGA5-Jbhp3-u6P1tU6rcuezl5oarI1nYs7A8RvNoSY');
background-position: center;
background-size: cover;
}
body {
background-color: black;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
}
.form-floating > input {
background-color: transparent;
color: white;
}
.form-floating > label {
color: white;
}
.form-select {
background-color: transparent;
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox > button {
width: 100%;
}
</style>
<script>
let a = 'hello';
console.log(a);
function openclose() {
$('#postingbox').toggle();
alert('예제 : img url : https://i0.wp.com/www.hyungjoo.me/wp-content/uploads/image.png?fit=1280%2C720&ssl=1 , title : 진격의 거인, info : ');
}
function makecard(){
let image = $('#image').val();
let title = $('#title2').val();
let grade = $('#grade').val();
let temp_html = `
<div class="col">
<div class="card">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${grade}</p>
</div>
</div>
`;
$('#card').append(temp_html);
}
</script>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-info">MyFlix</a></li>
<li><a href="#" class="nav-link px-2 text-white">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Series</a></li>
<li><a href="#" class="nav-link px-2 text-white">Movies</a></li>
<li><a href="#" class="nav-link px-2 text-white">Favorite</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-info">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 id="title" class="display-5 fw-bold">장송의 프리렌</h1>
<p class="col-md-8 fs-4">프리렌은 과거 용사의 동료로서 다른 동료들과 함께 강대한 마왕을 무찌른 영웅이지만 남들과 다른 점이 있다. 바로 영원에 가까운 삶을 사는
엘프란 것. 프리렌은 용사 힘멜이 노환으로 사망한 뒤 장례식에 참가하고 난 뒤에야, 자신이 용사 힘멜을 알려고 노력하지 않았고 함께 한 시간을 헛되이 보냈다고 뒤늦게 후회한다.
그래서 이번에는 사람을 이해하고자 다시금 여행을 떠난다.
</p>
<button onclick="openclose()" type="button" class="btn btn-outline-dark">Record</button>
<button type="button" class="btn btn-outline-dark">info</button>
</div>
</div>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">image address</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title2" placeholder="name@example.com">
<label for="floatingInput">title</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">review</label>
<select class="form-select" id="grade">
<option selected>Choose...</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<button onclick="makecard()" type="button" class="btn btn-light">save</button>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://image.tving.com/ntgs/contents/CTC/caip/CAIP1500/ko/20200507/P001227842.png/dims/resize/1280"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">귀멸의 칼날</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://i.ytimg.com/vi/G03U9GUZ7Ww/maxresdefault.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">봇치 더 록</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://an2-img.amz.wtchn.net/image/v2/ARhIdDYUW0pqwX4r35za3g.jpg?jwt=ZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKdmNIUnpJanBiSW1SZk1USTRNSGczTWpCeE9EQWlYU3dpY0NJNklpOTJNaTl6ZEc5eVpTOXBiV0ZuWlM4eE5qa3lOakF3TlRJME16YzRPVEExT0RZd0luMC5iVExkdWwzQVU0Mno2VlRPU2tlLVgzWTBSVHdtNGxoZUlORHFUQ1o2czJr"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">은혼</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://an2-img.amz.wtchn.net/image/v2/st7oQC95Kc6Y2wUREtj5EQ.jpg?jwt=ZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKdmNIUnpJanBiSW1SZk1USTRNSGczTWpCeE9EQWlYU3dpY0NJNklpOTJNaTl6ZEc5eVpTOXBiV0ZuWlM4eE5qRTFPRGN5T0Rnd01qUXhNekk0TlRjNUluMC5WbENnTTB5RFRVaEViRDVIdzFpV05yVjBWNTB5MnNZQjI3bmczbEYzVmJF"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">단간론파</h5>
<p class="card-text">⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
클라이언트 - 서버 개념 이해하기
클라이언트 : 사용자가 이용하는 프로그램
서버 : 클라이언트의 요청을 처리하고 데이터를 제공하는 컴퓨터, 검색 결과나 동영상을 저장하고, 요청이 들어오면 클라이언트에 전달합니다.
[서버→클라이언트]: JSON 이해하기
JSON : JavaScript Object Notation, 데이터를 주고받을 때 사용하는 형식
예시
[
{ "title": "Inception", "year": 2010 },
{ "title": "Interstellar", "year": 2014 }
]• 클라이언트가 “영화 목록을 주세요!“라고 서버에 요청하면, 서버는 JSON 형식의 데이터로 목록을 보내줍니다.
API란 :
• Application Programming Interace, 클라이언트와 서버가 서로 대화하는 규칙
• 서버는 API를 통해 **“이런 요청은 받을 수 있고, 이런 데이터를 줄게요”**라고 약속합니다.
예시: 네이버 영화 API
• 클라이언트가 GET 요청으로 “영화 목록을 주세요!“라고 하면, 서버는 영화 목록(JSON 데이터)을 반환.
openAPI란 :
• 누구나 사용할 수 있는 API. (물론 등록/승인이 필요한 경우도 있음)
• 네이버, 구글, 카카오 등이 Open API를 제공.
예시: 네이버 Open API
• 네이버의 영화 검색 Open API는 클라이언트가 요청하면 데이터를 반환.
• 하지만 허락된 곳(API 키가 있는 앱/웹)에서만 사용 가능.
API와 라이브러리 차이
API:
• 시스템과 상호작용하기 위한 인터페이스.
• 시스템의 기능이나 데이터를 요청하고 받을 수 있는 규칙.
• 언어 독립적.
라이브러리:
• 개발자가 쉽게 기능을 구현하도록 제공된 코드 집합.
• API를 활용할 수 있는 도구를 포함.
• 특정 프로그래밍 언어에 종속적.
[클라이언트→서버]: GET 요청 이해하기
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회, 데이터를 읽을 때 사용
• 클라이언트가 서버에 “데이터를 주세요”라고 요청.
• 서버는 데이터(JSON 형식)를 보내줌.
예시: 영화 목록 조회
GET https://example.com/movies서버 응답 (JSON 데이터):
[
{ "title": "Inception", "year": 2010 },
{ "title": "Interstellar", "year": 2014 }
]* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때, 데이터를 만들거나 변경할 때 사용
• 클라이언트가 서버에 “새로운 데이터를 추가하거나 수정해주세요”라고 요청.
• 주로 로그인, 회원가입, 글 작성 등 데이터를 생성/변경/삭제할 때 사용.
예시: 새로운 영화 추가
POST https://example.com/movies요청 내용 (클라이언트가 보냄):
{
"title": "Avatar",
"year": 2009
}서버 응답:
{ "message": "새로운 영화가 추가되었습니다." }
추가 설명
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)