항해의 여정(20)

qoqo_mi·2022년 6월 13일

항해99

목록 보기

19/23

TIL

오류 해결!

게시글 추가 기능 구현 성공 ! axios를 이용해서 postman에 있는 데이터를 가져오는 중 ....
게시글을 추가하고 reverse() 를 미들웨어에 추가하고 나서부터 게시글 추가 버튼을 눌렀을 때 게시글이 반대로 붙어지게 하고 싶었다.
근데 그렇게 되지 않아서 점심부터 그랬던 것 같다
그런데 원인을 알게 되었다. 다른 팀원들에게도 조언을 구했는데 미들웨어 부분에서 문제인 줄 알았다.
근데 미들웨어가 문제가 아니라 리듀서가 문제였다.

case "post/CREATE": {
      const new_post = [action.post_create, ...state.list];
      return { list: new_post };
    }

바로 이 부분인데 우리는 첫번째 배열로 올려줘야 하는 거니 , 새롭게 추가 되는 요소를 첫번째에 배치해 주어야 하는 것이다.. !!

이 부분을 기술매니저님께 물어보고 나서 엄청난 감동 + 해결된 기쁨 등 …등 .. 매니저님 감사해요 .. !

axios

로그인 기능을 구현할 때 프로젝트는 JWT토큰을 가져와 사용한다. 그럼 이걸 어떻게 프론트엔드에서 담느냐 ? 라는 주제로 오늘 스터디를 진행하였다.

프론트에서 회원가입으로 정보를 요청하면 그 데이터를 백엔드는 가지게 된다. 그 후 로그인 정보를 입력하고 로그인 하기 버튼을 눌렀을 때 백엔드에서는 header에 담아 우리한테 토큰을 넘겨준다.

그럼 프론트단에서는 토큰을 어떻게 가지고 다니냐 ?

Storage 종류

Local Storage : 해당 도메인에 영구 저장
Session Storage : 해당 도메인의 한 세션에만 저장
Cookie : 해당 도메인에 시간 설정하여 이후 파기되도록 저장

이때 기간 설정 및 관리가 꼭 쿠키에서만 가능한 것은 아니며 access token의 기한을 백엔드에서도 설정할 수 있다. 또한 백엔드에서 기간이 지난 token을 받은 경우 프론트엔드에 기간으로 인한 응답을 줄 수 있다.

이렇게 토큰은 특정 저장소에 localStorage.setItem('access_token'), localStorage.getItem('access_token') 과 같이 JS method를 이용해 storage에 저장하고 저장된 토큰을 다시 꺼내온다.

만약 mypage 등 유저 정보가 없을 경우 페이지 진입 자체가 불가능하거나 관련 데이터를 불러올 수 없는 경우 클라이언트 쪽에서 token을 보내주게 된다. 그럼 백엔드에서 token을 받아서 해독을 한 후 해당 유저의 정보를 json 형태로 보내주게 된다.

또한 우리는 백엔드 서버에서 보낸 파일의 형태를 받아야하는데

로그인과 회원가입을 할 때 사용되는 method는 바로 POST
이다. POST method는 body에 사용자의 데이터를 담아 보내주게 된다. 이때 body는 객체 형태로 되어 있기 때문에 백엔드에 필요한 정보를 제대로 보내주기 위해서는 key값을 서로 맞추어 주고 받아야 한다. 그리고 HTTP 통신 규약에 따라 body에 데이터를 넣을 때에는 JSON 파일을 string 형태로 변환하는 stringify를 이용해 보내주어야 한다.

이렇게 보내진 데이터는 비동기 처리 .then을 통해 데이터가 보내진 후 돌아왔을 때 어떻게 할 것인지 설정해주어야 한다.

우선 프론트에서 stringify해서 데이터가 보내졌던 것과 마찬가지로 response로 온 데이터는 string 형태이기 때문에 json 데이터로 변환해주어야 한다.
그 후 변환된 json을 result라고 봤을 때 돌아온 값의 message가 "SUCCESS"이면 회원가입이 성공된 것이고 그렇지 않다면 회원가입 실패라고 뜨게 된다.

그럼 어떻게 적용해야하지.. ?

우리가 로그인버튼을 눌렀을 때 로컬 스토리지에 저장되는 토큰으로 토큰이 있다면 ? dispatch를 실행하게 한다.

//App.js
React.useEffect(()=>{

    if (is_token){
      dispatch(userActions.loginCheckFB());
    }
  }, []);

리듀서로 넘어가서 headers에 로컬스토리지로 가는 토큰을 가지고 룰루랄라 입장하게 된다.

//redux=> 미들웨어
const loginCheckFB = () => {
  return function (dispatch, getState, {history}) {

    axios.get('/api/user/me',
    {
      headers: {'Authorization':`Bearer ${localStorage.getItem("token")}`},}
    )

    .then(function(response) {
      // console.log("logincheckFB !! ", response);

      if(response.data.user) {
        dispatch(setUser({
          userID: response.data.user.userID,
          id:response.data.user.id,
          nickname: response.data.user.nickname,
          token : localStorage.getItem("token"),
        }));
      } else {
        dispatch(logOut());
      }
  })

    .catch(function (error) {
      console.log('logincheckFB error !!', error);
    });

  }