항해99 6주차 회고록(클론프로젝트) - 페이스북

Clone Project Start! (클론프로젝트)

새로운 프로젝트가 시작되었다.
클론프로젝트 주차로 우리팀은 페이스북을 하게 되었다.
지난번 메인페이지와 상세페이지를 맡였다면 이번에는 로그인,회원가입 과 게시글작성쪽에 작업을 진행하였고, 좋은 팀원들을 만나 많이배웠다.

컴포넌트 플로우

• 페이스북뷰 그대로 로그인페이지를 만들고 회원가입은 모달창으로 구현했다.
  서버에 넘겨줄 값이 메일과 비밀번호 외에 성(姓)과 이름, 생년월일과 성별이 있어서 이름과메일,비밀번호의 input 데이터들은 onChange와 setState를 통해 받았고, 생년월일은 연,월,일을 각각 빈 array를 만들고 new Date()를 활용하여 for문으로 각각 옵션을 select에 넣어주었다. 성별값은 material-ui의 FormControl을 사용하여 label에 각 value값을 전달받아 이를 모두담아 axios를 통해 백엔드에 dispatch하는 형식으로 통신을 시도했다.
• 로그인 시에는 200 status 코드와 jwt 토큰을 발급해주고, 이 토큰을 document.cookie를 이용해 저장해주는 방식을 사용했다.

//user.js 로그인
const loginMiddleware = (loginInfo) => {
  return () => {
    apis
      .login(loginInfo)
      .then((res) => {
        console.log(res);
        //인터셉터
      })
      .catch((err) => {
        console.log(err);
         //인터셉터
      });
  };
};
//Cookie.js 쿠키
const setCookie = (name, value, exp = 3) => {
  let date = new Date();
  date.setTime(date.getTime() + exp * 1000 * 60 * 60);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
};
// axios.js 리스폰스
instance.interceptors.response.use(
  success => {
    console.log(success);
    const response = success.data;
    console.log(response.token);
    if (response.statusCode === 200 && response.responseMessage === '로그인 성공') {
      let userCookie = success.data.token;
      console.log(userCookie);
      setCookie('user_id', userCookie, 30);
      window.alert('로그인성공');
      history.push('/main');
    }
    //이하생략
  });

이번에 하면서 아쉬웠던 점

1. 이번에 로그인과 회원가입구현과 포스트작성컴포넌트를 담당하였는데 생각보다 뷰를 작업하는데 시간이 너무 많이 소요되었다. 반응형으로 구현못한것이 너무 아쉬웠다.
   직전에 프로젝트에서 뷰를 만들때 최소단위 컴포넌트에 프롭스값으로 넘겨받아 구현하는 형태로 작업을 하지 않아서, 이번 프로젝트시에 적응하는데 매우 힘들었다.
2. 기능을 제대로 구현하지 못한점이 몹시 아쉬웠는데 특히 서버에서 받아온 에러를 캐치하여 로그인 또는 회원가입에 alert대신 메시지로 남겨주는 기능을 구현하지 못한부분이 아쉬웠다.
   문제 해결하기 위한 시도 : 회원가입컴포넌트에서 직접 미들웨어 에러값을 가져오려고 시도(리덕스 이해부족 실패!)
   다음에는 어떻게 해결한것인지 : usecallback hook을통해 input의 value값을 받아와서 각각 체크에 필요한 state값을 만들고 바뀐 state 값을 담으면 될것같다.

클론프로젝트 (페이스북)

페이스북>>>
github 바로가기 >>>

5주차 누적 공부시간 : 682시간 30분