Apple Music UI의 카드 넘어가는 것 질문

[박주연]

Apple Music UI의 카드 넘기는 부분 function 써서 코딩 해봤는데요. 잘 되는데 의문점이 하나 있어요.

일단 코드는 아래와 같구요.

이렇게 짜서 잘 되긴 잘 되는데 한가지 궁금한 점이 있습니다.

forEach 구문을 썼는데요. 여기서 "스크롤위치.forEach" 인데 스크롤위치 라는 array에 인자가 3개가 들어있으니 3번 반복이 되야 하잖아요. 

그래서 스크롤 계속 내리면 첫번째 카드가 사라지면서 작아지고, 두번째 카드가 사라지면서 작아지고, 세번째 카드도 사라지면서 작아져야 할 것 같은데

실상은 Apple Music 웹사이트처럼 두번째카드 까지만 사라지면서 작아져요. (잘 동작하지만 궁금한 건 궁금한거니까요 ㅠ)

제 생각에는 세번째 인자(=스크롤위치[2])에서 반복문 돌 때 스크롤위치[3](= 스크롤위치[index+1])이 없기 때문에 그냥 스킵되는 것 같은데, 근데 값이 없으면 에러가 나야 하는게 아닌가요?

 

또 한가지 질문은 제가 짠 것처럼 하면 무의미하게 반복이 한번 더 되니까 메모리 낭비일까요?

차라리 for 구문을 써서 for(i=0; i<스크롤위치-1 ;i++) 하는게 나을까요?

 

제가 짠 코드 말고 더 좋은 방법이 뭐가 있을까요?

[codingapple]

네 반복문 3번째돌 때 스크롤위치[3]이 없어서 그런듯요 

undefined와 뺄셈덧셈해도 에러는 안나서 그럴걸요

파라미터에 array입력할 때 4번째 아이템도 넣으면 되겠군요 그럼 일반 for 반복문이 나을듯합니다

함수는 이벤트리스너 바깥에 만드는게 좋습니다 

효과주기() 2번쓰지않아도 한번으로 줄일 수도 있을 것 같군요

[박주연]

아래와 같이 고쳐봤는데 전에 코딩한거보다 나은가요?

더 개선해야 할 부분이 있는지 궁금합니다.

일단은 카드들이 잘 넘어갑니다.

 

1. 효과주기를 한번 쓰도록 고쳐봤구요

2. 효과주기 함수 정의 부분을 이벤트 함수 바깥으로 빼주었습니다. 

3. 값 계산하는 부분 2번 쓰기 싫어서 '효과계산'이라는 함수로 빼주었습니다.

4. forEach를 for 구문으로 바꿨습니다.

 

<script>

    function 효과계산(높이, 스크롤시작, 스크롤끝, 범위시작, 범위끝) {
        var 결과값 = ((범위시작-범위끝)/(스크롤시작-스크롤끝)) * 높이 + (범위시작 - (범위시작-범위끝)/(스크롤시작-스크롤끝) * 스크롤시작 );

         return 결과값;
    }  

    function 효과주기 (높이, 스크롤위치, 투명도, 투명도범위, 크기, 크기범위) {
       
           for(i=0;i<스크롤위치.length-1;i++){
           
               var 효과 = [];
               

               효과[i] = 효과계산(높이, 스크롤위치[i], 스크롤위치[i+1], 투명도범위[0], 투명도범위[1]);
               $('.card-box').eq(i).css(투명도, 효과[i]);

               효과[i] = 효과계산(높이, 스크롤위치[i], 스크롤위치[i+1], 크기범위[0], 크기범위[1]);
               $('.card-box').eq(i).css(크기, scale(${효과[i]}));
        }
    }

    $(window).scroll(function(){
        var 높이 = $(window).scrollTop();    
        효과주기(높이, [650, 1150, 1935], 'opacity', [1, 0], 'transform', [1, 0.9]);  
    });

  </script>

[박주연]

위의 코드가 이상하게 뜨네요. 아래와 같습니당.

[codingapple]

- 효과계산()한 결과를 굳이 array에 안담아도 변수같은거 두개 만들어도 될듯요 

- 거의 변동사항이 없는 것들은 굳이 파라미터화할 필요는 없습니다 'opacity' 이런건 나중에 안바뀔거면 그냥 하드코딩해놔도 상관없습니다 

확장성을 잡으려면 카드를 하나 더 추가해도 잘 작동하는지 확인하면 되고 

성능을 잡으려면 현재 안보이는 카드들은 애니메이션 효과를 삭제하는 코드도 짤 수 있겠군요 

[글쓴이]

글