🌏 [project #2] Jigu-tory #2

4주 프로젝트에서 1주일이 딱 지났다. 아직은 빡세게 하고 있진 않아서 낮에 책도 좀 읽고 쉬기도 했다. 저번 2주 프로젝트보다 마음이 가벼워진(가벼워지면 안되는데..?) 느낌이다. 오늘까지 무사히 로그인, 구글로그인, 회원가입까지 배포했는데 생각보다 큰 에러가 안 나서 이상했다... 에러 안 나는게 이상해진 상황 🤯 좀 적어두고 싶은 것들이 있어서 일주일이 가기 전에 (지금은 일욜밤 11시 50분) 적어본다.

배운 점

1. Fontawesome 설치

// npm install 
@fortawesome/fontawesome-free
@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons // 무료버전만 쓸 것이기 때문에 solid 만 설치해 줌
@fortawesome/react-fontawesome

// index.js 
import '@fortawesome/fontawesome-free/js/all.js';

2. 리액트 훅스로 로그인 상태 유지 (persist state after a page refresh in React hooks using local storage)

참고 : How to persist state after a page refresh in React using local storage
참고 : Persistent State in React.js using useEffect hook

Redux persist 로 상태관리를 해 볼까 하다가 우선 리액트로 해 보고 안 되면 리덕스를 쓰자고 결론을 내리고, useEffect 를 적극 이용해 보기로 했다. ( 리액트 잘 하고 싶다..💜 ) 최상위 컴포넌트에서 로그인 상태를 유지했다. useEffect는 사용하면서도 조금 알쏭달쏭한 면이 있다. 쓰다보면 익숙해 질거라고 생각하며 기록해 본다.

로그인 정보가 들어오면 서버로 보내고, 응답에 담긴 토큰을 최상위 컴포넌트에 있는 토큰에 상태 저장해 주고, 로그인 상태도 true 로 변경했다. 그 다음에 App.js 에서 useEffect 를 이용하여 매번 렌더링 될 때마다 localStorage.getItem으로 저장된 데이터를 가져오고 상태 값을 없데이트 해 준다. 마지막으로 상태에 있는 값을 가져와서 컴포넌트를 업데이트 시키고 localStorage.setItem 으로 저장한다.

localStorage는 문자열만 받고, 동일한 값을 반환한다. 그래서 JSON.stringify()와 JSON.parse() 를 사용한다.

// App.jsx
const [isLogin, setIsLogin] = useState(false);

useEffect(() => {
        const dataFormLocalStorage = localStorage.getItem('is-Login')
        if (dataFormLocalStorage) {
            setIsLogin(JSON.parse(dataFormLocalStorage))
        }
    }, [setIsLogin])

useEffect(() => {
        localStorage.setItem('is-Login', JSON.stringify(isLogin))
    }, [isLogin])

3. 구글 소셜 로그인

구글 API로 해결했다. react-google-login 설치하고, 구글 클라이언트 ID를 받고 (유형 : 웹 어플리케이션) URI과 Redirection 설정을 해 준다.

구글 로그인 컴포넌트에 import GoogleLogin from 'react-google-login'; 받아오고 시작한다. 구글 버튼은 내가 지정한 스타일로 꾸밀거라서 render로 button 을 생성해 주었다. 정렬 과정에서 좀 문제가 있어서 구글로고 이미지와 구글로그인 글자를 span으로 한 번 더 감싸 주었다.

const GoogleBtn = () => {
  // .env 에 API는 따로 저장해둠
  const GOOGLE_API = process.env.REACT_APP_GOOGLE_API;
  const responseGoogle = (res) => {
  	// 여기서 로컬스토리지에 유저정보 및 토큰을 상태로 저장하고, 유저정보는 서버로 보내줌
  }
  return (
    <div className="google-login" onClick={responseGoogle}>
     {<GoogleLogin
        clientId={GOOGLE_API}
        render={props => (<button onClick={props.onClick} className="modal-info google-btn social-btn" >
          <span><img width="17" src={googleLogo} className="social-logo" /><span>구글 로그인</span></span></button>)}
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
      />}
    </div>
  )
}

아.. 어쩐지 너무 잘 된다했는데 에러 발견했당..
로그인 전인데 로그인 상태가 true로 변해 버림 ㅠㅜ 토큰이랑 로그인 상태랑 나눠서 해야되나 싶다 ..
(+ 토큰이 들어온 후에 로그인 상태관리가 될 수 있게 수정하여 쉽게 해결했다.)

내일 할 일

• 카카오 로그인 에러 나던거 다시 해 보기 (+ 카카오 로그인 버리고 가기로 함..)
• 카카오 지도 작업 시작 + 프론트 업무 분배
• 로그인 시, 유저정보만 서버에 보낼 수 있도록 수정