vanillaJS를 이용하여 SPA 구현하기

 

• 01/14
  • 이벤트 리스너로 등록되는 함수는 ()를 붙이지 않아도 된다…?
    • 이벤트 리스너로 등록되는 함수는 호출될 때 자동으로 event 객체를 인자로 전달받으므로, 괄호를 붙이지 않고 함수 참조만 넘겨야 한다.
  • vanillaJS로 SPA를 구현할 때 뒤로가기 버튼이 안 먹는다…?
    • https://developer.mozilla.org/ko/docs/Web/API/History_API/Working_with_the_History_API
  • 컴포넌트 렌더링 시 return 값이 Promise로 나오는…
    1. router에서 Promise를 풀어준다…

    // router.js
    export const changeUrl = async (requestedUrl) => {
        history.pushState(null, null, requestedUrl);
        const content = routes[requestedUrl] ? await routes[requestedUrl]() : NotFound(); 
        $app.innerHTML = Header(requestedUrl) + content;
    };
    

    // component/Home.js
    const Home = async() => {
        const listData = await getMovieList();
        return `
            <main id="main">
                <div class="main-header">TOP 20 인기 영화</div>
                ${await MovieList(listData)}
            </main>
        `;
    };