동기식 vs 비동기식
비동기: 서버에 요청을 보내고 바로 다음 일을 수행하는 방식으로 요청한 작업이 끝날때까지 기다리지 않음.
즉, 동시에 여러 일을 할 때 사용한다
Javascript는 기본적으로 동기방식을 사용하지만 JS의 라이브러리들은 대체적으로 비동기 방식으로 동작한다.
ex) PC에서 SNS와 파일 다운로드를 동시에 실행하는 등의 동시 작업
동기: 서버에 요청을 보낼 때 A를 요청하면 A에 대한 응답이 올때까지 기다린 후 B 작업을 시행하는 방식
즉, 서버 컴퓨터의 작업이 끝날 때까지 기다리는 통신방식
비동기식을 동기식으로 바꿔줄 수도 있는데 이때 async와 await를 사용한다
//비동기 통신
function 함수() {
const data=axios.get (' 주소 ')
}
//동기식 통신
async function 함수(){
const data = await axios.get(' 주소 ')
>
>}호이스팅(Hoisting)
선언된 변수나 함수를 위치에 상관없이 우선 검사 혹은 할당을 하고 그 이후에 다른 line을 실행한다
즉, 변수 선언을 최하단에 해도 최상단에 위치한 함수에 사용이 가능한 셈.
단, 이름이 겹치는 함수가 있을 경우 가장 밑에 위치한 함수로 실행되며 그 위의 함수는 실행하지 않기 때문에 되도록 라인을 맞춰주는것이 좋다.
이런 오류를 막기위해 const함수(화살표함수)를 사용한다.
_app.js의 설정
어떤 page(index.js)를 실행해도 app.js가 먼저 실행된 후 해당 페이지를 읽어온다. 따라서 app.js에 설정을 해주면 page에 적용이 가능하며 apollo-client를 _app.js에 설정해주면 순서에 의해 적용하고자하는 index에서도 적용된다.
import {ApolloClient} from '@apollo/client' function MyApp({ Component, pageProps }) { const client = new ApolloClient({ uri: 'http://Aaa/graphql', cache : new InMemoryCache() }) return( <ApolloProvider client={client}> <Component {...pageProps} />) </ApolloProvider> } export default MyApp
위와 같은 방식으로 app.js에 설정해주면 되고 사용방법은 apolloClient 홈페이지의 docs를 참고한다.
react에서 apollo-client를 통한 통신
좀 당황했던 최상단부에서 하는 선언
매일 새로움을 갱신하는 중
playground를 통해 gql에 익숙해지면 금방 따라갈 수 있을것같은 부분이다.
setState를 통해 입력값을 저장하고 해당 값을 사용해 응답을 받는데 이 부분도 참조하는 사이트의 docs에 나와있고 return값의 타입도 나와있으니 대충 보는 실수만 안하면 될것같다
