[TIL] 0217

코드스피츠 스터디

Flow Control Statement

• flow control에 관련된 문은 레코드 흐름을 제어할 수 있는 권한을 얻게 됨
• 어떤 레코드를 선택할 지를 결정하는데 사용됨

Direct flow control - LABLE

• 유일한 직접 컨트롤 명령어
• 문이 아니기 때문에 자체적으로 실행할 수 없다 (꼬리표일 뿐 ;찍어서 공문이라도 있어야함)
• break로 lable scope를 빠져나오기 위한 것
• lable scope를 만들 수 있다 - lable뒤에 중괄호 치면 됨(중문과 다름)
• 점프해서 아래로 내려가는 것만 된다

•   abc:{
        console.log('start')
      if(true) {
            break abc;
        }
      console.log('end')
    } 
    // start만 찍힌다
    // 수동으로 flow제어를 한 것 - 스스로를 빠져나온 것 (가장 원초적인 flow컨트롤)

Auto Lable

• 암묵적으로 js엔진이 lable을 break뒤에 넣어준다
• iteration, switch에 발동된다
• for, while, switch문에서는 break뒤에 라벨이 없어도 되는 이유

•   temp38:
     for(var i = 0; i < 10; i++){
        if(i == 5) break temp38;
    }
    // 암묵적으로 이렇게 되어있다(js엔진이 넣어줌)
    console.log('end')

Switch

• switch에서의 중괄호는 switch만의 전용 토큰이다

• 중괄호의 영역을 특별하게 만들어준다 - special label block

• case안의 식을 동적으로 해석할 수 있게 해주는 특수한 lable

• case와 default lable만 쓸 수 있다

• default밑에 매칭하는 키워드가 있으면 무시되지만 없으면 순차적으로 동작한다

• 상태가 변하는 연산이 연속되는 경우 다음줄에 영향이 가기 때문에 이렇게 쓸 경우 주의해야한다

• js의 case문은 런타임에 해석되기 때문에 이로 인한 2가지 사용법이 있다

  • 값에 대한 라우팅
    • 흔히 아는 방법 - 정적 또는 동적
  • 조건 평가
    • 키워드는 고정 바뀌는 건 case안의 식
    • 어떤 식이 가장 빨리 연산되느냐
    • 서버 요청 시 활용할 수 있음

  ---

WaffleCard Refactoring

자동 슬라이드 캐러셀 구현하기

요구사항

• 카드들이 자동으로 옆으로 이동하면서 순환하는 애니메이션
• isOverflow가 true일 때 애니메이션 실행
• 카드 컨테이너에 마우스 hover시 애니메이션 중지, 해제하면 다시 실행
• 스크롤 하면 애니메이션 멈추고 스크롤 되도록

기능 구현 방법

• 전체 카드 각각을 초마다 특정한 범위만큼 이동시켜준다 (transform:translate)
• 첫번째 카드 앞에 마지막 카드 복제, 마지막 카드 뒤에 첫번째 카드를 복제한다
• 마지막 카드 뒤에 복제한 첫번째 카드가 나오는 것까지 애니메이션을 걸어주고 끝나면 원본 카드위치로 이동한다
• css keyframe animation을 이용한다

useIsOverflow 문제

useEffect 의존성을 tab name으로 걸어줬던 게 문제였다
카드가 다 렌더링되기 전의 값을 가져오기 때문이디

의존성을 ref.current의 scrollWidth로 걸어줘야 컨테이너의 자식의 길이가 변해야(카드가 그려지고 나서의 길이) 다시 실행되게 된다