[Dev_Log] 8/11 (수) 김정빈

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

Login, SIgnup 페이지를 만들고, axios요청을 보내서 실제 회원가입과 로그인 기능을 만들었다.
임시적으로 회원가입 페이지와 로그인페이지의 디자인을 구성하긴 했는데, 여러 디자인 홈페이지들을 돌아보며 최신 디자인 트렌드는 어떤지에 대해서 많이 찾아봤다.
이번에는 access token을 이용하여 로그인이 되어있는지 구현하는 단계 + refresh token까지 사용하기 때문에 이를 redux state로 저장하기로 했다.

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

- **랜딩페이지의 스크롤 및 top button 구현하는 방법**

같은 포지션의 팀원이 랜딩페이지를 맡았는데, 버튼을 클릭하면 한번에 맨위로 올라가는 버튼을 구현한 것이 인상적이였다.
scrollPosition이라는 상태를 지정해서 스크롤이 현재 어디에 있는지 체크하고, 이 값에 따라 랜딩페이지에서 스크롤을 내릴때마다 반응하는 이벤트를 만들수 있는 것을 배웠다.
window.pageYOffset 이라는 값을 이용하여, window객체에서 Y축의 좌표를 알 수 있다.

- **useRef**

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다.
예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야 된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있다.
추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다.
이럴때 리액트에서는 ref를 사용하는데, Hook에서는 이를 useRef를 사용한다.

### code

```jsx
import React, { useState, useRef } from 'react';

function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
const nameInput = useRef();

const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

const onChange = e => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};

const onReset = () => {
setInputs({
name: '',
nickname: ''
});
nameInput.current.focus();
};

return (

);
}

export default InputSample;
// 출처 : velopert-react
```

위 코드는 벨로퍼트 개발자님의 정리노트에서 발췌한 코드다.
우리는 버튼을 눌렀을 때 input값이 포커싱 되게끔 하는 DOM을 이용할 것이다.
`const nameInput = useRef()` 으로 ref객체를 만들어주고, 이를 DOM을 적용하고자 하는 부분인 input에 `ref={nameInput}` 을 넣어준다. 그 후, 버튼에 onReset이라는 함수를 연결시키고,
그 함수에서 `nameInput.current.focus()`라는 값을 주어, current값을 이용해 우리가 원하는 DOM을 가르킬 수 있게 된다.

# 내일 할 일

- [ ] Project Weekly Reflection 준비
- [ ] signup / login 페이지 기능 서버와 연결하기
- [ ] 메인페이지 - 마이크 구현하기
- 주파수 함수 ts화 시키기