• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

이번강의 + 전 목차에서 다루신 웹브라우저 동작 과정에 관한 질문입니다.

22.06.22 19:04 작성 조회수 157

0

강사님 안녕하세요. 

 if(window.scrollY !== 0){
        backToTop.classList.add('show')
    }else{
        backToTop.classList.remove('show')
  }

이번 강의의 4분 50초에 페이지 스크롤 관련 이벤트를 코딩하시면서, 이렇게 코드를 짜기 전 CSS에서 먼저 show라는 클래스를 작업해주셨는데, 여기서 궁금한 점이 생겼습니다.

저는 CSS가 바로 떠오르지 않아서, 전부 JS로 스크롤 이벤트를 작성했는데, 강사님께서 'JS로 이 스크롤 이벤트를 처리하면 조금 장황하다'라고 말씀 하신걸 듣고,  이 말은

1. CSS로 만들 수 있는 것을 최대한 생각한 후 ->JS로 작업한다. 

2.전 강의(DOM,BOM강의)에서 다루셨던 웹브라우저 동작과정과의 연관성?

(CSSOM tree를  생성하는 속도와 render tree에서 js엔진에서 처리되는 속도의 차이? or 다른 이유?)) => 정확한 질문이 아니라 죄송합니다ㅠ

에 관련되었는지 궁금했습니다. 

만약 1이 맞다면  CSS를 조금 더 집중해서 봐야할까요..? 독학을 하는 중이라 방향성에 대한 고민을 많이 하게되네요

 

++이제 강의가 거의 끝에 다왔는데, 리액트나 뷰같은 프레임워크를 다루면서도 이 강의를 듣고 JS에 대해  무지했다는 사실을 여실히 느꼈습니다.  처음 듣는 분들은 모르실 수도 있지만,  어느정도 코딩을 하다가 와서 가볍게 복습차원으로 들으려고 했던 저는 몇 대 얻어맞고 갑니다..

너무 질 좋고, 핵심에 대해서 정확하게 짚어주셔서 하나하나 넘길게 없는 강의였습니다.  꽤나 시간이 지났지만 감사하다는 말씀드립니다. 강의 때 하신 말처럼

' 합리적인 분들과 좋은 컨텐츠가 지속될 수 있는 선순환 시스템을 지향합니다' 라는 말을 느낄수 있었습니다.

 

 

 

답변 1

답변을 작성해보세요.

1

안녕하세요. ㅎㅎ

 

JS 로 모든 것을 처리하려면, 여러 이벤트를 다 걸어넣고, 그 때마다, 이벤트 처리를 위한 별도 JS 함수를 쓰고, 이벤트를 끊어주거나, 다시 연결해줘야 하는 작업이 있어서요.

그보다 CSS 로 해줄 수 있는 작업은 CSS 로 해주는 것이 더 좋다고 의견을 드린 것입니다.

또 브라우저들이 대부분 CSS 는 내부 동작을 최적화한 경우가 많거든요. 

그러다보니, CSS 로 처리할 수 있는 것들은 CSS 로 최대한 처리하는 것이, 일반적으로는 성능상 더 좋은 경우가 많거든요.

CSS 가 조잡한 느낌이 있긴 한데, 잘 쓸 수 있으면, 굉장히 많은 부분을 할 수 있어서, CSS 정독도 추천드리고요. JS 는 복잡한 과정을 React 든 Vue 든으로 진행할 때, 핵심 기본기가 되서, JS 도 정독을 추천드립니다.

 

JS 와 CSS 처리가, 실제로는 브라우저별로 내부 쓰레드로 동시에 진행되는 경우도 많거든요. 그래서, 이런 부분 때문이라기보다는, 위에 이야기드린 부분 때문에, CSS 처리도 우선 고려할 만한다 라고 의견을 드립니다.

 

마지막 글은 ㅎㅎㅎ 감사합니다. ㅎㅎㅎ

 

KIP님의 프로필

KIP

질문자

2022.06.22

네 자세한 답변 감사합니다!ㅎㅎ