오늘은 어제 학습한 API의 종류인 rest와 grapql를 연습 프로그램이 아닌 vscode에서 직접 실행 하였다.
API vscode에 적용하기
1. rest 사용하기
rest는 axios를 사용하기때문에 axios import가 필요하다.
rest는 모든 자료를 불러오기때문에 비교적 간단하게 해결 할 수 있었다.
2. graphql 사용하기
mutation을 사용한 graphql 은 내가 원하는 값들만 사용하기 때문인지 rest와 다르게 조금 복잡하다.
나는 우선 아래 순서대로 작성했다.
0) _app.js 수정
1) HTML 작성
2) API를 요청하는 동작 함수 작성 및 useMatation을 불러올 변수 생성 (사진에서는 result)
3) useMatation 함수 작성
4) "나의함수"에 담을 API 자료의 단위와 생성시 응답받을 자료 작성 (playground에 있는 자료와 단위가 동일해야합니다)
5) mutation 할 자료 정보 입력 (사진은 input으로 입력 예정)
6) input을 넣을 수 있게 함수 작성
여러번 반복했지만 아직은 API를 VSCODE 에 사용하기 쉽지 않은 것 같다.
진행하면서 대부분 $를 잘못 입력하거나, {}, ()를 잘못사용해서 에러가 발생했다.
작성했던 코드를 여러번 다시 작성하면서 useMutation 을 사용하다보면 적응할 수 있을 것 같다.
동기와 비동기
동기 : 요청을 보내고 응답을 받을때 까지 기다린 후 수행
비동기 : 응답을 받을때 까지 기다리지 말고 실행
위에 rest와 graphql을 vscode에 적용하고, useMutatian 을 사용하면서 새롭게 추가된 것이 있다.
API 응답을 가져올때 불러올 자료(함수)에 aysync와 await를 사용해야 한다는 것이다.
API를 사용할때 함수는 화살표 함수를 많이 사용하는데,
async는 소괄호() 앞에 await는 불러올 함수 앞에 입력하면 된다.
이것은 대부분의 도구들이 비동기가 기본값으로 설정되어있어,
API자료를 불러오기 전에 실행되어 버리면서 언젠간 출력해주겠다는 Promise가 출력되는 것이다.
(async와 await를 사용하면 자료가 응답 올 때까지 기다린다)
개발자와 에러
개발을 하다보면 수많은 에러를 만나게된다고 된다.
이때, 에러를 얼마나 빠르게 해결하는지가 개발자의 능력을 결정한다고 한다.
에러를 만나면 꼭 아래 순서로 진행하여 해결하는 능력을 기르자 😃
1) 직접 찾기
<HTML / CSS 에러 > : 개발자도구 Elements 확인
-> 디버깅(수정) 작업은 개발자 도구에서 수정 후 실제 코드를 수정후 코드 적용
<JS 관련 에러> : 개발자도구 Console 확인
-> 에러 발생시 코드 중간중간에 console.log()로 계속해서 확인
<API 관련 에러>: 개발자도구 Network 확인
2) 검색
3) 질문
'리액트' 카테고리의 다른 글
| Static, Dynamic 라우팅 (정적 / 동적 라우팅) (0) | 2023.01.18 |
|---|---|
| React state 원리와 props (0) | 2023.01.18 |
| 폴더 구조 체계화 (0) | 2023.01.16 |
| react onChange / if 조건문 수정 / 통신과 API (0) | 2023.01.11 |
| react 시작 - HTML,CSS 적용 / Hooks, useState / onClick, onChange (0) | 2023.01.11 |