1. 동기와 비동기방식 Async-Await
동기방식 : 게시글 등록 -> 게시글 등록 완료 -> 게시글 불러오기 과정
-> 자바스크립트는 코드를 한줄씩 읽어내려가므로 동기방식
비동기 방식 : 게시글 등록과 거의 동시에 게시글이 등록이 완료되기도 전에 게시글 불러오기 요청이 이루어짐
->동시에 여러 일 할때 사용
2. 변수, 함수가 이상해 ㅜㅜ Hoisting
오래된 자바스크립트 문법 var이나 function의 경우
console.log(child)
var child="철수"
이렇게 코드를 작성했을때 당연히 error가 나야하지만
자바스크립트에서는 undefined가 나오게 됨
자바스크립트는 먼저 변수를 모두 읽어놓고 코드를 한줄씩 실행시켜나가기 때문에 이런 오류가 발생한다.
child = undefined
console.log(child)
var child="철수"
이런식으로 맨 윗줄에 미리 변수를 작성해두고 3번째 줄에 오게되면 그때 변수에 철수를 담아줌
코드가 짧은 경우에는 상관없겠지만 코드가 길어질 경우 예상치 못한 에러를 발생시키고 찾을수도 없는 코드 무덤을 만들 수 있기 때문에
var는 절대 사용하지 말아야한다
변수를 선언하여 만든 함수나 화살표함수가 아닌 그냥 funciton xxx()로 사용되는 함수들 또한 같은 문제가 발생할수도 있음
3. VSCODE에서 직접 데이터를 전송 Apollo-Client/Mutation
rest API 방식
우선 axios를 import 시켜준다.
api를 요청하는 함수를 만들어주고 data에 api가 들어오기전에 다음 코드로 넘어가는 걸 방지하기 위해 async와 await를 사용해준다. 그럼 axios.get을 통해 api를 요청하고 data 받아오면 const data 변수에 그 결과를 담아준다.
기본적으로 자바스크립트는 동기방식이기 때문에 await를 해주지 않으면 undefined를 const data 변수에 담아버림
GrahpQl 방식
우선 GrahpQl 방식의 경우 세팅이 필요함
세팅의 경우 웹에서 무조건 실행되는 app.js에서 하게되고
사진에서와 같이 ApolloClient,ApolloProvider,InMemoryCache를 import 시켜주고
const client에서 uri에 연결하고싶은 백엔드 주소를 적어준다.
return에서는 우리가 보게될 Component 페이지를 ApolloProvider로 감싸줘 client가 모든 페이지에 적용되게 만들어준다
GrahpQl
const [실행함수] = useMutation(CREATE_BOARD)
useMutation이라는 도구로 API를 요청 useState와 같은 훅이다.
CREATE_BOARD에는 아래 사진처럼 플레이그라운드에서 사용되는 mutation 정보를 받아 입력해준다.
callGraphqlApi 버튼을 누르면 게시물이 등록되는 함수로 callApi라는 실행 함수를 통해 API를 요청하고 variables에서 가져온 api 키값에 유저가 입력한 input값들을 보낸다.
