<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 이젠 fetch(Ajax기반 , Promise기반)의 시대
// fetch 기본 사용법
async function fgetList(){
let response = await fetch("http://localhost:8080/api/friends/");
// 단점 : response도 Promise라 한번 더 await 해주어야 한다
// axios는 이부분을 편하게 만들었다
}
/* 자주쓰는 기본 틀
async function fCk(){
fetch("URL" , {
method: "get", // *GET, POST, PUT, DELETE 등
headers: {
"Content-type" : "application/json",
},
body:JSON.stringify(data)
})
}
*/
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button onclick="fCk()">확인</button>
<script>
const fCk = function(){
alert("체크");
// http://localhost:8080/api/friends 톰캣
$.ajax({
method : "get",
url : "http://localhost:8080/api/friends",
// data : "", 서버쪽으로 보낼 데이터
dataType: "json", // 서버에서 받은 데이터를 JSON.parse를 할건지 안할건지
success : function(pRslt){
console.log("항상 결과를 눈으로 보는 습관 : " , pRslt);
}
})
}
</script>
</body>
</html>
실행후 에러 나야 정상(CORS)
origin(출처)의 구성요소 세가지 -> protocol + domain(host) + port
이 세가지 중 하나라도 일치하지 않으면 cross origin
Ajax에서 CORS 제약을 하는 이유?
크롬 웹스토어에서 cors 확장프로그램 추가(Allow CORS)
Ajax로 우회(해당 url에 원하는 url에 요청을 함), 서버에서 CrossOrigin 사용하는 방법 찾아보기
@CrossOrigin 어노테이션 선언후 서버 재기동, 실행해서 테스트
프론트
Node -> 엄밀하게 서버가 아니고 자바스크립트 런타임 환경
브라우저에서만 작동하던것을 클라이언트단에서 작동할 수 있게
React Vue Angular
node + javascript + mongoDB : 자바스크립트 한가지로 백+프론트 모두 가능
로드밸런싱, 클라이언트, 서버,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="txtName" value=""><br>
<button onclick="fCkList()">친구리스트</button>
<button onclick="fCkSch()">친구조회</button>
<button onclick="fCkCre()">친구생성</button>
<button onclick="fCkUpd()">친구수정</button>
<button onclick="fCkDel()">친구삭제</button>
<script>
const txtName = document.querySelector("#txtName");
const fCkSch = function(){
$.ajax({
type:"get",
url:`http://localhost:8080/api/friends/${txtName.value}`,
// data
dataType:"json",
success:function(rslt){
console.log("친구 : " , rslt);
}
})
}
const fCkList = function(){
alert("체크");
// http://localhost:8080/api/friends 톰캣 프로토콜 + 도메인명 + 포트번호 -> 오리진 구성요소
// http://localhost:8272 Apache
// Ajax는 기본적으로 same-origin 정책의 제한사항을 받음
// UI서버 + B/E(Restful방식)으로 분리하여 구현하는 것이 점점 대세!
$.ajax({
method : "get",
url : "http://localhost:8080/api/friends",
// data : "", 서버쪽으로 보낼 데이터
dataType: "json", // 서버에서 받은 데이터를 JSON.parse를 할건지 안할건지
// ajax로 받으면 결과를 변수에 받기 때문에 , 이후 맘대로 조작이 가능
// 피싱사이트도 만들수 있다 때문에 same-origin 정책이 디폴트
success : function(pRslt){
console.log("항상 결과를 눈으로 보는 습관 : " , pRslt);
}
})
}
</script>
</body>
</html>
url을 통해 데이터를 보내기 때문에 ajax에 data작성하지 않아도 된다
리팩토링 생각하지말고 우선은 한눈에 보이게 해야 디버깅도 편하다(정상적으로 작동만 하면 수정은 이후에)
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// ... Spread Operator(전개 연산자)
function fCk(...merong){
console.log(merong);
}
fCk("사람1","사람2","사람3","사람4");
</script>
구조분해
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 구조 분해 , 생각보다 반응이 좋고 , 프론트 프레임워크에서 엄청나게 사용한다
// 배열의 구조분해
var aaa = ["aa" , "bb" , "cc" , "dd"];
[name1 ,test , name2 ,] = aaa;
// console.log(name1);
// console.log(name2);
var gusang = {
name:"규상",
age:20,
stageName:"규모가 상급"
}
var {name , stageName} = gusang; // 이름 속성만 뽑기
console.log("name" , name);
console.log("stageName" , stageName);
</script>
axios만들어보기
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 보통 비동기의 결과 처리를 콜백함수에 맡기는데,
// 비동기가 많이 사용되면서 , 콜백안에 콜백, 그안에 콜백등으로 코드가 복잡해지는 경우가 많아진다
// Hell of CallBack(콜백지옥)
// 직접 Promise를 만들 일은 거의 없다(일반 웹개발자) 사용만 잘해도 좋음
// 비동기처리(Ajax , Axios , fetch)의 가독성을 위해 출현
var axios = {};
// axios 만들어보기
axios.get = function(url){ // axios에 get메소드 추가
// resolve는 실행이 성공되었을때 사용(호출)
// reject는 실행이 잘 안되고 문제가 발생되었을 때(호출)
return new Promise((res,rej) => { // Ajax를 Promisify(프로미스화)
let xhr = new XMLHttpRequest();
xhr.open("get" , "메모.txt" , true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
res(xhr.responseText);
}
}
xhr.send();
// res("성공");
// rej("에러!");
});
}
axios.get("메모.txt").then((pRslt) => {
console.log("체크1 " , pRslt);
}).catch((pError) => {
console.log("체크2 " , pError);
}).finally(() => {
console.log("여기는 무조건 실행, 자바의 finally와 같음");
});
</script>
then catch 가 반복됨에 따라 async/await 키워드 등장(극찬)
기다렸다가 작동하면(내부가) 동기인데? -> 함수 자체가 통째로 비동기 동작
