• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

안녕하세요.

21.01.13 22:30 작성 조회수 114

1

수업 잘 듣고 있습니다.

이제 시작하는데, 자바스크립트가 약하다보니까,
이해가 잘 안가는 부분들이 있습니다.

function getPercent(){

    var scrollHeight = $('.sec01').height();
    var scrollRealHeight = (scrollHeight - $(window).height()); 
    var winScrollTop = $(window).scrollTop(); 
    var scrollPercent = (winScrollTop / scrollRealHeight) * 100;
    var textPercent = Math.floor(scrollPercent);

여기까지는 잘 이해 했는데요, 그 뒤부터가 잘 이해가 안갑니다.

1) 우선 코드를 위에서 아래로 순차적으로 읽는게 기본으로 알고 있는데, 왜 getPercent() {}안에 아래의 render()를 넣고나서,
아래의 render 함수를 적어주는지 이해가 안갑니다. 

//render 함수 선언을 할때 적어주는 변수들은 지역변수라서, 가져오지 못할텐데, 사용할 수 있는 이유가
getPercent함수안에 실행할 걸 적어둬서 연결이 되는건가요?
    render(textPercent,scrollPercent);
  };

  function render(textPercent,scrollPercent){
    text.text(textPercent + '%'); //텍스트 값을 업데이트 합니다

    progressBar.css({ //게이지 값을 업데이트합니다
      width : scrollPercent + '%'
    });
  };

  function init(){
    getPercent();
  };

  $(window).scroll(function(){//스크롤 이벤트를 추가합니다.

    getPercent();

  });

  init(); //초기화

});

그리고 init() 함수가 프로그램의 시작을 알리는 함수라고 하는게 이해가 잘 안가네요. 뭘 어떻게 시작을 한다는건지 제가 듣기로는 뭔가 설명이 간략화 된것 같아요.

조금 더 자세히 풀어 설명해 주면 좋겠습니다. 화면과 비교해 가면서요. 

다른분 질문해주신걸 보면 init 함수를 적은건 겟퍼센트함수가 스크롤이라는 이벤트가 일어나야 실행이 되는데,
스크롤이 안일어나도 실행하게 하려고 넣었다 하셨는데, 좀더 설명이 필요합니다.
스크롤이라는 이벤트가 안일어나면 굳이 실행이 안되도 되는것 같은데 실행되어야 할 이유가 있을까요?
그리고 init()

function init(){
    getPercent();
 };
$(window).scroll(function(){

    getPercent();

 });
init(); //초기화

이부분도 이해가 안가요.  제이쿼리 구문이 init(); 여기 와 init함수 선언한거 사이에 오는 순서적 이유가 있나요?

저는 무조건 외우는것보다 왜 그렇게 쓰였는지 이해를 해야 온전한 저의 것이 된다고 생각하는데,  영상 속 설명은 뭔가 이미 듣는 사람이 자바스크립트를 어느정도 안다 가정하고 가르치는 것 같아서..좀 만 더 설명이 들어가면 좋겠다 생각합니다.

물론 따로 매일 자바스크립트를 공부는 하고 있습니다만,
선생님의 말씀을 다 이해하기는 어렵네요.
좀만 더 보충설명 부탁드려요. ㅜㅜ

제가 공부하다 답답해서 질문이 좀 길었지만, 자세히 적어야, 선생님께서도 자세히 답변 해 주실거라 믿고 좀 길게 적었습니다.
답변 기다리겠습니다!

course-thumbnail

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-1 [코드설명] 기초다지기! 이동할 거리 백분율 구하는 방법

강의실 바로가기

답변 3

·

답변을 작성해보세요.

3

깡코딩님의 프로필

깡코딩

지식공유자

2021.01.13

처음엔 이해가지 않는 코드라도  계속보다보면 한달이 지나고 두달이 지나다보면 자연스럽게 코드를 알 수 있습니다 :)

(경험담) 조급해 하지 말고 천천히 공부해보세요 :)

2

Youngjae Choi님의 프로필

Youngjae Choi

질문자

2021.01.13

마지막 순서가 정리 해주신게 이해하는데 도움이 많이 되었습니다. 잠자는 시간빼고 하루 70프로를 요즘 자바스크립트 공부에 투자하고 있습니다. 어렵지만 알 수록 재미를 느껴가고 있습니다. 자세한 답변 감사드려요 ^^

1

깡코딩님의 프로필

깡코딩

지식공유자

2021.01.13

안녕하세요 Youngjae Choi님 :)

쉽고 간략하게 설명해드릴께요! 더 깊이 공부하시려면 자바스크립트 책을 조금 더 살펴 보기를 추천드립니다 :)

1. 자바스크립트는 위에서 부터 읽히는게 맞습니다.

하지만 섹션2-1 코드를 보면 변수 선언부를 제외하고는 모두 함수로 묶여있지요? 

그렇기에  3가지 함수 ( getPercent, render, init )는 아직 호출되지(실행되지)  않았지만 자바스크립트 컴파일러에 의해 메모리에 기억해둔 상태입니다.

그렇기에 

init() 함수를 호출할 수 있게되는겁니다! 여기까지 쉽게 이해가시지요?

그럼 제일 먼저 실행되는 함수는 init()이 되는것이고 그다음부터 순차적으로 코드가 실행되는겁니다:)

init() 함수가 -> getPercent() 함수를 호출하고 코드가 실행된 후에 스크롤에 관련된 수식들을 구해서 

render() 함수를 호출해주는 겁니다 :D 

render함수를 호출할때는 매개변수로 위에서 구한 2가지 값을 보내주죠

그럼 render 함수는 2가지 값을 가지고 render함수안에 있는 구문을 실행하는 겁니다 :)

이부분은 영상에 자세히 나와있으니 참고하시면 됩니다. 영상에서 제가 설명하는 순서가 실행되는 순서라고 생각하시면 될 것 같습니다!

마지막으로 최종 정리를 하면 위 설명을 기준으로 실행순서를 보게되면 다음과 같습니다

이런 방식으로 실행되는겁니다 :)

이 실행순서만 알면 나머지 수업에서 나오는 코드 분석도 쉬울거에요 :D

마지막으로 한가지 더 설명하자면 읽힘 읽었다는건 메모리에 할당되었다는 뜻으로 이해하시면 되겠습니다 :)

조금 더 디테일한 부분들까지 알고 싶다면 스코프와 호이스팅에 대해서도 공부해보세요!

이 글과 비슷한 Q&A