AJAX

출처 : 애플코딩

Ajax

asynchronous
javascript
and
xml

서버와
비동기적으로
데이터 주고받는
자바스크립트 기술.

한마디로 자바스크립트로 서버랑 통신하는 기술 임.

서버는
그냥
컴퓨터인데,
하드 디스크 입니다.
즉,
저장공간이죠.

서버는 저장공간, 하드디스크 입니다.

내가,
저장공간이 많을 수록,
이거는 요고 저장하는 공간,

저거는 저거 저장하는 공간,

이렇게 구분이 필요한 경우는,
구분해서 쓸 수 있습니다.

프론트엔드 서버,
백엔드 서버,

따로 각각 돌리면 되는거죠.

네이버 웹툰 서버,

아뭍튼,

데이터 요구하면,
그 데이터 보내주는 프로그램을 세팅해놓고
서버 즉, 그 공간에서 그 프로그램을 돌리는 거죠.

서버한테 데이터 달라고 하는
방법은

일단,

1. 원하는 데이터의 정확한 URL 을 알아야한다.
2. 그 URL 로 GET 요청이든 POST든 날리면됩니다.

이러면 그 데이터를 서버 보내 줍니다.

즉
브라우져 주소창에 comic.naver.com 으로 요청하면 웹툰을 준다.
뭐 주소창에 바로 치거나,

버튼 태그하나만들고 type="submit" 하면 보낸다.
당연히 form태그 에는 action="comic.naver.com" method="get"

이런식으로 보내거나 합니다.

근데 폼태그는 새로고침이 됩니다.

그래서,

Ajax로 get요청을 날리게 되는데,
ajax는 새로고침 없이, 서버에 get요청 하는거다.

장점은, 새로고침 없으니, 웹페이지 전환이 부드럽다고 느낌니다.

그래서,

뭐 옛날 ajax 방식은,

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
어쩌고..
}

ajax.open("GET", "https://coding.github.io/price.json", true);
ajax.send();

막 이런식으로 짯는데,
길고 복잡해서 안씁니다.

요즘은,

fetch() 를 씁니다.

fetch('https://coding.github.io/price.json')
.then((res) => {
return res.json()
})
.then((result) => {
console.log(result)
})

이렇게 짭니다.

이게 요즘 ajax 비동기 통신 방식 입니다.

URL 적고,
데이터 갖고오면,
then 함수 붙여서
콜백함수 넣고,
res 로 출력
파싱하고싶으면해도되고,

그냥 이렇게 복사해서 붙여넣기 하라고
복붙해서 그렇게 쓰라고
하는 문법이기때매,
자세한 원리는 알필욘 없고,
쓰는 방법만 익혀서
쓰면 됩니다.

에러처리는

.then((res) => {
if(!res.ok) {
throw new Error('400 아니면 500 에러남');
}
return res.json()
})
덴 부분에서 if문 처리 해주고,

.catch(() => {
console.log(error)
})
아래에서 캐치 붙이시면 됩니다.

자,

.then()
이게 싫으시면,

await 붙여도 됩니다.

asycn function 데이터가져오는함수 () {
let res = await fetch('https://coding.github.io/price.json');

if(!res.ok) {
    throw new Error('400 아니면 500 에러남');
}

let 데이터받아온결과 = await res.json();
console.log(데이터받아온결과)

}

데이터가져오는함수().catch(() => {
console.log('에러남')
})

이렇게 쓰셔도 됩니다.

이게 싫으시면,
너무 코드가 긴게 싫으면,

외부 라이브러리 쓰심됩니다.

제이쿼리도 있고,

리액트나 뷰에서는
axios 설치해서 많이 씁니다.

axios.get('https://coding.github.io/price.json')
.then((result) => {
console.log(result) //엑시오스는 결과물이 여기 들어옵니다.
})
.catch(() => {
console.log('에러남')
})

//{price: 5000} 이런식으로 데이터 가져옴

CORS 관련 에러를 자주 보게 될경우가 있는데,

즉,

에러가 왜 뜨냐면,

naver.com 으로 개발을 하고있는데,
kakao.com 으로 ajax요청을 날릴수는 없습니다.

원래 서버에서는 원천적으로 그런 요청은 차단되게 설계되어있다.

보안이슈이다.

뭐 집에서 코딩할떄는, CORS 끄고 싶으시면,
서버에다가,
헤더에

Access-Control-Allow-Origin : "*"
이런걸 추가하거나,

CORS 정책 관련 기능을 끄거나 하면된다.

let cors = require('cors')
app.use(cors());