TIL: SLASH22 프론트엔드 - 220608

앞으로의 과제

• 전체 기간 api 구하기

Keyword

• 안쓰는 플러그인 제거
  https://github.com/sweepline/eslint-plugin-unused-imports

• timestamp 변환:

const date: Date = new Date(cur.date * 1000)

*date 객체에서 year를 가져올 때 getFullYear 사용 - getYear는 표준이 아니다..?

데이터는 사용할 모양으로 미리 가공해놓자..
좀 수상하지만 api call 하는 곳에서 가공하는 것으로 수정

 const refinedData = newCoinList.map((item: ICoin) => {
        const {
          price,
          percent_change_24h: percentChange24h,
          market_cap: marketCap,
          volume_24h: volume24h,
        } = item.quotes.KRW
        const coinPrice = new BigNumber(price).toNumber().toFixed(2)
        const coinPercentChange24h = new BigNumber(percentChange24h).toNumber().toFixed(2)
        const coinMarketCap = new BigNumber(marketCap).toNumber().toFixed(2)
        const coinVolume24h = new BigNumber(volume24h).toNumber().toFixed(2)
        return { name: item.name, coinPrice, coinPercentChange24h, coinMarketCap, coinVolume24h }
      })

toss - SLASH22

프론트 엔드

해결해야하는 문제가 복잡 → 인터페이스도 복잡해짐 → 변경이 많다
제품이 변경되지 않아야 하는 이유 → 사용자가 편하게 잘 사용할 경우
좋은 제품을 만들기 위해서 디자인, api 등 언제든 변경될 수 있다
변경은 성장이다 → 놓쳤던 고객의 니즈를 발견한 것

변경에 대응하기

1. Headless 기반의 추상화 하기: 변하는 것, 변하지 않는 것
2. 한 가지 역할만 하기: 또는 한가지 역할만 하는 컴포넌트의 조합으로 구성하기
3. 도메인 분리하기: 도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리

• headless
  컴포넌트는 데이터를 관리하고, UI를 구성한다
  데이터를 관리하는 로직과 디자인UI 컴포넌트를 분리한다 - 추상화 필요
  로직이 복잡한 경우: 상호작용 하는 부분을 분리, hooks로 모듈화 - 각 모듈은 한가지 일만 담당

• 조합
  한 가지 역할만 하는 컴포넌트의 조합으로 복잡한 일을 수행하도록 한다
  도메인이 들어있는 코드는 재사용이 어렵다 - 각 역할별 한 가지의 일만 담당하는 컴포넌트로 분리
  -> 변경이 서로에게 영향을 주지 않는다
  합성 가능하도록 컴포넌트를 작성 - 데이터의 흐름이 비슷한 것들은 재사용하여 활용 가능함

• 인터페이스를 고려
  해당 컴포넌트의 의도, 기능, 표현, 사용 데이터 등을 고려한다
  컴포넌트 분리는 실제 복잡도를 낮추고 재사용이 가능함 - 해결한 문제를 또 해결할 필요 없다