안녕하세요 :)
업데이트 안내드립니다 :)
1. jquery를 사용해 스크롤 인터렉션을 제작하는 부분의 실습과 설명을 보탠 수업이 모두 추가되었습니다.
만약 수업이 어려운 분이 있다면 코드를 작성하며 설명하는 실습편 수업을 먼저 참고하고 그다음 설명편을 통해 다시 한번 이해하는 패턴을 사용하면 좋을 것 같습니다.
2. 섹션 5-2 섹션이동 인터렉션에 버그를 발견했습니다. 해당 버그는 MAC환경 크롬 브라우저에서 트랙패드 사용시 발생했는데요(아이맥 매직 마우스는 괜찮음)
버그 내용은
한칸씩 이동할 섹션이 브라우저 맨 위에 배치되어 있을 때 트랙패드 등을 이용해 빠른 스크롤을 한다면
맨 처음 섹션이동 애니메이션이 실행되지 않고 그 후부터 애니메이션이 실행되는 경우입니다. (간헐적으로 발생)
해당 버그를 분석한 결과 맥같은 경우 이동할 섹션에 진입할 때 문제가 생겨
섹션에 진입할 때 스크롤 이벤트가 동작하지 않도록 지정했습니다.
즉 wheel이벤트를 추가해 섹션에 진입할 때 wheel을 막고 분기처리해 이벤트에 대한 기본 동작을 하지 않도록 지정해 해결했습니다.
그러나 wheel이벤트만 사용할 경우 윈도우 환경에서 버그가 발생했는데요.
윈도우 환경에서 wheel이벤트만 사용할 경우 버그가 생기는 이유는
윈도우에선 마우스 휠 이벤트가 발생하는 빈도가 맥에 반해 상당히 낮기 때문에 스크롤 값을 제대로 가지고 오지 못하는 버그가 생겼습니다.
쉽게 말해 스크롤 이벤트와 wheel 이벤트가 호출되는 수가 다르다는 말입니다.
그래서 윈도우에선 기존에 작성되어 있던 코드를 그대로 사용하도록 처리합니다.
즉 맥에선 wheel이벤트를 사용하고 윈도우에선 scroll 이벤트를 사용하도록 분기 처리하는 수업이 추가될 예정입니다.
해당 버그는 맥에서도 크롬에서만 발생하는 버그라 구글에서 패치를할 수 있기 때문에 기존 수업을 변경하지 않고 버그 수정 영상을 올리도록 하겠습니다.
(UI구현시 스크롤 이벤트로 스크롤의 위치를 변경할 때 모션을 넣으면 작업이 조금 까다롭습니다.)
3. 바닐라js 변경 작업이 모두 완료되었습니다.
기존에 제이쿼리로 작성되어 있던 부분을 바닐라 js로 변경하는 수업이 추가될 예정입니다.(제이쿼리 함수를 만드는 수업 아님.)
해당 코드는 ie및 오래된 브라우저를 고려하지 않고 작성되었습니다.
바닐라js 코드 변경이 너무 간단하기 때문에 섹션5, 6을 제외한 나머지는 초보자분들도 스스로 변경할 수 있을 거라 생각됩니다.
바닐라 js로 변경한 완성 코드는 섹션별 마지막 step파일에 작성되어 먼저 업로드할 예정입니다.(1월말~2월초)
그리고 바닐라 js로 변경하는 과정의 수업은 2월중 틈틈히 업로드할 예정입니다.(너무 쉬워서 대부분 안볼듯 하지만요^.^;) :D
업데이트된 수업이 어려움을 겪는 분들께 많은 도움이 됐으면 좋겠습니다.
그럼 새해 복 많이 받으시고 행복한 설 연휴 보내시길 바라겠습니다.
감사합니다 :D
