[ 엘리스 SW 엔지니어 트랙 ] 18일차

📍 18일 차 11.18. 목.(실시간 강의)

오늘은 실시간 강의로 Ajax, promise, async / await, SPA 에 대해 배웠다.

---

❏ SPA 만들기

1. SPA로 구현하려면 경로로 접속할 때 같은 파일을 내려줘야 한다.
2. html 파일은 웹 서버에서 보관하고 html 해석은 웹 브라우저에서 한다. html 파일을 가공해서 고객들에게 보여주는 행위를 client side tech, 혹은 front end 라고 한다.
3. header: 서버에서 클라이언트에게 전달하는 정보
4. fetch를 사용하면 JSON 형태의 내용이 온다.
5. JS에서 객체를 표현하는 방법을 참고해서 만든 data spec
6. JSON.parse: JSON으로 넘어온 데이터를 JS 객체 형태로 바꾼다.
7. Ajax: JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
8. XMLHttpRequest 는 크로스브라우징을 고려해야한다. 지금보니까 fetch도 꽤나 안되는 브라우저들이 있었다.(Edge 12-13, IE, Opera Mini)
9. fetch: fetch(url).then(type => type.json()) : promise를 json타입으로 바꿔준다.
10. XMLHttpRequest을 fetch 버전으로 바꿔보기

// XMLHttpRequest로 JSON 객체 가져오기
function name() {
    var request = new XMLHttpRequest();
    request.open("GET", "https://gorest.co.in/public/v1/users", false); // `false` makes the request synchronous
    request.send(null);

    if (request.status === 200) {
        let text = request.responseText;
        let obj = JSON.parse(text);
        console.log("obj", obj.data[0].name);
        document.querySelector("#name").value = obj.data[0].name;
    } else if (request.status === 200) {
    }
}

// 타입을 json으로 결정한다
1. let json = fetch("https://gorest.co.in/public/v1/users").then(type => type.json())

👉🏽 Promise {<fulfilled>: {…}}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

// 타입을 처리한다
json.then(res => console.log(res))
👉🏽 {meta: {…}, data: Array(20)}

 

728x90

❏ JSON

1. 데이터를 주고받을 때 사용하기 위해 고안된 데이터 형태
2. get 방식은 data 를 가져오기
3. 서버로 값을 보낼 때는 JSON 형태로 보내고, POST 할 때는 headers 설정과 JSONstringify 를 사용하기
4. 짝 프로그래밍

fetch('/topics', {
    method:'POST', 
    body:JSON.stringify({title:'js', body:'js is ..'}), 
    headers: {
        'Content-Type': 'application/json'
    }})

❏ async / await

1. promise 코드에 async - await 문법을 사용하면 비동기적인 코드를 동기적으로 관리할 수 있다.
2. promise로 반환한 객체 앞에 await 를 붙이면 비동기적인 동작을 끝낼 때까지 기다린다.
3. await 는 전역적으로 사용하는 것이 아니라 async함수 내에서만 사용할 수 있다.
4. 상황에 따라 promise, async 를 맞춰서 사용하면 된다.
5. async 문법은 promise 를 리턴한다.
6. async:함수 내에서 비동기적으로 실행되면 비동기가 끝나면 다음 비동기가 실행된다

// async - await
async function asyncFunc() {
    return "elice";
}

// promise
function promiseFunc() {
    return new Promise((resolve) => resolve("elice"));
}

console.log(asyncFunc());
👉🏽 Promise { 'elice' }

// 인자와 return 값이 인자 한개면 생략할 수 있다.
console.log(asyncFunc().then(console.log));


console.log(promiseFunc());
👉🏽 Promise { 'elice' }

//async, await으로 변환하는 방법

// 1. Promise 대신 async로 비동기 처리해 'elice'를 반환하도록 fetchUser 함수를 수정하세요.
async function fetchUser() {
    return 'elice';
}

const user = fetchUser();
user.then((res)=>console.log(res));

// 2. delay 함수를 이용해 getCoffee와 getTea 함수를 작성하세요.
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getCoffee() {
    await delay(1000);
    return 'coffee';
}

async function getTea() {
    await delay(1000);
    return 'tea';
}

// 3. 위 두 개의 함수를 사용해서 coffee와 tea를 한번에 반환합니다.
async function getDrinks() 
{
    const coffee = await getCoffee();
    const tea = await getTea();
    return ${coffee} and ${tea};
}

getDrinks().then((res)=>{console.log(res)});

❏ REST API

1. 이고잉님의 REST API에 관한 짧은 영상 강의 보기
2. REST: HTTP를 기반으로 클라이언트에서 서버로 연결할 때 정해진 아키텍처에 따라 접근하는 방식
3. RESTAPI: REST를 기반으로 서비스 API를 구현한 것