[Dev_Log] 8/10 (화) 김정빈

## 오늘은 어떻게 프로젝트에 기여했나요?

메인페이지의 구조를 만들고, 회원가입창의 기초 디자인을 끝냈다.
타입스크립트를 활용해서 각 props들의 구체적인 타입을 지정해주어서 팀원들이 좀더 명시적으로 확인할 수 있는 구조로 만들었다.
메인페이지에서는 piano, mic, upload 모드에 따라 그에 맞는 컴포넌트들이 랜더링 되게끔 만들었다.
그리고 팀원들과 소통하며 어제오늘 코드작업을 한 부분을 함께 나누어보고, 이를 취합해서 dev로 올렸다.

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

- **디자인은 개발자가 하는게 아니라, 디자이너가 하는 것이다.**

개인 프로젝트나 퍼스트프로젝트에서도 디자인을 직접해서인지 뛰어난 퀄리티가 나오지 못했던 것 같다.
디자인 레퍼런스를 얻고자 여러 디자인 사이트들을 돌아다니다 보니 어느정도 일치하는 웹 디자인들이 보였고, 여기서 영감을 받아서 전체적인 디자인을 잡아가면 정말 이쁠것같다. 디자인은 디자이너가, 이를 받아서 개발자가 개발을 하는 것이라는 생각이 들었다.

- **타입스크립트를 알수록 소름이 돋는다.**

처음에는 그저 타입만 정해주는 자바스크립트라고 생각했는데, 타입스크립트를 하나하나 알수록 온몸에 소름이 돋는다.
그만큼 정말 잘 설계된 언어라는 생각이 들었고, 정말 깊게 알아보고싶다.
함수에 단순하게 타입을 주는 것 뿐만 아니라, interface를 이용해 이 함수가 어떻게 구성이 되어있는지도 정의할 수 있어서 코드만 봐도 이 함수가 어떤것을 인자로 받는지를 알 수 있게 된다. interface와 각각의 타입들에 대해서 조금더 이해해야할 것 같고, 프로젝트를 만들면서 정확한 타입을 잡으려고 노력해야겠다.

### Learn TypeScript code

```tsx
// User정보 interface
interface User {
name:string,
age:number,
sex?:string,
}

function getUser(user:User){
console.log(user);
}

// interface를 이용한 함수 정의
interface SumFunction {
(a:number, b:number): number;
}

var sum: SumFunction;
sum = function(a:number, b:number):number{
return a + b;
}
```

Interface는 함수의 인자 혹은 스펙을 결정할 수 있고, 함수를 만들기 전 미리 SumFunction이라는 인터페이스로 정의를 해서 함수가 어떤 타입을 받는지 결정할 수 있다. 이는 협업할때 동료에게 함수의 스펙을 명시해 줌으로써 좀더 확실한 코딩을 진행할 수 있다.

```tsx
const handleBtnClick = (e: React.ChangeEvent) => {
setSelect(e.target.classList.value);
};
```

event 객체를 props로 넘겨받을 때는 다음과 같이 타입 설정을 해주었다.
`e: React.ChangeEvent`
버튼클릭의 경우 HTMLButton으로 하고, Input 등 다양한 요소가 있다.

```tsx
// props를 넘겨줄 때.

interface Props {
select: string;
handleBtnClick: (e: any) => void;
}

// 기존에는 {select, handleBtnClick} 이렇게 props를 받아줬다면,
// interface에서 Props를 미리 정의를 해줄 수 있다.
const MainSelectBar = (props: Props) => {
const { select, handleBtnClick } = props;
return (
<>

handleBtnClick(e)} />
handleBtnClick(e)} />
handleBtnClick(e)}
/>

export default MainSelectBar;
```

# 내일 할 일
* [ ] Login 창 만들기
* [ ] Login, Signup 기능 구현하기
* [ ] palette page 만들기