Vue 하다가 React 하는 개발자 이야기 6

Vue 하다가 React 하는 개발자 이야기 6

1. 오늘은 GraphQL의 이야기를 먼저 해보고자 합니다. 앞서 출시한 프로젝트가 안정화 되어가고, 코로나 사태 등으로 인해 대외적으로 사용자들에게 집중하기보다는, 내실을 다지는 기간으로 보내고 있습니다.

2. 사실 API 쪽도 Apollo Federation 같은 기술을 이용해서 점진적인 코드 변경을 해가고자 했으나, 오래된 버젼의 라이브러리를 사용해오고, 코드가 너무 스파게티처럼 얽히고 설켜있어서 더 이상 유지보수가 어렵다고 판단되어 리팩토링이 아닌 code-first 방식으로 Re-writing 작업을 하고 있습니다. 주변에 같은 고민을 했던 사람들이 있나 싶어 찾아보아도 다들 Schema-first 에서 Code-first로 점진적인 Migration이 쉬운 일이 아님을 느꼈습니다. (링크: Schema-First에서 Code-First로 Migration 하기)

3. 구 버전 GraphQL API (schema-first) 에서는 타입을 지정하더라도 이가 변경되면 감지하지 못하는 경우가 있었습니다. 그러나 현재 작업되는 API (code-first) 에서는 type safe를 철저하게 감지해주는 것을 보면서 큰 장점임을 느낍니다. schema-first에서는 런타임에서만 스키마가 변경되거나 하는 것을 알 수 있었죠. 그래서 스키마가 많아질수록 실수도 많이 하게 되고, 코드 유지보수가 힘들었습니다. code-first로 넘어오면서 type safe가 보장되고, 보다 안전하게 코딩을 할 수 있는 것 같습니다.

4. 2번에서 걸어놓은 링크를 보니, Graphql-cli, GraphQL inspector 등의 도구들이 우리 개발하는 삶을 또한 윤택하게 해줄 것만 같네요. 내일 한번 시도해봐야겠습니다.

5. 오늘 리액트로 작업하면서는 특이한 이슈를 만났습니다. Functional Component가 GraphQL Query / Mutation을 호출하는 시점에 오류가 발생하면, error 값을 그대로 유지하고 있는 오류였습니다. if (error) 문 안에 alert 창을 띄워놨는데 re-rendering 되는 시점마다 alert를 실행하는 것이였죠.

6.     const [getSpotList, { loading, error, data }] = useSpotsLazyQuery({
       variables: { ... },
     });
     // ... 생략 ...
       if (error) {
       window.alert("에러 발생")
     }

7. 컴포넌트 내에서 한번 발생한 error는 초기화되지 않고 남아 있는다는 점이 문제였는데, 이를 아래와 같이 해결했습니다. 이런 방식으로 해결하니 Query의 호출 시점 한번에만 alert이 발생하니, 렌더링 문제에 걸릴 일이 없었습니다. 이 문제를 부딪힌 덕에 React 내의 동작 방식을 다시한번 생각해 볼 수 있었습니다. ^^

8.     const [getMyList, { loading, error, data }] = useMyLazyQuery({
       variables: { ... },
           onError(error) {
         window.alert("에러 발생")
       }
     });

9. 내일은 또 어떤 이슈가 저를 기다리고 있을까요? 피곤하지만 즐거운 마음으로 잠을 청합니다.