[PYTHON] requirements.txt 파일 쉽게 만드는 방법: 설치된 패키지 목록 저장

pip freeze 명령어로 현재 설치된 Python Package 목록을 requirements.txt 파일로 쉽게 저장하는 방법을 소개합니다.

Python 프로젝트를 진행하다 보면, 현재 설치된 Package 목록을 다른 환경에서도 똑같이 재현하고 싶을 때가 많습니다. 이럴 때 가장 많이 사용하는 방법이 바로 requirements.txt 파일을 만드는 것입니다. 이번 글에서는 현재 설치된 Package들을 requirements.txt 파일로 저장하는 방법과, 작업 시 유의할 점들을 정리해보았습니다.

requirements.txt란 무엇인가요?

requirements.txt는 Python 프로젝트에서 필요한 Package와 그 Version을 기록해 두는 표준 파일입니다. 이 파일을 통해 다른 개발자나 서버에서도 동일한 환경을 손쉽게 구축할 수 있습니다.

설치된 Package 목록 저장하는 가장 쉬운 방법

1. pip freeze 명령어 사용

가장 기본적이고 널리 쓰이는 방법은 pip freeze 명령어를 활용하는 것입니다. 아래와 같이 터미널(명령 프롬프트)에서 입력하면 됩니다.

pip freeze > requirements.txt

이 명령은 현재 환경에 설치된 모든 패키지와 버전을 requirements.txt 파일에 한 줄씩 기록합니다. 나중에 이 파일을 이용해 동일한 환경을 쉽게 복원할 수 있습니다.

2. 가상환경에서 실행하면 더 깔끔해요

불필요한 패키지가 포함되는 것을 막으려면, 가상환경(venv, conda 등)을 먼저 만들고 필요한 패키지만 설치한 뒤 위 명령어를 실행하는 것이 좋습니다. 이렇게 하면 프로젝트에 꼭 필요한 패키지만 포함된 requirements.txt 파일을 만들 수 있습니다.

3. requirements.txt로 패키지 설치하기

requirements.txt 파일이 준비되었다면, 다른 환경에서 아래 명령어로 손쉽게 패키지를 설치할 수 있습니다.

pip install -r requirements.txt

추가 팁

  • pip freeze는 Package명과 Version을 “Package==Version” 형식으로 저장합니다.

  • 일부 Package는 다운로드 주소가 포함될 수 있으니, 필요에 따라 파일을 확인해보세요.

  • pip list 명령어도 있지만, 이 방법은 사람이 보기엔 좋으나 requirements.txt로 바로 사용하기엔 적합하지 않습니다.

마무리

requirements.txt 파일은 Python 프로젝트의 협업과 배포, 환경 재현에 꼭 필요한 도구입니다. 위 방법을 활용해 프로젝트 관리에 도움을 받아보세요!

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #5: Layout

이번 글에서는 “Medcare” HTML 무료 Template 기반의 MVC Web Application에서 WebSite의 공통 Layout 요소인 _Layout.cshtml 파일을 제작하는 방법을 통해 코드의 효율성과 유지보수성을 높이는 과정을 자세히 설명합니다.

“Medcare” template을 이용한 MVC Web Application 구축, 다섯 번째 입니다. 지난 4편에서는 각 메뉴의 기본적인 뼈대인 Controller와 해당 controller 의 index ActionMethod 에 대응하는index.cshtml View 파일을 만드는 과정을 살펴봤습니다. 이제 웹사이트의 기본적인 구조를 갖추었으니, 이번 편에서는 모든 페이지에 공통으로 적용될 Layout 을 template 에서 어떻게 가져와서 _Layout.cshtml 파일을 구성하는지 살펴보겠습니다.

1. 공통 부분 :

MVC Web Application에서는 일반적으로 _Layout.cshtml이라는 파일을 사용하여 웹사이트의 공통 Layout 을 정의합니다. 이 파일은 Web page의 전체적인 구조를 담고 있으며, 각 페이지의 내용이 삽입될 영역을 지정하는 역할을 합니다. 필요에 따라서 여러 Layout page 를 만들어 놓고 각 View 마다 다르게 설정할 수도 있습니다.

  • Views 폴더 아래 Shared 폴더를 확인하거나 없다면 생성합니다.
  • Shared 폴더에 Razor View Page (_Layout.cshtml)를 확인합니다. 없으면 생성합니다.

제가 생성한 Project 에는 이미 Shared 폴더에 _Layout.cshtml 파일이 있으므로 더블클릭으로 파일을 엽니다.Source 가 길어 복잡해 보이지만 Editor 화면의 Line Number 우측의 화살표를 클릭하면 축소되어 내용을 감출 수가 있습니다. 그럼 아래와 같이 간략하게 보기 쉽게 됩니다.

크게 head tag 와 body tag 로 나뉘고, 다시 body tag 내에는 header, div, footer 이렇게 세부분으로 나뉩니다. 이 부분이 핵심입니다.

잘 기억해 두세요.

이 번에는 “Medcare” 의 HTML Source 를 살펴보겠습니다.

Source 를 편하게 보기 위해서 Visual Studio Code 로 열어서 보겠습니다. Download 받아 압축을 푼 폴더를 마우스 오른쪽 클릭을 하면 나타나는 Context menu 에서 “Code(으)로 열기” 메뉴를 클릭합니다.

아래와 같이 VS Code 가 열리고 해당 폴더 내의 파일 구조가 표시됩니다.

index.html  이 첫 페이지지만 너무 길어서 보기가 어려울 수 있으니 about-us.html 파일을 열어보겠습니다. menu 의 about 에 해당하는 페이지 입니다.

페이지 내용은 아래와 같습니다.

보기 편하도록  Visual Studio 2022 에서와 같이 Line Number 오론쪽의 화살표를 클릭하여 내용을 축소해 봅니다.

어떻습니까? 구조가 익숙하죠?

다시 Visual Studio 2022 의 모습을 보죠.

Header 와 Footer 그리고 그 사이에 내용이 배치되어 유사한 구조라는 걸 알 수 있습니다. 다른 메뉴의 화면들은 어떤지 살펴볼까요?

Department.html
Docters.htmlContact.html

모두 같은 구조를 가지고 있습니다.

사각형의 내의 Source 내용을 제외한 부분들이 거의 대부분 동일하다는 말은 WebSite 에서 공통적으로 사용할 _Layout.cshtml 에 넣으면 모든 Page 에서 재 사용할 수 있다는 의미입니다. 그리고 Source 적용 후에 header 와 footer 를 별도의 코드로 분리하여 관리할 수 있습니다.

2. 각 화면의 영역 :

이제 공통 부분을 찾았으니 차이가 나는 각 화면의 부분을 어떻게 적용하는지에 대해서 살펴보겠습니다.

html source 에서 사각형의 내용들을 어떻게 처리하느냐를 이야기하는 건데요. Rendering  된다라고 이야기합니다.

_Layout.cshtml 파일에서 각 페이지의 내용이 Rendering될 위치를 지정해야 합니다. 이는 @RenderBody() 라는 Helper Method를 사용하여 간단하게 처리할 수 있습니다. 이 Method는 각 View page의 HTML 콘텐츠를 해당 위치에 삽입해 줍니다.

아래 처럼 _Layout.cshtml 파일을 보면 사각형 내의 @RenderBody() 를 보실 수 있습니다.

<div> tag 내에 다시 <main> tag 가 있지만 “Medcare” Source  에는 <main> tag 가 없으므로 아래와 같이 간단히 구성하도록 하겠습니다.

<body>
    <header>
    </header>

    <div class="container">
        @RenderBody()
    </div>

    <footer>
    </footer>
</body>

3. _Layout.cshtml(공통 레이아웃) 파일:

위 내용을 바탕으로 _Layout.cshtml 파일을 수정해 보도록 하겠습니다. 여러 html page 중에서 어떤 파일을 선택해도 좋지만 제일 간단하다고 생각되는 about-us.html 파일을 가지고 진행하겠습니다.

사각형 내의 내용을 제외한 내용을 _Layout.cshtml 에 복사해 넣고 사각형 부분의 내용은 아래 코드로 대치하겠습니다.

    <div class="container">
        @RenderBody()
    </div>

그럼 아래와 같습니다.

Code Snippet
  1. <!doctype html>
  2. <html lang=”en”>
  3. <head>
  4.     <!– Required meta tags –>
  5.     <meta charset=”utf-8″>
  6.     <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
  7.     <link rel=”icon” href=”img/favicon.png” type=”image/png”>
  8.     <title>Medcare Medical</title>
  9.     <!– Bootstrap CSS –>
  10.     <link rel=”stylesheet” href=”css/bootstrap.css”>
  11.     <link rel=”stylesheet” href=”css/themify-icons.css”>
  12.     <link rel=”stylesheet” href=”css/flaticon.css”>
  13.     <link rel=”stylesheet” href=”vendors/fontawesome/css/all.min.css”>
  14.     <link rel=”stylesheet” href=”vendors/owl-carousel/owl.carousel.min.css”>
  15.     <link rel=”stylesheet” href=”vendors/animate-css/animate.css”>
  16.     <!– main css –>
  17.     <link rel=”stylesheet” href=”css/style.css”>
  18.     <link rel=”stylesheet” href=”css/responsive.css”>
  19. </head>
  20. <body>
  21.  
  22.     <!–================Header Menu Area =================–>
  23.     <header class=”header_area”>
  24.         <div class=”top_menu row m0″>
  25.             <div class=”container”>
  26.                 <div class=”float-left”>
  27.                     <a class=”dn_btn” href=”mailto:medical@example.com”><i class=”ti-email”></i>medical@example.com</a>
  28.                     <span class=”dn_btn”> <i class=”ti-location-pin”></i>Find our Location</span>
  29.                 </div>
  30.                 <div class=”float-right”>
  31.                     <ul class=”list header_social”>
  32.                         <li><a href=”#”><i class=”ti-facebook”></i></a></li>
  33.                         <li><a href=”#”><i class=”ti-twitter-alt”></i></a></li>
  34.                         <li><a href=”#”><i class=”ti-linkedin”></i></a></li>
  35.                         <li><a href=”#”><i class=”ti-skype”></i></a></li>
  36.                         <li><a href=”#”><i class=”ti-vimeo-alt”></i></a></li>
  37.                     </ul>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.         <div class=”main_menu”>
  42.             <nav class=”navbar navbar-expand-lg navbar-light”>
  43.                 <div class=”container”>
  44.                     <!– Brand and toggle get grouped for better mobile display –>
  45.                     <a class=”navbar-brand logo_h” href=”index.html”><img src=”img/logo.png” alt=””></a>
  46.                     <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
  47.                         <span class=”icon-bar”></span>
  48.                         <span class=”icon-bar”></span>
  49.                         <span class=”icon-bar”></span>
  50.                     </button>
  51.                     <!– Collect the nav links, forms, and other content for toggling –>
  52.                     <div class=”collapse navbar-collapse offset” id=”navbarSupportedContent”>
  53.                         <ul class=”nav navbar-nav menu_nav ml-auto”>
  54.                             <li class=”nav-item”><a class=”nav-link” href=”index.html”>Home</a></li>
  55.                             <li class=”nav-item”><a class=”nav-link” href=”about-us.html”>About</a></li>
  56.                             <li class=”nav-item”><a class=”nav-link” href=”department.html”>Department</a></li>
  57.                             <li class=”nav-item”><a class=”nav-link” href=”doctors.html”>Doctors</a></li>
  58.                             <li class=”nav-item submenu dropdown”>
  59.                                 <a href=”#” class=”nav-link dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Blog</a>
  60.                                 <ul class=”dropdown-menu”>
  61.                                     <li class=”nav-item”><a class=”nav-link” href=”blog.html”>Blog</a></li>
  62.                                     <li class=”nav-item”><a class=”nav-link” href=”single-blog.html”>Blog Details</a></li>
  63.                                     <li class=”nav-item”><a class=”nav-link” href=”element.html”>element</a></li>
  64.                                 </ul>
  65.                             </li>
  66.                             <li class=”nav-item”><a class=”nav-link” href=”contact.html”>Contact</a></li>
  67.                         </ul>
  68.                     </div>
  69.                 </div>
  70.             </nav>
  71.         </div>
  72.     </header>
  73.     <!–================Header Menu Area =================–>
  74.  
  75.  
  76.     <div class=”container”>
  77.         @RenderBody()
  78.     </div>
  79.  
  80.     <!– start footer Area –>
  81.     <footer class=”footer-area area-padding-top”>
  82.         <div class=”container”>
  83.             <div class=”row”>
  84.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  85.                     <h4>Top Products</h4>
  86.                     <ul>
  87.                         <li><a href=”#”>Managed Website</a></li>
  88.                         <li><a href=”#”>Manage Reputation</a></li>
  89.                         <li><a href=”#”>Power Tools</a></li>
  90.                         <li><a href=”#”>Marketing Service</a></li>
  91.                     </ul>
  92.                 </div>
  93.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  94.                     <h4>Quick Links</h4>
  95.                     <ul>
  96.                         <li><a href=”#”>Jobs</a></li>
  97.                         <li><a href=”#”>Brand Assets</a></li>
  98.                         <li><a href=”#”>Investor Relations</a></li>
  99.                         <li><a href=”#”>Terms of Service</a></li>
  100.                     </ul>
  101.                 </div>
  102.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  103.                     <h4>Features</h4>
  104.                     <ul>
  105.                         <li><a href=”#”>Jobs</a></li>
  106.                         <li><a href=”#”>Brand Assets</a></li>
  107.                         <li><a href=”#”>Investor Relations</a></li>
  108.                         <li><a href=”#”>Terms of Service</a></li>
  109.                     </ul>
  110.                 </div>
  111.                 <div class=”col-lg-2 col-sm-6 single-footer-widget”>
  112.                     <h4>Resources</h4>
  113.                     <ul>
  114.                         <li><a href=”#”>Guides</a></li>
  115.                         <li><a href=”#”>Research</a></li>
  116.                         <li><a href=”#”>Experts</a></li>
  117.                         <li><a href=”#”>Agencies</a></li>
  118.                     </ul>
  119.                 </div>
  120.                 <div class=”col-lg-4 col-md-6 single-footer-widget”>
  121.                     <h4>Newsletter</h4>
  122.                     <p>You can trust us. we only send promo offers,</p>
  123.                     <div class=”form-wrap” id=”mc_embed_signup”>
  124.                         <form target=”_blank” action=”https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01″
  125.                               method=”get” class=”form-inline”>
  126.                             <input class=”form-control” name=”EMAIL” placeholder=”Your Email Address” onfocus=”this.placeholder = ”” onblur=”this.placeholder = ‘Your Email Address'”
  127.                                    required=”” type=”email” />
  128.                             <button class=”click-btn btn btn-default”>
  129.                                 <i class=”ti-arrow-right”></i>
  130.                             </button>
  131.                             <div style=”position: absolute; left: -5000px;”>
  132.                                 <input name=”b_36c4fd991d266f23781ded980_aefe40901a” tabindex=”-1″ value=”” type=”text” />
  133.                             </div>
  134.  
  135.                             <div class=”info”></div>
  136.                         </form>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.             <div class=”row footer-bottom d-flex justify-content-between”>
  141.                 <p class=”col-lg-8 col-sm-12 footer-text m-0″>
  142.                     <!– Link back to Colorlib can’t be removed. Template is licensed under CC BY 3.0. –>
  143.                     Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class=”fa fa-heart” aria-hidden=”true”></i> by <a href=”https://colorlib.com” target=”_blank”>Colorlib</a>
  144.                     <!– Link back to Colorlib can’t be removed. Template is licensed under CC BY 3.0. –>
  145.                 </p>
  146.                 <div class=”col-lg-4 col-sm-12 footer-social”>
  147.                     <a href=”#”><i class=”fab fa-facebook-f”></i></a>
  148.                     <a href=”#”><i class=”fab fa-twitter”></i></a>
  149.                     <a href=”#”><i class=”fab fa-dribbble”></i></a>
  150.                     <a href=”#”><i class=”fab fa-linkedin”></i></a>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </footer>
  155.     <!– End footer Area –>
  156.  
  157.     <!– Optional JavaScript –>
  158.     <!– jQuery first, then Popper.js, then Bootstrap JS –>
  159.     <script src=”js/jquery-2.2.4.min.js”></script>
  160.     <script src=”js/popper.js”></script>
  161.     <script src=”js/bootstrap.min.js”></script>
  162.     <script src=”js/stellar.js”></script>
  163.     <script src=”vendors/owl-carousel/owl.carousel.min.js”></script>
  164.     <script src=”js/jquery.ajaxchimp.min.js”></script>
  165.     <script src=”js/waypoints.min.js”></script>
  166.     <script src=”js/mail-script.js”></script>
  167.     <script src=”js/contact.js”></script>
  168.     <script src=”js/jquery.form.js”></script>
  169.     <script src=”js/jquery.validate.min.js”></script>
  170.     <script src=”js/mail-script.js”></script>
  171.     <script src=”js/theme.js”></script>
  172. </body>
  173. </html>

_Layout.cshtml 파일을 수정했지만 WebSite 에서 사용하는 javascript, StyleSheet, Image 파일들을 복사하고 경로를 잡아주는 과정이 진행되어야 합니다.

4. Image, Javascript, StyleSheet :

“Medcare” Template Source 에서 아래 그림과 같이 “css, fonts, img, js, vendors” 폴더를 복사합니다.

그리고 Visual Studio 2022 의 Solution Explorer (솔루션 탐색기)에서 wwwroot를  오른쪽 click  하여  “Open  Folder  in  File  Explorer(파일탐색기에서  폴더열기)” 를 cliek  합니다.File Explorer (파일탐색기)가 열리면  wwwroot 폴더에 복사한 파일을 붙여 넣습니다.결과는 다음과 같습니다.

5. 실행 :

지금까지 작업이 잘 되었는지 확인해 보겠습니다. 

Debugging Button 을 Click 하거나 F5 Button 을 눌러 실행시켜 봅니다.

잘 실행되십니까? index page 도 잘 표시되고 favicon 도 표시되네요. 메뉴를 Click 하시고 싶겠지만 메뉴의 link 를 수정하지 않아 표시할 수 없다는 오류가 나올겁니다. 지난 시간에 확인했던 것 처럼 주소창에 “https://localhost:7154/About” 를 입력하시면 해당 메뉴로 이동할 겁니다.

마무리

이번 편에서는 “Medcare” template 기반의 MVC Web Application에 공통 Layout인 _Layout.cshtml 파일을 수정하여 Layout 을 적용하는 과정을 살펴봤습니다. 깊이 살펴보아야 할 기본 내용은 많습니만 진행과정을 단순하게 하여 WebSite 제작에 쉽게 접근하도록 구성해 봤습니다. 내용이 길어 Header와 Footer를 적용하고, CSS와 JavaScript 파일을 분리하는 과정은 다음 편에서 살펴보겠습니다. 

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #4: View와 Controller 구성

Medcare 템플릿 기반 웹사이트 소스를 MVC 웹 애플리케이션의 View와 Controller로 구성하는 과정 각 메뉴별 index.cshtml 파일을 생성하는 과정을 설명합니다.

무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #4: View와 Controller 구성

1. Controller 와 View 생성

지난 3편에서 Medcare Template의 HTML 구조와 메뉴를 간략하게 살펴보았습니다. 이제 본격적으로 MVC Web Application의 View를 구성하기 위해 다운로드 받은 HTML 소스 파일들을 프로젝트의 View 폴더 내에 각 메뉴에 해당하는 하위 폴더 (Home, About, Department, Doctors, Blog, Contact)를 생성하여 옮겨줍니다. 각 폴더 안에는 해당 메뉴의 내용을 담을 index.cshtml 파일을 생성할 예정입니다. 수동으로 생성하는 것이 아닌 Visual Studio 2022 에서 몇 번의 마우스 클릭과 몇 번의 Typing 만으로 메뉴의 빈 화면들을 구성할 수 있습니다.

Home 메뉴는 추가되어 있으니 About, Department, Doctors, Contact 메뉴를 추가해 보겠습니다. 먼저 About 메뉴부터 추가해 보죠. Capture 된 화면을 차례대로 따라하며 About 메뉴를 추가해 보시기 바랍니다.

먼저 아래 그림과 같이 Solution Explorer 에서 Controller 폴더를 오른쪽 Click 하여 나타나는 Context menu 를 따라가 클릭합니다.

Controller > Add > Controller …

메뉴 클릭시 나타나는 화면에서 MVC Controller – Empty 를 선택하고  Add  버튼을  click 합니다.나타나는 화면에서 MVC Controller – Empty 를 선택하고 하단 Name 칸의 내용을 지우고 ..“AboutController” 를 입력합니다.아래 그림처럼 AboutController 가 추가된 모습을 보실 수 있습니다.AboutController 가 추가되면서 오른쪽에는 생성된 소스가 표시되는데요. 이번에는 View 를 추가해 보도록 하겠습니다. 

생성된 Source를  보면  자동으로 Index()  method가  생성된  것을  확인할  수 있습니다.  사용자의 request를 받아 처리하고, business logic을 수행하며, 다양한 형태의 응답을 생성하는 역할을 하는  Method 를 ActionMethod 라고 하는데 index method 는 해당 Controller  를 실행시킬  때 기본적으로  실행되는  method  라고  생각하시면 됩니다.  http://localhost/About  를 Browser 주소창에  입력하시면  기본적으로  About Controller 의 index method  가 실행됩니다. Source 상에서 Index() 를 오른쪽 click 하여 나타난 Context menu 에서 Add View … 를 클릭합니다.나타난 화면에서 Razor View- Empty 를 선택할 수도 있지만 일단 Razor View 를 click 하겠습니다.나타난 화면에서 Use a layout page Checkbox 를 클릭하여 사용할 Layout 을 선택하겠습니다.Checkbox 를 click 하고 … 버튼을 클릭하면 화면이 나타납니다. 나타난 화면에서 Views 폴더를 선택한 후  Shared 폴더를 선택합니다. 오른쪽 Contents of folder 칸에서 _Layout.cshtml 을 선택하고 OK 버튼을 클릭합니다. _Layout.cshtml 파일은 만들 페이지들이 갖는 공통의  틀이라고  생각하시면 됩니다.아래와 같이 선택한 _Layout.cshtml 파일의 Layout Page 의 경로가 채워졌습니다.  Add 버튼을  click  합니다.그 결과 Views 폴더에 About 폴더가 생성되고 그 내부에 index.cshtml 파일이 생성됩니다. 오른쪽에 생성된 파일의 내용도 함께 표시됩니다.  처음 생성된 Source 에서 “index” 라고 적힌 부분을 “About” 로 수정해 줍니다.

Layout 이 화면에서 설정한 Layout 페이지의 경로가 보입니다. _ViewStart.cshtml 에 기본 Layout 을 설정하는 부분이 있어 이 코드는 추가할 필요없지만 필요에 따라 해당페이지에서 별도의 Layout 을 설정하려한다면 아래 코드와 같이 추가해서 설정해 줄 수 있습니다.이렇게 About menu 를 추가해 보았습니다.

위 과정을 반복하여 Department, Docters, Contact 메뉴를 추가해 보시기 바랍니다.

추가한 결과는 아래와 같습니다.

5개의 Controller 와 Views Folder 에 5개의 View 가 추가된 모습을 보실 수 있습니다.

추가를 마쳤으니 어떻게 보이는지 실행을 시켜보겠습니다.

두 화살표 버튼 모두 클릭하면 실행이 되지만 왼쪽 버튼은 debugging 을 수행하는 버튼으로  왼쪽 버튼을 클릭합니다.

아래와 같이 실행 화면이 나타납니다. 아직 Menu 를 표시하는 Source 를 추가하지 않았기 때문에 수동으로 주소를 입력해서 이동해 보겠습니다.

주소창에 About 를 추가한 후 Enter 를 눌러보십시오. Department, Docters, Contact 를 About 대신 입력하여 테스트 해보시기 바랍니다.

마무리

이번 4편에서는 다운로드 받은 Medcare 템플릿의 HTML 소스를 MVC 웹 애플리케이션의 기본적인 View와 Controller 구조로 변환하기 위해 Menu 를 Controller 와 View 로 생성하는 과정을 살펴보았습니다. 다음은 Header 와 Footer 를 추출하면서 Layout 을 구성하는 방법을 살펴보겠습니다.

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\