[CNU SW Academy] 46일차(23.02.06)

프로그래머스 - 프론트엔드 미니 데브코스

strapi

- 별도의 많은 코딩 없이 컨텐츠를 관리할 수 있도록 해줌 

- 프론트엔드 개발자로서 백엔드를 쉽게 구축 가능

 

CRUD(Create, Read, Update, Delete)

 

GraphQL

- 데이터를 불러오는 규칙

- 데이터를 가져오는 방식이 RestAPI와 차이가 있음

- RestAPI의 한계를 극복하기 위해 등장

 

 

Over fetching

- 특정 데이터를 받기 위해 필요없는 데이터까지 불러올 수 있다.

 

Under fetching

- 페이지에 필요한 데이터를 받아오기 위해 여러 API를 호출해야 한다.

 

=> GraphQL은 ?

query를 이용해 필요한 데이터만 가져올 수 있다.

query로 한번에 가져올 수 있다.

 

기본 규칙

1. POST /graphql 로 요청한다.

2. 백엔드에서 타입을 정의해야 한다.

3. 요청은 query, 변경은 mutation을 사용한다.

 

단점

- 러닝커브가 Rest API에 비해 높다

- HTTP 캐싱은? (별도의 라이브러리 사용 가능)

- 필요한 필드를 모두 작성해야 한다.

- 파일 업로드에 대한 명쾌한 방법이 없다.

 

GraphQL

https://graphql-kr.github.io/

GraphQL: API를 위한 쿼리 언어

fragment - 재사용 단위

지시어

- @include

- @skip

 

뮤테이션

쿼리 필드는 병렬적으로 실행되지만, 뮤테이션 필드는 하나씩 차례대로 실행된다.

 

인라인 프래그먼트

 

GraphQL 설치

1. strapi 서버 실행

2. marketplace => graphql 버튼 클릭 후 터미널에서 붙여넣기

 

Apollo client

- react에서 GraphQL을 쉽게 사용할 수 있도록 해줌

- 캐시 정책을 사용할 수 있다.

- 다음에 다시 호출할 경우 캐시된 값을 빠르게 가져올 수 있다.

 

GraphQL을 사용한 TODO APP