오늘 고민한 코드들

전반적으로 로그인 회원가입 페이지를 완성시키느라 좀 고생했다. 그래도 일단 CSS 파트를 제외하고는 완성했다. 새롭게 알게 된 것도 있다.

1. 백엔드와 연결 확인

특히 어려웠던 부분 : true, false로 id, 닉네임 중복체크 백엔드와 소통하기

(loginSlice.js)
export const  __checkId = createAsyncThunk(
  "account/checkId",
  // type 설정을 해야한다. 이게 틀리면 코드가 꼬일 수도 있다.
  async (payload, thunkAPI) => {
    try {
    const data = await axios.post(`${SERVICE_URL}/account/checkid`, {userid: payload})
      return thunkAPI.fulfillWithValue(data.data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error)
    }
  }
)

export const  __checkName = createAsyncThunk(
  "account/checkName",
  async (payload, thunkAPI) => {
    try {
      const data = await axios.post(`${SERVICE_URL}/account/checkname`, {nickname: payload})
      // 415는 타입에러. {}로 감싸서 보낸다.
      return thunkAPI.fulfillWithValue(data.data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error)
    }
  }
)

const onCheckId = () => {
  // 기존에 if문으로 하던 것 전면 수정
  dispatch(__checkId(obj.userid))
}
// dispatch로 올리지 않은 코드에서 선언한 obj의 userid를 payload에 보내준다.

useEffect(() => {
  if(idCheck !== undefined){
    if(idCheck.success === true){
      // 백엔드에서 true, false로 주니까 그 값에 따라 alert를 줌
      return alert("사용 가능한 ID입니다.")
    }else{
      return alert("이미 사용중인 ID가 있습니다.")
    }
  }
}, [dispatch, idCheck])

// 밑에도 마찬가지
const onCheckname = () => {
  dispatch(__checkName(obj.nickname))
}
useEffect(() => {
  if(nameCheck !== undefined){
    if(nameCheck.success === true){
      return alert("사용 가능한 닉네임입니다.")
    }else{
      return alert("이미 사용중인 닉네임이 있습니다.")
    }
  }
}, [dispatch, nameCheck])

2. 로그아웃

(movielist.jsx)
import React from 'react'
import { getCookie, delCookie } from '../cookie/cookie'
const MovieList = () => {
  const onLogoutHandler = () => {
    delCookie("Access_Token")
    alert("이용하시려면 다시 로그인 해주세요")
    window.location.replace("/")
  }
  
  // 로그아웃 버튼을 임의로 생성하여 일단 되는지 확인. 필요한 곳에 적재적소에 배치 예정. 쿠키와 함께 사용 => 쿠키값 삭제 로직(아래 쿠키 함수 참고)
  return (
    <div>
      <button onClick={onLogoutHandler}>로그아웃</button>
      </div>
  )
}

export default MovieList

3. 쿠키사용

(loginSlice.js)
xport const __userLogin = createAsyncThunk(
  "account/userLogin",
  // login : reducer name, 경로 정해줘야
  async (payload, thunkAPI) => {
    try {
      const data = await axios.post(`${SERVICE_URL}/account/login`, payload);
      const Access_Token = data.headers.access_token;
      // const refreshToken = data.headers["refresh-token"];
      if (data.status === 200 || data.status === 201) {
        setCookie("Access_Token", Access_Token);
        // window.localStorage.setItem("refreshToken", refreshToken);
        setCookie("nickname", data.data.data);
        alert("로그인 성공");
        window.location.replace("/movielist")
        
        // setCookie : 쿠키로 토큰과 닉네임 저장하는 함수(아래 확인)

(cookie.js)
import { Cookies } from "react-cookie"
const cookies = new Cookies()
export const setCookie = (name, value, options)=>{
    return cookies.set(name, value, {...options})
}
// 쿠키 더하기
export const getCookie = (name)=>{
    return cookies.get(name)
}
// 쿠키 가져오기
export const delCookie = (name) => {
    return cookies.remove(name, {path : '/'})
}
// 쿠키 지우기