React 네아로:네이버로그인 적용

네이버아이디로 로그인 with React

🧪 Issue

만들던 웹 서비스에 카카오, 구글 로그인은 npm 모듈로 쉽게 적용할 수 있었는데 네이버 로그인 모듈은 작동하지 않았다(cannot find first child...). 그래서 모듈에 로그를 직접 찍어보다보니..

index.ex.js // line 48

var initLoginButton = function (props) {
     if ((!'browser' in process)) {
        return;
    }

line 107

 LoginNaver.prototype.componentDidMount = function () {
        if ((!'browser' in process)) {
            return;
        }

if ((!'browser' in process)) 에서 잡혀 바로 return되어 제대로 실행이 되지 않았다. 내 웹 서비스의 process를 찍어보니

{title: "browser", env: {…}, argv: Array(0), version: "", nextTick: ƒ, …}

가 나오고 왜인지 process에 browser란 key가 없다. 일단 저 브라우저단에서 출력되는 process가 뭔지 잘 몰라(아시면 댓글 부탁드려용//// 추가: 내 웹의 로그인 Component가 서버사이드에서 rendering 되어서 browser가 안나오는 것으로 추측 중..) 단순히 not 연산자(!) 만 두 군데 모두 제거해주니 정상적으로 작동되었다.추가 : not(!) 제거 대신 다음과 같이 바꿈

 if(typeof window===undefined)return;
 else LoginLogic;

Login.tsx 네이버 로그인 버튼 구현

이 부분만 rendering 하면 정상적으로 구동된다

<NaverLogin
          clientId=",,,,,,,,,,,,,,,,,,,,,"
          callbackUrl="http://localhost:5000/사용자지정callback"
          render={(props) => <NaverButton onClick={props.onClick}><img
            src={naver}
            alt="naver"
            style={{
              width: '100%',
              height: '100%',
            }}
          /></NaverButton>}
          onSuccess={(res) => responseLogin(res, 'naver')}
          onFailure={() => console.log('naver login fail')}
 />

react-login-by-naver 고친 모듈을 관리하기 위해 npm에 따로 배포해 놓았다. 비슷한 문제가 있으신 분들은 사용해보기 바람.

원본npm 원본git