Callback()

정의 : 함수에 파라미터로 들어가는 함수
용도 : 자바스크립트에서 순차적으로 실행하고 싶을 때 사용

예)

<script>
  document.querySelector('.button').addEventListener('click', function(){
  	"함수 실행"													^----콜백함수
  })
  
  setTimeout(function(){
  	"함수 실행"
  }, 1000)
</script>

원리 :

<script>
	function first(파라미터){
    	console.log(1)
    	파라미터()
    }
    
    function second(){
    	console.log(2)
    }
    
    first(second) //first 함수안의 코드 실행해주세요 파라미터에 second 집어넣어서!
    // ---> 1 2
</script>

---

Ajax

Ajax(Asynchronous JavaScript And XML)
-> 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술

서버란?
--> 유저가 데이터를 요구하면 데이터를 보내주는 프로그램
1. 데이터의 정확한 URL을 알아야한다.
2. 정확한 URL로 GET 요청을 해야한다.

GET요청하는 방법

1. 브라우저 입력창에 정확한 URL을 입력하는 방법
2. 버튼으로 GET요청하기

<form action="www.naver.com" type="get">
<butoon type="submit">

3. Ajax로 GET요청하는 방법
   (새로고침없이 서버에게 GET요청하는 JS코드)
   장점 : 새로고침이 없어서 웹페이지 전환이 부드러워짐

자바스크립트로 Ajax 요청하는 방법

1. JS방식

<script>
var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function() {
    	if(this.readyState == 4 && this.status == 200){
        	console.log(ajax.responseText)
        }
    };
    ajax.open("GET", "http://www.naver.com", true);
    ajax.send();
</script>

2. 최신 JS방식

<script>
fetch('http://www.naver.com')
	.then((response) => {
    if(!response.ok){
    	throw new Error('Error')
    }
    	return response.json()
    })
    .then((결과) => {
    	console.log(결과)
    })
    .catch(() => {
    	console.log('Error')
    })
</script>

or

<script>
async function 데이터가져오는함수() {
	var response = await fetch('http://www.naver.com')
    if(!response.ok) {
    	throw new Error ('Error');
    }
    var result = await responsse.json();
    console.log(result)
}
데이터가져오는함수().catch(() => {
	console.log('Error')
});
</script>

or

3. 외부 라이브러리 방식

axios 리액트, 뷰

<script>
axios.get('http://www.naver.com')
	.then((result) => {
    	console.log(result.data)
    }).catch(() => {
    	console.log('Error')
    })
</script>

* Ajax 요청시 CORS 관련 에러

예) www.naver.com에서 개발진행시 다른 사이트로 ajax요청이 불가능 => 보안이슈!!

--> 헤더에 Access-Control-Allow-Origin:"*" 추가하거나 CORS 정책 관련기능 끄기

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