🌏 [project #2] Jigu-tory #2

4週間のプロジェクトはちょうど1週間が過ぎた.今はまだ力を入れていないので、昼間は本を読んで、しばらく休みました.前回の2週間の計画より気持ちが楽になりました(楽にならないかな…?)感じました.今日まで無事にログイン、Googleログイン、会員加入を発表してきましたが、思った以上に大きなミスはなかったのでおかしいです...間違いがない状況がおかしくなった.🤯 何か書きたいのですが、一週間が過ぎる前(今は日曜日の夜11時50分)に書きます.

学識

1.Fontwesomeのインストール

// 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.応答フックを使用してログイン状態を維持する（ローカルストレージを使用してページをリフレッシュした後、応答フックで永続状態を維持する）

注意:How to Persistent state after a page refresh in react、ローカルストレージ使用
注意:永続的な状態はreactにあります。js using useEffect hook
Redux Persistで状態管理をするつもりでしたが、まず反応でやることにし、ダメならReduxを使い、Effectを積極的に利用することにしました.(反応したい...💜 ) 最上位コンポーネントでログイン状態を維持します.useEffectは使用すると同時にぼやけているところもあります.記録してみて、書くと慣れると思います.
ログイン情報を入力してサーバに送信し、応答中のタグをトップコンポーネントのタグに保存し、ログイン状態もtrueに変更します.そしてアプリjsでは、毎回UserEffectを使用してlocalStorageをレンダリングします.getItemを使用して保存したデータをインポートし、ステータス値をキャンセルします.最後に、ステータス値を取得して、構成部品とlocalStorageを更新します.setItemで保存します.
localStorageは文字列のみを受信し、同じ値を返します.だからJSONstringgify()と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.Googleソーシャルログイン

Google APIで解決しました.react-google-loginをインストールし、GoogleクライアントID(タイプ:Webアプリケーション)を取得し、URIとRedirectionを設定します.
Googleログインコンポーネントimport GoogleLogin from 'react-google-login';から受信して開始します.Googleボタンは私が指定したスタイルで飾られるので、renderでbuttonを生成しました.ソート中に問題があり、google google画像とgoogleの文字を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になってしまいましたㅠㅠTALKENとログイン状態を分けてやりたいですか...
(+ログイン状態管理後に簡単に解決できるようにトークンを変更)

明日やること

のKakaoログインを再試行(+Kakaoログインを放棄)

KACA地図作業+割り当てフロント作業

開始

ログイン時、

を変更してサーバのみにユーザ情報を送信