들어가기 전에

이번 시간에는 우리가 만든 정적인 웹 페이지에서 각각의 중요한 덩어리들을 일종의 부품으로 만들어 보겠습니다.

학습목표

부품화를 통해 가독성을 높이고 재사용성의 효과를 얻을 수 있습니다.

핵심단어

• 모듈화, 부품화
• 가독성
• 재사용성

강의 듣기

이번 시간에는 우리가 만든 정적인 웹 페이지에서 각각의 중요한 덩어리들을 일종의 부품으로 만들어 보겠습니다.

만약 <header> 영역의 코드가 4줄이 아니라 1억 줄이라면 우리 웹 페이지가 너무 복잡해서 한 눈에 들어 오지 않게 됩니다.

그럼 우린 어떤 꿈을 꾸게 될까요?

이 복잡한 부분을 subject 라고 하면 나중에 웹 브라우저를 전달될 때 원래의 코드가 실행될 수 있다면

훨씬 더 정리 정돈된  코드를 만들 수 있지 않을까요? 그래서 이 부분을 함수로 정리하겠습니다.

<div id="subject"></div>
<script>
function subject(){
    document.querySelector('#subject').innerHTML = `
    <header>
        <h1>WEB</h1>
        Hello, WEB!
    </header>
    `
}
subject();
</script>

페이지는 똑같이 보이지만 가독성도 높아지고 재사용할 수 있게 되었습니다. 이런 것을 "부품화시킨다", "모듈화한다" 고 부릅니다.

글 목록을 나타낼 때 TOC(Table Of Contents)라고 보통 사용합니다. TOC라는 이름으로 <nav>를 모듈화시켜보겠습니다.

<div id="toc"></div>

//script 영역
function TOC(){
    document.querySelector('#toc').innerHTML = `
    <nav>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
        </ol>
    </nav>
    `;
}

TOC();

이전과 똑같지만 훨씬 더 잘 정리된 정리 정돈된 코드가 되었씁니다.

 그 다음에 <article> 부분에서 제어하는 부분을 빼서 control 이라는 이름으로 모듈화 시키겠습니다.

<div id="control"></div>

//script 영역
function control(){
    document.querySelector('#control').innerHTML = `
    <ul>
        <li><a href="/create">create</a></li>
        <li><input type="button" value="delete"></li>
    </ul>
    `;
}

control();

article의 나머지 부분도 마찬가지로 content라고 모듈화하겠습니다.

<div id="content"></div>  

//script 영역
function article(){
    document.querySelector('#content').innerHTML = `
    <article>
        <h2>HTML</h2>
        HTML is ...
    </article>
    `
}
article();

그러면 위에 있는 코드들을 우리가 하나하나 보지 않고 여기에 코드 부품들을 사용하는 코드만 딱 봐도

제목 , 글목록, 제어, 본문과 관련된 것이 올 것이라고 하는 것을 한 눈에 알 수가 있게 되는 것입니다.

가독성도 높아지고 다른 페이지에서 사용해도 잘 동작하는 재활용성도 높아진 부품을 만든 것입니다.

생각해보기

 모듈화한다는 것은 어떤 것을 의미하나요?