여러 과제들을 했는데 state를 활용한 회원가입 폼 만들기는 현재 속도가 느려서 못하고있다 .
오늘은 API 통신에 대해서 배웠다. 서비스에서의 통신이란 데이터 요청과 응답을 의미하는데요.
BackEnd 컴퓨터에 데이터의 생성/조회/수정/삭제 등을 요청했을 때 각각의 요청마다 담당하는 담담자를 API라고 부릅니다. 이터의 처리를 요청하는 하나의 기능, 함수라고 생각하시면 쉽습니다.
이런 API의 종류에는 크게 rest-API, graphql-API 두가지가 있다.rest API는 홈페이지 주소처럼 생겼었고, axios로 데이터를 요청하며 응답 결과로 백엔드의 모든 데이터를 받았다.
반면 graphql은 일반 함수와 같이 생겼으며 apollo-client로 데이터를 요청하며 필요한 데이터만 골라서 받을 수 있었습니다. PI는 크게 생성/수정/삭제/조회 4가지 방식으로 구분하고 이것을
CRUD라고 불린다.
rest-API는 CRUD 각각의 명령어가 POST/GET/PUT/DELETE로 모두 달랐지만,graphql-API는 READ는 Query, 나머지는 Mutation 명령어로 더 간단하게 데이터 통신을 요청할 수 있었다.이렇게 CRUD를 하기위한 API가 어떤 것이 있고, 어떻게 구성되어있는지 확인할 수 있는 문서를 rest-API는 swagger에서 확인하여 postman에서 연습해볼 수 있고,graphql-API는 playground에서 문서의 확인과 연습을 둘 다 해볼 수 있었습니다.때문에 grqphql을 사용하시면 더 효율적이고 편리하게 데이터 통신을 할수있다.
퀴즈
// ======================================================================
// graphql-API 문제
// ======================================================================
// http://example.codebootcamp.co.kr/graphql 에서 제공하는 API를 사용하세요.
// ======================================================================
1) 철수의 나이는 몇살인가요?(나이만 조회해 주세요.)
input
query{
fetchProfile(name:"철수"){
age
}
}
output
{
"data": {
"fetchProfile": {
"age": 20
}
}
}
2) 영희의 학교는 어디인가요?(학교만 조회해 주세요.)
input
query{
fetchProfile(name:"영희"){
school
}
}
output
{
"data": {
"fetchProfile": {
"school": "땡초"
}
}
}
3) 3번 게시글의 내용과 작성일이 무엇인가요?(내용과 작성일만 조회해 주세요.)
input
query{
fetchBoard(number:3){
contents
createdAt
}
}
output
{
"data": {
"fetchBoard": {
"contents": "수정된 내용은?!",
"createdAt": "2022-01-11T12:03:49.240Z"
}
}
}
4) 본인의 이름으로 프로필을 작성해 보세요.
input
mutation{
createProfile(name:"동현", age:32, school:"대지고"){
message
}
}
output
{
"data": {
"createProfile": {
"message": "프로필이 정상적으로 등록되었습니다."
}
}
}
5) 본인의 이름으로 게시글을 작성해 보세요.
input
mutation{
createBoard(writer:"동현",title:"안녕하세요",contents:"반갑습니다"){
_id
number
message
}
}
output
{
"data": {
"createBoard": {
"_id": null,
"number": 82484,
"message": "게시물이 정상적으로 등록되었습니다."
}
}
}
6) 자신의 프로필을 조회해 보세요.
input
query{
fetchProfile(name:"동현"){
number
name
age
school
}}
output
{
"data": {
"fetchProfile": {
"number": 2544,
"name": "동현",
"age": 32,
"school": "대지고"
}
}
}
7) 자신의 게시글을 조회해 보세요.
input
query{
fetchBoard(number:82484){
number
writer
title
contents
}
}
output
{
"data": {
"fetchBoard": {
"number": 82484,
"writer": "동현",
"title": "안녕하세요",
"contents": "반갑습니다"
}
}
}
8) 본인의 프로필에서, 학교를 자신이 졸업한 초등학교로 바꿔보세요.
input
mutation{
updateProfile(name:"동현",age:32,school:"죽전초"){
_id
number
message
}
}
output
{
"data": {
"updateProfile": {
"_id": null,
"number": null,
"message": "프로필이 정상적으로 수정되었습니다."
}
}
}
9) 본인의 게시글에서, 제목과 내용을 바꿔보세요.
input
mutation{
updateBoard(number:82484,writer:"동현",title:"잘가요",contents:"잘자요"){
_id
number
message
}
}
output
{
"data": {
"updateBoard": {
"_id": null,
"number": 82484,
"message": "게시물이 정상적으로 수정되었습니다."
}
}
}
10) 자신이 좋아하는 만화 주인공으로 프로필을 작성해 보세요.
input
{
"data": {
"updateBoard": {
"_id": null,
"number": 82484,
"message": "게시물이 정상적으로 수정되었습니다."
}
}
}
output
{
"data": {
"createProfile": {
"message": "프로필이 정상적으로 등록되었습니다."
}
}
}
11) 위 10번에서 작성한 프로필을 삭제해 보세요.
input
mutation{
deleteProfile(name:"깜돌이"){
message
}
}
output
{
"data": {
"deleteProfile": {
"message": "프로필이 정상적으로 삭제되었습니다."
}
}
}
12) 상품을 하나 만들어 보세요.
input
mutation{
createProduct(
seller:"당근맨"
createProductInput:{name:"당근보이" , detail:"샤프펜", price:3000}){
_id
number
message
}
}
output
{
"data": {
"createProduct": {
"_id": "ba0d39e6-8407-4f2f-b868-92a259d392e5",
"number": null,
"message": "상품이 정상적으로 등록되었습니다."
}
}
}
13) 위 12번에서 만들었던 상품의 가격을 500원 인상해 보세요.
input
mutation{
updateProduct(
productId:"ba0d39e6-8407-4f2f-b868-92a259d392e5"
updateProductInput:{
name:"당근맨"
detail:"샤프펜"
price:3500} ) {
_id
number
message
}
}
output
{
"data": {
"updateProduct": {
"_id": "ba0d39e6-8407-4f2f-b868-92a259d392e5",
"number": null,
"message": "상품이 정상적으로 수정되었습니다."
}
}
}
14) 위에서 만든 상품을 조회하되, 가격만 조회해 보세요.
input
query{
fetchProduct(productId:"ba0d39e6-8407-4f2f-b868-92a259d392e5"){
price
}
}
output
{
"data": {
"fetchProduct": {
"price": 3500
}
}
}
15) 조회했던 상품을 삭제해 보세요.
input
mutation{
deleteProduct(productId:"ba0d39e6-8407-4f2f-b868-92a259d392e5"){
_id
number
message
}
}
output
{
"data": {
"deleteProduct": {
"_id": "ba0d39e6-8407-4f2f-b868-92a259d392e5",
"number": null,
"message": "상품이 정상적으로 삭제되었습니다."
}
}
}
16) 삭제한 상품이 정말로 삭제되었는지 다시 한번 조회해 보세요.
input
query{
fetchProduct(productId:"ba0d39e6-8407-4f2f-b868-92a259d392e5"){
_id
seller
name
detail
price
}
}
output
{
"data": {
"fetchProduct": null
}
}
17) 게시물 목록 중, 2페이지를 조회해 보세요.
input
query{
fetchBoards(page:2){
number
writer
}
}
output
{
"data": {
"fetchBoards": [
{
"number": 82480,
"writer": "여진"
},
{
"number": 82479,
"writer": "여진"
},
{
"number": 82478,
"writer": "정세진"
},
{
"number": 82477,
"writer": "정현목"
},
{
"number": 82476,
"writer": "신홍석"
},
{
"number": 82475,
"writer": "신홍석"
},
{
"number": 82474,
"writer": "현민"
},
{
"number": 82473,
"writer": "재형"
},
{
"number": 82471,
"writer": "재형"
},
{
"number": 82470,
"writer": "재형"
}
]
}
}
18) 게시물 목록을 조회할 때, page를 입력하지 않으면, 어떤 결과가 발생하나요?
input
query{
fetchBoards(page:){
number
writer
title
contents
createdAt
}
}
output
hit the play button to get a response here 버튼클릭이 안된다
19) 프로필이 전체 몇 개가 있는지 확인해 보세요.
input
query{
fetchProfilesCount
}
output
{
"data": {
"fetchProfilesCount": 2503
}
}
20) 게시물은 몇 개가 있나요?
input
query{
fetchBoardsCount
}
output
{
"data": {
"fetchBoardsCount": 81173
}
}
퀴즈 레벨 1 전부 완료
