어제 Rest-API, Graphql-API 기초연습에 이어서 실제 vscode 에서 적용해서 실습 하였다.
Rest-API는 간단히 실습하였다.
Rest-API는 vscode에서 사용하려면 Axios라는것이 필요하고 이부분은 미리 설치해 놓았다.
Get 방식을 통해서 데이터를 가져오는 실습을 하였다.
Rest-API 간단 실습
먼저 Rest-API를 사용하려면 axios를 import 해온다.
const result라는 곳에 변수를 담고 console.log로 내용을 확인해보면
console 창에서 해당 게시글에 대한 정보를 확인할수 있다.
Graphql 기초실습
Graphql-API의 경우 조금 복잡하다.
Rest-API의 경우처럼 Graphql도 apollo 라는것이 필요하다.
설치하는것 뿐만 아니라 app.js 파일에서도 설정이 필요하다.
vscode app.js 에서 설정이 필요하다.
import 해올것도 좀 있고, 통신 url도 설정해야하고 ...
이부분은 설명을 못들었는데 추후 알려주신다고 한다.
이제 초기설정을 완료하였으니 vscode에서 사용하면 된다.
오늘은 Mutation을 이용하여 실습하였다.
Mutation을 사용하려면 useMutation, gql을 apollo/client로부터 import 해와야 한다.
import한뒤 변수를 지정하고 gql 안쪽 부분에 mutation 정보를 적는다.
import 부분에선 사용해야할 useMutation, gql을 불러온다.
그다음에는 CREATE_BOARD란 변수를 선언하고 gql을 적는다.
조금 특이한점은 변수선언을 export default 윗부분에다 적는다.
export default 아래부분에는 위에 부분과 짝이되는내용을 적는다.
또한 동기통신으로 데이터를 받아보려면 실행하는 함수 선언 앞부분에 async, 실제실행 함수 앞부분에 await를 넣어줘야 정상적으로 데이터를 받아 눈으로 확인할수 있다.
자바스크립트는 기본적으로 비동기통신이 디폴트값이다.
비동기통신으로 데이터를 전송하면 promise(pending)이라는 메세지가 나오는데 이말은 데이터 언젠가는 줄테니 기다리라는 말이다.
const [createBoard] = useMutation(CREATE_BOARD)을 적어준다.
여기까지 적어주면 기본 세팅이 끝난다.
위에 gql 부분은 Graphql-API에 접근해서 요청할값, 리턴받을 값을 적는곳이고
state 처럼 사용하기 위해 useMutation(CREATE_BOARD)를 저장하는 의미이다.
여기까지 했으면 보내줄값, 리턴받을값 해당 기능을 담은 변수까지 설정이 완료되었다.
이제 그 아래부분에는 어떤 동작을했을시 요청할지를 state처럼 할당하면 된다.
위 예시에서는 보내줄값, 받아올값을 그냥 적어줬기때문에 요청하면 바로 게시글이 생성되고 생성된 게시글에
리턴값으로 number, message가 리턴된다.
위에서 Graphql-API 요청하기 버튼에 onClick으로 기능을 부여해놨고 해당 버튼을 누르니 콘솔창에 입력되는 내용이다.
message:"게시물이 정상적으로 등록되었습니다."
Number: 673
Graphql-API를 이용해 성공적으로 데이터를 보내서 게시글을 등록하였고 그 게시글에 대한 정보를 리턴 받았다.
Graphql 심화실습
위에서는 성공적으로 요청을 하였지만 한가지 문제가 있다.
바로 내가 직접코드에 적은 하드코딩 이다.
웹사이트를 이용하는 유저가 있다고 생각해보면 게시글 등록에 대한 Action은 관리자가 아닌 유저가 한다.
유저가 게시글에 대한 내용을 입력하고, 등록요청을 하면 리턴받은 값으로 게시글이 정상적으로 등록되었는지 확인한다.
이런식으로 코드를 짜려면 위에서 한방식에서 2가지 부분정도가 변경되어야 한다.
gql 부분은 아래처럼 변경되어야 한다.
위에서 진행한 예시와 다른점이 있다.
요청할 값이 정해져있지 않기때문에 요청할 값의 데이터타입과 $ 표시를 붙여준다.
데이터 타입에 대한 정의를 해줘야 하기때문에 한줄이 추가된다.
createBoard($writer: String, $title: String, $contents: String)
이부분을 적을때 중요한점이 있다면 데이터 타입은 대문자까지 아주 정확히 적어줘야 한다.
여기서 대소문자 구분이 다르다면 로직이 구동이 안된다.
아래쪽 부분에도 바뀐게 있다.
아직 데이터를 입력받지 않았기 때문에 작성자가 누군지, 제목이 누군지, 내용이 뭔지 알수 없다.
그래서 동일하게 $ 표시를 붙여준다.
작성된 코드를 말로 풀어보면
writer에 입력된 값은 $writer 이며, $writer를 서버에 요청할것이고, $writer의 타입은 String 이어야 한다는 이야기 이다.
함수 실행 부분에서도 필요한 내용이 있다.
위에서 실습한 기초 예제에서는 const result = await creatBoard() 이부분 밖에 적지 않았다.
이경우에는 variables 라는 객체가 추가되는데 잘은 모르지만 곰곰히 생각해보면 게시글 등록하기란 행동을
했을때 서버에 보내주려면 각 내용을 객체로 저장해 전달해야 할거고.. 그래서 이런부분이 추가 되는거 같다.
variables는 객체 이다. writer : writer 이런식으로 짝지어져있다.
앞에 쓰인 writer는 보내는 value값 이며 뒤에 쓰인 writer는 해당 객체에 대한 key 값이다.
writer : writer 라고 쓰인 이유는 해당부분 state 함수를 [writer, setWriter] = useState() 이런식으로 만들어서 그렇다.
이런식으로 variables:{} 객체에 value값과 키값을 맞춰주면 된다.
여기서 조금더 복잡한 경우를 보자면
gql 부분
먼저 gql 부분을 보자면
변수타입 설정하는 부분이 아래와 같다.
createBoard($createBoardInput:CreateBoardInput!)
createBoard라는 값의 Mutation 문서값은 아래와 같다.
createBoardInput 이라는 객체에 값이 바로 있는것이 아니라 또하나의 객체로 연결되어 있다.
그렇기 때문에 $createBoardInput:CreateBoardInput! 이렇게 적어주고
아래 요청부분에는 createBoardInput:$createBoardInput 이런식으로 요청할 값을 적는다.
variables 부분
gql 부분에 요청한값에 맞춰서 variables 부분도 수정을 해줘야 한다.
위에서는 variables:{ writer: writer } 이렇게 바로 적었는데 이번에는 객체 속에 객체가 또 있기에 다르게 적어줘야한다.
variables:{ createBoardInput : {writer : name,} } 이렇게 열어서 객체의 값을 작성해 준다.
위의 예시는 객체가 총 3개가 있는 형식이다.
여기서 중요한 내용은 객체값은 gql 문서의 객체값과 대문자 스펠링까지 모두 같아야 한다.
실습을 하면서 내용이 이해될듯 하면서 이해가 안가고 문법도 많이 혼란스러웠는데 자주쓰면 금방 익힐것 같다.
그리고 실습하면서 정말 오타없이 코드를 작성하는것이 얼마나 중요한지 오늘 느꼈다..
