• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

코드 구조에 관하여 질문드립니다.

20.09.21 08:11 작성 조회수 102

0

javascript에 익숙하지 않아서 코드 구조에 관하여 질문드립니다. 

yOffset, prevScrollHeight, currentScene 같은 경우 arrow function 내부에 선언한 뒤에 

다른 함수들에서 인자로 받지 않고 전역 변수처럼 가져다가 쓰고 있는데 javascript에서 이런 방식으로 많이 코드를 작성하나요?

+ ES6에서 class 개념도 추가되었다고 하는데 많이 사용하시는 편인가요? 

답변 1

답변을 작성해보세요.

2

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

아래처럼 변수들을 따로 객체에 담아 정리하기도 합니다.
아래는 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() {
        .....
    }
}