[Dev Log] 20211004 / 박지영

[devLuenna]

오늘 완료한 작업 목록.

2021-10-05.12.29.01.mov

• 상세페이지에서 새로고침하면 props가 날라가면서 랜더링이 불가한 상황 —> 해결 완료.

  • 갤러리 상세 & 리뷰 상세페이지 & 3dgallery : exhibition id를 기준으로 서브라우팅 적용하기.(https://velopert.com/2937, https://www.daleseo.com/react-router-nested/)
  • 갤러리 상세 페이지 내에서 useEffect 호출하면 axios GET요청. 응답형태는 전체 갤러리목록에서 받았던 [{}, {}, {} ... ]—> 배열의 1개 요소와 동일. 응답데이터 랜더링하기.
  • 리뷰 상세 페이지 내에서 useEffect 호출하면 axios GET요청. 응답형태는 res.status(200).json({ exhibitionData , commentsData}) . 기존 댓글목록 받아오는 것 그대로 유지하고 exhibition 데이터(exhibition.images[0].image_urls, exhibition.title, exhibition.author.nickname, exhibition.start_date & end_date, exhibition.genre_hashtags)만 추가. 응답데이터 랜더링하기.

• 모바일 버전 버그 더블체크중

  • 이미지 슬라이더 터치 드래그 이벤트 작동 안 함.(해결 완료된 것 확인, 에러 핸들링 노트)
  • 랜딩페이지 상단에 검정색 박스 보임. 이것 계속 해결 안 되어서 GSAP 코드를 다시 수정해줌. 에러 핸들링 노트 —> 해결 완료.
  • 위로 스크롤 할 때, 상단 도달 시 네비게이션 바가 사라졌다가 다시 내려옴(깜빡거리는 것 처럼 보임): —> 코드 뜯어보고 분석해봄... —> 해결완료된 것 확인
  • 갤러리 & 리뷰 목록에서 썸네일 두번 터치해야 상세페이지로 이동함. —> 마우스 오버시 생기는 불필요한 명암 레이어를 삭제하고, 이미지에다가 명암속성을 직접 부여함. —> 해결완료된 것 확인

• 래디스로 변경. API 요청 코드 수정하기

  • 갤러리 상세페이지 —> 데이터 요청 및 응답 새로 작성 완료. 응답 데이터 랜더링 완료
  • 리뷰 상세페이지 —> 데이터 요청 및 응답 새로 작성 완료. 응답 데이터 랜더링 완료
  • 좋아요/좋아요 해제 —> 앤드포인트 및 바디값 수정 완료
  • 댓글 삭제 —> 앤드포인트 및 바디값 수정 완료

—

<기억하고 싶은 코드>

• GSAP 애니메이션 사용 시 버그.

  

  • 이렇게 상단으로 끝까지 올라가야 하는데 중간에 멈춘 듯한 버그가 있었다.

  • 해결을 위해 시도해본 것:

    • 1차: 사파리 브라우저에서 모바일 모드로 켜놓고 localhost:3000 들어가면 문제점이 안 보임... 일단 불필요한 layer(비어있는 div태그)를 삭제함. 이전과 동일한 애니메이션 효과를 유지하기 위해 가장 먼저 보이는 검정색 바탕 wrapper gsap효과 에서 duration을 더 길게 수정해줌.
    • 2차: 그래도 해결되지 않아서 gsap 속성값을 아래와 같이 수정했다. 확실하게 height를 0으로 줄여버리는 효과다. —> 이 방법으로 해결 완료

    //변경 전
    gsap.to(wrapperRef.current, {
      duration: 2.5,
      top: "-100%",
      ease: "power3.inOut",
      delay: 7.5
    });
    
    //변경 후
    gsap.to(wrapperRef.current, {
      duration: 2.5,
      height: 0,
      ease: "power3.inOut",
      delay: 7.5
    });
    
    //.wrapper의 CSS속성
    .wrapper {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background: rgb(33, 33, 33);
      z-index: 2;
    }

<날 너무 힘들게 했던 에러 ㅠ>

• 리뷰 목록에서 JSON파싱한 상태의 데이터를 응답으로 받았고(장르 해시태그 속성), 그 상태에서 리뷰 상세페이지로 이동하여 genre해시그를 또 파싱하면 에러가 발생한다. 한 곳에서만 파싱을 해주고 다른 한 곳에서는 그냥 바로 사용만 해야 함. 데이터 타입 하나하나 디버깅 해보고 발견!..(아래 크로스 오리진 에러 메세지로 나와서... 설마 JSON 파싱 에러일 줄 예상하지 못했다)

내일 TO DO LIST

• 더미데이터 넣고 about 페이지에 랜더링 할 gif 파일 만들기
• 래디스로 변경 이후 api 요청 및 응답 버그 없는지 더블체크 하기
• 3dgallery 페이지 서브라우팅 시 에러있었던 것 해결해보기