https://facebook.com/groups/graphql-kr logo
Join Slack
Powered by
<@UN4AJARCN> 님께서 relay는 공부해봐야하는 프레임워크라고 하셔서 공부해봤더니...
# 잡담
u
@Hyeseong Kim 님께서 relay는 공부해봐야하는 프레임워크라고 하셔서 공부해봤더니 정말 값지네용~ 다들 relay 공부 추천드려용~
💪 2
👍 5
ohh 2
t
Relay 공부는 정말 값지죠~~ 제가 어쩌다보니 당근마켓 FE 메인 스택으로 정착시켰습니다 ㅎㅎ (클라이언트 스키마 + Relay)
h
아 너무 부럽다
zzzz 2
서버랑 협업 잘 되시나봐용
relay 숨은(undocumented) 기능이 참 많아서 또 딥다이브 하는 재미도 있죠 ㅎㅎ….
t
제가 먼저 도입하고, 다른 분들 도입한다고 하셔서 ㅋㅋㅋ 저는 어렵고 짜증나고 복잡하다고 극구 만류했는데요 ㅋㅋ 그게 오히려 다른 개발자분들한테 있어서 더 하고싶은 마음이 들도록 만든거같아요 ㅋㅋㅋ
h
u
페이스북 개발팀에서 클라 관련해서 고민한걸 릴레이 공부하면서 흡수할 수 있어서 꿀이에요...!
저희 회사도 도입할까 고려중입니당. 아폴로 -> 릴레이
저희는 서버도 graphql이라 넘나 신나용
👍 1
t
저희 relay-hooks 쓰고있는데 그건 쓰지마세요 ㅠ 문제가 좀 있는거같더라구요
곧 다 걷어낼듯
h
릴레이 훅 문제있어요?
릴리즈 계속 하지 않나
u
우선 스테이블부터 도입하구 훅이 스테이블 되면 점진적으로 도입하려규용~~
h
거둬낸다는게 그냥 릴레이 모던을 쓰신다는건지 experimental 을 가신다는건지
(왜 reason relay 를 안쓰시는지 😏)
u
오... 혜성님께서 추천하시니 그것도 한번 봐야겠어용
t
seamless하진 않아요 ㅎㅎ • 자잘자잘한 워닝이 왠지 모르게 뜨고 (unmount된 component에 state 변경이 일어남) - 이건 제가 잘못했을수도 ㅋㅋ • refetch때 callback이 제대로 호출안된다던지 • 에러 object가 문서에는 온다고 되어있는데 안온다던지 하는 문제가 있어요. 이게 구체적으로 체크해본건 아니라서... ㅋㅋㅋㅋ 여튼 이제 프로젝트 시작한다면 저는 안쓸거같아요
h
페북 오픈소스 특징이라면 특징인데
experimental 태그 붙어있는 녀석들이 실제 페북 프로덕션에서 활발히 쓰이는거에 제일 가깝고
stable은 좀 거리가 있어요
내부에서 수 없이 갈아엎다가 한 2~3년 후에나 정리해서 공식으로 내기때문에
🤔
u
experimental은 브레이크 체인지가 빈번하다구 하셔가지구 쪼끔 많이 두렵네요😱
우선 stable이 hoc기반으로 강제성이 더 많은 것 같은 느낌?이라서 stable로 멘탈모델부터 잡고 hook을 좀 보려구 우선 생각줄이에용
h
그래도 뭐랄까
서스펜스 없는 릴레이라니 개인적으로 조금 상상이 안된달까
• experimental 유저: 서스펜스 너무 좋은데 페북이 api 를 자꾸 지우고 새로 만들어서 버전 올릴때마다 힘들다 • stable 유저: 나도 서스펜스 써보고 싶지만 꾹참고 2년정도 기다렸는데 아직도 안나왔다.
zzzz 3
relay experimental 도 요새 transport 관련 코드 엄청 들어가던데 뭐 나올ㅈ
u
relay stable버전에서는 
QueryRenderer
api로 페이지 단위 서스펜스를 하는 느낌이었는데 맞나용? relay-hook으로 들어가면서 이것이 component 단위로 서스펜스가 되는 것이 맞을까용?
h
아뇨 말씀하신건 둘다 서스펜스 안써용 그냥 다른 클라이언트처럼 on error, on loading 상태가 컴포넌트 안에 따로 들어옵니다
u
서스펜스의 의미를 더 공부해야겠어용~ ㅎㅎ
h
suspense for data-fetching 이라고 불리는. 다음 버전의 리액트에 있을 핵심 기능 중 하나입니다 https://ko.reactjs.org/docs/concurrent-mode-suspense.html
👍 2
릴레이의 주장에 따르면, relay@experimental 만이 Concurrent React를 out-of-box 로 제공하는 유일한 프레임워크고 페이스북 제품에 의해 battle tested 되고 있다고…
t
battle tested ㄷㄷ 뽕이 차오르네요
😎 1
u
으흠... React에 `Suspense`라는 컴포넌트가 있고 해당 컴포넌트가 child 컴포넌트의 fallback을 기다리는데 relay만이 이 fallback을 
Suspense
컴포넌트에 전달할 수 있다. 이런걸까요? 어후 짧은시간에 이해하려니 어렵군요
h
큰 그림은 훅이랑 비슷합니다
대수적인 렌더링 모델을 만드는게 큰그림이고
그 반쪽이 훅이고 (비동기 값에 대한) 나머지 반쪽이 서스펜스라고 보시면 될듯
Concurrent mode 의 핵심은 렌더링을 time slicing 해서 병목을 줄이고 우선순위 높은 일들을 먼저 처리할 수 있게 스케줄을 조정하는건데
이게 가능하려면 렌더링 자체가 더 잘게 쪼개지고, 언제든지 “중단” 됐다가 “재개“될 수 있어야함 -> 이걸 위한 api 모델이 훅이랑 서스펜스고 파이버 아키텍처에 의존함 (콜스택을 직접 구현)
개발할 때는 컴포넌트 안쪽에서 비동기 상태 제어를 고민할 필요가 없어져요. 데이터가 “항상” 제공되서 엄청 편해요
👍 1
u
주신 링크랑 설명해주신 것을 읽어보니 살짝 감은 옵니다! 제대로 이해하려면 더 공부해야겠지만, 정말 좋은 정보 알아가네용 ㅎㅎ
토이프로젝트로 experimental을 꼭 써봐야할것 같아요
h
흠 혹시 Relay 컨테이너 React 외에도 잘 구현되어 있나요?
h
아뇨 릴레이는 리액트 기반 프레임워크입니다
클라이언트 라이브러리가 아니에용
근데 포팅이 있긴 하군요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ https://github.com/relay-tools/Relay.swift
ohh 1
bangquestions 1
Open in Slack
PreviousNext
Powered by