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

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

• 메인프로젝트 깃허브
• 마무리 피드백 받은 부분
• 피드백 수정중 발견한 오류 디버깅과 진행하면서 발생한 오류 디버깅

 

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

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

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

https://dailydaily.shop/

Daily, daily

 

 

마무리 피드백 받은 부분

• 로그인, 회원가입 글자 마우스 올라갈경우 크기 달라짐
  • 마우스가 올라가 있지않을경우엔 글자의 두께의 css설정이없고 올라갈경우 글자의 두께의 설정이 있어 이 부분을 제거하여 수정하였습니다
• 로그인 시 블링킹이 티가 많이남
  • 해당 부분의 문제는 수정을 완료하였고 아래의 디버깅에서 다뤄보고자 합니다
• 로그인, 회원가입 페이지 반응형 320px 까지 구현
  • 로그인 페이지와 회원가입 페이지가 프로젝트 초기에 만들게 됬고 이전에는 반응형을 390px까지 대응으로 진행해서 390px로 적용하였지만 이후 피드백을 받아 반응형을 320px까지 대응하기로하여 이부분을 수정하였습니다 
• 회원가입 페이지의 경우 react-hook-form 사용하여 리팩토링 추천
  • 프로젝트 완료까지 시간이 얼마 남지않아 프로젝트 완료후 개인적으로 리팩토링 해볼예정입니다
• 상품상세에 상세설명 / 부분 | 로 변경 
  • 해당 문제의 부분을 아래와 같이 수정하였습니다

👆 피드백 변경전의 화면

👆 피드백 변경후의 화면

 

• 상품 상세에 옵션 안누르면 장바구니 안눌리게 alert 
  • sweetalert을 이용하여 옵션을 누르지 않은경우 옵션을 선택해주세요 를 띄우도록 만들어줬습니다 
• 판매등록 게스트 로그인에서만 보이게설정

👆일반로그인 할경우의 화면

👆 판매 권한이 있는 게스트로 로그인한 화면

• 상품옵션의 수량이 다떨어졌지만 요청이 안오도록 변경
  • 재고수량이 0일경우 아래사진의 alert추가하였습니다

👆 판매상품의 재고가 없을경우 품절이 보여지는 화면

• 상품추가쪽 메인selectBox 선택시 서브 selectBox 의 기본값이 보여지는데  상품등록할경우 값이 비어져있음
  • 메인카테고리 선택할경우 서브카테고리쪽의 첫번째 요소를 상태를 업데이트하여 문제를 해결하였습니다
• 로컬서버에서 테스트한 토큰이 배포서버에서 사용될경우 500에러를 일으키는 문제
  • 배포 서버와 로컬서버의 접근권한 토큰이 달라지기 때문에 axios의 인터셉터를 활용하여 해당메세지가 뜰경우 로그인 요청하는 alert를 추가해줬습니다 

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

 

 

데이터 업데이트할때 새로고침하는 문제 

👆 위의사진은 로그인시 블링킹이 일어나는현상과 동일한 사진입니다

문제점

로그인을하여 jwt토큰을 웹저장공간에 저장하여 사용자의 정보가 담겨있는 토큰을 가지고 요청을했지만 토큰이 없어 빈화면이나옵니다

새로고침을 할경우 제대로된 데이터가 보여지는것을 보실 수 있습니다

블링킹이란 화면이 깜빡이는것을 말합니다 

새로고침을하게되면 사용자에게 빈화면을 잠깐 보여주게되며 로그인할경우 토큰값을 받아오기위해 새로고침을 넣어줬습니다

이로인해 블링킹 현상이 너무 눈에 띄어 이부분을 해결해야 했습니다

 

적용전 코드

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

export const getAllReview = createAsyncThunk(
  "review/allGet",
  async ({ count, setTotalpage }) => {
    return Apis.get(
      `members/mypage/reviews?page=${count}&size=20&sort=createdAt%2CDESC`,
      {
        headers: {
          Authorization: `${jwtToken}`,
          "Content-Type": "application/json",
        },
      }
    )
      .then((res) => {
        setTotalpage(res.data.pageInfo?.totalPages);
        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
);

 

해결방법

👆위의 사진은 새로고침을 하지않아도 정보를 받아오는 성공한 화면입니다

 

문제점은 jwt토큰을 받오는부분을 선언하였지만 생각처럼 받아오지 않는다는것이었습니다

콘솔로그를 활용하여 어디에서 문제인지 파악하였고 문제를 발견하였습니다

사용자가 화면에 들어오게된다면 로그인을 할경우 토큰이 담아 요청할시 사용해야했지만 사용자가 로그인을 하기도전에 아무런값이 담겨있지않아 undefined가 담기게 되어 이 부분이 문제점으로 확인하였습니다

이 부분을 해결하기위해 api 요청시 헤더부분에 로컬스토리지않에있는 토큰을 받아 사용하게 만들어줘서 해결하였습니다

 

 

적용후 코드

export const getAllReview = createAsyncThunk(
  "review/allGet",
  async ({ count, setTotalpage }) => {
    return Apis.get(
      `members/mypage/reviews?page=${count}&size=20&sort=createdAt%2CDESC`,
      {
        headers: {
          Authorization: `${localStorage.getItem("Authorization")}`,
          "Content-Type": "application/json",
        },
      }
    )
      .then((res) => {
        setTotalpage(res.data.pageInfo?.totalPages);
        return res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  }
);

 

 

옵션 셀렉트박스를 새로만들었지만 자식 li 컴포넌트들이 부모의 크기를 못가져옴  ( position: absolute 사용 미숙 )

 

👆부모의 속성을 자식이 받아오지 못하는 문제의 화면

<DetailArticleOptionSpaceSelect clickSelect={clickSelect}>
    <DetailArticleOptionSpaceSelectDiv
      onClick={clickFunction}
      optionStock={optionStock}
    >
      {selectOptionColor}
      <div className="cur">
        <FiChevronDown className="button" />
      </div>
    </DetailArticleOptionSpaceSelectDiv>
    {clickSelect ? (
      <DetailArticleOptionSpaceSelectDivValueUl>
        {optionSelect?.map((option) => (
          <DetailArticleOptionSpaceSelectDivValueLi
            key={option?.optionId}
            value={option?.value}
            optionStock={option?.stock}
            onClick={() => {
              selectOption(
                option.optionId,
                option.color,
                option.stock
              ),
                clickFunction();
            }}
          >
            <>
              {option?.stock === 0 ? (
                <OptionDiv>
                  <OptionDivA optionStock={option?.stock}>
                    {option?.color}
                  </OptionDivA>
                  <OptionDivB>품절 </OptionDivB>
                </OptionDiv>
              ) : (
                <> {option?.color}</>
              )}
            </>
          </DetailArticleOptionSpaceSelectDivValueLi>
        ))}
      </DetailArticleOptionSpaceSelectDivValueUl>
    ) : (
      <DetailArticleOptionSpaceSelectDivValueUl></DetailArticleOptionSpaceSelectDivValueUl>
    )}
  </DetailArticleOptionSpaceSelect>
  
  
  
  
const DetailArticleOptionSpaceSelect = styled.div`
  border-top: 1px solid var(--color-gray);
  display: inline-block;
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  border-bottom: 1px solid var(--color-gray);
`;
const DetailArticleOptionSpaceSelectDiv = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 46px;
  align-items: center;
  color: var(--font-navy);
  margin-left: 10px;
  position: relative;
  .button {
    font-size: 20px;
    margin-right: 10px;
  }
  .cur {
    cursor: pointer;
  }
`;

const DetailArticleOptionSpaceSelectDivValueUl = styled.ul`
  position: absolute;
  border: none;
  cursor: pointer;
  width: 100%;
`;
const DetailArticleOptionSpaceSelectDivValueLi = styled.li`
  text-decoration: none;
  color: var(--font-navy);
  padding: 15px 0px 15px 10px;
  display: block;
  border: none;
  &:nth-child(1) {
    border: none;
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
    background-color: white;
    &:hover {
      background-color: #f0f0f0;
    }
  }
  &:nth-child(2) {
    border: none;
    border-bottom: 1px solid var(--color-gray);
    background-color: white;
    &:hover {
      background-color: #f0f0f0;
    }
  }
`;

👆부모컴포넌트안에 자식컴포넌트를 넣어 css를 컨트롤하려 하였지만 실패한 코드

 

위의코드에서는 셀렉트박스의 사용을 위해 position의  relative 와 absolute 를 사용하였습니다

리액트를 공부하는동안 부모컴포넌트안에 자식컴포넌트를 만들게되면 자식컴포넌트는 부모컴포넌트의 css속성을 받아오는걸로 알고있었습니다

하지만 위의 사진처럼 부모안에 자식컴포넌트들이 있지만 자식컴포넌트들이 부모의 속성을 받아오지 않는다는것을 화면에서 확인하였습니다

문제점

이때의 문제는 부모속성을 바로위의 부모에게만 relative 적용했다는 것입니다

position의 absolute의 경우 relative가 없다면 요소의 기준을 전체의 HTML을 기준으로합니다

relative가 있는경우 relative가 적용된 컴포넌트를 기준으로 작동합니다 

 

해결방법

이때 해결한방법은 position의 absolute 사용하여 기준을 잡을경우 absolute는 모든 부모에 relative를 전부 사용하여 부모의 속성들을 전부 가져와야 한다는점입니다 

 

지금 현재  position의 absolute를 사용한부위는 li컴포넌트이며 부모는 ul과 div가 2개 감싸져있습니다

div2개와 ul에 전부  position의 relative 를 적용하여 이 문제를 해결하였습니다

 

👆부모의 속성을 자식이 받아와 성공적으로 보여지는 화면