!1
!2
!3
!4
!5
!6
!7
!8
!9
!10
GraphQL is a data query language developed by Facebook as an
alternate to REST and ad-hoc webservice architectures.
REST ad-hoc webservice architectures 

( GraphQL )
!11
!12
!13
!14
!15


!16
!17
!18
!19
!20
!21
📱
👔 📦 $
📱
👔 📦 $
!22
!23
!24


!25
!26
!27
!28
// GET /graphQL
query {
  account(id: "1"){
    username
email
firstName
lastName
}
}
{
"data": {
"account": {
"username": "samslow",
"email": "hsseo@lfin.kr",
"firstName": "Hyeonseok",
"lastName": "Seo"
}
}
}
!29
// GET /graphQL
query {
  account(id: "1"){
    username
email
firstName
lastName
friends{
firstName
userName
}
}
}
{
"data": {
"account": {
"username": "samslow",
"email": "hsseo@lfin.kr",
"firstName": "Hyeonseok",
"lastName": "Seo"
"friends": [
{
"username": "gamjaman"
},
{
"username": "kongsun"
}
]
}
}
}
!30
// GET /graphQL
mutaion {
createAccount(
  userName: "samslow"
email: "hsseo@lfin.kr"
firstName: "Hyeonseok"
lastName: "Seo"
)
}{
username
email
}
{
"data": {
"createAccount": {
"username": "samslow",
"email": "samslow@gmail.com",
"firstName": "Hyeonseok",
"lastName": "Seo",
"friends": []
}
}
}


type Character {
name: String!
appearsIn: [Episode]!
}type Query {
hero(episode: Episode): Character
droid(id: ID!): Droid
}
!33
!34
!35
•
•
•
!36
!37
.. 



, GraphQL .

REST URL Resource , 

GraphQL URL . 

Query Mutaion( ) .

url Query GraphQL .
!38
• GraphQL → 

→ 

API → 



• 

• → 

• .
!39
!40
!41
• 가장 현대적인 웹을 만들자 3편 (GraphQL))
• GraphQL 공식 홈페이지
• GraphQL을 오해하다
• when-and-why-to-use-graphql
• GraphQL이 무엇인가
!42

GraphQL Overview and Practice

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    !10 GraphQL is adata query language developed by Facebook as an alternate to REST and ad-hoc webservice architectures. REST ad-hoc webservice architectures ( GraphQL )
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    !28 // GET /graphQL query{   account(id: "1"){     username email firstName lastName } } { "data": { "account": { "username": "samslow", "email": "hsseo@lfin.kr", "firstName": "Hyeonseok", "lastName": "Seo" } } }
  • 29.
    !29 // GET /graphQL query{   account(id: "1"){     username email firstName lastName friends{ firstName userName } } } { "data": { "account": { "username": "samslow", "email": "hsseo@lfin.kr", "firstName": "Hyeonseok", "lastName": "Seo" "friends": [ { "username": "gamjaman" }, { "username": "kongsun" } ] } } }
  • 30.
    !30 // GET /graphQL mutaion{ createAccount(   userName: "samslow" email: "hsseo@lfin.kr" firstName: "Hyeonseok" lastName: "Seo" ) }{ username email } { "data": { "createAccount": { "username": "samslow", "email": "samslow@gmail.com", "firstName": "Hyeonseok", "lastName": "Seo", "friends": [] } } }
  • 32.
    
 type Character { name:String! appearsIn: [Episode]! }type Query { hero(episode: Episode): Character droid(id: ID!): Droid }
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
    !37 .. , GraphQL. REST URL Resource , GraphQL URL . Query Mutaion( ) . url Query GraphQL .
  • 38.
    !38 • GraphQL →
 → 
 API → 
 • • → • .
  • 39.
  • 40.
  • 41.
    !41 • 가장 현대적인웹을 만들자 3편 (GraphQL)) • GraphQL 공식 홈페이지 • GraphQL을 오해하다 • when-and-why-to-use-graphql • GraphQL이 무엇인가
  • 42.