백엔드를 하면서 서버랑 연결되는 부분이 정말x1000000000어려운거같다
통신 자체가 나한테는 보이지 않는 부분이라 막연해서 어려웠었는데 이걸 활용하니까 더 어렵게 다가오는 느낌이다.
오늘 수업은 어제 했던 api를 직접 만들었다.
apollo를 사용했기 때문에
yarn add apollo-server graphql
을 사용해서 Graphql이 적용된 서버를 생성할 수 있게 했다.
"dependencies": {
"apollo-server": "^3.5.0",
"graphql": "^16.0.1"
},package.json에 추가된 모습을 볼 수 있다.
그리고 이 내용을 본 파일(index.js)에
import { ApolloServer, gql } from 'apollo-server'
로 apollo server와 graphql을 불러온다.
typeDef graphql 명세에서 사용될 데이터와 타입을 지정하고 template literal tag로 생성됨
resolver서비스의 액션들을 함수로 지정하고 요청에 따라 데이터를 반환, 입력, 수정, 삭제함
typeDefs : typeDefs,
resolvers : resolvers
로 사용하지만 자바스크립트에서 키와 벨류값이 같으면 벨류를 아래와 같이 생략할 수 있음
const server = new ApolloServer({
typeDefs,
resolvers,
});apollo server는
const resolvers = {
Query: {
hello: () => 'world',
},
};resolvers의 형식으로 사용한다, Query객체를 선언하고 world라는 문자열 반환하는 로직이다.
const typeDefs = gql`
type Query {
fetchBoards: String
}
type Mutation {
createBoard: String
}
`;typeDefs객체안에 type Query 또는 type Mutation객체를 선언해 반환될 데이터의 형태를 지정해준다.
GraphQL API 만들기
fetchBoards
const resolvers = {
Query: {
fetchBoards:(_, args) =>{
//데이터베이스에서 데이터를 꺼내오는 로직
return [
{number: 1, writer: "철수", title: "제목부분", contents: "내용부분"},
{number: 2, writer: "영희", title: "제목1", contents: "내용1"},
{number: 3, writer: "바둑이", title: "제목2", contents: "내용2"},
{number: 4, writer: "영철", title: "제목3", contents: "내용3"}]
}
},
Query내부에 데이터를 조회함
const typeDefs = gql`
type BoardReturn {
number: Int
writer: String
title: String
contents: String
}createBoards
const myResolvers = {
Mutation: {
createBoard: (_, args) => {
// 데이터 등록하는 로직
console.log('입력값들: ', args)
console.log('입력값들2: ', args.createBoardInput)
return "등록에 성공하였습니다."
},
}
}- parent: 부모 타입 리졸버에서 반환된 결과를 가진 객체
- args: 쿼리 요청 시 전달된 파라미터를 가진 객체
- context: GraphQL의 모든 리졸버가 공유하는 객체로서 로그인 인증, 데이터베이스 접근 권한 등에 사용
- info: 명령 실행 상태 정보를 가진 객체
Rest-API에서 요청 데이터 확인하기 위해 Parameter(매개변수) req 를 사용함.
graphql-API에서 Parameter(매개변수) args 를 사용해 요청된 데이터를 확인함. 사용하지 않는 파라미터는 _ 를 파라미터로 사용.
실습
전에 했던 인증번호 받아오는 API를 사용해서 적용해봤다.
import { checkValidationPhone, getToken, sendTokenToSMS } from './phone.js'
를 불러온다.
Mutation:{
createTokenOfPhone: (_, args)=>{
const myphone = args.myphone
const isValid = checkValidationPhone(myphone)
if(isValid){
const mytoken = getToken(4)
sendTokenToSMS(myphone,mytoken)
}
return "인증완료"
}
}
};Mutation에 요청왔을 때 인증번호를 보내주는 로직을 이렇게 추가한다.
type Mutation {
createTokenOfPhone(myphone: String!): String
}로 요청 데이터의 타입을 지정한다.
라고 성공한 모습을 볼 수 있다.
cf)
html 파일에는 axios cnd
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>를 추가해주고
<script>
function zzz(){
const phonenum = document.getElementById('qqq').value
axios.post("http://localhost:3001/tokens/phone",{
myphone : phonenum
}).then((res)=>{
console.log(res)
document.getElementById("result").innerText=res.data//인증이 완료되었습니다
})//post방식으로 요청하는것 axios.get()/put() ... 있음
//cross origin resource sharing
// alert('잠시만 기다려주세요')
// alert(`당신의 핸드폰 번호는 ${myphone}입니다`)
}
</script>함수를 추가해준다.
