3차 회의록(230516)

🕰 회의 시간

• 5.16 14시~16시반

✍ 주요 안건

1. smart-dumb에서 smart의 기능이 없는 컴포넌트의 경우, 어떻게 처리할 것인가
2. API 구현
3. 컴포넌트 조립 단계 R&R 정하기
4. 모바일에서 drop down select 태그를 모방하듯이 구현

📑 회의 내용

1. dumb 논의

• smart 기능이 없는 경우 smart-dumb 분리가 필요한가?

  • prop만 전달받는 용도 뿐이라 분리가 필요하지 않다. 따라서 이런 경우 dumb 하나로만 존재하도록 한다.
  • ex) Button, Chip, Dropdown?

• dumb만 있는 경우

  • 이름에 container를 붙일 때: dumb의 의미가 명확하다 / smart가 따로 있는 것처럼 보인다.
  • 이름에 container를 붙이지 않을 때: 컴포넌트명이 짧다 / smart의 의미가 불명확해진다, dumb이 있는 것처럼 보인다.
  • 결론: container를 붙이지 않는다.
  • 이유: container가 있으면 부모가 있을 것이란 오해를 유발한다. 반대로 container가 없을 때는 꼭 자식이 있을 것이란 오해가 덜할 것이다.

• dumb도 자식으로 smart를 가질 수 있다. (ex. dropdown의 isOpen과 같이 UI를 결정하는 state)

• (멘토 플린의 의견을 반영하여 container → presenter로 이름을 변경한다)

2. API 구현

• 사용처 : 테이블에서 페이지 버튼 클릭시,

  1. 사용할 api들
  • GET /coins/markets
    • ?vs_currency=${coinCurrency}
    • &per_page=10
    • &page=${coinListPageOffset} // this.coinList.length
    • &price_change_percentage=1h%2C24h%2C7d
  • GET /global (페이지 로딩시 한번)
    • 전체 개수 data.active_cryptocurrencies에 담겨 있음.
  2. 사용 방식 (페이지네이션)
  • 한번의 api 요청에 180개(페이지 묶음 30개 x 6)를 가져와서 db에 저장을 할 때는 pageNum을 key값으로(저장할 때 1, 2, 3으로 변환하기),
  • 각 페이지 데이터는 value로, db에 [1: [30개], 2: [30개], ...] 형태로 저장되도록

• 사용처 : 입력보드에서 코인 목록 스크롤 시

  1. 일단 처음 가져오는 180개로 스크롤해서 볼수 있게 해주고
  2. 나중에 검색 기능 추가 (GET /coins/search) 포함된 코인 다 주므로 type ahead search 구현 가능

• 사용처 : 차트에 들어갈 코인의 데이터 (전체, 1년, 1개월, 1주, 1일)

  1. 사용할 api 및 넘겨줄 쿼리들
  • GET /coins/${selectedCoinId}/market_chart
    • ?vs_currency={coinCurrency}
    • &days={max || 365 || 30 || 7 || 1}
    • interval을 daily로

• 사용처 : 입력보드에서 "오늘 얼마가 되었을까?" 버튼 클릭 시

  1. 사용할 api 및 넘겨줄 쿼리들
  • GET /coins/${selectedCoinId}/history?date={historyDate} // dd-mm-yyyy 형식
  • GET /coins/${selectedCoinId}/history?date={currentDate} 오늘
  2. 사용 방식
  • (현재 가격 - 과거 가격 ) / 과거가격 * 100을 사용자가 입력한 금액에 적용해주기

3. 컴포넌트 조립 R & R

• 이안 : 테이블 & gnb
• 케니 : input 보드
• 핸리 : 차트

4. select 태그

• select 태그를 쓰지 않고 div를 쓰는 이유: 커스텀화가 힘들다
• 모바일에서는 pc처럼 아래 drop down을 나타낼 공간이 없기 때문에, select 태그처럼 작동해야 한다. 하지만 모바일에서 div를 select로 바꾸는 것은 재사용이나 공수가 추가되기 때문에 select 태그를 모방하듯이 구현하는 것으로 한다.
• 시멘틱 태그 사용을 위해 input 태그 + hidden을 이용한다.

📢 회의 결과

1. dumb만 존재하는 컴포넌트의 경우 smart+dumb을 나누지 않고, 이름에 container를 붙이지 않는다. container → presenter로 이름 변경한다.
2. API는 위와 같이 정리한다.
3. 컴포넌트 조립 R&R

• 이안 : 테이블 & gnb
• 케니 : input 보드
• 핸리 : 차트
• 반응형은 컴포넌트 조립 후 결정

4. select 태그는 div 태그로 구현한다. 모바일에서는 시멘틱 태그 사용을 위해 input 태그 + hidden을 이용한다.