프로젝트 16일차

정지우·2021년 12월 9일
0

Project.zip

목록 보기
11/17
post-thumbnail

파이널 프로젝트 16일차(21-12-08)

구글 소셜 로그인 구현하기


📖 react-google-login

react-google-login을 npm을 통해 설치하고, 컴포넌트에 삽입하면 화면상에 다음과 같은 버튼이 등장한다.

// terminal
npm install react-google-login 

  • GoogleLogin 컴포넌트의 render props를 이용하면, 이미지를 사용할 수 있습니다.
// GoogleButton.js
return(
    <GoogleLoginBlock>
        <GoogleLogin
            clientId={clientId}
            render={(renderProps) => (
              <img 
              src={google}
              alt="google"
              onClick={renderProps.onClick}
              aria-hidden="true"
              />
            )}
            responseType={"code"}
            onSuccess={onSuccess}
            onFailure={onFailure}/>
    </GoogleLoginBlock>
  )
  • 스타일 컴포넌트를 통해 img 태그의 스타일을 설정하면 디자인 수정이 가능합니다.

📖 환경변수 사용 in client

클라이언드 내에서 환경변수를 사용하기 위해서, .env 파일의 환경변수는 반드시 앞에 REACT_APP_을 붙여야 한다.


🔍 References

profile
재미를 쫓는 개발자

0개의 댓글