VScode에 REST-API 적용
-
기본적으로
axios같은 API 요청 도구들은 비동기로 작동함 (응답을 기다리지 않음)
*외부에서 설치한 프로그램들은 대부분 비동기로 작동 -
이를 해결하기 위해
async/await을 활용해서 응답을 받을 때까지 기다려줄 수 있음
+a) Promise 객체
-Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체
-주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 사용
-데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 되는데, 이러한 문제를 해결하기 위한 방법 중 하나
*Promise 객체를 반환해서 현재 요청에 대한 응답상태를 알려 줌(에러 방지)
VScode에 graphQL 적용
apollo-client 세팅
- PlayGround에서 테스트한 코드를 VScode에 적용하기 위해서는 apollo-client라는 도구가 필요
-
_app.js에 위와 같이 작성해 줌 -
ApolloClient= graphQL 서버와 상호작용할 수 있게 해줌, 데이터의 변경이 있을 시 이를 업데이트 해 줌 -
InMemoryCache= Query, Mutation 요청에 대한 응답을 저장하고, 후에 똑같은 요청이 있을 시 서버에 요청하지 않고 저장되어 있던 응답 데이터를 그대로 반환 -
ApolloProvider= ApolloClient로 가져오는 데이터를 지정된 컴포넌트에서 사용할 수 있게 해줌
*ApolloProvider 태그 내에 컴포넌트가 있어야만 적용됨!
graphQL 사용하기
-
import로 사용할 기능(useMutation,useQuery,...)과 gql 을 apollo/client 에서 가져옴
-
graphql playground 에서 사용할 API 를 복사하여 붙여넣기 한 다음, 이를 백틱으로 묶어줌
-
이 후 앞에 gql을 붙여서 해당 코드가 gql 형식임을 인식시켜 줌
-
백 틱으로 묶인 API는 보통 변수에 담아서 사용하는 데 이때 변수명은 해당 API의 이름을 대문자로 표기하는 게 관례임 (ex. CREATE_BOARD)
-
위와 같이 const [함수이름] = useMutation(사용할 API) 으로 API를 특정 함수에 담아서 필요할 때 함수실행으로 API를 사용할 수 있음
+a) API 요청 값(value) 변수로 설정하기
- 위와 같이 mutation 앞에 API 이름을 쓰고 ( ) 안에 각각의 key와 value 타입을 지정 [지정 안할시 오류 발생]
- 이후 작성된 API 코드 내에
$로 지정된 부분은 변수가 됨 (들어가는 값이 달라질 수 있음)- mutation을 담은 createProduct 함수의 인자에 variables 객체 입력
*여기서 각각의 key에 지정하는 값이 API 값으로 등록되어 요청됨
+a) urn, url, uri
uri= 인터넷에 있는 resource 자체를 식별하는 식별자, url과 urn을 포괄하는 개념
*url, urn은 uri의 한 종류
url= 인터넷에 경로를 기준으로 resource 위치를 알려주는 식별자
urn= resource를 식별할 수 있는 이름(불변성)으로 식별 (url과 달리 resource의 위치가 바뀌어도 urn 표기 방식은 변화없음)
ex.[예시]
uri= [https://www.naver.com/index.html?page=1232950&id=776]
[page=1232950&id=776] 는 찾고자 하는 정보 그 자체임 (page에 따라 값이 바뀜)
url= [https://www.naver.com/index.html]
[정보가 있는 최종적 위치 (식별하고자 하는 정보는 빠져있음)]
+a) _app.js
- 설치한 도구들은 기본적으로
_app.js에 위치하게 됨- 페이지별로 만드는 index.js 파일은 그 파일 자체가 실행되는 것이 아닌, _app.js 내에
<component />자리에 index.js 가 들어오고 난 후 _app.js 가 실행되는 것- 즉,
_app.js는 모든 page에 공통으로 설정되는 파일이며, 파일 내부의 설정들이 전역 설정임
