네이버 로그인 API (네아로) 의 모든 것 : 2부 (버튼 커스텀)

❕ 들어가기 전

인턴 기간 프로젝트에 적용하게 된 네이버 로그인의 모든 기능을을 구현하고자 했고,

정리한 내용을 바탕으로 4부작으로 나누어 작성 중이다.

1부 : 네아로 연동하기 _ 로그인 기능
2부 : 로그인 버튼 커스텀
3부 : Redirect 페이지 구현
4부 : 네아로 로그아웃 구현 및 CORS 에러 트러블 슈팅

가벼우면서 깊게 ~

1부 글과는 조금 다르게 주석을 통한 설명이 아닌 각 코드를 나눠서 설명을 진행해야할 것 같다.

왜? 살짝 스포를 하자면 useRef 라는 React Hook을 사용할 것이기 때문이다 ^.^ 혹시라도 잘 모른다고 해도 괜찮다.

왜 사용하는지? 그리고 어떻게 사용하는지 까지만 가볍게 짚고 넘어갈 것이다. 모른다고 나가지말자.

어짜피 해야된다.. 매는 자초해서라도 빨리 맞자 그래야 나중에 맞는 놈보면서 웃을 수 있다

다들 피식 하지말고 슬슬 다시 집중해보자

심호흡 크게 ~  뿅 ! 

---

❕ ㄴ..너무 투박해.. 바꿀래

1부 네이버 로그인 API 연동을 구현했다.

근데 너무 투박한거 아니야..? 라는 생각이 들었고, 요리조리 커스텀을 해봐야겠다고 생각하고 폭풍검색 !!

하단에 걸어둔 링크를 접속하자! 접속하면 커스텀에 사용되는 이미지, 예시 등 여러가지를 확인 가능하다.

로그인 버튼 사용 가이드

❗️ 주의할 점 ❗️

사진과 같이 네이버 아이덴티티를 약화 시키는 커스텀에 한해서는 금지한다고 명시 되어있으니 주의하자.

---

❕ 요리조리 커스텀 시작 ~ !

< React.js 와 Styled-components 환경에서 작성 된 코드 입니다. >

❕ 커스텀 흐름

커스텀에 대한 흐름을 크게 살펴보면

• 네이버가 제공하는 버튼을 style을 display:none을 사용하여 가리고, 커스텀 버튼이 대신 보이도록 만든다.
• useRef hook 을 이용해 커스텀 버튼을 클릭하면 가려진 네이버 기존 버튼이 클릭되도록 만든다.

흐름을 조금 더 쉽게 풀어서 이야기해보면 !

네이버가 제공하는 기존 버튼이 style을 수정하여 가리는 것이지, 기능이 사라지는 것은 아니다 !

따라서 가려진 기존 버튼의 기능을 커스텀한 버튼이 대신 실행 시키는 것 이라고 이해하면 편하다 !

🖐 잠깐! useRef 가 뭐야 ?

useRef는 React.js 에서 기본으로 제공하는 Hook 종류 중 하나이다.

Javascript 를 사용할때, 특정 DOM 을 선택하여 정보를 얻거나 임의로 조작해야 하는 상황에서는

getElementById 혹은 querySelector 과 같은 DOM Selector 함수를 사용하여 DOM 을 선택하였지만,

React.js 는 이 기능을 대체할 수 있는 useRef hook 을 제공한다.

useRef_리액트 공식문서

---

❕ 이제 그만 말하고 보여줘. 결과물

< 모든 주석은 바로 아래 줄 코드를 설명합니다. >

❕ 구현 코드

// 구현 코드 

            // css 대신 styled-components 를 사용하였기에 import 해주었다.
            // css, scss 를 사용한다면 import 를 하지 말자!
import styled from 'styled-components'
            // useEffect 와 같이 기본으로 제공하는 훅이기에 같이 import 해주자.
import { useEffect, useRef } from 'react'

const NaverLogin = () => {
    
// useRef 를 선언 해준다. 
	const naverRef = useRef()
	const { naver } = window
    
// 환경 변수 처리를 해주었다면 ?
    // 환경 변수를 사용하여 CLIENT ID, CALLBACK URL 불러온다.  
    // 설명이 필요하다면 댓글 또는 메일을 남겨주세요! 
	const NAVER_CLIENT_ID = process.env.REACT_APP_CLIENT_ID
	const NAVER_CALLBACK_URL = process.env.REACT_APP_CALLBACK_URL

// 1부에 작성 된 코드 그대로 사용한다면 ?
    // 위에 2줄의 코드를 주석처리 하고 아래 코드를 사용하자.
    const NAVER_CLIENT_ID = // 발급 받은 Client ID 입력 ~!
	const NAVER_CALLBACK_URL = // 작성했던 Callback URL 입력 ~!

	const initializeNaverLogin = () => {
		const naverLogin = new naver.LoginWithNaverId({

          // 위에 Client Id 랑 Callback Url 적었는데 ? 라고 혹시 생각한다면
          // 변수 처리를 해준 것이기에 그냥 넘어가면 된다.
			clientId: NAVER_CLIENT_ID,
			callbackUrl: NAVER_CALLBACK_URL,
			isPopup: false,
			loginButton: { color: 'green', type: 3, height: 58 },
			callbackHandle: true,
		})
		naverLogin.init()
	}
    
	const userAccessToken = () => {
		window.location.href.includes('access_token') && getToken()
	}
	const getToken = () => {
		const token = window.location.href.split('=')[1].split('&')[0]
	}

	useEffect(() => {
		initializeNaverLogin()
		userAccessToken()
	}, [])


       // handleClick 함수 onClick 이벤트 발생 시 useRef 를 통해 지정한 naverRef 항목이 클릭 된다.
       // current 를 통해 아래 div 태그의 ref={} 속성을 줄 수 있다. ( 자세한 내용은 공식문서를 확인하자. )
	const handleNaverLogin = () => {
		naverRef.current.children[0].click()
	}

	return (
		<>
        
                 // 선언 된 naverRef 를 ref 속성을 이용하여 적용하자.
			<NaverIdLogin ref={naverRef} id="naverIdLogin" />
			<NaverLoginBtn onClick={handleNaverLogin}>
				<NaverIcon alt="navericon" />
				<NaverLoginTitle>네이버로 로그인</NaverLoginTitle>
			</NaverLoginBtn>
		</>
	)
}

export default NaverLogin


// 이 부분부터 styled-components 로 작성 된 코드이기에 css 를 사용한다면 잠시 코드 아래의 설명을 보고 오자! 


// 기존 로그인 버튼이 아닌 커스텀을 진행한 로그인 버튼만 나타내기 위해 작성
const NaverIdLogin = styled.div`
	display: none;
`

const NaverLoginBtn = styled.button`
	display: flex;
	align-items: center;
	width: 360px;
	height: 56px;
	background-color: #03c75a;
	border-radius: 6px;
`

// 로그인 버튼 사용가이드 링크를 들어가면 이미지를 받아 이렇게 적용이 가능하다 ! 
const NaverIcon = styled.div`
	width: 30px;
	height: 30px;
	margin-left: 10px;
	background: url('/images/Login/navericon.png') no-repeat center;
	background-size: 30px;
`

const NaverLoginTitle = styled.span`
	margin-left: 90px;
	color: ${({ theme }) => theme.White};
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
`

🖐 CSS 를 사용한다면 잠시 집중하자 !

 styled-components 를 모르고 ! css 로 작업을 하고있다 ! 라고 한다면 ? 

Styeld-components 코드를 css파일로 변환예시를 보여주겠다.

// styled-components 

const NaverIdLogin =styled.div`
	display: none;  
    `

아래처럼 html 과 css로 변환 할 수 있다.

//  React.js 파일

<div className="naverIdLogin"></div> 

// CSS 파일 

.naverIdLogin {
      display: none; 
               } 

---

❕ 뿅 ❕

커스텀을 진행하여 구현된 화면이다.

사실 어려운 부분은 없다. 다만, useRef 라는 hook 을 처음 접한 사람들이 있을 것 같아 전반적인 흐름을 정말 쉽게 설명하기

위해 생각하는 시간이 조금 걸렸다. 결국은 많은 사람들이 깊게 보지 않고 구현하려는 목적이 크다는 것을 알기에 정말

최소한의 설명만 작성하려고 노력했다.

도움이 되었다면 댓글은 큰 힘이 될 것 같다..요 ^^

❕ 마지막으로 ~

부족한 내용이 있다면 ?

구독과 좋아요.. 알라..ㅁ 아 
이게 아니고 댓글과 이메일은 항상 열려있습니다 !

---

+

많은 분들의 관심 덕분에 네아로 검색순위 1등을 달리고 있습니다 ~ !

정말 고심하며 누군가에게 도움되었으면 하는 마음에 열심히 작성했던 글인데

매일매일 20~30분정도가 읽어주시고 댓글과 메일로 감사하다는 연락을 많이 받아 뿌듯합니다 : )

추가로 3, 4부 관련해서도 많은 분들께서 문의 주셨는데요..

제가 회사일로 인해 정신이 없다보니.. 호호

3부는 어느정도 작성을 해두어서 금방 정리하여 올리도록 하겠습니다.

감사합니다, 모두 좋은 하루 되세요 !