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

답변 감사합니다. 어떤 부분을 재활용할 수 있을지 정의하는게 힘든 작업이라고 느껴져서 여쭤본 부분들이 있습니다. 강의 코드를 따라서 해보고 모듈 별로 쪼개서 다뤄보겠습니다. :) 

요즘은 보통 ES6의 모듈을 사용하는데,
전통적인 방식으로 만들거나 복잡한 환경설정 없이 간단하게 구성할 때는 아래와 같이 하기도 합니다.
예시입니다.

apple.js
----------
// 메인 객체
const apple = {
    // 필요하다면 프로젝트 전체에서 필요한 정보들 기술
};

apple.config.js
----------
apple.config = {
    // 설정에 관련된 정보들
};

apple.sceneInfo.js
----------
apple.sceneInfo = [
    // 애니메이션값 정보들(sceneInfo)
    {
        sectionTitle: 'intro',
        scrollHeight: 5,
        ....
    },
    ....
    ....
];

이런식으로 메인 객체(보통 프로젝트 이름으로 생성)인 apple의 속성으로 추가되는 모듈들을 만듭니다.
정보 자체가 복잡하고 많다면, 개수대로 파일을 만들어서 관리하는 방법도 있을 것 같고요.
위의 것들은 정적으로 세팅하는 정보들이고,
자기만의 메서드가 필요한 UI의 구성요소들은 아래와 같은 방식으로 해볼 수 있겠습니다.
예를들어 header를 만든다면,
apple.header.js
----------
apple.header = (() => {
    func1() {
        // header의 라이브러리 함수 1
    }

    func2() {
        // header의 라이브러리 함수 2
    }

    return {
        func1: func1,
        func2: func2
    };
})();

클로저의 특징을 이용해서 아래처럼 공개할 메서드들을 객체에 담아 리턴해주고,
다른 모듈에서 apple.header.func1()을 사용할 수 있게끔 합니다^^

답변을 작성하고 질문을 다시 읽어보니.. 이게 원하시는 답변이 맞나 싶네요^^;;
애니메이션은 보통 디자인에 치밀하게 맞추는 경우가 많기 때문에 노가다긴 하지만 일일이 원하는대로 직접 입력하는게 제일 좋다고 생각됩니다. 그 정보를 담고 있는 파일 관리를 어떻게 하느냐에 대한 답변이 위의 내용이 될 수 있지 않을까 싶습니다.