Spotify API 프로젝트 #2 : APPController

UICtrl, APICtrl가 UIController, APIController를 가리키는 것은

const APPController = (function(UICtrl, APICtrl, FormValidator) {
    // ... 코드 내용 ...
})(UIController, APIController, FormValidator);

이 코드에서 가장 중요한 부분은 마지막 줄입니다.
여기서 즉시 실행 함수(IIFE: Immediately Invoked Function Expression)를 사용하고 있는데, 함수를 선언하자마자 바로 실행하면서 UIController, APIController, FormValidator를 인자로 전달하고 있습니다.

이렇게 전달된 인자들은 함수의 매개변수 UICtrl, APICtrl, FormValidator로 전달됩니다.

UICtrl = UIController
APICtrl = APIController

이제 전체 코드를 차근차근 설명해드리겠습니다:

이 코드는 모듈 패턴을 사용하고 있습니다.
세 개의 컨트롤러(UI, API, Form)를 결합해서 하나의 앱을 만드는 구조입니다.

주요 기능:

const DOMInputs = UICtrl.inputField();
const DOMElements = UICtrl.getDOMElements();

웹 페이지의 입력 필드와 DOM 요소들을 가져옵니다.

이벤트 리스너들:

// 뒤로가기 버튼
document.querySelector(DOMElements.goBackButton).addEventListener('click', () => {
    // ... 코드
});

// 장르 선택 변경
DOMInputs.genre.addEventListener('change', async () => {
    // ... 코드
});

// 플레이리스트 선택 변경
DOMInputs.playlist.addEventListener('change', () => {
    // ... 코드
});

// 폼 제출
DOMInputs.form.addEventListener('submit', async (e) => {
    // ... 코드
});

여러 사용자 이벤트를 처리합니다.

비동기 처리:

const loadGenres = async () => {
    try {
        const token = await APICtrl.getToken();
        // ... 코드
    } catch (error) {
        // ... 에러 처리
    }
}

async/await를 사용해 API 호출을 처리합니다.

초기화 함수:

return {
    init() {
        loadGenres();
        UICtrl.hideComingSoon();
        UICtrl.hideError();
        UICtrl.disableSubmit();
    }
}

앱이 시작될 때 필요한 초기 설정을 담당합니다.

APPController는 Spotify API를 사용해서 음악 장르와 플레이리스트를 가져오는 웹 애플리케이션의 메인 컨트롤러입니다. 사용자가 장르를 선택하면 관련 플레이리스트를 보여주고, 플레이리스트를 선택하면 트랙 정보를 가져와서 QR 코드 페이지로 이동하는 기능을 구현하고 있습니다.