-
Notifications
You must be signed in to change notification settings - Fork 3
3차 회의록(230516)
drizzle96 edited this page May 16, 2023
·
6 revisions
- 5.16 14시~16시반
- smart-dumb에서 smart의 기능이 없는 컴포넌트의 경우, 어떻게 처리할 것인가
- API 구현
- 컴포넌트 조립 단계 R&R 정하기
- 모바일에서 drop down select 태그를 모방하듯이 구현
- 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로 이름을 변경한다)
- API 구현
-
사용처 : 테이블에서 페이지 버튼 클릭시,
- 사용할 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에 담겨 있음.
- 사용 방식 (페이지네이션)
- 한번의 api 요청에 180개(페이지 묶음 30개 x 6)를 가져와서 db에 저장을 할 때는 pageNum을 key값으로(저장할 때 1, 2, 3으로 변환하기),
- 각 페이지 데이터는 value로, db에 [1: [30개], 2: [30개], ...] 형태로 저장되도록
-
사용처 : 입력보드에서 코인 목록 스크롤 시
- 일단 처음 가져오는 180개로 스크롤해서 볼수 있게 해주고
- 나중에 검색 기능 추가 (GET /coins/search) 포함된 코인 다 주므로 type ahead search 구현 가능
-
사용처 : 차트에 들어갈 코인의 데이터 (전체, 1년, 1개월, 1주, 1일)
- 사용할 api 및 넘겨줄 쿼리들
- GET /coins/${selectedCoinId}/market_chart
- ?vs_currency={coinCurrency}
- &days={max || 365 || 30 || 7 || 1}
- interval을 daily로
-
사용처 : 입력보드에서 "오늘 얼마가 되었을까?" 버튼 클릭 시
- 사용할 api 및 넘겨줄 쿼리들
- GET
/coins/${selectedCoinId}/history?date={historyDate}
// dd-mm-yyyy 형식 - GET
/coins/${selectedCoinId}/history?date={currentDate}
오늘
- 사용 방식
- (현재 가격 - 과거 가격 ) / 과거가격 * 100을 사용자가 입력한 금액에 적용해주기
- 컴포넌트 조립 R & R
- 이안 : 테이블 & gnb
- 케니 : input 보드
- 핸리 : 차트
- select 태그
- select 태그를 쓰지 않고 div를 쓰는 이유: 커스텀화가 힘들다
- 모바일에서는 pc처럼 아래 drop down을 나타낼 공간이 없기 때문에, select 태그처럼 작동해야 한다. 하지만 모바일에서 div를 select로 바꾸는 것은 재사용이나 공수가 추가되기 때문에 select 태그를 모방하듯이 구현하는 것으로 한다.
- 시멘틱 태그 사용을 위해 input 태그 + hidden을 이용한다.
- dumb만 존재하는 컴포넌트의 경우 smart+dumb을 나누지 않고, 이름에 container를 붙이지 않는다. container → presenter로 이름 변경한다.
- API는 위와 같이 정리한다.
- 컴포넌트 조립 R&R
- 이안 : 테이블 & gnb
- 케니 : input 보드
- 핸리 : 차트
- 반응형은 컴포넌트 조립 후 결정
- select 태그는 div 태그로 구현한다. 모바일에서는 시멘틱 태그 사용을 위해 input 태그 + hidden을 이용한다.