[112]rest에서 graph ql과 relay로 갈아타기 이정우
•Télécharger en tant que PPTX, PDF•
112 j'aime•25,328 vues
[112]rest에서 graph ql과 relay로 갈아타기 이정우
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à [112]rest에서 graph ql과 relay로 갈아타기 이정우
Similaire à [112]rest에서 graph ql과 relay로 갈아타기 이정우 (20)
Plus de NAVER D2
Plus de NAVER D2 (20)
[112]rest에서 graph ql과 relay로 갈아타기 이정우
- 2. 목차 1. REST API - Status Quo & Limitations 2. GraphQL - How it replaces REST 3. Relay - Data fetching and management
- 3. 1. REST API
- 4. 1. REST API 소개 리소스를 URI로 표현 GET, POST, PUT, DELETE 활용 웹 개발 아키텍처
- 5. 1. REST API 소개 GET /api/users/ 유저 리스트 가져오기 GET /api/users/1/ 유저 1을 가져오기 POST /api/users/ 유저 생성하기 PUT /api/users/1/ 유저 1를 수정하기 DELETE /api/users/1/ 유저1를 삭제하기 예제
- 6. 1. REST API 현황 GET /api/users/를 했으면 결과 값은 어떻게 돌려줘야하나? HTTP Response
- 7. https://api.twitter.com/1.1/lists/me mbers.json 1. REST API 현황 Twitter 방식 https://dev.twitter.com/rest/reference/get/lists/members
- 8. https://api.github.com/repos/octocat/Hello- World/issues/ 1. REST API 현황 Github 방식 https://developer.github.com/v3/issues/
- 9. https://openapi.naver.com/blog/list Category.json 1. REST API 현황 Naver 방식 https://developers.naver.com/docs/blog/post
- 10. 1. REST API 현황 사실상 각자 제멋대로… 추가 함수는? POST Response? 필터는? 정렬은? 페이지네이션 은?
- 11. 1. REST API 현황 그래도 그나마 쓸만한… http://jsonapi.org/
- 12. 1. REST API 현황 • Relationship 가져오기? ✓ • 부분 필드만 가져오기? ✓ • 필터 적용방법? ✓ • 정렬하기? ✓ • 페이지네이션? ✓ • POST Response? ✓ • 깃허브에 별 갯수? ✓
- 13. 1. REST API 한계 필드 제한 (Sparse Fieldset)
- 14. 모든 필드 전부다 가져와야 하나? 접근 권한이 없는 필드는 가져오지 말아야 하나? Admin과 일반 유저가 기본적으로 가져오는 필드가 다르나? 1. REST API 한계 필드 제한 (Sparse Fieldset)
- 15. 1. REST API 한계 유저 1의 모든 필드를 가져오고 싶지만 그가 팔로우하는 유저들의 username, email만 가져오고 싶은데… 결과: 모든 유저의 username과 email을 가져옴 필드 제한 (Sparse Fieldset)
- 16. 1. REST API 한계 필드 타입
- 17. 1. REST API 한계 POST /payments/ 를 하니 유저 1의 credit이 변경되었다. 그런데 클라이언트에서 이미 유저 1를 불러왔으며 credit값이 아직 동기화 되지 않 았다. - POST Response에 만들어진 payment와 같이 변경된 유저도 가져오기? - GET /users/1/ 로 한번 더 불러오기? Side Effect
- 18. 1. REST API 한계 실제사례: - 요청의 저자, 예약, 예약한 에디터, 교정본, 교정본 에디터, 그리고 교정본 리뷰를 가져오기 - 더불어 각자 필드마다 가져올 수 있는 필드 제한하기 GET /drafts/? include=author,reservation.editor,revision.editor,revision.review&fields[draft]=cate gory,title,content,message,word_count,time_limit,point,status,created_at&fields[us er]=picture_url,profile_path,username,is_following,is_blocking,college,workplace Query Hell
- 19. 1. REST API 한계 • RESTful과 JSON API는 프로토콜이지 쓸만한 라이브러리가 없다. • 결국 직접 구현해서 사용... jsonapi.js • 서버의 모든 endpoint에서 JSON API에 맞게 답변을 해줘야한다. • 클라이언트에서도 데이터를 받아서 Store에 보관해야한다. • 비즈니스 로직 짜기도 바쁜데 라이브러리 관리까지?? 라이브러리 부족
- 21. React (2013) GraphQL (2015)
- 22. JS와 HTML를 합쳐버 림 REST를 대체해버 림
- 23. 2. GraphQL
- 24. 2. GraphQL 소개 쿼리 언어 쿼리를 부르 면 Data가 json으 로
- 25. 2. GraphQL 소개 쿼리 언어 - Arguments - Alias - Fragment - Variables 자세한 설명은 공식 문서 참조
- 26. 2. REST와 GraphQL 비교하기 Different Request REST의 URI는 GraphQL 쿼리로 좀 더 간결하게 표현 가능
- 27. 2. REST와 GraphQL 비교하기 GET /drafts/? include=author,reservation.editor,revision.editor,revision.review&fields[draft]=cate gory,title,content,message,word_count,time_limit,point,status,created_at&fields[us er]=picture_url,profile_path,username,is_following,is_blocking,college,workplace
- 28. 2. REST와 GraphQL 비교하기
- 29. 2. REST와 GraphQL 비교하기 Different Methods GET → Query POST, PUT, DELETE → Mutation
- 30. 2. GraphQL 구현 예제 Schema Definition Type System으로 Schema를 정 의 query와 mutation은 entry point
- 31. 2. GraphQL 구현 예제 GraphQLObjectType GraphQLObjectType의 fields를 정 의 필드엔 type, args, resolve
- 32. 2. GraphQL 구현 예제 Arguments & Resolve method userType을 정의하고 필드의 타입을 userType으로 정의함
- 33. 2. GraphQL 구현 예제 Mutation Mutation 또한 args와 resolve 사용
- 34. 2. GraphQL 구현 예제 Express-GraphQL schema를 express서버에 달아두면 완료!
- 35. 2. GraphQL 구현 예제 Lokka - GraphQL client
- 36. 2. GraphQL 구현 예제 GraphiQL 자동 문서화와 Type Inspection이 가능한 강력한 툴
- 37. React (2013) GraphQL (2015) Relay (2015)
- 39. 3. Relay
- 40. 3. Relay • Node • Connection • React Relay • Mutation Config Relay가 GraphQL에서 확장하는 컨셉
- 41. 3. Relay 소개 Resource에 대한 단일 Interface Data management면에서 유리함. Node
- 42. 3. Relay 소개 id로 Resource를 가져옴 Node
- 43. 3. Relay 소개 하지만 String만으로는 어떤 Resource인지 알기 힘들어서 type과 id가 합쳐진 GlobalId를 사 용 Node
- 44. 3. Relay 소개 다수의 Node를 가져올때 사용 pagination에 특화되있음 Connection
- 45. 3. React Relay 데이터 의존성과 React 컴포넌트가 공존한다
- 46. 3. React Relay <EditorCard /> <EditorInfo /> <EditorStat />
- 47. 3. React Relay
- 48. 3. React Relay <EditorCard /> <EditorInfo /> <EditorStat />
- 49. 3. React Relay
- 50. 3. React Relay
- 51. 3. Mutation in Relay Mutation의 Side Effect를 적용시키는 방식을 Config에 명시하면 클라이언트에 적절하게 반영 예제) 이미 불러온 Node의 값을 업데이트 기존에 불러온 Connection에 추가/제거 Mutation Config
- 52. 3. REST에서 GraphQL Relay로 갈아타기 GET, POST, PUT, DELETE으로 모든 것을 해결해야 함 → 데이터 가져올땐 query (node, connections, 등) 사용, 변경할땐 mutation 사 용 기본값으로 어떤걸 불러올지 정하기가 애매함 → 항상 데이터 의존성을 명시 필드 타입이 정해져 있지 않아서 따로 문서화를 하지 않으면 협업이 힘듬 → GraphQL은 타입이 정해져 있고 프로토콜 단에서 확인할 수 있음 (Introspection) Summary
- 53. 3. REST에서 GraphQL Relay로 갈아타기 데이터 의존성을 URI 에 명세하려면 복잡해진다. → 데이터 의존성을 명세한 query / mutation를 보낸다 데이터 변경사항을 클라이언트에서 처리하는 방식이 제각각 → Mutation Config만 잘 써주면 알아서 데이터 변경사항을 처리한다 Summary
- 54. 3. REST에서 GraphQL Relay로 갈아타기 Data management를 React와 묶어줘서 생산성과 개발 속도가 크게 향상 Query build + Cache로 인하여 성능 향상 지금 존재하는 온라인 문서만으로는 Relay의 진입장벽은 꽤 높은 편 현재 Relay는 실시간 지원이 미비… 현재 GraphQL Relay만으론 안정적인 서비스 구현이 가능… 하지만 아직 실험적인 생태계 Aftermath
- 55. 3. 관련 링크 관련 링크 http://graphql.org/ - GraphQL 영문 공식 홈페이지 https://facebook.github.io/relay/ - GraphQL Relay 영문 공식 홈페이지 https://facebook.github.io/graphql/ - GraphQL 영문 명세서 https://learngraphql.com/ - GraphQL 영문 튜토리얼 https://github.com/chentsulin/awesome-graphql - GraphQL 리소스 모음집 https://github.com/kriasoft/react-starter-kit - 현재 최강의 boilerplate http://blog.sapzil.org/2015/09/01/graphql-rfc/ - 그나마 찾은 한글 기사
- 56. Q&A
- 57. Thank You 이정우 (연사자): jw@ediket.com 이철희 (기술 제공): leechulhee95@gmail.com