![]()
● 도입 React Fiber는 React의 핵심 알고리즘을 지속적으로 재구현한 것입니다. React 팀이 2년 넘게 연구한 결과의 결과물입니다. React Fiber는 애니메이션, 레이아웃, 제스처와 같은 영역에 대한 성능을 높이는 것이 목표입니다. 대표적인 기능은 증분 렌더링으로, 렌더링 작업을 여러 그룹들로 분할하여서 여러 프레임의 구조로 펼쳐 놓는 것입니다. (다루기 편하게 그룹화하여 펼쳐놓는다는 뜻인 것 같습니다.) 다른 핵심 기능으로는 새 업데이트가 들어올 때 진행하고 있던 작업을 일시 중지, 또는 재사용하는 기능, 다양한 유형의 업데이트에 우선순위를 지정하는 기능, 새로운 동시성 프리미티브 등이 있습니다. 리액트에서 렌더링 최적화를 위해 가상돔(virtual DOM)을 사용하여 실제 돔과 바..
● react 팀이 18 버전을 통해 해결하고자 했던 문제들? 3월 29일, React 18 버전이 released 됐습니다. React 18 버전에는 크게 아래와 같은 변화가 있었다고 합니다. New Root API Automatic Batching New Concept “Transition” SSR support for Suspence React 팀이 18 버전을 통해서 개선하고자 했던 내용은 무엇 일까요? 여러 가지 개선 사항이 있지만 그중 두 가지만 살펴보자면, 첫 번째는 Batching 작업을 통한 Rendering 퍼포먼스 향상, 두 번째는 새로운 기능인 Transition 을 통해 UI 업데이트에 우선순위를 부여하거나, 느린 네트워크 환경에서의 UX 향상을 살펴볼 수 있을 것 같습니다. ● ..
● 2차 목표 그간,, 2차목표를 진행했었는데 포스팅하는걸 잊었으빈다.. ㅠ 오늘은 3차목표를 진행중이어서 오늘 리팩토링했던 부분을 정리해 올립니다. 아래는 그간 진행했던 2차 목표입니다. 대체로 로직분리가 절반이상이었습니다. ❍ PetInfo.tsx (다은) query mutaion 훅으로 분리 handle부분 로직 분리 처리 ❍ PetProfile.tsx (준석) 뭔가 cropper함수와 이미지 처리 다 함수로 뺐으면 좋겠어요 로직분리 ❍ Spin(준석) styled로 처리 ❍ PetContainer (다은) popup 로직 state로 하나로 만 구분해서 쓰자.. 입니다.. 이거 제가 할게요 50줄이 들어드는 매직 여기도 mutation 처리필요합니다 ● 3차 목표 ❍ Info(다은) Error M..
● 3~4일차 작업 분배 ❍ FeedWriteCard(준석) + 스로틀 구현 query mutation 함수 hook으로 처리 ESC 뒤로가기 함수분리 필요해보임 여러번 게시물 버튼 눌렀을 시, 스로틀 적용하면 좋을 것 같음 + 수정도 handleSubmit 부분의 코드 같은 조건문으로 반복 처리 되는 부분 정리할 수 있지 않을까? ❍ useMutation hook 처리(다은) ❍ Popup (다은) 버튼이 1개인 Popup, 버튼이 2개인 Popup으로 컴포넌트를 분히래서 관리하는 것은 어떨까? -> 분리하지 않기로 결정 팝업 메시지를 관리하는게 좋을 것 같다. Prop으로 넘겨주는 값들을 넘겨주지 않으면 기본값이 설정됐으면 좋겠다. ● useMutation hook 처리하기 mutation.fn으로 ..
● 3~4일차 작업 분배 ❍ Comment.tsx~ infinite Query 훅처리 (준석) query Invalidation, query mutation hook 으로 처리하기 (Comment.tsx) FeedComment, Comment 로직 통일하기 (분리의 필요성을 못 느끼겠어요) ❍ useQuery hook처리 (다은) 중복적으로 쓰이는 useQuery hook으로 처리하기 생각보다, 2일차때 작업했던것들이 시간이 오래걸려 주말까지 넘어가 작업을 이어했습니다. 오늘 8월 14일(월)요일에 useQuery hook처리를 한 이후에 준석님과 함께 1차목표를 달성하였습니다. :) 오늘은 서로 주말동안 작업한 코드리뷰와 함께, 2차목표를 세우는 작업이 주였습니다. ● useQuery hook으로 처리..
● 2일차 작업 분배 ❍ Comment.tsx(준석) query Invalidation, query mutation hook 으로 처리하기 (Comment.tsx) FeedComment, Comment 로직 통일하기 (분리의 필요성을 못 느끼겠어요) ❍ Header.tsx(다은) Header query → hook으로 분리 (myPage를 키로 하는 query호출이 여러 곳에서 이루어집니다. ) Header Container 컴포넌트로 분기 처리 하기 (같은 JSX 코드가 반복) ● Header.tsx query hook처리하기 먼저 로직분리를 하려고 Header.tsx를 봤더니 떡하니 쿼리가 있었읍니다.. 저희는 모든 쿼리와 뮤테이션을 hook으로 만들어서 처리하는게 좋지 않겠냐는 이야기가 있었기 때문..
