(항해38일차) 220412 리액트 미니프로젝트 5일차

오늘 기본적인 기능 구현이 마무리되어 프론트 엔드 세 명이 각자의 브랜치를 메인에 연결하는 작업을 했다. 

코드를 합치는 과정은 아직 매우 부담스럽다. 함께 쓰는 컴포넌트의 속성이 서로 다른 경우가 있거나

역할분담이 애매해져 같은 부분에 해당하는 코드를 작성할 때 충돌이 많이 발생한다. 

함께 확인하면서 조심스럽게 코드를 고쳐도 막상 합친 코드를 실행시키면 꼭 크고 작은 오류들이 발생한다. 

 

이번 프로젝트에서는 최소단위 컴포넌트를 공동으로 작업하고 나눠가져서 다행히 충돌이 많지 않았다.

하지만 역할 분배는 아쉬움이 남았다. 우리는 각자 페이지를 나누고 페이지에 해당하는 기능을 구현하기로 했는데, 

막상 작업을 진행하다 보니 서로 필요한 기능이 겹쳐 같은 기능을 각자 만들어 사용했다. 일을 두번한 셈이다. 

과정이 순탄하지는 않았지만 우여곡절 끝에 코드를 합쳐 기본기능을 완성시킬 수 있었다. 

생각보다 결과가 빨리 나와서 카테고리를 추가해 검색기능을 구현해 볼 생각이다.

 

통합된 파일을 받은 후에는 각각 페이지나 컴포넌트에서 데이터(포스트 리스트)를 어떻게 가져올지 생각해봤다. 

새로고침을 누르면 리덕스스토어에 저장된 스테이트는 사라진다. 

유즈이펙트로 데이터를 받으면 해당 컴포넌트와 자식컴포넌트는 리렌더링된다. 

부모컴포넌트의 데이터는 프롭스로 받을 수 있고, 리덕스스토어의 데이터는 유즈셀렉터로 받을 수 있다. 

데이터를 가져오는 것과 관련된 내가 배운 내용들을 실습해봤다. 그럼 어떻게 데이터를 가져오는게 가장 좋을까?

 

아직은 잘 모르겠다. 처음에는 app.js에서 유즈이펙트로 서버에서 저장된 모든 데이터를 받아오면 좋겠다고 생각했지만

엄청나게 낭비라는 것을 알게 되었다. 처음 포스트 리스트를 받아오는 유즈이펙트는 메인페이지를 구성하는 컴포넌트에 둔다. 그 후 상세페이지나 수정페이지로 가게 되어도 리덕스스토어에 데이터가 저장되었기 때문에 사용할 수 있다. 

만약 새로고침을 한다면? 그 이유로 상세조회 get요청이 따로 있다는 것을 비로소 이해할 수 있었다. 

댓글의 경우 사실상 상세페이지에서만 사용되기 때문에 굳이 다른 페이지에서 데이터를 가지고 있을 필요가 없었다. 

상세조회 get요청의 응답에는 그래서 댓글과 유저정보, 게시글 내용이 함께 담겨 있다. 

 

내일 해야 할 일들은 먼저 기능 구현할 때 생각하지 못했던 변수들을 찾아보고 보강해야 한다. 

그 후 포스트 작성 페이지의 css작업을 마치고, 추가기능을 넣어보려 한다. 

서버와도 제대로 연결해야 하는데 언제가 될지 모르겠다.