오늘 고민한 것

0. 스크럼회의 및 스터디

• 백엔드와 프론트엔드 진도 체크 및 오늘 할 일 서로 확인
• 매일 아침 5분 정도씩 해보기로 함
• 스터디는 책 보다는 서로 과제에 대해 모르는 것 고민하고 물어보기를 1시간씩 진행함

1. Login 및 회원가입 자체 고민

• 리엑트 리덕스 툴킷을 이용해서 어떻게 하면 만들 수 있는지 고민하고 서칭해봄.
• 하루 반 나절 정도 고민해본 결과 누군가의 작품(?)을 모티브로 하는 것이 아니라 배운 것을 응용해보자는 결론이 나서 배운 리덕스 툴킷을 활용.

2. 치열하게 고민했던 코드들

1. configStore 이름 통일(api 명세서대로)

const store = configureStore({
  reducer: { movies: movies, comments: comments, account : account },
  // 뒤에 붙는 url값에 따라서 붙는 값이 달라진다.
});

2. 정규표현식을 이용한 ID, 닉네임, 패스워드 등 유효성 검사

const userIdCheck = /^[a-z]+[a-z0-9]{5,19}$/g;
const usernicknameCheck = /^[a-z]+[a-z0-9]{5,19}$/g;
const passwordCheck = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/;

// 미리 변수로 값 지정

const onCheckUserId = () => {
  account.map((item) => {
    if(obj.userId === item.userId) {
      return alert("사용 중인 ID가 있습니다.")
    }else{
      return alert("사용 가능합니다.")
    }
  })
  
}
const onCheckNicknameId = () => {
  account.map((item) => {
    if(obj.nickname === item.nickname) {
      return alert("사용 중인 닉네임이 있습니다.")
    }else{
      return alert("사용 가능합니다.")
    }
  })
}

  const onSubmitHandler = (event) => {
    event.preventDefault()
    if(!userIdCheck.test(obj.userId)){
      // 테스트 메서드 통한 양식 테스트
      return alert("아이디 양식에 맞춰주세요")
    }
    if(!usernicknameCheck.test(obj.nickname)){
      return alert("닉네임 양식에 맞춰주세요")
    }
    if(!passwordCheck.test(obj.password)){
      return alert("비밀번호 양식에 맞춰주세요")
    }
    if(obj.password !== obj.password2){
      return alert("비밀번호를 모두 확인해주세요")
    }
    if(obj.password === "" || obj.password2 === "" || obj.password === undefined || obj.password2 === undefined){
      return alert("빈칸을 입력해주세요.")
    }
    if(obj.userId === "" || obj.userId === undefined) {
      return alert("빈칸을 입력해주세요.")
    }

    if(obj.nickname === "" || obj.nickname === undefined) {
      return alert("빈칸을 입력해주세요.")
    }
    dispatch(__userSignUp(obj))
    alert("회원가입이 완료되었습니다.")
    navigate("/");
  }

3. 로그인 및 회원가입 thunk

export const  __userSignUpGet = createAsyncThunk(
  "account/userSignUpGet",
  async (payload, thunkAPI) => {
    try {
      const data = await axios.get("http://localhost:3001/account")
      return thunkAPI.fulfillWithValue(data.data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error)
    }
  }
)

export const  __userSignUp = createAsyncThunk(
  "account/userSignUp",
  async (payload, thunkAPI) => {
    try {
      const data = await axios.post("http://localhost:3001/account", payload)
      return thunkAPI.fulfillWithValue(payload)
    } catch (error) {
      return thunkAPI.rejectWithValue(error)
    }
  }
)

// 모두 post로 구현하여야 한다. 위에 get의 경우는 아이디와 닉네임을 DB상에서 비교하기 위해 get해 온 것.

마지막 login 파트 + 유효성 검사

리프레시 토큰에 대해서는 조금 더 고려해보기로 팀원과 합의

const initialState = {
  account : [],
  isLoading : false,
  error : null
};

export const __userLogin = createAsyncThunk(
  "account/userLogin",
  // login : reducer name, 경로 정해줘야
  async (payload, thunkAPI) => {
    try {
      const data = await axios.post("http://localhost:3001/account", payload);
      const accessToken = data.headers.authorization;
      // const refreshToken = data.headers["refresh-token"];
      if (data.status === 200 || data.status === 201) {
        window.localStorage.setItem("accessToken", accessToken);
        // window.localStorage.setItem("refreshToken", refreshToken);
        window.localStorage.setItem("nickname", data.data.data.nickname);
        alert("로그인 성공");
        window.location.replace("/")}

      return thunkAPI.fulfillWithValue(payload)
    } catch (error) {
      if (400 < error.data.status && error.data.status < 500) {
        window.location.reload();
        alert("로그인 실패")
      }
      return thunkAPI.rejectWithValue(error);
    }
  }
);
// 로컬 스토리지에 토큰 저장하는 방식으로 일단 코드 짬.