공부하는 블로그

근황 리액트 학습 중이다. 패스트캠퍼스에서 김민태님 강의 인프런에서 이재승님 강의 김민준님 책 세가지를 병행해서 보고 있다. 상태 관리 쪽을 좀 자세히 살펴보고 있는데, 이제 좀 구조가 눈에 들어온다. Vue로 개발할 때는 Vuex만 있으면 되었는데 리액트에서는 선택지가 굉장히 많아서 처음에는 좀 당황스러웠다. Redux, Redux-thunk, Redux-saga... 요새는 swr, react-query까지. 생태계의 히스토리를 잘 파악하지 못해서 '리액트 동네는 복잡한 동네구나' 싶었다. 근데 이번 학습을 통해서는 상태 관리에 대해서 다시금 인사이트를 얻게 되는 시간이 된 것 같다. 이번 학습을 통해서 알게된 바는 상태 관리를 사용해서 캐시 레이어에 대한 통제권을 개발자가 갖게 한다는 점이다. 사실..

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 ..

* 에어팟 프로 구매여정 1. 처음에는 중고나라와 당근마켓에 키워드 알람설정을 해서 원하는 가격대가 나올때까지 예의주시 하고 있었다. 2. 싸게 나오는 것들은 19~20만원까지 풀리는 것들을 보았기에 20만원 근처 가격대로 구매하면 되겠다! 라는 생각에 적절한 가격의 매물이 올라오기를 기다렸다. 3. 근데 매물을 보다보면 미개봉 상품을 판매한다는 글이 올라오는데 애매하게 25만원 정도에 판매하는 경우가 많이 있었다. 내가 저 가격에 살거면 무료배송에 무료반품 가능한 쿠팡에서 사고말지라는 생각이 들었다. 4. 요새 또 에어팟 프로를 똑같이 복제한 중국산도 기승을 부리고 있다하여 걱정이 이만저만이 아니었다. 그래서 인터넷에서 중국산 구별방법을 찾아서 핸드폰에 메모를 해놓기도 했다. 심지어는 무게도 다르다고 ..

# 소트웍스 엔솔러지 독후감. 객체지향 공부 한창 꽂혀있을 때, 돌아다니다가 우연히 봤던 포스트를 보고 중고 책 서점으로 주문했던 책이다. 마틴 파울러 및 공동저자들이 쓴 책이다. 일단 내용이 잘 안 읽혔다. 현재 80%정도 읽고 접어둔 상태이다. 아마도 오래 된 내용이어서가 가장 큰 이유이지 않을까 싶다. 그래도 굉장히 굵직하고, 좋은 내용들이 많이 있다. TDD, 폴리글랏 프로그래밍, 객체지향 생활 체조, 함수형 프로그래밍, 반복 관리자 (이는 후에 애자일 개발 방식 등으로 발전되는 부분들을 다룬다.), DDD, 리팩토링, CI/CD 등... 책이 하도 안읽혀서, 다른 분들 블로그는 어떻게 쓰셨나 보니까, 어떤 분이 한 8~9년전에 쓴 블로그 내용을 보게됐는데 "이건 마틴 파울러가 CEO니까 가능한 ..

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)..