1)콜백 함수

//1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다.

function sayHello(){ //sayHello 라는 함수를 만듭니다.
	console.log('나는 그랩이다.');
}

function getHuman(callback){ //getHuman 함수의 파라미터에는 함수가 들어갑니다.
	callback(); //callback 파라미터는 함수이기에 실행시킬 수 있습니다.
}

//getHuman의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.
getHuman(sayHello) //'나는 그랩이다'가 출력됩니다.

• 다른 함수의 매개 변수로 쓰이는 함수를 콜백 함수라고 합니다.
  • 콜백 함수는 다른 함수에 대입할 때, ()를 빼야한다.

2)익명 함수

//아래와 같은 형식으로도 사용이 가능해요. 이렇게 많이 사용되니까 꼭 알아두면 좋습니다. 
//함수의 이름을 붙여서 선언하지 않고 1회용으로 사용되는 함수를 만듭니다.
getHuman(function(){
	console.log('나는 그랩이다.')
})

• getHuman()함수안에 이름이 붙여지지않은 함수를 사용했다.

3)콜백 함수를 알아야 하는 이유

• 자바스크립트에서 기본적으로 제공하는 함수와 라이브러리를 사용하기 위해서

//대표적으로 setTimeout, setInterval 함수가 있습니다.이들은 javascript 기본으로 탑재되어 있는 내장함수입니다.

//이 두 함수는 첫 번째 인자에 콜백 함수를 넣고 두번째에 ms 단위의 숫자를 넣습니다.
setTimeout(function(){
	console.log('3초 뒤에 실행됩니다!');
}, 3000)

setInterval(function(){
	console.log('1초마다 출력됩니다')
},1000)

• 콜백함수 사용시에 괄호를 빼야한다.
  • 예시 setInterval(getResult,1000)
• setTimeout(,)
  • 의미 : 정해진 시간이 지나고 함수를 실행시킨다.
    • 3초있다가 함수실행시키고 끝
  • 왼쪽 : 실행시키고 싶은 함수를 넣는다.
  • 오른쪽 : 시간을 입력한다. 3000 -> 3초를 의미한다
• setInterval(,)
  • 의미 : 정해진 시간마다 함수를 반복하여 실행시킨다
    • 2초마다 반복하여 함수를 실행시킨다.
  • 왼쪽 : 실행시키고 싶은 함수를 넣는다.
  • 오른쪽 : 시간을 입력한다. 2000 -> 2초를 의미한다.

4) 콜백 함수에는 매개 변수를 넣어서 사용한다.

//콜백에 사용될 함수
function callbackFunc(name){
	console.log(name);
}

function sayHello(callback){
	var text = 'hello';
	callback(text);
}

sayHello(callbackFunc); //hello가 출력됩니다.
sayHello(function(value){ //위와 동일하게 value에는 hello가 들어갑니다.
	console.log(value) 
})

5) 비동기 처리

• 브라우저가 자바스크립트 코드를 읽는 방식
  • 위에서 아래로 읽는다.
• 비동기 처리란?
  • 위의 코드가 결과를 얻는데 시간이 오래걸리는 경우, 결과를 기다리면서, 아래의 코드를 실행시키고 있는다.
• 동기 처리란?
  • 위의 코드의 결과가 처리안되면, 아래의 코드는 실행되지 않는다.

//setTimeout 함수도 비동기 처리를 지원합니다.
setTimeout(function(){
	console.log('3초 뒤에 실행됩니다!');
}, 3000)
console.log('바로 실행됩니다.');

• setTimeout(,3000)함수는 3초뒤에 실행된다. 기다리면서, 아래의 코드도 실행시킨다.
  • 결과 console.log('바로 실행됩니다.'); 실행 후에 setTimeout() 실행된다.

6) 마크다운 문법으로 자바스크립트 코드 입력시

백틱(`) 3개 작성 jsx

백틱(`) 3개 작성

7) 문제 / 개념 / promise 객체

Failed to fetch at :1:14 이라는 오류가 뜬다. 모르겠다.

• promise 객체란? 비동기 처리를 지원하는 객체중 하나이다.

let result = fetch('Url주소');
console.log(result);

• fetch() promise 객체를 반환하는 함수이다. 그리고 네트워크 통신함수이다.
  • 변수 result에 promise 객체가 저장된다.

result.then(function(response){
	console.log('이 코드는 네트워크 통신이 끝나고 나서 실행되요.',response)
}).catch(function(error){
	console.log('이 코드는 에러가 났을 때 실행되요',error)
})

• result에 promise 객체가 저장되면 .then() 과 .catch()를 사용할 수 있다.
  • .then() 안에는 익명 함수가 들어간다.
    • 네트워크 통신이 실행되고, 끝나면, 익명 함수가 실행된다.
  • .catch()안에도 익명 함수가 들어간다.
    • 실패하면 익명 함수가 실행된다.

8)네트워크

• 네트워크란?
  • 컴퓨터와 컴퓨터간의 연결을 의미한다.
• 클라이언트와 서버
  • 클라이언트 정보를 요구하고, 받는다.
  • 서버 요구받은 정보를 찾고, 전달한다.
    

9) HTTP 통신

• 네트워크 방식들을 네트워크 프로토콜이라 부른다.
  • 여기서 가장 많이쓰이는 것이 바로 HTTP 프로토콜이다.
• HTTP 통신에는 요청과 응답이 있다.
  • 요청에는 2가지가 필요하다
    • 어떤 서버에게 요청할 것인가? Url주소
    • 어떤 방식으로 통신할 것인가? GET, POST등등
      • GET 일반적으로 사용, 정보를 요청받을 때 사용
        • 웹 다운, 내 상품정보 받을 때
      • POST 데이터들을 묶어서 보내서 정보를 요청받을 때 사용
        • 로그인, 아티클 만들 때(아티클 정보를 담아야함)
  • 응답에는 2가지가 있다.
    • 응답상태를 나타내는 status code가 있다.
      • 200번대 : 정상
      • 400번대 : 클라이언트가 잘못 요청했을 때
      • 500번대 : 서버에서 에러가 발생했을 때
    • 요청 결과를 HTTP의 Body에 담아야 한다.

10) 요청할 때, 정보를 담는 방식

• GET방식
  • Url맨 뒤에 query를 붙인다. querys는 key=value 형태이다.
    • https://www.youtube.com/watch?v=5oQIwF7id2A
    • ? 기준으로 v라는 key와 5oQIwF7id2A value이 있다.
• POST방식
  • HTTP의 Body부분에 데이터를 담을 수 있다.(GET방식으로는 불가능)
  • POST방식도 Url맨 뒤에 query를 붙일 수 있다.
  • 예시 : 로그인, 상품 업로드, 결제하기

11)axios 외부 라이브러리를 이용해서 서버와 통신하기

• head tag안에 아래의 코드를 복붙한다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• axios 라이브러리를 다운받는 역활을 한다.

• axios에서 get, post 사용하기

axios.get(url주소) 
axios.post(url주소,data 객체) 

• 통신 결과가 성공이면, result가 출력되므로 result에 담긴 네트워크 결과가 출력된다.
  • result.status status 코드를 알 수 있다.
  • result.data HTTP가 응답한 결과를 알 수 있다.

//기본적으로 axios 메소드는 promise 객체를 return 합니다.
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then(function (result) {
  console.log("통신 결과",result);
  console.log("status code : ",result.status);
  console.log("data :",result.data);
})
.catch(function (error) {
  console.log("통신 실패", error);
});