MVC 패턴 - View(2)

다음은 pug 파일들을 더 생성해서, 실제 View를 좀 더 완성해나가는 과정을 다루겠다. 

1) views폴더에 layouts라는 폴더를 만들고 main.pug를 생성한다. 

    main.pug에는 다음과 같은 코드를 작성한다. 

    

    doctype html

    html

             head

                      title WeTube

    pug에서는 tab을 사용하는데,

    tab 안쪽에 있는 코드는 그 상위 코드의 내부에 있는 코드라는 것을 의미한다. 

2) 이것이 완성된 main.pug 코드이다. 

    레이아웃을 만드는 목적은 기본 템플릿을 

     다른 파일들에서 재사용할 수 있도록 만드는 것이다. 

3) main.pug의 main 파트에 block content를 추가한다. 

     여기서 block은 Child 템플릿이 대체할 수 있는 영역을 나타낸다. 

4) extends layouts/main.pug를 통해 home.pug에서 main.pug를 불러오고, 

    block content에 p Home을 추가한다. 

5) 결과적으로 다음과 같이 localhost:4000에 Home이 출력되는 것을 확인할 수 있다. 

    즉, main.pug를 기본 템플릿으로 만들고,

    home.pug에서 main.pug를 끌어다가(extends layout/main.pug)

    Home을 출력한 것이다. 

6) 다른 파일들도 같은 설정으로 같은 결과를 확인할 수 있다. (join.pug)

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."