1. 팀 소개

• 김동현
  • 컴포넌트 : FeedCard, Modal(Question, Answer), Skeleton
  • 페이지 : AnswerPage (CardPage의 조건부 랜더링으로 구현)
  • git flow 초기 설정, 레포지토리 관리
  • 무중단 배포 및 도메인 연결
  • 다크모드
  • CSS 초기값 설정
  • Router 작성
• 김영은
  • 컴포넌트: buttons, input
  • 페이지 : MainPage
  • 에러 객체
  • 로컬 스토리지 객체 선언 및 관리
  • svg 파일 전역으로 관리
  • global style
  • constant 전역으로 관리
• 노은수
  • 컴포넌트 : floatingButton, dropdown, reactions(좋아요, 싫어요), toast, avator
  • 페이지 : CardPage
  • date utils 함수
  • 커스텀 훅 : 무한 스크롤, mutation(api 최신 업데이트), Query
  • facebook, 카카오 공유 기능
  • api 연결 리팩토링 → react Query 적용
  • 라우터 연결
  • 컴포넌트 성능 개선
• 박기범
  • 컴포넌트 : Badge, Pagination, User card
  • 페이지 : ListPage
  • 버튼 컴포넌트 css 수정
  • 추가 모달 구현
  • 페이지네이션 기능 개선
  • 메타태그 수정

1. 서비스 시연: https://www.openmind-coreact.store/

2. 기능 구현 (핵심 기능 설명) 얼마나 상세히 하면 좋을까요?

• Main Page
  • 유효성검사
  • 유효한 이름 입력시 list페이지에 카드 생성
  • 로컬스토리지에 이름과 아이디 저장
• List Page
  • 답변하러가기 버튼을 누르면 모달창이 띄워지면서 계정이 있는지 확인하는 과정을 거친다. 로컬스토리지에 해당하는 이름이 있으면 답변하러가는 페이지로 이동, 아니면 에러메시지 출력 (기존의 요구사항과 다름)
  • 카드를 클릭하면 해당 계정에 질문을 볼 수 있고 작성할 수 있는 창이 띄워진다.
  • 화면 사이즈별로 페이지 수가 달라진다.

• Card Page

• Answer Page

1. 고충( 개발하며 어려웠던 점)

4-1. 기능 구현 요소에서

• 문제 1. 상태 관리에 대한 문제
  • A라는 컴포넌트에서 useState를 통해 상태를 정의하고 나면 ⇒ 해당 상태는 a 컴포넌트 부모로 전달할 수는 없다.
  • 만약 전달하고자 한다면, B(A의 부모) 컴포넌트에서 상태를 정의하고, 상태를 변경할 수 있는 setter 함수 혹은 setter를 포함하는 핸들러 함수를 props로 전달해 상태를 바꿀 수 있다. 이를 drilling이라고 한다.
  • 만약 컴포넌트 트리가 깊어지면 어떨까? → 실제 동작을 수행하는 “아래 트리의 컴포넌트”뿐 만 아니라, 해당 컴포넌트를 건너기 위한 중간 컴포넌트들이 “모두” setter 함수를 접근할 권한을 얻게 된다. 또한, 그저 전달을 위한 props를 연쇄적으로 정의하게 되어 번거로움을 유발한다.
  • 해당 문제를 해결하기 위해 상태를 컴포넌트 밖, 그러니까 “전역”에서 관리하는 방법을 고안했다. 가장 대표적인 라이브러리가 바로 “redux”다.
• 문제 2. 서버로 전달되는 데이터를 실시간으로 업데이트하는 문제
  • useEffect를 통해 서버에서 데이터를 받을 경우 : 보통 서버에서 받은 데이터를 useState로 관리할 것이다. 만약, 다른 컴포넌트에서 post를 보내면? → 데이터를 받았던 컴포넌트의 상태는 “상한(오래된) 상태”가 된다.
  • 따라서, 서버에서 주고 받는 데이터는 컴포넌트 내부가 아닌, 다른 곳에서 관리하는 것이 마땅하다. 이를 구현한 라이브러리가 바로 “reactQuery”이다.
• 문제 3. 화면 사이즈마다 페이지 수를 동적으로 변경하는 문제
  • ListPage에서 화면 사이즈마다 화면상에 보여지는 카드수가 PC사이즈에서는 8개 테블릿과 모바일 사이즈에서는 6개로 다르다.
  • 따라서, 원래는 8개를 고정으로 limit값을 지정해주었는데 사이즈 별로 동적으로 limit를 지정해줌으로써 보여질 카드 개수만큼 잘 불러와지도록 구현.
  • 또한 limit값이 변함에 따라 전체 페이지 수도 계산해주었고 이를 테블릿 → PC / PC → 테블릿 사이즈로 변경할때 동적으로 페이지 수가 바뀌도록 해주어야하는데 구현하는데 어려움을 겪음. 결국 수식을 이용하여 해결하기는 했지만 좀더 효율적인 방법이 있을까라는 고민이 생겼음.

( 이 부분은 구현이 끝나고 추가하도록 하겠습니다.)