목요일에 배운 REST-API와 GraphQL-API를 프론트엔드와 연동하는 방법을 금요일에 배웠다.
이전까지는 포스트맨을 이용하여 api테스트를 해왔었는데 지금부터는 axios라는 라이브러리 이용하는 것을 배웠다.
HTML파일에서 axios 를 이용하려면 head태그 안에
html에서 axios사용 준비는 완료했고,이제 axios를 이용하여 api로 요청을 보내는 로직을추가하면됩니다.
axios.post : api요청을 보낸다.
axios.then : 요청을 보낸 후, 실행되는 코드를 작성해 주면 되고, 요청에 대한 응답을 받아준다.
백엔드 파일로 돌아와서 서버를 실행을 시키고, 요청을 보내면 에러가 떠있는데 그 이유는 CORS문제이다.
포스트맨에서는 문제없이 요청완료가 되었지만, 브라우저상에서는 왜 이런 문제가 발생했는지 알아보면,
CORS (Cross Origin Resource Sharing)의 약자인데 이것은 서로 다른 출처를 가진 주소로 요청이 들어온 경우 발생할 수 있는 에러이다. 여기서 말하는 origin은 포트번호를 포함하는 url주소를 의미한다. 포트번호가 달라도 cors에러는 발생하게 되는데 이는 같은 주소임에도 불구하고 다른 출처로 인식 되기 때문이다.
이러한 cors문제를 해결하기 위해서는 직접 응답 헤더에 origin을 적어주는 방식도 가능하긴 하지만 더욱 간편하게 cors 라이브러리를 설치하면 해결할 수 있다.
터미널을 통해 yarn add cors입력 후 import cors from "cors"와 변수명.get(cors())을 추가해주면된다.
GraphQL-API의 라이브러리연결은 axios가 아닌 apollo-server를 설치하여 한다.
rest-api에서의 express는 graphql-api에서 apollo-server를 가져오는 것으로 바뀐다고 생각하면 이해하기 쉽다.
서버를 열어주기 위한 정의코드 작성법은
const 변수명 = new ApolloServer({
typeDefs: typeDefs,
resolvers: resolvers,
});
해주면 된다.
express에서 swagger를 통해 docs를 직접 작성했지만 grqphql의 경우 해당부분을 typeDefs에서 자동으로 생성해준다.
cors적용 방식은 restapi와 동일하다.
서버에 접속을 하면
graphql에서는 query와 mutation을 통해 데이터읽기, 등록, 수정, 삭제 모두 가능하다.
