👉 오늘은 어떻게 프로젝트에 기여했나요?
OAuth 로그인 기능을 드디어 구현해냈다!
👉 오늘 프로젝트에서 힘든 점은 무엇인가요?
인증 로그인 로직을 너무 어렵게 생각했다. 로그인 버튼을 누른 시점에서 해당 사이트(github 또는 google)에 인증 요청을 보내고 DidMount된 시점에서 서버에다가 authorizationCode를 헤더에 심어서 Post요청을 했는데, 여기서 redux에서 상태관리한다고 실수로 로직을 한번 더 작성한 것이다….
콘솔로 찍어봤을 때 처음에 DidMount된 시점에는 값이 잘 받아와지는데 그 후 메인 페이지로 이동한 시점에서는 값이 undefined가 나온 것이다.
계속 똑같은 요청을 두 번 보내니.. 당연히 undefined일 수 밖에… 처음에는 문제점을 찾지 못하고 다른 프론트엔드 분에게 같이 하자고 부탁을 하였고, 같이 하니까 다행히 해결이 되었다….!!! 그래서 결국 오늘 OAuth 로그인 기능까지 다 해결할 수 있었다.
const onGithubLogin = () => {
window.location.assign(GITHUB_LOGIN_URL);
};
const onGoogleLogin = () => {
window.location.assign(GOOGLE_LOGIN_URL);
};
버튼을 클릭했을때 저런식으로 먼저 해당 사이트에 인증 요청을 보내주고 다시 로그인 페이지로 돌아온 시점에서 서버에 요청을 보냈다.
서버에 authorizationCode를 헤더에 넣어서 보내주면 응답으로 LoginType, accessToken, email 정보가 들어온다. 그러면 이 값을 저장하고 나는 필요할 때마다 이값을 가져다가 쓰면 되는 것이다. redux에서 리듀서 함수를 만들어주었고, 서버의 엔드포인트에 따라서 분기 처리를 해주었다. 로그인 페이지에서는 Params의 값들에 따라서 분기처리를 해주었다.
// 생략...
// Login.tsx
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<LoginInfo>) =>
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<void> => {
try {
const response = await axios.post(`server/${endpoint}`, {
authorizationCode,
email,
});
const data = response.data;
dispatch(getLoginInfoSuccess(data));
} catch (error) {
console.log(error);
}
};
};
이틀 내내 매달려서 결국 해결하고 logger에 결과값이 찍혔을 때… 그 기분은 정말 말로 표현할 수가 없다.. 정말 짜릿하고 행복하고 팀원들에게 너무너무 감사했다!!
👉 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
게시판 디자인을 끝내고, 렌딩되었을 때 게시판 데이터를 불러와야 한다!