[12월 3주차] 리액트 협업 트러블 슈팅 (feat. 항해99 5주차 리액트 심화주차)

크리스마스라고 루돌프 옷이 새로 나왔다ㅎㅎ

이번주는 정말 너무 너무 바빴다. 학교 시험도 있었고 리액트 협업 주차다 보니 전 주에 비해 배우는 것들이 어려웠다. 사실 이번주에 겪은 트러블 슈팅들을 하나도 빠짐없이 다 TIL로 썼다면 얇은 책 한권이 나올 정도로 겪은 트러블 슈팅이 많았고 또 그걸 통해 배운 것이 많았던 주차였다. 그래서 이번주에 배우고 겪은 개념들과 문제들을 주요 키워드를 중심으로 러프하게 정리해보고자 한다.

 

최종적인 결과물은 다음과 같고 배포까지 성공적으로 마쳤다. 크리스마스에 어떤 유형으로 보낼지(가족과 함께, 연인과 함께, 혼자서, 부모님과 함께)에 따라 카테고리가 나눠지고 카테고리 별로 게시물 작성및 게시글들을 볼 수 있다.

카테고리 별 페이지 (여기는 싱글에 해당하는 페이지다.)

게시물 상세페이지이고 게시물 길이가 길면 스크롤하여 내려볼 수 있다.

게시물을 스크롤 했을 때 게시물 삭제 및 수정 버튼이 나타난다. 오른쪽에 댓글 등록 및 삭제, 수정도 정상적으로 작동한다. 이거 구현하려고 얼마나 애썼는지ㅠㅠ

React App

1. 이번주는 리덕스 툴킷과 API서버 호출을 위한 thunk, 그리고 thunk와 연결되는 extrareducer를 중점으로 배웠다. 이러한 개념들의 핵심은 리액트에서 스토어를 통해 다루는 전역 state와 서버 호출을 통해 연결되는 DB와는 서로 따로 데이터가 변경되기 때문에 CRUD를 할 때 꼭 thunk에서 API 호출을 하고나서 exrtrareducer에서 전역 state값도 변경을 시켜주어야한다는 것이다.

 

2. 배포 후에 팀원들의 코드를 찬찬히 살펴보고 최종 수정을 하면서 크게 깨달은 것은 효율적인 전역 state 관리가 필요하다는 것이다. 먼저 효율적인 전역 state 관리의 경우  silce 폴더가 쓸데없이 많아질 필요가 없다는 것이다. 이번 과제를 진행하면서 별다른 고민없이 페이지 별로 역할을 분담하여 css 작업과 기능구현을 진행하다보니 굳이 silce 폴더가 두개가 필요하지 않은데 두개를 만들어버리는 상황이 생기게 되었다. 이부분이 생각보다 중요한데, silce를 따로 만들면 효율적인 전역 상태관리가 되지 않기 때문이었다. 이번 과제의 경우 게시물을 등록하는 페이지와 등록된 게시물들을 리스트 형식으로 보여주는 페이지의 slice 파일이 달라 관리하는 state가 달랐기에 전체 게시물들의 데이터가 추가 및 수정될 때 곧바로 게시물들을 리스트 형식으로 보여주는 페이지에 즉각 재렌더링 되지 않고, 새로고침을 통해 서버에 요청을 보내야 수정된 데이터들이 반영되는 문제가 발생하게 되었다. 이를 통해 단순히 페이지별로 역할 분담을 하면 안되고 게시물 관리나 댓글 관리와 같이 연결된 기능 별로 해야겠다는 생각을 했다. 

 

3. 지나친 재렌더링을 막을 수 있는 최적화 작업이 추가적으로 필요하다는 것이다. 배포까지 해보고 페이지들을 재렌더링시키는 것을 보자니 굉장히 많은 재렌더링이 발생한다는 것을 알게 되었다. 예를 들면 댓글하나 추가되는 것인데 헤더부터 게시물 내용들까지 재렌더링 되는 바람에 MPA 못지않은 깜빡임이 발생했다. 거의 새로고침이 다시 되는 수준이었다. 이번주에 배운 useMemo같은 것들을 이번주에는 활용하지 못해 이러한 문제들까지는 수정하지 못했지만 다음주에는 꼭 한번 적용해보고자 노력해야겠다.

 

4. 마지막으로 협업시 작업을 시작할 때 꼭 한명이 먼저 CRA 및 필요한 패키지들을 미리 깔은 뒤 그 파일을 깃헙에 올리고 그 파일을 클론하여 npm 이나 yarn install한 뒤에 작업을 시작해야한다는 것이다. 이번주에 처음 리액트끼리 협업을 하며 알게 된 것은 이렇게 같은 파일로 시작하지 않으면 서로 다른 패키지들을 사용하게 되어 나중에 합치는 작업에서 문제가 발생하게 된다는 것이었다. 처음에 에러가 났을 때는 이유도 모르고 package lock이라는 폴더에서 충돌이 발생하여 애를 먹었는데 그러한 이유였다는 것을 알게 되었다. 그러므로 꼭 추가적인 패키지를 설치하면 팀원들에게 알린뒤 npm 이나 yarn install을 하도록 하여 설치한 패키지를 공유할 수 있도로 해야한다.

 

정말 이번주는 너무 정신적으로 힘든 주였다. 의사소통에서 갈등을 겪은 팀원도 있었고 개인 시험일정도 있었고, 중간에 다른 팀 사람이 모르는 것을 물어오면 알려주기도 해야했고......너무나 바쁘게 정신없이 흘러가 힘들었었다. 그만큼 많이 부딪혀봤기 때문에 배운 것도 정말 정말 많았다. 기술적인 것들 뿐만 아니라 인간관계적인 측면에서도 많이 성숙하고 발전한 것 같다. 이번주에 고생많이 했으니 다음주는 무난히 지나가길...ㅎㅎㅎ