[Dev Log] 이우성 / 2021-05-02

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

- OAuth 로그인 기능을 드디어 구현해냈다!

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

- 인증 로그인 로직을 너무 어렵게 생각했다. 로그인 버튼을 누른 시점에서 해당 사이트(github 또는 google)에 인증 요청을 보내고 `DidMount`된 시점에서 서버에다가 `authorizationCode`를 헤더에 심어서 Post요청을 했는데, 여기서 redux에서 상태관리한다고 실수로 로직을 한번 더 작성한 것이다....

콘솔로 찍어봤을 때 처음에 `DidMount`된 시점에는 값이 잘 받아와지는데 그 후 메인 페이지로 이동한 시점에서는 값이 `undefined`가 나온 것이다.

```tsx
// Login.tsx
const onGithubLogin = () => {
window.location.assign(GITHUB_LOGIN_URL);
};

const onGoogleLogin = () => {
window.location.assign(GOOGLE_LOGIN_URL);
};

useEffect(() => {
const url = new URL(window.location.href);
const authorizationCode = url.searchParams.get('code');
const scope = url.searchParams.get('scope');

if (authorizationCode) {
if (email) {
dispatch(axiosLoginInfo('emailauth', authorizationCode, email));
history.push('/workspace');
} else if (scope) {
dispatch(axiosLoginInfo('loginOAuthGoogle', authorizationCode, email));
}
}

// reducer.ts
export const getLoginInfo = createSlice({
name: "loginInfo",
initialState: LoginInfoState,
reducers: {
getLoginInfoSuccess: (state, { payload }: PayloadAction) =>
payload,
},
});

export const { getLoginInfoSuccess } = getLoginInfo.actions;

export const axiosLoginInfo = (
endpoint: string,
authorizationCode: string | null,
email: string | null
) => {
return async (
dispatch: Dispatch<{ payload: LoginInfo, type: string }>
): Promise => {
try {
const response = await axios.post(`server/${endpoint}`, {
authorizationCode,
email,
});
const data = response.data;
dispatch(getLoginInfoSuccess(data));
} catch (error) {
console.log(error);
}
};
};

```

버튼을 클릭했을때 저런식으로 먼저 해당 사이트에 인증 요청을 보내주고 다시 로그인 페이지로 돌아온 시점에서 서버에 요청을 보냈다.

서버에 `authorizationCode`를 헤더에 넣어서 보내주면 응답으로 `LoginType, accessToken, email` 정보가 들어온다. 그러면 이 값을 저장하고 나는 필요할 때마다 이값을 가져다가 쓰면 되는 것이다. redux에서 리듀서 함수를 만들어주었고, 서버의 엔드포인트에 따라서 분기 처리를 해주었다. 로그인 페이지에서는 Params의 값들에 따라서 분기처리를 해주었다.

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 게시판 디자인 마무리
- [ ] 게시판 렌딩시 게시판데이터 불러오기