6차 회의록(230525)

🕰 회의 시간

• 5.25 19시~22

✍ 주요 안건

1. 최종 발표 준비

📑 회의 내용

1. 발표 방식

• Figma 긴 화면을 통해 내용을 설명하고, 마지막에 배포 사이트로 가서 시연을 보여준다.
• 기능과 아키텍쳐 내용에 비중을 둔다.
• 기능에 대한 아쉬운 점 + 프로젝트 회고를 1분 정도? 살짝 더한다.

2. 발표 내용 및 시간 분배

1. Libraries & Tools (30초 / 1페이지)

2. 프로젝트 설계 (5분 / 2페이지)

1. 공통되는 스타일 (3페이지)

• 시안을 봤을 때 공통적으로 쓰이는 스타일이 많은 것을 발견했고, 컴포넌트에 스타일을 개별적으로 나눠서 썼을 때 통일성이 없다고 생각했다.
• 시안에서 요소마다 스타일을 찾아보는 것이 불편했다. 매번 찾아보는 방식보다 우리가 합의한 스타일을 보고 바로 코드로 작성해서 편리를 추구했다.
• 코드리뷰를 하는 시간에 불필요한 시간 투자가 있다고 생각했다.
• 코드 작성에 대한 합의를 하면 비약적으로 개발 생산성을 늘릴 수 있다고 생각했다.

2. 컴포넌트 구성 (4페이지)

• 코인 주식에 대한 API
• 데이터를 가공해야 되는데, 비즈니스 로직과 view 로직이 같이 있다면 코드가 복잡해 질 것이라 생각. 그래서 비즈니스 로직과 view 로직을 분리하는 방법을 생각했고 component 구조 방법론으로 Smart dumb component architecture를 선택했다.
• 코드를 실제로 작성해보니 오히려 로직을 분리하다가 컴포넌트가 많아지고 어려워지는 경우가 있어서, 비즈니스 로직 중 hook으로 분리할 수 있는 부분은 분리하여 관심사를 최대한 분리하고자 했다.

3. 중앙 집중 구조 (Flux Pattern) (5페이지)

• 우리가 다뤄야 하는 데이터들을 리스트업해봤을 때, 관리해야 하는 상태들이 많다고 생각했다. 근데 얘네들을 개별로 관리하면 코드가 복잡해짐. 그래서 이들을 크게 전체 코인 관련 데이터와 사용자가 입력한 코인 데이터로 관심사를 분리할 수 있다고 생각했다. 그래서 관련 있는 데이터들을 개별적으로 관리하지 않고 관심사로 묶어서 관리할 수 있는 중앙 집중형 패턴이 이번 프로젝트에 적절하다고 생각했고, 그 중에서 러닝커브가 낮은 zustand가 적절하다고 생각했다.
• Coin Store / UserInput Store의 state에 대한 정보를 비주얼 적으로 보여줌.

3. 기능 구현 (20분 ☆ 길어짐 주의 / 6페이지)

(0. 기능 설명 방법)

• 페이지에 결과물과 구현한 기능을 같이 보여준다.
• 필요시 기능 구현에 대한 로직을 보여준다. 주요 문제점과 해결 과정도 설명에 같이 담는다.
• 최대한 핵심적인 로직만 캡쳐해서 보여준다.

1. Gnb (2분 / 7페이지)

• 검색기록 필터링
• 다시 계산하기를 초기화로 바꿈. 인풋보드와 차트의 데이터를 초기화
• 환율 변경 시 인풋보드, 차트, 테이블 전체 데이터 변경
• 로직 설명: 검색기록 필터링

2. 인풋보드 (6분 / 8페이지)

• 데이터 입력했을 때 위에 반영
• 선택한 날짜의 코인 정보 없을 때
• 금액 인풋 타입을 number로 설정하여 숫자가 아닌 값 못 들어가게
• 금액 증가 버튼을 누적으로 더함
• 모바일에서 코인 선택을 PC의 셀렉트와 유사하게 기능하기 위해 모달 창을 띄움
• API: coins/history
• 로직 설명: 금액 인풋 타입을 넘버로 설정, 로컬로 인풋 값을 관리하다가 submit 시에 전역 상태와 동기화

3. 차트 (6분 / 9페이지)

• code spliting
• suspense를 사용한 로딩 처리
• 에러 바운더리
• 카카오, 페이스북 공유
• 클립보드 복사
• API: coins/market_chart
• 로직 설명: 데이터 가공, rechart 커스터마이징, 서스펜스(설명과 같이 lighthouse 지표 사진 첨부!!), 에러 바운더리(+새로고침)

4. 테이블 (6분 / 10페이지)

• 정렬
• 테이블 태그 사용을 통한 SEO 최적화
• 페이지 캐싱
• 페이지네이션
• 활성 코인 개수를 API로 받아 마지막 페이지 넘버에 맞게 구성
• API: global, coins/markets
• 로직 설명: 시멘틱 태그 사용, 페이지 캐싱, 반응형 간 페이지네이션 로직 통합, 환경변수 사용을 통한 dev 환경과 production 환경을 유연하게 테스트

4. Demo (4분 / 11페이지)

5. 개선 사항 (리스트로 짧게 / 12페이지)

• 화폐가 변경될 때 환율 반영
• 오늘 코인 데이터의 부재 처리
• 인풋 보드 UI 개선
• 차트 서스펜스 문제

6. R&R (10초컷 / 13페이지)

7. 프로젝트 회고 (1분 / 14페이지)

• 디자인을 보고 확신이 들지 않은 기능에 대해 개발 전부터 물어봤으면 좋았을 것 같다.
• 기능 요구사항을 더 자세히 파악했다면 기능 구현을 더 원할하게 할 수 있었을 것 같다.
• Github, 노션 문서 아카이빙을 잘했다. 우리가 배운 내용들이 휘발되지 않고 남겨놓아 우리의 앞으로의 실력 향상에 도움이 될 것 같다.
• 역할 분담이 잘 되어서 좋았다. (컴포넌트, 기능 등)

8. Q&A (5분 / 15페이지)

📢 회의 결과

1. 위와 같이 준비