Go Lang 웹 프레임워크 기초 - Gin 체험하기 (3) 기본 템플릿 작성

2021. 8. 20. 16:11
반응형

Go 의 인기 Web Framework 'Gin'

해당 튜토리얼은 'Building Go Web Applications and Microservices Using Gin'의 내용을 번역하며 개인적으로 정리한 것입니다.

이번 시간에는 Gin Web Framework를 기초로, 기본적인 구조를 직접 만들어보고자 합니다.

 

1. 의존성 설치

튜토리얼에서 사용할 어플리케이션에서는 외부 의존성 프로그램인 Gin 프레임워크만을 사용합니다. 다음 명령어를 입력하여 최신 버전을 설치해주세요.

 

$ go get -u github.com/gin-gonic/gin

 

2. 재활용 가능한 템플릿 만들기

우리가 제작할 어플리케이션은 템플릿을 사용하여 웹 페이지를 표시합니다. 해당 페이지에는 Header, Menu, Sidebar 및 footer와 같은 여러 부분이 필요할 것이며 이 부분들은 모든 페이지에서 공통적으로 사용됩니다. Go Lang을 사용해서 다른 템플릿에서 가져올 수 있는 재사용 가능한 템플릿 스니펫을 만들 수 있습니다.

 

Header와 Footer는 모든 템플릿에서 공통적으로 재사용되는 부분입니다. 따라서 제작 순서는 Header 템플릿에서 사용할 자체 템플릿 파일에 메뉴를 생성하고, Header와 Footer를 가져올 인덱스 페이지용 템플릿을 만드는 식이 될 것입니다. 지금 생성할 모든 템플릿 파일들은 templates라는 이름의 별도의 디렉토리안에 배치하도록 합니다. 먼저 튜토리얼을 시작하고자하는 폴더 안에 templates 폴더를 생성하고 menu.html 파일을 작성하는 것부터 시작해보도록 하겠습니다.

 

▶ templates/menu.html

 

<!--menu.html 모든 페이지에서 공통으로 사용-->

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">
        홈으로
      </a>
    </div>
  </div>
</nav>

 

우선 현재 메뉴에는 홈 화면으로 돌아갈 수 있는 링크만 포함이 되어 있습니다. 우리는 어플리케이션에 기능을 추가할 때, 여기에 하나씩 추가하게 될 것입니다. 

 

▶ templates/header.html

 

<!-- header.html -->

<!doctype html>
<html>
    <head>
        <!-- 타이틀 페이지를 세팅하기 위해 타이틀을 변수로 사용합니다 -->
        <title>{{ .title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">

        <!-- 부트스트랩을 사용해서 멋진 어플리케이션을 만들어봅시다 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>
    
    <body class="container">
        <!--  이 위치에 menu.html 템플릿 포함시키기 -->
        {{ template "menu.html" . }}

 

▶ templates/footer.html

 

<!--footer.html-->

  </body>
  
</html>

 

 

튜토리얼을 제작하기 위해 우리는 오픈소스 부트스트랩의 프레임워크를 사용합니다. 파일의 대부분은 HTML형식을 가지고 있습니다. 다만 우리가 여기서 주목해야할 부분이 두 줄 있습니다.

 

<title>{{ .title }}</title>

 

위의 코드는 어플리케이션 안에서 설정해야하는 .title 변수를 사용하여 페이지 제목을 동적으로 설정하는데 사용됩니다.

 

{{ template "menu.html" . }}

 

위의 코드는 menu.html파일에서 메뉴 템플릿을 가져오는데 사용됩니다. Go Lang은 이러한 방식을 사용하여 하나의 템플릿을 다른 템플릿으로 가져올 수 있습니다.

 

Footer 템플릿에 정적 HTML이 포함되어 있습니다. 인덱스 페이지의 템플릿은 Header와 Footer를 사용하게 하고, 간단하게 안녕 Gin? 이라는 메시지를 출력할 수 있도록 해봅시다.

 

▶ templates/index.html

 

<!-- index.html -->

<!-- header.html 템플릿을 이 위치에 포함시킵니다 -->
{{ template "header.html" .}}

<h1>안녕 Gin?</h1>

<!-- footer.html 템플릿을 이 위치에 포함시킵니다 -->
{{ template "footer.html" .}}

 

인덱스 템플릿과 마찬가지로 다른 페이지의 템플릿도 비슷한 방식으로 Header와 Footer 템플릿을 재사용할 것입니다.

 

여기까지 따라오셨다면 어플리케이션의 디렉토리 구조는 다음과 같이 구성되어 있을 것입니다.

 

Templates 폴더 안의 4가지 html 파일이 있습니다

 

 

 

다음 시간에는 본격적으로 어플리케이션 구동을 위한 파일들을 생성해볼 것입니다. 원래 계획대로라면 Gin 체험하기 (3)에서 기본 템플릿 작성과 라우터 생성하고 안녕 Gin 부분을 로컬호스트를 통해 구동하는 부분까지 진행해보려 했습니다만 다 합치다보니 글이 너무 길어지기에 부득이하게 분리하여 업로드할 계획입니다. 포스팅 내용이 과하게 짧은 것은 저도 좋아하지 않지만, 필요한 부분만 찾아서 보시기를 원하시는 분들이 계실 수 있다는 생각을 하고 있기에 이런 결정을 하게 되었습니다.

 

언제나 많은 피드백을 부탁드리고 감사히 받고 있습니다. 감사합니다!

 

 

반응형
저작자표시 비영리 변경금지

'IT > Develop' 카테고리의 다른 글

Go Lang 웹 프레임워크 기초 - Gin 체험하기 (5) 라우터 초기화, 기사 목록 모델 테스트  (0) 2021.08.21
Go Lang 웹 프레임워크 기초 - Gin 체험하기 (4) 템플릿 연결하기  (0) 2021.08.20
Go Lang 웹 프레임워크 기초 - Gin 체험하기 (2) 튜토리얼 개요  (0) 2021.08.20
Go Lang 웹 프레임워크 기초 - Gin 체험하기 (1) Web Framework 기초  (0) 2021.08.16
Go Lang 기초 14 - 고 루틴(Go Routine)  (0) 2021.08.02

+ Recent posts

티스토리툴바