[4기] 15일차 Java Script 배우기5(Ajax)

오늘의 학습 : Ajax 

 

원래는 어제 배웠지만! 오늘 복습! 

 

( 어제는 dom이해하느라 머리를 다씀...ㅋㅋㅋㅋㅋ)

 

지금 홈페이지 만들기 프로젝트중이라 

 

한참 만들고 이제 작성하게 됐네여..

( 9시라니,,,,9시라니,,, 아침9시부터 시간순삭됐네..ㅋㅋㅋㅋ...)

 

1. Ajax

- 비동기적으로 서버와 브라우저가 데이터를 교환하는 기술!

 

 

그래서 비동기적이 뭐지?

 

 

동기는 코드가 순서대로 실행시키는 것!

즉, 일정시간이 필요한 코드를 끝까지 기다리고 실행 후 다음 코드 실행 

 

그냥 처음부터 순서대로 동작하는것! 

 

그럼 비동기는?

 

일정시간이 필요한 코드를 기다리지 않고 다음코드 먼저 처리하는 것! 

 

> 기다리지 않는다면 순서대로 코드가 실행 되지 않음 ( 당연한소리 다음 코드를 먼저 처리하니 ㅎㅎ)

 

<script>
console.log(1);
setTimeout(() => console.log(2), 100);
[3, 4, 5].forEach(i => console.log(i));
console.log(6);
</script>

 

1. 콘솔에 1이 즉시 출력되고

setTimeout 를 이용하여 콜백함수가 일정시간 뒤에 실행하도록 한다!

2. 100ms 후에 함수가 실행되서 콘솔 2 출력

3. 배열 3,4,5 요소를 돌며 각각 콘솔 출력

4. 즉시 콘솔 출력

 

코드를 실행하면?

 

 

100ms 후에 출력되는 2가 젤 마지막에 오는걸 볼 수 있다!

 

 이것이 바로 비동기!

 

XMLHttpRequest

- 서버와의 비동기 통신을 가능하게 하는 여러기능을 가진 자바스크립트 객체!

 

const requestObj = new XMLHttpRequest();
requestObj.open('GET', 'url');
requestObj.onreadystatechange = () => {
    if (requestObj.readyState == 4 && requestObj.status == "200") {

        const result = requestObj.responseText;

    }
};
requestObj.send();

 

- 비동기적으로 서버로 http get 요청을 보내는 예

 

1. XMLHttpRequest 객체 생성 - 이것으로 서버와 통신

2. XMLHttpRequest 객체의 open 메서드를 호출해 GET 요청을 설정, 두 번째 매개변수는 요청을 보낼 URL!

3. onreadystatechange 이벤트 핸들러 설정 - 서버의 응답상태가 변경될 때 호출

4. 만약 서버응답상태가 4 이고, HTTP상태코드가 200인 경우만 코드 실행!

응답상태가 4, 200이라는건 성공적으로 응답했을때만 실행한다는뜻!

5. 변수 result 에 저장

6. 설정된 요청을 서버로 보내는데 실제 http요청 발생부분

 

여기서 ready state 의미는? 

 

 

ready state : 요청을 보내는 클라이언트 상태 

 

하지만 이렇게 비동기 코드를 작성할 때 발생하는 문제점으로 콜백 함수 콜백함수 콜백함수 콜백함수 

콜백함수가 중첩하여 사용할 때 callback 지옥 발생

 

이렇게 콜백 지옥으로 고통받다가 대체할 새로운 API 등장!

 

fetch - (가져오다, 찾아내다)

 

- XHR가 생성하는 인스턴스는 통신의 기능을 수행하는 XHR 객체를 반환했지만

fetch는 인스턴스를 만들지 않고 약속을 반환한다는 것!

 

약속? promise ?

 

우리가 생각하는 약속이랑 같은 의미이다. 

 

약속은 우리에게 결과를 준다 ( 약속을 지켜 주거나 안주거나 ) 

 

결국 지키든 안지키든 둘 중 하나의 결과는 무조건 전달 해주기로 약속할 테니 작업진행하자! 라는 뜻 !

 

이 개념으로 만들어졌기에 then 과 catch 이용하여 동기적 코드 이어 쓰기 가능!

 

const myPromise = new Promise((resolve, reject) => {
    const isSuccess = true;
    if (isSuccess) {
        resolve('Success!');
    } else {
        reject('Error!');
    }
});

myPromise
    .then(result => {
        console.log(result); // 성공 시 실행
    })
    .catch(error => {
        console.error(error); // 실패 시 실행
    });

 

mypromise 가 성공한다면? resolve 호출하고 실패한다면? reject 호출 

이것에 대하여 성공처리는 then 실패처리는 catch 처리!

 

fetch API 

 

fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json')
    .then((response) => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then((data) => {
        console.log(data);
        return data;
    })
    .catch((error) => {
        console.error(error);
    });

 

fetch는 함수처럼 바로 실행가능!

그럼! 함수를 사용하여 url 에서 json 데이터를 가져오는 비동기적 작업 수행하게 되는 것이다.

여기서 만약 응답 객체가 성공적인지 확인하는것이 then ! 

 

만약 성공하지 못한다면 에러 발생

 

성공이라면 response.json() 메소드 사용해

json 데이터 추출및 데이터 출력

 

catch 블록은 어떤 문제가 발생하든 그 에러를 콘솔 기록

 

async 키워드

 

- 어떤 함수든 프로미스 객체를 반환하게 만들 수 있다.

( return 키워드 없이도! )

 

???? 완전 간략해지겠는걸요,,,,ㅋㅋㅋㅋㅋ

 

function test(){
    return Promise.resolve();
}

async function test(){}

 

둘다 똑같이 동작하는데 완전 간략해졌죠 ㅋㅋㅋㅋㅋㅋ 신기하네 

 

그럼 async 함수 안에서만 사용할 수 있는 await!!!!

 

async function message() {
    const hello = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('hello');
        }, 100)
    })

    const world = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('world');
        }, 100)
    })

    console.log(`${hello} ${world}`);
}

message();

 

hello promise은 100ms 후에 hello 값을 resolve

world promise은 100ms 후에 world 값을 resolve

 

이때 awit은 이행 될때 까지 기다리며 해당값을 반환하기 때문에 두개 promise가 

순서대로 실행 되기에 200ms가 걸린다.

 

messge는 hello world 출력

 

이렇게 await 은 비동기 코드를 (순서대로 실행되는) 동기적으로 보이게 만든다. 

 

* 여기서 동기적으로 보인다는 것이지 동기적으로 변하는 것은 아니다.

 

즉 코드의 실행을 멈추지만 브라우저나 자바스크립트환경에서는 다른 작업들이 진행중이다.

즉, await 있는 부분만 일시 중지되어 비동기 코드를 동기적으로 작성하는 것처럼 보이는 것이다!!!!

 

이렇게 ajax 까지 간략하게 공부하였는데영 ㅎㅎ

 

좀 더 따로 공부해봐야할 거같아요 ㅠ

 

이해는 했지만 다른 예제 코드를 계속 봐야 

익숙해질 거같네요 ㅎㅎㅎ

 

오늘은 수업 때 프로젝트 만들기를 했는데영 ㅎ

 

역시 쉽지 않았어요 ㅠㅋㅋㅋㅋ

 

전 아직 너무 느리달까요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 막힐때 마다 고민한다고 시간을 너무 써버렸지뭐예요 ㅠ 

 

 

너무 느리지만 그래도 이정도까지는 만들었답니다,.,,ㅎㅎㅎ,,,ㅎ,ㅎ,,, 

 

내일 나머지는 만들어 보는걸로!!!! 

 

내일부터는 블로그를 무얼 써야할까.. 

 

다음주 화요일 까지 홈페이지 만드는 프로젝트 하는중이라 .. 흠

 

 

고민좀 해봐야겠네요 ㅎㅎㅎ

 

튼, 오늘도 공부 열심히했구 !

 

내일도 파이팅!!!!!!