공부 38주차 코드 스테이츠 (21주 ~ 24주 ) 메인프로젝트 완성도중 디버깅 정리 - version 2

메인프로젝트 통합으로 정리하며 디버깅 및 피드백받은 글들을 정리하려 합니다 ( version 2)

• 메인프로젝트 깃허브 와 배포되어있는 사이트
• 피드백 받은 부분
• 피드백 수정중 발견한 오류 디버깅과 진행하면서 발생한 오류 디버깅

메인프로젝트 깃허브 와 배포되어있는 사이트

https://github.com/codestates-seb/seb40_main_013

GitHub - codestates-seb/seb40_main_013: 가구 유통 플랫폼 집가구싶다🏡

https://dailydaily.shop/

Daily, daily

 

피드백 받은 부분

• 로그인 회원가입 alert -> sweetAlert 변경

https://sweetalert2.github.io/#handling-buttons

SweetAlert2

 

sweetAlert 패키지를 사용하여 window.alert 사용을 안하게 되었습니다 

👆 sweetAlert 사용전   window.alert  사용한 사진

 

👆 sweetAlert 사용후 alert사진

 

sweetAlert을 사용하여 다양한  alert 을 띄울수 있게되었습니다 

👆 리뷰 추가 할때 나오는 alert

👆상품 좋아요 삭제 alert

👆 로그아웃 alert

 

• 반응형 css 변경 

media query 를 사용하여 반응형 390px 까지 구현하였고 화면에 조화롭게 보이지를 않아  이 부분을 수정하였습니다 

 

피드백 수정중 발견한 오류 디버깅 과 진행하면서 발생한 오류 디버깅

 

api 토큰 선언하였지만 새로고침해야  받아오는상황

const jwtToken = localStorage.getItem("Authorization");

export const getUser = createAsyncThunk("user/getUser", async () => {
  return Apis.get(`members/mypage`, {
    headers: {
      Authorization: `${jwtToken}`,
      "Content-Type": "application/json",
    },
  })
    .then((res) => {
      console.log(res);
      return res.data;
    })
    .catch((err) => {
      console.log(err);
    });
});

👆 위의 코드는  오류를 수정하는동안 문제가 발생한 코드입니다

문제점

jwtToken 을 최상단에 선언후 웹저장 공간에 저장되어있는 Authorization 을 할당하였습니다

마이페이지에 이동하게되면 GET메소를 사용하여 내정보를 가져와 안녕하세요 OOO님 이 보여집니다

👆위의 사진은 문제가 일어나고있는 사진입니다 

 

코드에서 Authorization을 할당하고있지만 마이페이지로 이동할경우 토큰이 없다고 오류로 알려주고있습니다 

 

문제 원인

 

getUser를 요청 할경우 토큰을 요청에 담아 보내는걸 알수있지만 네트워크에서 토큰이 담겨있지 않은걸 보실 수 있읍니다

문제의 원인은 사용자가 화면에 들어오고 특정 요청을 하게되면 네트워크에서 토큰이 없다 라고 하는점입니다 

로그인할경우 웹저장공간에 Authorization 을 요청에 담아 보내야하는데 이 부분이 문제였습니다

상단에 작성된 jwtToken에 아무것도 담겨져있지 않은 빈 Authorization이 할당되고 요청되어 서버에서 응답으로 비어있다 말해주는것 입니다 

사용자가 사이트에 접속하면 jwtToken에는 빈 Authorization 할당되어 값이 업데이트 되지않습니다 

export const getUser = createAsyncThunk("user/getUser", async () => {
  return Apis.get(`members/mypage`, {
    headers: {
      Authorization: `${localStorage.getItem("Authorization")}`,
      "Content-Type": "application/json",
    },
  })
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
      console.log(err);
    });
});

👆위의 코드는 문제를 해결하여 적용한 코드입니다

 

👆위의 코드는 문제를 해결한 화면입니다 

 

사용자가 사이트에 접속하게되면 빈 jwtToken이 저장되고 특정요청을 할때 빈 토큰이 보내지게됩니다 

이를 특정요청시마다 웹저장 공간에있는 Authorization을 호출하게된다면 사용자가 로그인하고 특정 요청을 할때마다 성공적으로 요청을 진행하게됩니다 

 

이미지 압축

 

요번 프로젝트의 백엔드분들께서 만들어주신 서버에 이미지를 요청하려면 form데이터로 데이터들을 감싸서 보내야합니다

export const postReview = createAsyncThunk(
  "review/post",
  async ({ postData, navigate }) => {
    const form = new FormData();
    if (postData.img === undefined) {
      form.append("content", postData.content);
      form.append("score", postData.score);
    } else if (postData.img) {
      form.append("content", postData.content);
      form.append("score", postData.score);
      form.append("img", postData.img);
    }
    return Apis.post(`products/${postData.filterProductId}/reviews`, form, {
      headers: {
        Authorization: `${localStorage.getItem("Authorization")}`,
        "Content-Type": "multipart/form-data",
      },
    })
      .then((res) => {
        Toast("success", "리뷰가 추가되었습니다!");
        navigate("/members/mypage/myboard");
        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
);

👆 리덕스 툴킷의 reviewSlice에 담겨있는 코드입니다

 

저희 프로제트에서는 리덕스 툴킷을 사용하여 전역으로 상태관리를 하고있습니다

이미지를 폼데이터로 감싸 보내는방법은 위와 같습니다

dispatch로 첫뻔째 인자에 postData를 받고 넘어온 이미지 등을 form으로 선언하여 new FormData 할당하신것을 볼 수 있습니다

👆 dispatch로 넘어온 첫번째 인자 postData

 

https://developer.mozilla.org/ko/docs/Web/API/FormData/append

FormData.append() - Web API | MDN

위와 같이 form.append("img" , postData.img) 와같이 작성하게된다면 폼데이터에 추가된 모습을 볼 수 있습니다 

문제점

위와같이 성공을 하였지만 여기서 백엔드분께서 압축을 할수있는지에대해 여쭤보셨습니다

큰 이미지를 서버에 계속 보내게되고 이 이미지들이 많이 모이면 서버에 부하가 걸릴수있다는 점입니다

인터넷에 이미지를 압축하는방법에 대해 검색해보게되었고 browser-image-compression 라이브러리를 사용하여 이미지를 압축할수있다는걸 알게되었습니다

 if (e.target.files) {
      const [file] = e.target.files;
      console.log([file]);

      const options = {
        maxSizeMB: 0.5,
        maxWidthOrHeight: 1920,
        useWebWorker: true,
      };
      const compressFile = await imageCompression(file, options);
      console.log(compressFile);
      const myFile = new File([compressFile], "imageName.JPG");
      setUserWriteImg(myFile);
    }
  };

👆 위의 코드는 리뷰를 등록할때 이미지를 올리게되면 압축을 실시해주는 코드입니다

 

사용방법은 받아오는 이미지를 [ file ] 에다가 할당하고 이 이미지를 imgageCompression 을 사용하여 압추을 하는방법입니다

위와같이 옵션을 선택하고 파일과 옵션을 넣어 콘솔로 conpressFile을 로그를 찍어보면 파일이 압축된것을 보실수있습니다 

👆  압축전 파일

👆  압축 후 파일

 

위와같이 maxSizeMb에 값을 넣어주면 압축해준다는걸 알수있습니다 

이후에 발견된 문제입니다

압축율이 너무크게되면 사진이 깨지는 현상을 발견했는데 추후 더 공부 해볼예정입니다

위의 2사진의 차이점은 사진의 크기도 있지만 중요한 다른 변화가있습니다

압축전의 파일은 File의 형태이지만 아래의 형태는 Blob의 형태라는것입니다

https://developer.mozilla.org/ko/docs/Web/API/File/File

File() - Web API | MDN

인터넷에 찾아보니 File형태로 바꾸는 방법이 나와있었고 이를 적용해서 폼데이터로 바꿔 보내게 되었습니다

 

위의 사진과 같이 만들어 이미지 압축의  문제점을 해결하였습니다