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 데이터들을 묶어서 보내서 정보를 요청받을 때 사용
- 로그인, 아티클 만들 때(아티클 정보를 담아야함)
- GET 일반적으로 사용, 정보를 요청받을 때 사용
- 응답에는 2가지가 있다.
- 응답상태를 나타내는 status code가 있다.
- 200번대 : 정상
- 400번대 : 클라이언트가 잘못 요청했을 때
- 500번대 : 서버에서 에러가 발생했을 때
- 요청 결과를 HTTP의 Body에 담아야 한다.
- 응답상태를 나타내는 status code가 있다.
- 요청에는 2가지가 필요하다
10) 요청할 때, 정보를 담는 방식
- GET방식
- Url맨 뒤에 query를 붙인다. querys는 key=value 형태이다.
https://www.youtube.com/watch?v=5oQIwF7id2A- ? 기준으로 v라는 key와 5oQIwF7id2A value이 있다.
- Url맨 뒤에 query를 붙인다. querys는 key=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.statusstatus 코드를 알 수 있다.result.dataHTTP가 응답한 결과를 알 수 있다.//기본적으로 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); });
dev