👉 오늘은 어떻게 프로젝트에 기여했나요?
NodeMailer를 통해 로그인할 수 있게 구현된 서버에 요청을 보내고 응답으로 accessToken을 받아오면 그 값을 클라이언트에 저장했다.
그리고 로그인된 사람들만 들어갈 수 있는 페이지 워크스페이스로 라우팅을 하게 해주는 기능을 구현하였다.
👉 오늘 프로젝트에서 힘든 점은 무엇인가요?
로그인 기능을 구현하기 위해 서버에 통신을 하고 받아온 값들을 페이지 어디에서든 쓸 수 있게 하려면 redux는 안쓸 수가 없었다. 하지만 redux 자체만으로는 비동기를 지원하지 않는다. 그래서 createAsyncThunk를 배웠다가.. 서버가 안열려서 안되는건지도 모르고 너무 안되서 다시 redux-toolkit기능으로만 해결했다가… 아주 삽질의 연속이였다.
그리고 로그인이 되는지 확인을 하려면 계속 서버분들과 소통을 해야만 했다. 서버분들이 바로 바로 대답을 해주셔서 잘 해결되었지만 콘솔이 안찍히거나 알 수 없는 에러들을 만나기 일상이였다…….
결국 아침부터 새벽까지 붙잡고 있다가 새벽 2시30분 경 성공을 할 수 있었다… 만세..!
먼저 서버에 입력폼에 적힌 email 값을 보내준다.
const onLoginMail = (e: FormEvent<HTMLFormElement>): void => {
e.preventDefault();
axios.post("server/mail", { email });
alert("해당 메일에 인증번호가 전송되었습니다.");
};
그러면 해당 메일을 통해 아래와 같은 메일을 받아볼 수 있다!!!
메일안에 있는 login 버튼을 누르면 서버에서는 redirection을 다시 login 화면으로 보내준다.
그러면 내가 DidMount를 통해 url Params에서 authorizationCode를 뜯어서 확인한 후, 있으면 워크스페이스 페이지로 넘겨주는 것이다.
이 과정을 내가 정말 복잡하게 생각했었지만, 해결하고 나니 이제 흐름을 파악할 수 있게 되었다.
logger로 확인했을 때 잘 연결이 된 것을 확인했으니 난 이제 편하게 잘 수있다 ㅠㅠ
👉 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
Github 로그인과 Google로그인 기능인 OAuth 로그인 기능을 구현해야 한다.