인프런 커뮤니티 질문&답변

뭘 만드느냐에 따라 다른데요, 예제의 형태는 로직을 짜는 것 외에 특별히 신경쓸게 없도록 "가장 기본적인" 형태로 작성되었다고 생각하시면 될 것 같습니다^^
다른 라이브러리나 프레임워크 안에서 사용하는 경우나 이 애플리케이션 외에 다른 요소들과 결합이 되어야 한다면 그것에 맞게 변형해야하는 경우가 있을 수도 있고요.

아래처럼 변수들을 따로 객체에 담아 정리하기도 합니다.
아래는 info라는 이름으로 만들었는데, configMap(설정에 관련된 변수 세트), stateMap(상태에 관련된 변수 세트) 이런 식으로 용도별 변수를 묶어줄 객체를 각각 만들어 세트로 묶기도 하고요.

(() => {
    const info = {
        yOffset: 0,
        prevScrollHeight: 0,
        currentScene: 0,
    };

    function scrollLoop() {
        info.yOffset = window.pageYOffset;
    }
})();

ES6 class는 필요한 경우에 많이 사용합니다.
이 예제는 인스턴스를 만들어 여러개 사용하는게 아니라서, 굳이 클래스로 만들 필요는 없지만
전체 코드 자체를 클래스로 만드는 경우도 있습니다.
만약 이 애플리케이션의 전체를 클래스로 만든다면, 대강 아래와 같은 형태가 되겠네요~

class Apple {
    costructor() {
        this.yOffset = 0;
        this.currentScene = 0;
        .....
    }

    setLayout() {
        .....
    }

    scrollLoop() {
        this.yOffset = window.pageYOffset;
        .....
    }
    playAnimation() {
        .....
    }
}