내가 레퍼런스가 되자 내가 레퍼런스가 되자

이전 GraphQL 포스팅에서 언급되었던 Code Generator에 대해 소개하려고 합니다. Code Generator은 BE에서 설계된 데이터 모델링을 GraphQL 스키마를 기반으로 TypeScript로 가져오기 위해 사용합니다. Code Generator의 이점 1. 설계된 데이터 모델링을 찾아보는데 편합니다. 어떤 필드를 가지는지, 그리고 그 타입이 무엇인지 등 확인할 수 있습니다. graphiql을 사용하는 것보다 generator로 스키마를 직접 확인하는 게 편합니다. 2. 차후에 GQL을 통해 가져온 데이터들을 타입 체킹 하는 데 사용합니다. Code Generator 셋업 1. Installing Codegen npm install graphql @graphql-codegen/cli @g..

GraphQL은 REST API와 달리 클라이언트단에서 Query와 Mutation을 작성하여 호출합니다.(덕분에 Frontend에서 처리해야 할 작업이 많습니다...) 기존 REST API는 URL과 Method를 조합해 다양한 Endpoint가 있는 반면 GQL은 하나의 Endpoint을 가지기 때문에 Endpoint에 따라 DB SQL 쿼리가 달라지지 않고 GQL 스키마의 타입에 따라 쿼리가 달라집니다.(GQL 스키마의 타입을 GQL Code Generator을 통해 Front로 가져와 확인하는 것이 편합니다.) 그래서 GQL의 장점인 한 번의 API 호출로 여러 처리가 가능합니다. Query & Mutation GQL에선 Query와 Mutation으로 나누는데 구조는 비슷합니다. 다만 Query..

Vue.js legacy 코드를 React로 porting 하면서 기존에 사용 중이던 video.js에서 warning이 뜨는 현상이 발견되었습니다. The YouTube player is not attached to the DOM. API calls should be made after the onReady event. 디버깅을 하다 보니 video.js를 Cleanup 하는 상황에서 해당 warning이 발생하였습니다. ... const videoPlayer = useRef(null); useEffect(() => { videoPlayer.current = videojs(video.current!, options()); return () => { if (videoPlayer.current) { // ..