리덕스 thunk를 통해 서버와의 통신과정에서 각 상황별로 컨트롤 할 수 있었다. 하지만 긴 보일러플레이트와 최적화되지 않은 라이브러리라는 단점이 있었다. react-query를 배우고나니 엄청 편했다. 두개를 배우고나니 의문점이 생겼다. 리액트 쿼리는 직접 서버와 통신해 데이터를 가져오고 변경도 가능하니 리덕스를 사용할 필요가 없었다. redux 와 thunk를 사용하는 것 또는 react-query를 사용하는 것 뭐를 선택해야 할까? redux는 전역 상태관리를 해주고 query는 전역서버상태를 관리해준다고 했다. 서버와 통신이 필요없는 클라이언트 사이드의 상태(모달상태 등)들은 redux를 통해 관리하고 서버와 데이터를 주고받는 서버 사이드(유저정보, post정보 등)는 query를 이용한다.

useEffect에 대한 개념이 혼동되었다. clean up function이라고 부르는 useEffect의 return값이 실행되는 시점이 언마운트되는 시점 이라고 생각했는데 어떤 문서엔 렌더링 될 때 useEffect 안의 내용이 실행되기 전에 return 값이 실행된다고 했다. 알고보니 dependency array(deps)의 값이 비어 있는 경우엔 언마운트 될 때 cleanup함수가 호출된다. deps에 특정값이 지정되어 있는 경우 언마운트시에 호출되고, update되기 직전에도 호출 된다. userEffect의 실행시점을 다시한번 살펴보면 deps에 빈배열이 들어가있는 경우엔 mount될 때만 실행된다. 아예 생략이 되어있는 경우엔 마운트 될 때와 컴포넌트가 리렌더링 될 때마다 호출된다. 어떤..

Keep 막힐때마다 팀원들과 의견을 나누고 적극적으로 페어 프로그래밍한 것 초반 기획 단계에서 최대한 명확하게 협의한 것 명확한 기능별 브랜치와 PR을 통합 협업 어렵더라도 끝까지 노력해서 완성하기 (페이지네이션, 헤더 사진 연동) 소통과정에 있어 상대방을 배려하는 말과 행동으로 좋은 시너지 효과를 낼 수 있었다. convention과 gitFlow의 기준을 명시하여 충돌을 최소화하고 효과적인 협업이 가능했다. Problem 마감 기한을 못지킨 것. 배포만 하면 된다고 안일하게 생각했던 것 같다.. 세부적인 네이밍컨벤션이나 데이터구조를 정하지 않아 데이터 통신 과정에서 어려움을 겪음 PR과 merge과정에 있어 팀원들의 확인이나 comment를 받지 않고 바로 진행해서 팀원의 코드의 의도와 흐름을 정확히..

0. 팀소개 내일배움캠프 B반 3조 1. 프로젝트 설명 Pinfo 우리 애완동물의 이야기를 담을 수 있는 ”Pinfo”( = pet Infomation) 회원가입/로그인 기능과 카테고리별 글과 댓글의 CRUD 기능을 포함해 애완동물 커뮤니티로서 사진과 정보를 공유할 수 있다. 2. API 명세 3. 와이어 프레임

이번 주는 기존 TodoList 프로젝트를 리덕스와 스타일컴포넌트, 리액트 돔 라이브러리를 이용해 리팩토링했다. 페이지나 컴포넌트가 많지 않아서 이번 프로젝트에 사용할 필요성은 없었는데도 불구하고 state관리가 훨씬 편리했고 계속 사용해보면서 익숙해졌다. 스타일컴포넌트도 처음엔 이질감이 들었지만 props전달로 다양한 스타일의 요소들을 만들어보니까 사용하는 이유를 알 수 있었다. 다음주는 리액트 첫번째 팀프로젝트로 파이어 베이스를 이용한 회원가입, 로그인과 기본적인 CRUD를 구현한다. 그전에 리엑트의 기본과 다양한 훅들을 한번 더 복습해야겠다.

useState를 사용하면서 set함수를 각 컴포넌트에 전달하는 식으로 구조를 짰다. 하지만 이런 구조에서 문제점은 state변경이 각 컴포넌트에서 모두 가능하기 때문에 에러가 발생했을 때 어디서 발생했는지 찾기가 어렵다. 그랬기에 State변경 함수를 만들어 각 컴포넌트로 전달하는 구조로 리팩토링했다. 그런데 함수내에서 set을 이용해 state를 변경하고 그 state를 localStrorage에 저장하는데 빈 값이 저장되는 문제가 발생했다. setState의 작동 방식을 알고나서 해결할 수 있었다. setState함수는 비동기 방식으로 작동하며 함수 내에서 작동시 리턴되는 값을 기존 값과 비교해 변경사항이 있을 시 렌더링 시키는 방식이었다.(배치 업데이트) 그래서 localStorage에는 아직 변..