티스토리 뷰
동기와 비동기,AJAX
1. 동기(Synchronous)와 비동기(Asynchronous)란?
a. 작업을 처리하는 방식
b. 동기 : 한 작업이 완료될 때까지 다음 작업을 기다리는 순차적 실행 방식, 순서 보장, 순서 대기
(블로킹 됨)
● 은행의 창구 시스템에 비유 할 수 있음.
● 은행 창구에스는 한 번에 한 명의 고객만 응대함. 따라서 이미 다른 고객이 창구에서 업무
를 처리하고 있다면 그 고객의 업무 처리가 끝날 때 까지는 기다려야 함
● 자바스크립트는 기본적으로 동기적으로 동작함
● 동기적으로 동작하는 코드는 작성된 순서에 따라 작업이 진행되므로 작업의 흐름을 파악
하기 쉬운 반면 오래 걸리는 작업이 있다면 뒤의 작업은 앞의 작업이 끝날 때까지 기다려
야 해서 진행할 모든 작업 속도는 전체적으로 느려질 수 밖에 없음
// 동기적 방법 - 순서 보장
// 처리시간 만큼 기다리므로 블로킹 됨
console.log("1번");
console.log("2번");
console.log("3번");
//---------- 결과 : 순서적 실행됨을 알 수 있음
1번
2번
3번
2. 비동기 : 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식
● 특정 작업을 다른 작업과 관계없이 독립적으로 동작하게 만드는 것을 비동기(Asynchronous)라고 함.
● 주가 되는 작업이 아니거나, 어떤 명령을 실행할 때 그 명령이 언제 끝날 지 예측하기 어려울 때 사용,
대표적으로 통신에서 사용
● setTimeout을 이용하면 작업을 비동기적으로 처리할 수 있음
● 카페에 비유할 수 있음
○ 카페 종업원은 한 번에 여러 주문을 받고, 고객은 제조 순서대로 음료를 받게 됨
○ 고객은 앞서 주문한 음료가 모두 제조되기까지 기다렸다 주문할 필요가 없음
<script>
function orderCoffee(coffee, time){
setTimeout(()=>{
console.log(`${coffee} 나왔습니다.`);
}, time);
}//end of orderCoffee
orderCoffee("라떼", 4000);
orderCoffee("에스프레소", 2000)
orderCoffee("아메리카노", 3000);
// 출력 결과
/*
에스프레소 나왔습니다.
아메리카노 나왔습니다.
라떼 나왔습니다
// 주문 순서와 완료 순서가 다름
*/
</script>
3. 블로킹(Blocking) : 다른 작업을 처리하기 위해 현재 작업을 대기(block, 차단) 하는 방식
4. 논-블로킹(Non-Blocking) : 다른 작업의 처리를 기다리지 않고 현재 작업을 진행하는 방식,
setTimeout(),callback function
2. 자바스크립트 엔진
a. 브라우저에서 자바스크립트 코드를 해석하고 실행하며 모든 브라우저에 내장되어 있음
b. 단일 쓰레드 방식을 기반으로 한 가지 일만 처리 - 동기적
c. V8엔진, SpiderMonkey 등....
Heap Memory : 메모리 할당
Call Stack : 함수 호출, 동기적 처리
3. 자바스크립트 런타임
a. 런타임은 자바스크립트가 실행되는 환경으로 브라우저와 node.js가 있음
b. 런타인 환경에서는 자바스크립트 엔진 뿐만 아니라 API, 콜백 큐(태스크 큐, Callback Queue),
이벤트 루프로 구성 되어 있어 비동기 처리를 할 수 있음
4. 브라우저 환경
● Web API : 여러 가지 비동기 작업을 처리, 병렬적 처리 → 결과물 Call back Queue로 전달
● Call Stack은 Web API에서 처리하는 비동기 작업을 만나면 작업을 Web API로 전달, Web API는
비동기를 처리 → 처리 끝나면 Callback Queue로 전달
● Microtask Queue: Promise 처리들
● Macrotask Queue : setTimeout이나 이벤트 처리들
● EventLoop : Call Stack 비어 있을 때만 Callback Queue에 있는 자료 중 Microtask Queue의 자
료를 Call Stack 으로 옮겨 처리
Call Stack 비어 있고, Micrfotask Queue가 비어있으면 Macrotask Queue 자료를 Call Stack에 옮겨 처리
5. 비동기 제어
a. 자바스크립트의 비동기로 동작하는 함수
setTimeout 이벤트 함수,통신 관련 함수
b. 비동기적으로 동작하는 코드와 동기적으로 동작하는 코드를 함께 사용하라 경우 문제 발생
c. 비동기적으로 동작하는 코드를 동기적으로 제어하기 위해 콜백함수, Promise, async/await 등을 사용
5-1. 콜백함수
<script>
//sum의 밖에서도 이용할 수 있도록
function add(num1, num2, callback){
setTimeout(()=>{
const sum = num1 + num2;
callback(sum);
}, 2000);
}//end of add
add(10, 20, (sum)=>{
console.log(sum);
});
</script>
<script>
//음식 주문3 - 뜨거운 음식 -> 식은 음식 ->냉동음식
function orderFood(callback){
setTimeout(()=>{
const food = "짬뽕";
callback(food);
}, 3000);//3초 뒤 음식 배달하도록 주문
}//end of orderFood
function coolDownFood(food,callback){
setTimeout(()=>{
const coldFood = `식은 ${food}`;
callback(coldFood);
}, 2000); //음식을 식히기
}
function frozenFood(food, callback){
setTimeout(()=>{
const frozen = `냉동 ${food}`;
callback(frozen);
}, 1000); //음식 냉동하기
}
orderFood((food)=>{
console.log(food); //3초 뒤 음식 받기
coolDownFood(food, (coldFood)=>{
console.log(coldFood); //2초 뒤 식은 음식 받기
frozenFood(coldFood, (frozen)=>{
console.log(frozen);
});//end of frozenFood
});//end of coolDownFood
});//end of orderFood
</script>
//기능이 늘어날 수록 가독성이 떨어지게 됨 - 콜백 지옥
● 콜백 지옥(Callback Hell)을 만날 수 있음
6. Promise
a. 비동기 처리를 목적으로 만들어진 자바스크립트 내장 객체
b. 비동기 작업의 최종 결과 또는 실패를 처리할 수 있도록 상태를 알려주는 객체
c. 비동기 작업 실행, 비동기 작업 상태 관리, 비동기 작업 결과 저장, 비동기 작업 병렬 실행, 비동기 작업 다시 실행.... 등등
6-1. Promise의 3가지 상태
● 대기(Pending) : 초기 상태로 로직이 완료되지 않은 상태, 즉 이행하지도, 거부하지도 않은 초기 상태
● 이행(Fulfilled) : 비동기 처리를 성공적으로 완료한 상태, 처리 결과 값을 반환
● 거부(Rejected) : 처리가 실패했거나 오류가 발생한 상태
● 예를 들면 유튜브로 동영상을 시청하는 상황
○ 영상 로딩 과정에서 영상이 로딩 중인 상태를 '대기'상태,
○ 정상적으로 영상이 로딩된 상태를 '해결'로 성공상태
○ 만약 영상이 어떤 이유(인터넷 접속 불량.... 등의 이유)로 인해 로딩 되지 못했다면 이를 '거부'라고 할 수 있으며 '실패'상태임
<프로미스 객체>
const promise = new Promise(실행 함수);
//프로미스 객체를 만들 때 인수로 실행 함수(executor)를 전달
//실행 함수는 비동기 작업ㄷ을 수행하는 함수
<script>
//실패 상태(reject)
const promise = new Promise((resolve, reject)=>{
//비동기 작업 실행 함수(executor)
// resolve : 비동기 작업의 상태를 성공으로 바꾸는 함수
// reject : 비동기 작업의 상태를 실패로 바꾸는 함수
setTimeout(()=>{
console.log("안녕!!");
// resolve("안녕!!"); //성공처리하고 싶을 때
reject("실패한 이유는....");
}, 2000);
});//end of promise
setTimeout(()=>{
console.log(promise);
}, 3000);
</script>
참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
Promise - JavaScript | MDN
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
developer.mozilla.org
const user = {}; //빈 객체 생성
/*
function setUser(callback){ //user 객체의 속성들을 추가
//Promise로 처리
setTimeout(()=>{
user.name = "이경희";
user.age = 20;
callback(user);
}, 2000);//end of setTimeout
}//end of setUser
//함수 호출 - 함수를 실행
function printUser(user){
console.log(user);
}//end of printUser
setUser(printUser);
*/
/*
const promise = new Promise(
(resolve, reject)=>{
setTimeout(()=>{
user.name = "이경희";
user.age = 20;
resolve(user);
reject("ㅠㅠ 오류~~");
}, 2000);//end of setTimeout
}//end of 익명함수
);//end of Promise
setTimeout(()=>{
console.log(promise);
}, 3000);//end of setTimeout
*/
function setUser(){
return new Promise(
(resolve, reject)=>{
setTimeout(()=>{
user.name = "이경희";
user.age = 20;
resolve(user);
reject("ㅠㅠ 오류~~");
}, 2000);//end of setTimeout
}//end of 익명함수
);//end of Promise
}//end of setUser
setUser()
.then((response)=>console.log(user))
.catch((error)=>console.log(error));
//-----------------------------
const user={};
function setUser(){
return new Promise(
(resolve, reject)=>{
setTimeout(()=>{
user.name = "이경희";
user.age = 20;
resolve(user);
reject("ㅠㅠ 오류~~");
}, 2000);//end of setTimeout
}//end of 익명함수
);//end of Promise
}//end of setUse
async function setUserResult(){
try{
const user_result = await setUser();
console.log(user_result);
}catch(error){
console.log(error);
}//end of try
}//end of setUserResult
setUserResult();
const user = {};
function setUser(){
return new Promise((resolve)=>{
setTimeout(()=>{
user.name = "홍길동";
user.age = 25;
resolve(user);
}, 1000);
});
}
function printUser(user){
console.log(user);
}
function roleCheck(){
return new Promise((resolve)=>{
setTimeout(() => {
if(user.age >=20 ){
user.role = "성인";
}else{
user.role ="미성년";
}
resolve(user);
}, 1000);
});
}
setUser().then(roleCheck).then(printUser);
7. async / await
a. Promise를 더 쉽게 사용하기 위해 등장
b. 비동기 코드를 동기 코드처럼 보이게 만들어 가독성을 높이고 로직을 단순하게 표현
7-1. async
함수 선언부 앞에 붙여 해당 함수가 Promise를 반환함을 나타냄
async를 함수 선언부 앞에 붙이면 해당 함수는 항상 Promise를 반환
즉,어떤 함수를 비동기 함수로 만들어주는 키워드
7-2. await
async 함수 내에서 사용
Promise가 처리될 때까지 함수의 실행을 일시 중지 시키고, Promise의 처리가 끝나며 처리 결과를 반환
const user = {};
function setUser(){
return new Promise((resolve)=>{
setTimeout(()=>{
user.name = "홍길동";
user.age = 25;
resolve(user);
}, 1000);
});
}
function printUser(user){
console.log(user);
}
function roleCheck(){
return new Promise((resolve)=>{
setTimeout(() => {
if(user.age >=20 ){
user.role = "성인";
}else{
user.role ="미성년";
}
resolve(user);
}, 1000);
});
}
async function registerUser() {
const user_result = await setUser();
const role_result = await roleCheck();
printUser(role_result);
}
registerUser();
에러 처리
const user = {};
function setUser(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
user.name = "홍길동";
user.age = 25;
resolve(user);
reject(new Error("에러 발생!!!"));
}, 1000);
});
}
function printUser(user){
console.log(user);
}
function roleCheck(){
return new Promise((resolve, reject)=>{
setTimeout(() => {
if(user.age >=20 ){
user.role = "성인";
}else{
user.role ="미성년";
}
reject(new Error("에러발생2!!!"))
resolve(user);
}, 1000);
});
}
async function registerUser() {
try{
const user_result = await setUser();
//console.log(user_result);
const role_result = await roleCheck();
//console.log(role_result);
printUser(role_result);
}catch(error){
console.error(error);
}
}
registerUser();
★ 비동기 통신
1. HTTP 통신
a. HTTP : 클라이언트와 서버 간의 요청과 응답 프로토콜
b. 클라이언트(웹브라우저)가 서버에 요청을 보내면 서버는 그에 대한 응답을 반환하는 방식으로 동작
2. HTTP 통신 메서드
GET : 데이터 조회 ,Read, 모든/특정 리소스 취득
POST : 데이터 생성 ,Create, 리소스 생성
PUT : 데이터 수정 ,Update, 리소스의 전체 교체(replace)
PATCH : 데이터 수정 ,Update, 리소스의 일부 수정(modify)
DELETE : 데이터 삭제, Delete, 모든/특정 리소스 삭제
참고 자료 :
MDN Web DocsHTTP 요청 메서드 - HTTP | MDN
HTTP 요청 메서드 - HTTP | MDN
HTTP는 요청 메서드를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. 각각의 메서드는 서로 다른 의미를 구현하지만, 일부
developer.mozilla.org
2-1. HTTP 통신 상태 코드
참고 자료 :
MDN Web DocsHTTP 상태 코드 - HTTP | MDN
HTTP 상태 코드 - HTTP | MDN
HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고
developer.mozilla.org
3. AJAX(Asynchronous JavaScript and XML)
a. 자바스크립트를 사용하여 비동기적으로 서버와 통신하는 기술
b. 전체를 새로 고침하지 않고도 필요한 부분의 데이터를 서버와 주고 받아 웹 페이지를 동적으로 업데이트할 수 있음
참고 사이트 :
MDN Web DocsAJAX - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
AJAX - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.
developer.mozilla.org
MDN Web Docs서버에서 데이터 가져오기 - Web 개발 학습하기 | MDN
서버에서 데이터 가져오기 - Web 개발 학습하기 | MDN
현대의 웹사이트와 애플리케이션에서 매우 흔한 또 다른 작업은 새 페이지 전체를 불러올 필요 없이 웹페이지의 섹션을 갱신하기 위해 서버에서 개별 데이터 항목을 검색하는 것입니다. 이것은
developer.mozilla.org
4. Fetch
a. AJAX 통신 방식으로 Promise를 기반으로 동작
b. 체이닝을 통해서 AJAx를 보다 간결하게 처리
c. 인수를 url과 함께 요청의 속성(method, headers, body 등)을 전달
d. 옵션을 생략하면 GET 방식으로 요청을 보냄
i. method : HTTP 요청 메서드로 GET, POST, PUT, DELETE
ii. headers : 요청 헤더로 객체 형태 또는 Headers 객체를 사용 - 인증 토큰, 컨텐트 타입 등을 지정
iii. body : 요청 바디에 전달할 데이터
데이터는 객체 형태로 전달
문자열, FormData, Blob 등 다양한 형태의 데이터를 지정
참고 사이트
MDN Web Docsfetch() 전역 함수 - Web API | MDN
fetch() 전역 함수 - Web API | MDN
전역 fetch() 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환합니다.
developer.mozilla.org
MDN Web DocsFetch API 사용하기 - Web API | MDN
Fetch API 사용하기 - Web API | MDN
Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를
developer.mozilla.org
실습용 사이트
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.
jsonplaceholder.typicode.com
● GET 메서드 이용, 상품 상세 정보 확인
//1. GET - 상품목록 확인하기기
//1-1. GET - async
async function getProduct(){
try{
const response = await fetch(url);
if(!response.ok){
throw new Error("HTTP error:" + response.status)
}
const json =await response.json();
console.log(json);
}catch(error){
console.log(error);
}
}
// 테스트 실행
getProduct();
//2. GET - 특정 상품 상세 정보 확인하기
// 상세 정보를 확인할 id를 url에 실어 서버로 전송
//url ="https://eduapi.weniv.co.kr/1/product/{product_id}" ;
//2-1. GET-async - 특정 상품 상세 정보 확인하기
async function getDetailProduct1(id){
const url=`https://eduapi.weniv.co.kr/1/product/${id}`;
try{
const response = await fetch(url);
if(!response.ok){
throw new Error("HTTP error :" + response.status);
}
const json = await response.json();
console.log(json);
}catch(error){
console.error("Error fetching product details:", error)
}
}
// 테스트 실행
getDetailProduct1(2);
● GET 메서드 - 사용자 목록 조회 및 사용자 상세 정보 조회
상품은 필수 요소가 많아 단순한 테스팅을 위해 사용자로 변경
//1. GET - 전체 사용자 목록 확인
//1-1. GET - 전체 사용자 목록 확인(async)
async function getAsyncUser() {
const url = "https://eduapi.weniv.co.kr/1/user";
try{
const response = await fetch(url);
if (!response.ok){
const errorData = await response.json();
throw new Error(`HTTP 오류!! ${response.status}, 메시지: ${errorData.message || "알 수 없는 오류"}`);
}
const json = await response.json();
//response.json() 비동기 함수
// await를 붙여야 실제 JSON 데이터를 반환
// 붙이지 않으면 Promise 객체 반환
console.log("응답 데이터 :", json);
}catch(error){
console.error(error.message);
}
}
// 테스트 실행
getAsyncUser();
//2. GET- 특정 사용자의 상세 정보 조회
async function getUserOne(id) {
const url=`https://eduapi.weniv.co.kr/1/user/${id}`;
try{
const response = await fetch(url);
if(!response.ok){
throw new Error(`HTTP 오류!! ${response.status}`);
}
const json = await response.json();
console.log("응답 데이터 ", json);
}catch(error){
console.error(error);
}
}
// 테스트 실행
getUserOne(1);
● 사용자 상세 정보 가져와 화면에 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="ajax_put.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정보 가져오기</title>
<script>
document.addEventListener("DOMContentLoaded", function(){
const nameInput = document.querySelector("input[name='name']");
const emailInput = document.querySelector("input[name='email']");
const divContain = document.querySelector("#container");
async function getUser(id) {
const url = `https://eduapi.weniv.co.kr/1/user/${id}`;
try{
const response = await fetch(url);
if(!response.ok){
throw new Error(`HTTP 오류!! 상태 코드: ${response.status}`);
}
const data = await response.json();
nameInput.value = data.name;
emailInput.value = data.email;
const nameHeading = document.createElement("h2");
nameHeading.textContent = `이름: ${data.name}`;
divContain.appendChild(nameHeading);
const emailHeading = document.createElement("h2");
emailHeading.textContent =`이메일 : ${data.email}`;
divContain.appendChild(emailHeading);
}catch(error){
console.log(error);
divContain.textContent="데이터 불러오는 중 오류 발생"
}
}
//함수 호출
getUser(1);
});
</script>
</head>
<body>
<form action="" method="post" name="user-form">
이름 : <input type="text" name="name" class="user-input" ><br>
email:<input type="text" name="email" class="user-input"><br>
</form>
<hr>
<div id="container">
</div>
</body>
</html>
● 상품 목록 가져오기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 90%;
margin:0 auto;
}
#productTable{
width: 70%;
border-collapse: collapse;
}
th, td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
th{
background-color: bisque;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",async function() {
const tableBody = document.querySelector("tbody");
async function getProduct(){
const url = "https://eduapi.weniv.co.kr/1/product";
try{
const response = await fetch(url);
if(!response.ok){
throw new Error("HTTP 응답 오류 원인 : "+ response.status);
}
const datas = await response.json();
//7개중 4개만
datas.slice(0, 4).forEach(product => {
const row = tableBody.insertRow();//행을 추가
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
cell1.textContent = product.id;
cell2.textContent = product.productName;
cell3.textContent = product.price;
});//end of forEach
}catch(error){
console.log("데이터 가져오는 중 오류 발생 : ", error);
}
}//end of getProduct
//함수 호출
getProduct();
});
</script>
</head>
<body>
<h2>상품 목록</h2>
<table id="productTable">
<thead>
<th>상품id</th>
<th>상품명</th>
<th>가격</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
● 사용자 목록 가져오기1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 목록</title>
<style>
body{
width: 90%;
margin: 0 auto;
}
table#userTable{
width: 70%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000000;
padding: 10px;
text-align: center;
}
th{
background-color: bisque;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", async function () {
const tableBody = document.querySelector("#userTable tbody");
async function getUsers() {
const url="https://eduapi.weniv.co.kr/1/user";
try{
const response = await fetch(url);
if(!response.ok){
throw new Error(`HTTP 오류!: ${response.status}`);
}
const datas = await response.json();
//최대 10개의 데이터 출력
datas.slice(0, 10).forEach(user => {
const row = tableBody.insertRow();
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
cell1.textContent = user.name;
cell2.textContent = user.email;
cell3.textContent = user.phone;
});
}catch(error){
console.log("데이터 가져오는 중 오류 발생:", error);
tableBody.innerHTML = `<tr><td colspan="4">데이터를 불러오는 중 오류가 발생</td></tr>`
}
}
//함수 호출
getUsers();
});
</script>
</head>
<body>
<h1>사용자 목록</h1>
<table id="userTable">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>phone</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
● 위 코드 외부 파일로 설정 user_get.js
async function getUsers() {
const tableBody = document.querySelector("#userTable tbody");
const url="https://eduapi.weniv.co.kr/1/user";
try{
const response = await fetch(url);
if(!response.ok){
throw new Error(`HTTP 오류!: ${response.status}`);
}
const datas = await response.json();
//최대 10개의 데이터 출력
datas.slice(0, 10).forEach(user => {
const row = tableBody.insertRow();
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
cell1.textContent = user.name;
cell2.textContent = user.email;
cell3.textContent = user.phone;
});
}catch(error){
console.log("데이터 가져오는 중 오류 발생:", error);
tableBody.innerHTML = `<tr><td colspan="4">데이터를 불러오는 중 오류가 발생</td></tr>`
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 목록</title>
<style>
body{
width: 90%;
margin: 0 auto;
}
table#userTable{
width: 70%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000000;
padding: 10px;
text-align: center;
}
th{
background-color: bisque;
}
</style>
<script src="user_get.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
//함수 호출
getUsers();
});
</script>
</head>
<body>
<h1>사용자 목록</h1>
<table id="userTable">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>phone</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
● 사용자 목록 가져오기2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//document.addEventListener("DOMContentLoaded", async function(){ });
document.addEventListener("DOMContentLoaded", async ()=>{
//1. 문서 객체 읽어 오기
const listContainer = document.querySelector("#userList");
//2. 서버에서 사용자 정보 가져오기
async function getUsers(){
//2-1. url
const url = "https://eduapi.weniv.co.kr/1/user";
//2-2. 서버의 user의 자료 가져오기
try{
//2-3. fetch 함수를 이용해서 서버에 접속하고 응답 받아 오기
const response = await fetch(url);
//2-4. 응답 상태를 처리 - 응답이 실패했을 때
// response.ok -> 성공
// !response.ok -> 실패, 실패 했을 때 임의로 예외를 발생
// response.status -> 상태 코드
if(!response.ok){ //실패 했을 때
throw new Error(`HTTP 오류! 상태 코드: ${response.status}`);
} //end of if
//2-5. 응답 받은 데이터를 변환
const users = await response.json();
//2-6. 문서 객체에 데이터 출력
users
.slice(0,10)
.forEach((user)=>{
//2-6-1. ol 태그 안에 추가할 li태그 만들기(<li></li>)
const li = document.createElement("li");
//2-6-2. <li></li> 안에 글자 넣기
li.textContent =`${user.name} - ${user.country} - ${user.phone}`;
//2-6-3. <li> 태그를 <ol> 태그 안에 추가
listContainer.appendChild(li);
});//end of forEach
}catch(error){
console.error("데이터 가져오는 중 오류 발생: " + error);
listContainer.textContent = `데이터 가져오는 중 오류 발생: ${error}`;
} //end of try
}//end of getUsers
//3. 함수 호출 => 함수를 실행
getUsers();
});//end of documet
</script>
</head>
<body>
<h2>사용자 목록</h2>
<ol id="userList"></ol>
</body>
</html>
● POST 메서드 - 사용자 정보 입력(사용자 추가)
//"https://eduapi.weniv.co.kr/1/product/{product_id}
//3. post - 사용자 정보 생성성
//3-1. async - post 사용자 정보 (Promise를 반환하는 비동기 함수)
async function postAsyncUser(name, email) {
const url = "https://eduapi.weniv.co.kr/1/user";
try{
const response = await fetch(url, {
method:"POST",
headers:{ "Content-Type":"application/json"},
body:JSON.stringify({
name:name,
email:email
}),// JSON.stringify({name, email})도 가능능
});
if(!response.ok){
throw new Error(`HTTP 오류!: ${response.status}`);
}
const json = await response.json();
//response.json() 비동기 함수
// await를 붙여야 실제 JSON 데이터를 반환
// 붙이지 않으면 Promise 객체 반환
console.log("응답 데이터: ", json);
}catch(error){
console.error(error.message);
}
}
// 테스트 실행
postAsyncUser("홍길동","hong@hong.com");
● PUT 메서드 - 특정 사용자 정보 수정
//4. PUT 메서드
async function putAsyncUser(id, name, email, country) {
try{
const url = `https://eduapi.weniv.co.kr/1/user/${id}`
const response = await fetch(url,{
method:"PUT",
headers:{ "Content-Type":"application/json"},
body:JSON.stringify({name, email, country})
})
if(!response.ok){
throw new Error(`HTTP 오류!! ${response.status}`);
}
const json = await response.json();
console.log("응답 데이터 ", json);
}catch(error){
console.error(error.message);
}
}
// 테스트 실행
putAsyncUser(2, "abcde가","aaaa@aaa.com","부산");
● DELETE - 메서드, 특정 사용자 데이터 제거
//5. delete
function deleteUser(id){
const url = `https://eduapi.weniv.co.kr/1/user/${id}`;
fetch(url,{
method:"DELETE",
headers: { "Content-Type": "application/json" }
})
.then((response)=>{
if(!response.ok){
throw new Error(`HTTP 오류!! ${response.status}`);
}
console.log(`사용자 ID ${id} 삭제 성공`);
})
.catch((error)=>console.error(error));
}
//테스트 실행
deleteUser(4);
//5-3 비동기 처리
async function deleteAsync(id) {
try{
const url = `https://eduapi.weniv.co.kr/1/user/${id}`;
const response = await fetch(url, {
method: "DELETE",
headers: { "Content-Type": "application/json" }
});
if(!response.ok){
throw new Error(`HTTP 오류!! ${response.status}`);
}
console.log(`사용자 ID ${id} 삭제 완료!`);
}catch(error){
console.error(error.message);
}
}
//테스트 실행행
deleteAsync(1);
● MIME 타입
| MIME 타입 | 서브타입 |
| text | text/plain, text/html, text/css, text/javascript |
| application | application/json, application/x-www-form-urlencode |
| multipart | multipart/formed-data |
'Front-End Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 수업 자료 (0) | 2025.03.25 |
|---|---|
| 자바스크립트 수업 자료 (2) | 2025.03.23 |
| 클래스 (0) | 2025.03.23 |
| 예외처리 (0) | 2025.03.23 |
| DOM(Document Object Model) (0) | 2025.03.23 |