공부하는 블로그

React Testing Library 튜토리얼 이 내용은 이 곳의 내용을 번역한 것입니다. Kent C. Dodds의 React Testing Library (React Testing Library)이 Airbnb의 Enzyme의 대안으로 출시되었습니다. Enzyme은 React 개발자에게 React 컴포넌트의 내부를 테스트 할 수있는 유틸리티를 제공하지만 React Testing Library는 한 걸음 물러서서 "React 컴포넌트를 완전히 신뢰하기 위해 React 컴포넌트를 테스트하는 방법"에 대해 질문합니다. 컴포넌트의 구현 세부 정보를 테스트하는 대신 React Testing Library 개발자를 React 애플리케이션의 최종 사용자의 입장에서 볼 수 있습니다. 이 React Testing ..

Vue 하다가 React 하는 개발자 이야기 7 - Apollo Client의 Mutation 삭제 문제 오랜만에 포스팅을 올립니다. 그간 바쁘기도 하고, 사실 귀찮은 게 많아서 미루고 미루던 포스팅을 이제야 쓰게 됩니다. 오늘은 Apollo Client의 refetch에 대해서 생각해보게 된 이야기를 해보고자 합니다. 위 사진처럼 카테고리 리스트를 만들면서 생기게 된 일입니다. 리스트에 항목이 추가 / 삭제 되는 경우에는 보통 어떻게 처리를 하는지가 궁금해졌습니다. 리스트가 pagination을 하다보니까 mutation에 baseMutationOption을 줄 때 update() 내에서 캐시를 추가하기에는 좀 애매하다는 느낌이 들었기 때문입니다. 위 목록을 보시면, 수정 버튼을 눌러 모달 창을 띄워서..

Vue 하다가 React 하는 개발자 이야기 6 오늘은 GraphQL의 이야기를 먼저 해보고자 합니다. 앞서 출시한 프로젝트가 안정화 되어가고, 코로나 사태 등으로 인해 대외적으로 사용자들에게 집중하기보다는, 내실을 다지는 기간으로 보내고 있습니다. 사실 API 쪽도 Apollo Federation 같은 기술을 이용해서 점진적인 코드 변경을 해가고자 했으나, 오래된 버젼의 라이브러리를 사용해오고, 코드가 너무 스파게티처럼 얽히고 설켜있어서 더 이상 유지보수가 어렵다고 판단되어 리팩토링이 아닌 code-first 방식으로 Re-writing 작업을 하고 있습니다. 주변에 같은 고민을 했던 사람들이 있나 싶어 찾아보아도 다들 Schema-first 에서 Code-first로 점진적인 Migration이 쉬운..

Vue 하다가 React 하는 개발자 이야기 5 오늘은 글을 두 개 씁니다. 제 친구가 리액트의 상태 관리에 대해 의견과, 아폴로 클라이언트 상태 관리에 대해 코드 공유를 해주었습니다. 짧게 공유해보고자 합니다. // local state 지정 const initialData: IsLoggedIn = { isLoggedIn: !!getToken(), } cache.writeData({ data: initialData }); // 불러오기 const { data } = useQuery(IS_LOGGED_IN) const isLoggedIn = !!data?.isLoggedIn // Query export const IS_LOGGED_IN = gql` query IsLoggedIn { isLoggedIn @..

Vue 하다가 React 하는 개발자 이야기 4 1. 오전 스크럼 미팅을 하면서 동료분이 redux를 선택하길 잘 한거 같다는 피드백을 주셨습니다. 예전에 리덕스를 사용할 때는 장황하고 복잡하게 코드를 짰었는데, 다시 보니 깔끔한 코드 관리가 가능했다고 합니다. 앞으로도 이런 기술적인 논의와 연구가 지속될 수 있다면 좋겠습니다. 2. React + apollo + hooks로 작업하면서 놀랐던 점은 async / await을 쓰지 않았다는 점입니다. 비동기 요청이 분명 일어날텐데, 코어에서 어떻게 처리한걸까요? 😀 3. 이 조합을 쓰면서 비동기 처리에 대한 부담이 줄어들어서 초보자들도 좀더 쉽게 웹 개발을 접할수 있겠다는 생각이 들었습니다. 4. 그러나 한편으로는 비동기 처리에 대한 이해가 없는 개발자들..

Vue 하다가 React 하는 개발자 이야기 3 오늘은 동료 개발자분이 작업하던 도중에 SSR 관련 이슈를 만나셨다고 합니다. 현재 프로젝트가 Next.js 로 구성되어 있는데, 동적 라우팅이 되는 페이지에서 문제가 발생한다고 합니다. (문제가 정확히 기억이 안나네요) 개인적으로 관리자 페이지를 작성하는데 Next.js 를 쓰게 된 것이 이해가 되지는 않았습니다. SSR이 필요하지도 않고, 오히려 추가적인 관리 포인트가 더 늘어나기 때문입니다. 코드 레벨에서는 물론이고 인프라 레벨에서도 관리할 것들이 더 늘어납니다. 그래서 아직 프로젝트가 초기 단계이니, 일반 클라이언트 사이드 앱으로 전환 하는 것이 어떤지 제안했습니다. 프로젝트가 더 커지면 아마 그때는 CSR로 전환하기는 더 어려워질지도 모르기 때문입..

Vue 하다가 React 하는 개발자 이야기 2 어제 올렸던 내용에 대해서는 일단 apollo client의 상태 관리 시스템은 기각하고 redux를 쓰는 것으로 결정을 했습니다. 커뮤니티에서 자문을 구한 결과, 아직 아폴로 상태 관리 시스템은 프로덕션에 적용하기에는 무리라는 판단이 들었습니다. 전 회사에서도 node.js의 ORM을 선택할 때 star 수 활발하게 commit이 되고 있는가? 문서화가 잘 되어 있는가? 현재 프로젝트와 궁합이 잘 맞을까? 등을 고려해서 선택했던 것이 TypeORM 이었는데, 사용하다보니 부족한 점이 많았습니다. 또한 처음 접하는 이슈 등에 대해서는 이슈 트래킹이나 검색도 잘 안되어 고생하는 경우도 있었습니다. 이때 1) 스타 수로만 프로젝트를 판단하면 안 되겠구나. 2)..

Vue 하다가 React 하는 개발자 이야기 1 관리자 페이지를 새로 만들고 있습니다. React + Typescript + GraphQL 조합입니다. 그전 코드는 유지보수가 너무 힘들고 장황한 코드가 많아서 개발 시간보다 코드 리딩에 더 큰 시간이 들어 많은 개발자들이 고통받고 있었습니다. 새로 프로젝트 시작을 하게되어 기쁘게 생각합니다. Graphql + typescript + codegen을 이용하니까 엄청 간편하다고 느꼈습니다. 개발자가 할 게 없네요. 회원 목록을 구현했는데 몹시 빠르게 개발했습니다. use~ 시리즈를 찬찬히 살펴보고 있습니다. useEffect 는 Vue에서 watch와 비슷하다는 느낌을 받았습니다. 그러나 useEffect는 렌더링 직후에 실행이 된다고 하네요. 동료 개발자가..