JS는 기본적으로 동기적으로 작동된다
거기서 axios등 외부설치 프로그램('라이브러리' 라고 한다.)은 비동기적으로 작성된다.
동기? ==> API를 예로 들면 등록이 완료될때까지 기다린후에 불러오기를 해야 정보를 받아올 수 있는 것.
비동기? ==> 요청들을 서로 기다릴 필요가 없어 여러 작업을 동시에 하게될때 사용한다.
우리가 흔히 핸드폰으로 무언가를 다운받거나 하면서 인터넷 서핑이나, 영상재생등을 하는 것도 비동기 방식에 해당된다.(가끔씩 게임을 다운받다가 그 페이지에서 나가면 해당 다운이 멈추는 경우가 있는데 그 경우는 동기방식인 것 같다.게임을 다운받기위해서는 그 핸드폰으로는 다른작업을 하지 못하기때문이다.)
그전에 rest방식과, graphql방식을 이용하기 위해서는 우리가 사용할 프로그램을 설치해야 하는데, reset-API를 이용하기위해 axios라는것을 , graphql-API방식을 위해 apollo client를 사전에 설치해주었다.(사실 첫시간에 이것저것 설치하며 본것 같기도한데, 그때는 처음보는 애들이라 그래픽관련한 무언가인줄 알았다.)
둘의 설치가 완료되면 graphql의 경우에는 이것을 폴더 전체에서 사용할 수 있게 미리 설정해 주어야하는데, pages폴더에 _app.js에서 설정해주면된다.
사실 만들어진 각각의 파일들은 하나의 페이지인데, 그 하나의 페이지에서 실행되는것이 아니라, _app.js로 코드가 옯겨져 각각 실행되는 것이므로 여기에 설정을 해 놓으면 해당 폴더 전체에 적용이 되게 되는 것이다.
각각 프로그램을 설치한 곳에 가면 API-docs를 제공하는데 이곳에 설정 방법이 나와있다.
나도 설명해주신대로 설정을 해보고 docs를 확인해봤는데 좀 더살펴봐야 알 것같다. 많은 것들이 있었는데, 왜 그부분만 적었는제 다시 천천히 봐봐야겠다.
설정을 끝낸뒤 데이터를 받아오는데, rest 방식의 API를 불러오기 위해 axios를 사용할때는 koreanjson.com주소를 이용했고,graphql-API를 불러올때는 플레이그라운드의 제공해주는 주소를 사용했다.
그러나 기본적으로 외부에서 설치된 프로그램은 앞서 말했듯이 비동기로 작동되어 데이터를 불러온다고 해도 console창에 찍어보면 promise로 받아온다. 주긴줄테니 데이터를 받아올때까지 기다리라는 의미이다.
따라서 데이터를 바로 받아보고 보내고 하려면 동기처럼 보이게 만들어주어야한다.
async와 await의 사용
await. 말 그대로 기다리라는 의미.
await전체를 함수 감싸준 뒤 그 앞에 async를 써주어 원래는 비동기였음을 표시해주는 것이다. await 를 쓸때는 반드시 async를 같이 써주는데, 그냥 비동기 방식으로 쓸때는 async를 넣어도 되고 안넣어도 된다.
import axios from "axios";
async function 함수이름 () {
const.data = await axios.get '주소 '==>get요청으로 받아올주소를넣어주면 된다.
}
정리: function은 기본적으로 동기이기에 await 만쓰면 동기로 인식하니 async로 원래는 비동기였음을 알려주기!!
화살표 함수의 사용
var처럼 function도 중복선언 문제가 있다.
같은 이름의 function을 중복선언하게되면 마지막에 선언된 함수만 남게된다.따라서 화살표 함수로 바꾸어 사용한다.
const 함수명 = () => {
본문
}
그럼 async는 함수 앞에 쓰는데 화살표 함수에서는 어디에 써야하는가?
바로 소괄호 쪽이 함수의 시작이니, 소괄호 앞에 작성한다.
정리!! 리엑트에서 같은 이름의 함수를 중복선언 한 경우 아래것이 위의 것을 덮어쓰기 때문에 문제가 있다.(버전이 올라가며 해결은 되었으나 주의 할 것)따라서 화살표 함수를 사용한다.
axios를 사용하는 이유: 다운로드수가 많고,(천만이 넘어가면 많은 곳에서 대중적으로 사용한다는 의미)객체를 주고받을 수 없기에 json을 사용하여 객체형태인 문자열로 주고받는데, 이 도구는 문자열로 받아와 객체로 바꿔주는 작업까지 해서 내보내주기에 편리하기때문이다.
graphql-API vs코드 실습 .
이때는 useMutation이라는 것을 사용한다. apollo에서 제공하는 hooks이라고 한다.(use로 시작하면 hooks)
플레이그라운드에서 작성해보고 복사해와서 사용하면 되는데, 그냥 사용하면 너무 길어지니 이것을 따로 변수에담아 사용한다.
그전에 세팅이 필요하다
import { gql, useMutation } from "@apollo/client";
그리고 const 변수명 = gql 여기 벡틱 안에 담아준다
여기서 gql은 graphql의 약자이다.
다시 강조하는 것!
JS는 동기! 외부 설치 프로그램인 라이브러리들은 기본 비동기.
따라서 기다리지 않고 바로다음 실행으로 넘어가 Promise를 보내줌.
기다려줘야 원하는 결과를 받아올 수 있어 async와 await를 사용하여 동기로 만들어준다.
혹시나 보내는 과정에서 오류가 생기는 경우 ==>콘솔창의 network창에서 graphql부분에서 fetch가 우리가 실제 요청한 부분이다. header부분에서는 오류코드를 확인할 수 있는데 4로시작하는 오류가 프론트엔드 즉, 우리가 데이터를 요청했을때 뭔가 잘못되었다는 의미이고 정확히는 response부분을 확인해보면 뭐가 잘못됬는지 알 수 있다.
난 다음의 요류가 났었다.
어떤것을 검색해야하나 전체를 다 복사해 검색하기도 하고 지워보기도 하다가 딱 들어오는 글자를 찾았다. int 분명 정수라고 해서 숫자를 적었는데 뭐가 잘못되었는가. 그래서 Int cannot ...부분을 복사해 검색해보았다.
그러다가 parseInt()를 사용하라는 말을 보고 기존 변수를 감싸주었더니 해결되었다.
콘솔창에서 각각의 요청한 정보들의 크기도 확인 가능한데, 골라받기가 가능하기때문에 훨씬 적은 용량으로 받고, 시간이 적게걸린다.
*스코프체인:
function의 하나의 중괄호? 안을 스코프라고 하는데, 그 스코프 안에서 원하는 값을 받아올 수 없다면 스코트가 위로위로 올라가기 시작하는데 그것이 바로 스코프 체인 이라고 한다.
*uri?url?
: uri가 더 큰 개념. 흔히쓰는 주소가 url, 그 뒤에 #....라고 붙은것까지가 uri
http부분만 제외한 나머지는 urn
