[Final Project] Dev-Log 10일차

Today I did

• 프론트 쪽에서 로그인 로그아웃 (일반, 카카오, 구글) 서버와 연결 완성했다. oauth 구현은 로그인보다 로그아웃이 더 헷갈리고 자료도 없는 느낌이다. 특히 로그인의 경우 일반로그인, 구글로그인, 카카오로그인 버튼을 모두 두고 사용자에게 선택하도록 하는 것이 가능하지만 로그아웃의 경우 어떤 종류의 사용자이건 간에 하나의 source에서 로그아웃하도록 유도하는 것이 일반적이다. 일단은 하나의 함수 안에서 로컬 서버에 sign out 요청을 보내서 쿠키를 삭제하고, 클라에서 저장한 토큰을 없애고, 카카오 및 구글 api에서 로그인 여부를 검사하는 메소드를 써서 해당되는 경우에 소셜 서비스에서도 로그아웃을 하는 과정이 한꺼번에 처리되도록 구현하였다. 다만 프론트단 상태에 login provider를 저장하도록 하고 그걸 변수로 받아서 카카오냐 구글이나 로컬이냐에 따라 다르게 처리하도록 하는 게 더 명확하지 않을까? 라는 생각이 든다.

const handleLogout = () => {
    axios
    .post(process.env.REACT_APP_API_ENDPOINT + '/auth/signout', {}, {
      headers: {
        'Authorization': `Bearer ${props.accessToken}`,
        'Content-Type': 'application/json',
      },
      withCredentials: true,
    })
    .then(res => {
      console.log('res', res);
      props.signOut();
    })
    .catch(e => console.log(e));


    // 카카오 로그인이 되어있는 경우
    if (window.Kakao.Auth.getAccessToken() !== null) {
      window.Kakao.Auth.logout(function() {
        console.log(window.Kakao.Auth.getAccessToken());
      })
    }

    // 구글 로그인이 되어있는 경우
    if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
      gapi.auth2.getAuthInstance().signOut().then(function() {
        console.log(gapi.auth2.getAuthInstance().isSignedIn.get());
      })
      gapi.auth2.getAuthInstance().disconnect();
    }
  }

• 하지만 리덕스가 아닌 그냥 리액트만 쓰니까 전역 상태가 추가되는 것에 대해 거부감이 든다. 처음에는 팀원분이 리덕스까지 필요없을 것 같다고 설득을 시도하셨고 나도 담당자가 괜찮다면야 라고 생각하고 진행했는데 컴포넌트 트리가 복잡해질수록 지난 프로젝트때 썼던 리덕스가 그립다... 프롭스를 네번 다섯번 내려주다 보니 정신이 하나도 없다. 특히 로그인 여부 정도야 랜딩페이지에서만 주로 쓴다지만 토큰 같은 경우 다양하게 여기저기서 써야 할 필요가 있기 때문에 더 진행되기 전에 리덕스 쪽으로 설득해볼 것.
• 환경변수 설정
• 리액트에서는 환경변수 앞에 REACT_APP_(환경변수명) 과 같이 붙여줘야 dotenv로 인식이 가능하다
• html에서 환경변수를 사용하려면 %REACT_APP_GOOGLE_OAUTH_CODE% 와 같이 앞뒤에 %를 붙여 사용한다
• 사이드바에 로고를 클릭하면 메인페이지로 리다이렉트되도록 하자.
• css 외주 주고 싶다... 재밌는데 재미없다(?) 그리고 아마 나보다 디자인 전문가가 더 잘 하지 않을까...
• 프론트에서 라우팅된 uri들이 잘 이해가 가지 않는다. placeholder인지 그대로 가는 것인지 물어보자.

Tomorrow I will

• 검색 요청 구현
• 리프레시 토큰 요청 도입
• authcontroller 쪽 성공응답 외의 응답들에 대한 클라이언트 렌더링
• (필요하면) 리덕스 초기세팅