20220125 Frontend 일일 개발일지
===

###### tags: `20220125`

# 개발 내용

## UserMembership 컴포넌트 작성.


위에 해당하는 컴포넌트를 작성했다.

#### 구성 요소

1. `UserDetail`
- 이전에 작성했던 molecule를 활용한다.
2. 우측에 보이는 일반회원 / 포인트 관련 컴포넌트까지 합쳐 하나의 organism으로 조합한다.
- 포인트는 기능 상 제외되었기때문에, 회원 정보만 보여주기로 했다.


**위와 같이 작성했다.**

#### 고민거리

==`Atomic` 디자인 패턴을 사용하다보니 이런 경우가 많다.==

:::danger

- 상위 단계 컴포넌트에서 하위 요소들을 조합하는 과정에서 하위 요소에 필요한 `props` 를 넘겨주는데, 결국 이 행위 자체가 `props drilling` 이 되는 것 아닐까 고민이 들었다.
:::

**코드 상으로 설명하자면...**

1. 8번째 줄에 props를 받고,
2. 이 props 를 그대로 13번째 줄에 `userDetail` 에 넘겨준다.
3. 결국 이 `userMembership` 이라는 컴포넌트는 여러가지의 컴포넌트를 합치며, 받은 `props` 를 고대로 하위 컴포넌트에게 보낸다.
4. 이 행위 자체가 `props drilling` 에 해당하지 않을까, 생각했다.

##### 결론)

- 2단을 넘어가는 props drilling은 피하자.
- 복잡한 계산이 들어간다면 `useMemo` 활용.
- 더 상단 컴포넌트가 아니라 `organism` 단계에서 로직을 처리한다면, `props drilling`을 크게 줄일 수 있겠다.
- `organism` 에서만 로직 처리를 하는 방향으로.

---

## TradeSummary 컴포넌트 작성.


위에 보이는 컴포넌트를 작성했다.

- 구매내역 / 판매내역 별로 대표 색상도 달라 이를 `category` 로 구별하여 기능 구현했다.
- 간단하게 `dl`, `dt`, `dd` 태그를 활용하여 구성했다.

---
---
---

# 비 개발

## 1기와의 면담

>[color=crimson]1기 분들과 궁금한 점들을 질문하는 시간을 가졌다.

[이 곳](https://hackmd.io/eaKYY9w7SSO1LkUxHefS_Q?view)에 정리해두었다!

## 스터디

### NCNS 종현님과 스터디를 시작했다.

[이 곳](https://velog.io/@ghdtjrrl94/%EC%8A%A4%EB%A7%88%EA%B2%8C-%EC%8A%A4%ED%84%B0%EB%94%94-1%EC%A3%BC%EC%B0%A8)에 금일 진행한 스터디를 정리해두었다.

:::success
차주까지 다음 내용을 정리할 예정이다.

1. 순수 Redux 내용 정리
2. react-redux 숙지
:::