[6] JS - Vue

[ provide, inject ]

- 컨테이너/프리젠터패턴

    //setITem은 이름이 같으면 덮어쓴다.

    localStorage.setItem('count', data.value)

 

JSON = 객체를 표시하는 방법

- 문자열로 구성되어 있다.

- JSON.stringify() > ()안에 데이터를 제이슨 문자화

- JSON.parse

 

[ LocalStorage 활용방법 ]

(키오스크)

-Mounted

onMounted(() => {

    console.log('Mounted........................................')

})

- 마운트 되었을때 실행된다

 

 

[비동기 프로그래밍]

- 브라우저, Node.js는 Single Thread이다. > 이벤트 루프

- 서버소켓 : 읽고 처리하고 쓰고 보낸다.

- 비동기로 서버를 호출하고싶다

> HTTPREQUEST를 썼지만 표준으로 Fetch API가 존재한다. 

(기본으로 들어가있음 XMLHTTP를 대신하는 것)

- 표준이기 때문에 아무것도 하지 않아도 된다.

* 함수앞에 async가 있으면 결과 값은 항상 'Promise'다

//함수앞에 async가 있으면 결과값은 항상 Promise다

const getData = async () => {

    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')

    return res.json()

}

 

[ 비동기 처리시 많이 쓰는 것 ]

1. J.QUERY - 비동기 처리를 지원한다.

2. Fetch API

3. Axios ( Default : JSON )

//함수앞에 async가 붙어있으므로 무조건 리턴 결과물을 우리눈에는 JSON데이터 처럼 보인다.

//async로 되어있는 함수는 무조건 Promise를 준다.

//진동벨

//비동기 처리할건데  이 안에서는 동기화된 방식으로 코드를 작성할거야

const getData = async() => {

    //axios.get = Promise를 반환

    //await를 붙여주면 동기화된 방식으로 코드를 작성할 수 있음

    //await가 있으면 무조건 그 함수는 async가 있어야 한다.

    const res = await axios.get('https://jsonplaceholder.typicode.com/todos')

    //결과 데이터를 반환하는 것처럼 보이지만, 함수의 결과는 항상 Promise이다.

    return res.data

}