[Dev_Log] 8/14 (토) 김정빈

## 오늘의 프로젝트에서 배운 점은 무엇인가요?

- **리덕스 별거없네 (feat.typescript)**

리덕스에 대해 굉장히 겁을 먹었던 탓일까, state를 설정하기 굉장히 막연했다.
그래도 로그인시에 회원 정보와 access token을 받아서 redux state에 저장해야 하기 때문에 한번 시도해봤는데, typescript 와 redux에서 에러(#74)가 조금 떴을 뿐, reducer, action을 지정하고 dispatch를 이용해서 state를 수정하는데에 성공했다.
이 과정에서 만난 에러(#74)는 Redux에서 state에도 type을 지정해줘야 하는 점이였는데, 이는 Store를 처음 설정할때 해주었던 RootReducer 타입을 state의 type으로 설정해주어 에러를 해결했다.
- **palette page의 content를 랜덤하게 구현**

우리 프로젝트의 핵심기능중 하나는 palette page에서 bubble이 랜덤하게 구성되는 것이다.
이를 어떻게 구현할까? 라는 고민에, 오다경님의 아이디어로 column을 나누어 배열하기로 했다.

총 4개의 섹션으로 나누어 데이터를 담아야하는데, 일반 유저가 보기에는 위에서부터 순차적으로
1,2,3,4
5,6,7,8
이런식으로 보여야 하기에, 어떻게 나누어줄까 고민을 많이했다.
결론은 아래코드와 같이 Arr을 4개를 나누어, index로 구분하여 집어넣었고, 첫번째 column에는 n+1(1,5,9,13...) 두번째 column에는 n+2(2,6,10,14...) 이렇게 들어가게 4개의 column을 만들어서 값을 집어 넣어 주었다.

```tsx
const bubbleArr1: any = [];
const bubbleArr2: any = [];
const bubbleArr3: any = [];
const bubbleArr4: any = [];

bubbles.forEach((bubble: any, idx: number) => {
const index = idx % 4;
if (index === 0) bubbleArr1.push(bubble);
else if (index === 1) bubbleArr2.push(bubble);
else if (index === 2) bubbleArr3.push(bubble);
else if (index === 3) bubbleArr4.push(bubble);
});

```

이렇게 나눈 Column을 순서대로 배치해주었다.

```tsx

{bubbleArr1.map((bubble: any, i: number) => (

))}


{bubbleArr2.map((bubble: any, i: number) => (

))}


{bubbleArr3.map((bubble: any, i: number) => (

))}


{bubbleArr4.map((bubble: any, i: number) => (

))}

;

```

이렇게 배치된 bubble의 component에 랜덤하게 위치를 지정해주었더니, 매번 새로고침할때마다 새로운 위치의 버블이 생성되었다.

```tsx
// bubble component
const Bubble = ({ bubble }: any): JSX.Element => {
const randomConst = 35;
const randomNum = Math.floor(Math.random() * randomConst).toString(); // --> 35는
return (
// bubble component

```

일단 핵심기능은 구현했으나, type을 지정해주는것이 너무 어려워서 일단 tsconfig.json에서 "noImplicitAny": false 속성을 주어 any타입을 일시적으로 허용했다.
type을 제대로 지정해주어야하기에, 이부분은 좀더 공부한 후에 type을 지정해주어야겠다.
아래는 최종 기능 구현한 사진이다.


# 내일 할 일

- [ ] palette 페이지 마무리
- [ ] 모달 페이지 마무리
- [ ] redux 적용 완료