[v1.2.4] Update 20231203

1. 영화 이미지에 onLoad속성 수정

   //생략
   const [onLoaded, setOnLoaded] = useState([])
   const handleOnLoad = (index) => {
      setOnLoaded(prevOnLoaded => [...prevOnLoaded, index]);
   }
   return (
      // 중략
      <img
         src={item.imageURL}
         style={{
            display: onLoaded.includes(index) ? 'block' : "none",
         }}
         alt=""
         onLoad={() => handleOnLoad(index)}
      />
      // 생략
   )

v1.2.3에서 추가한 코드처럼 사용하면 하나의 이미지만 로드되도 onLoad가 true로 바뀜

useState의 type을 배열로 전환후 setOnLoaded(prevOnLoaded => [...prevOnLoaded, index]);로 index를 추가

그 후 style={{display: onLoaded.includes(index) ? 'block' : "none",}}로 onLoaded배열 안에 index가 포함되어 있으면 display속성을 block으로 전환

2. CLS(누적레이아웃) 개선

1. 개선전
   
   
2. 개선후
   
   

[v1.2.3] Update 20231201

[v1.2.3] Update 20231201

1. 영화 이미지에 onLoad속성 추가

      //생략
      const [onLoaded, setOnLoaded] = useState(false)
      const handleOnLoad = () => {
         setOnLoaded(true);
      }
      return (
         // 중략
         <img
            src={item.imageURL}
            style={{ display: onLoaded ? 'block' : "none", width: 245, height: 350 }}
            alt=""
            onLoad={handleOnLoad}
         />
         // 생략
      )

[v1.2.2] Update 20231128

[v1.2.2] Update 20231128

1. 최초 로딩시간 개선
   1. 이미지 리사이징 및 압축을 통한 개선
   2. 결과

      1. 개선전
         

      2. 개선후
         

      3. 요약

         	네트워크 전송	리소스	완료	로드
         개선전	20MB	20.1MB	6.47초	6.08초
         개선후	1.8MB	1.9MB	1.02초	1.09초

[v1.2.1] Update 20231026

[v1.2.1] Update 20231026

1. 일부 수정

   const [scrollHeight, setScrollHeight] = useState(window.innerHeight);
   
   useLayoutEffect(() => {
      setScrollHeight(document.documentElement.scrollHeight);
   }, [movieData, pagingData, loading]);
   
   return (
      <>
            <BgImageContainer scrollHeight={scrollHeight}></BgImageContainer>

   useState를 사용 후 styledComponent에 props를 넘김

      export const BgImageContainer = styled.div`
      <!-- 생략 -->
      height: ${(props) => props.scrollHeight}px;
      `

   받아온 props.scrollHeight 적용

2. 데이터 수정 및 이미지 public폴더에 저장 v1.2.1 영화 데이터 주소

[v1.2.0] Update 20230908

[v1.2.0] Update 20230908

1. 삭제
2. 추가

[v1.1.0] Update 20230906

[v1.1.0] Update 20230906

1. 사용
2. 사용
3. 데이터 수정
4. component 간소화

[ v1.0.4 ] Update 20230626

[ v1.0.4 ] Update 20230626

1. 페이징 기능 추가
2. 데이터 추가 및 수정

[ v1.0.3 ] Update 20230624

[ v1.0.3 ] Update 20230624

1. components 작성

[ v1.0.2 ] Update 20230623

[ v1.0.2 ] Update 20230623

1. like 버튼 기능 수정
2. 배경화면 랜더링 수정
3. 팝업 기능 추가

[v1.0.1] Update 20230622

[ v1.0.1 ] Update 20230622

1. 검색기능 수정
2. like 버튼 기능 추가
3. 검색창 밑, 상영중 영화 filter 기능 추가
4. 배경화면 삽입