블록체인하는 만두아빠

Flutter로 Android 앱 개발을 위한 디버깅 중 [INSTALL_FAILED_INSUFFICIENT_STORAGE] 에러를 발견하셨을 경우에 대한 해결 방법입니다.

기본적으로 처음 생성한 Android Emulator에는 800MB의 용량을 가지고 있습니다. 이 용량을 초과하는 App을 빌드하면 위와 같은 오류가 뜹니다. 여유공간을 넉넉하게 설정해주도록 합시다.

안드로이드 스튜디오로 가서

우측 상단에 있는 AVD Manager를 클릭합니다.

설정할 에뮬레이터를 확인하고 Edit을 통해 설정을 수정해줄 것입니다.

Show Advanced Settings를 클릭해서 고급 설정을 열어줍니다.

아래에 보시면 Internal Storage가 기본의 경우 800MB로 설정이 되어있을 것입니다. 이제 여유공간을 충분히 잡아주고 다시 빌드를 하면 됩니다.

우리는 iOS 앱을 개발하면서 앱을 실제 아이폰에서 테스트를 할 때, 일반적으로 케이블을 통한 연결 사용을 하게 됩니다. 실제로 케이블을 활용한 연결이 가장 간편하며 VScode에서 Flutter나 React-Native로 개발을 할 때 바로바로 연결이 가능하기 때문에 편리하기도 합니다. 하지만 케이블 연결이 끊어지면 디버깅중인 앱 또한 바로 종료되고, 케이블의 길이는 주로 짧은 편이므로 이러한 물리적인 불편한 점도 역시 존재합니다.

iMac 혹은 MacBook과 iPhone이 같은 무선랜 환경에 있다면 무선 디버깅을 통해 보다 쉽고 간편하게 디버깅이 가능합니다.

우선 케이블로 아이폰을 연결한 뒤 Xcode를 열고 Windows에서 Devices and Simulators를 선택합니다. 여기서 뜨는 창에서

connect via network를 선택해줍니다.

기존에 연결된 아이폰 옆에 지구본 모양과 같은 아이콘이 떠있는 것을 확인할 수 있습니다. 이제 기기 연결을 해제하고 Xcode를 다시 켜서 확인해주면 됩니다.

이제 별도의 케이블 연결없이도 무선으로 디버깅이 가능한 상태가 되었습니다!

모바일 앱을 실행했을 때 가장 먼저 보이는 페이지는 주로 로딩 페이지일 것입니다. 앱을 실행시키자마자 바로 메인 페이지가 뜨지 않고 대부분은 이런 로딩 페이지를 띄우죠. Flutter에서는 이 로딩 페이지를 Splash Screen이라고 부릅니다.

별도의 페이지를 구성하고 로고와 백그라운드 이미지를 구성할 필요없이 Flutter_native_splash를 사용하여 간편하게 이러한 Splash Screen을 구현할 수 있습니다. Flutter_native_splash는 현재 1.3.1 버전이 나와있으며 Flutter 2.0의 Null Safety가 구현되어 있습니다. 현재 두 가지 방법으로 이 Flutter_native_splash를 구현할 수 있는데 간단한 방법으로 제작하는 방법에 대해 살펴보겠습니다.

우선 사용하기 위해 pubspec.yaml에 Flutter_native_splash를 추가하고 flutter pub get 해줍니다.

dev_dependencies:
  flutter_native_splash: ^1.3.1

Flutter_native_splash 소개 페이지에 보시면 코드 내에 직접 작성하는 방식으로 구현한 예제가 있고, 종속성 설치시에 백그라운드 컬러 혹은 이미지를 pubspec.yaml에 직접 등록하여 사용하는 방식 또한 나와있습니다. 위에서 언급한 두가지 적용 방법이 바로 이것입니다. pubspec.yaml에 Color와 image 주소를 작성해주면 간편하게 사용할 수 있기에 저는 다음의 방법을 사용하였습니다.

flutter_native_splash:

  color: "#42a5f5"
  image: images/main.png
  # 변경사항 필요시 flutter pub run flutter_native_splash:create 와 remove 사용

color는 ""를 사용해서 작성해주면 되고, 이미지의 경우 이미지 파일의 주소를 작성해주시면 됩니다. 작성이 모두 끝이 났다면 저장하고 터미널 창에서 flutter pub run flutter_native_splash:create를 입력해주세요.

create를 통해 등록하고, remove를 사용하여 삭제해주시면 됩니다. 변경사항이 있을 때는 먼저 remove를 통해 지워주신 후에 변경사항이 적용된 버전을 다시 create로 등록해주세요.

저는 위에서 필요한 부분만 간단하게 사용하여 pubspec.yaml 파일에 작성했지만 Flutter_native_splash에서는 다음과 같은 기본적인 샘플을 제공하고 있습니다.

flutter_native_splash:

  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"
  
  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing 
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a 
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The color_dark, background_image_dark, and image_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or 
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # The android, ios and web parameters can be used to disable generating a splash screen on a given 
  # platform.
  #android: false
  #ios: false
  #web: false

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see 
  # https://developer.android.com/reference/android/view/Gravity): bottom, center, 
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see 
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill, 
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, 
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # To hide the notification bar, use the fullscreen parameter.  Has no affect in web since web 
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s) 
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

Flutter_native_splash Github에 직접 방문하셔서 자세한 내용을 확인하실 수 있습니다.

Flutter 와 React Native, 그리고 Apache Cordova 와의 비교는 추후에 다뤄보기로 하고

우선은 MacOS 기준 Flutter 설치 및 초기 설정 부분을 다룰 것입니다.

MacOS 환경에서는 우선 zip파일을 다운받고 압축을 푸는 것으로 시작합니다.

Flutter 파일을 원하는 곳에 압축해제하고 Terminal 창을 연 뒤 zshrc 설정을 해줍니다.

아래와 같이 export PATH="$PATH:[폴더 주소]/flutter/bin" 으로 등록해주세요.

작성이 완료가 되었다면 :wq! 를 통해 저장하고 나와주시면 됩니다.

제대로 적용되었는지 확인하기 위해 flutter 를 입력해주시면 다음과 같이 command 목록이 뜨게 됩니다.

마크다운이란?

일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되는 마크업(Markup) 언어의 하나로, 일반 마크업 언어에 비해 문법이 쉽고 간단하다는 특징을 가지고 있습니다.

마크다운 문법

1. 제목 (Header)

제목은 #의 갯수로 표시할 수 있습니다.

# 제목 h1
## 제목 h2
### 제목 h3
#### 제목 h4
##### 제목 h5
###### 제목 h6

h1과 h2의 경우

h1
==
h2
--

로도 나타낼 수 있습니다.

2. 폰트 (Font)

이탤릭, 두껍게, 밑줄, 취소선 등을 표시할 수 있습니다.

_이탤릭_
*이탤릭*

__두껍게__
**두껍게**

~취소선~
~~취소선~~

<u>밑줄</u>

3. 목록 (List)

숫자와 . 을 사용해서 나타낼 수 있습니다.

1. 첫번째 목록
2. 두번째 목록
3. 세번째 목록

1. 메인 목록
    - 서브 목록1
    - 서브 목록2

1. 메인 목록
    1. 서브 목록1
    2. 서브 목록2

입력 결과

1. 첫번째 목록
2. 두번째 목록
3. 세번째 목록
4. 메인 목록
   • 서브 목록1
   • 서브 목록2
5. 메인 목록
   1. 서브 목록1
   2. 서브 목록2

4. 인용문(BlockQuote)

간단하게 > 를 사용해서 인용문을 만들 수 있습니다.

> 블럭 인용 사용하기

> 중첩 인용
>> 인용 안에 또다른 인용
>>> 그 안에 또다른 인용

입력 결과

블럭 인용 사용하기

중첩 인용

인용 안에 또다른 인용

그 안에 또다른 인용

5. 인라인 코드와 코드 블럭 (inline code, Code Block)

인라인 코드는 `안에 넣어주고
코드블럭은 ` 를 세 번 작성한 후 프로그래밍 언어 이름을 넣어주세요.

`인라인 코드`

``` 코드 블럭 (`의 뒤에 원하는 언어를 입력하여 사용) ```

입력 결과

인라인 코드

코드 블럭
package main
import "fmt"
func main(){
    fmt.Println("Hello world")
}

6. 링크 (Link)

[링크](http://mdpapa.tistory.com)

<http://mdpapa.tistory.com>

입력 결과

링크

http://mdpapa.tistory.com

7. 표 (Table)

표는 다음과 같이 표 느낌이 나게 만들어주면 됩니다.

|index|Title|Column|
|:----|:----|:-----|
|  1  | 제목1| 내용1 |
|  2  | 제목2| 내용2 |

입력 결과

8. 수평선 (Horizontal Line)

• 이나 * 을 세 번 연속으로 작성해주시면 됩니다.

---
***

입력 결과

9. 이미지 (Image)

!를 우선 하고 []안에 이미지타이틀을 작성한 후에 ()로 이미지 태그를 묶어주세요.

![이미지타이틀](https://go.dev/images/gophers/pilot-bust.svg)

10. 체크박스 (Check Box)

*, +, - 입력 후 [ ] 안에 x를 넣으면 체크가 된 체크박스, 빈 칸으로 두면 빈 체크박스가 됩니다.

* [ ] 딸기
+ [x] 망고
- [x] 바나나

입력 결과

• 딸기
• 망고
• 바나나

Footer Page는 일반적으로 저작권 정보, 연락처, 관련된 문서 등의 내용을 포함하는 페이지의 최하단의 영역을 말합니다. 페이지의 최하단에 위치하도록 CSS를 통해 Footer 설정하는 방법을 알아보도록 하겠습니다.

HTML5에서 <footer> 태그가 새롭게 추가되어 간단하게 footer page 등록이 가능합니다.

CSS로 가서 다음과 같이 작성해주도록 합시다.

.footer {
	display: block;
}

제가 포스팅을 작성하는 이유이기도 하지만, 위와 같은 방법으로도 footer가 하단 고정이 되지 않을 경우 다음과 같이 CSS로 몇가지 요소를 추가해주어 고정시키는 방법도 있습니다.

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

MacOS의 Terminal과 같은 역할을 하는 Windows의 CMD에서 Linux 명령어 ls를 사용하는 방법을 알아보도록 합시다.

Ubuntu나 Red Hat, Debian 그리고 우리나라의 HamoniKR와 같은 Linux 계열 OS를 사용하시는 분들은 ls 명령어가 dir 보다 익숙하실 것 입니다. 윈도우 cmd에서 습관적으로 ls를 입력하다가 아 맞다.. 하는 경우가 있으신가요? 저는 심지어 MacBook도 번갈아가며 사용하고 있기 때문에 아무래도 더 자주 있습니다.

1. 커맨드 입력을 활용하기

ls, rm, clear와 같이 Linux 환경에서 자주 사용하는 명령어를 CMD에서 사용하는 방법은 다음과 같습니다.

doskey '바꾸고자하는 명령어' = 'CMD 명령어'

디렉토리 내의 파일과 디렉토리 정보를 출력하는 명령어 dir를 ls로 변경하려면

doskey ls = dir

삭제 명령어 del을 rm으로 변경하려면

doskey del = rm

이런 식으로 입력해주시면 바로 사용이 가능합니다.

하지만 아쉽게도 CMD창을 닫으면 다시 초기화되어서 ls를 인식하지 않습니다.

계속해서 ls 명령어를 사용해주기 위해서는 레지스트리 등록이 필요합니다.

2. 레지스트리 등록을 사용하기

우선 메모장을 열어서 다음과 같이 작성합니다.

그리고 저장을 autorun.bat로 해줍니다.

적당한 위치에 저장해주신 다음에 레지스트리 편집기를 열어줍니다.

다음의 디렉토리를 찾아 문자열 값을 새로 만들어주도록 합니다.

\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor

여기까지 진행이 되셨으면 끝입니다. 다시 CMD 창을 열어서 ls를 입력해보세요! 이제 매번 doskey ls = dir 하지 않아도 매번 ls를 입력하면 디렉토리를 확인하실 수 있습니다. 

I used the following instructions to upgrade from Node.js and NPM version 6.14.14 to 7.23.0 on a Mac. It's very easy and simple.

▶ Node.js Version Upgrade 

1. clean NPM's cache

sudo npm cache clean -f

2. Install module called 'n' which is Node.js version management helper.

sudo npm install -g n

3. Install stable or latest version Node.js

sudo n stable

by use 'n', you can interarctively manage your node.js version.

• n latest (latest version)
• n stable (stable version)
• n lts (lts version)
• n x.x.x (specific version)

4. Version check

node -v

▶ NPM Version Upgrade

1. Install npm 

sudo npm install -g npm

2. Version check

npm -v

SQLP (Structured Query Language Professional)

SQLD (Structured Query Language Developer)

1. 개요

SQL?

SQL은 관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어입니다.

SQLD

한국데이터산업진흥원(KData)에서 주관하는 국가공인 민간자격증으로 Structured Query Language + Developer의 약자로 SQL 개발자를 의미합니다. 국가공인자격인 정보처리기사와 자주 비교되지만 정보처리기사보다는 조금 더 전문적이고 실무에 가까운 자격이라고 할 수 있습니다.

SQLP

SQLD와 마찬가지로 한국데이터산업진흥원에서 주관하는 국가공인 민간자격증으로 Structured Query Language + Professional의 약자이며 SQL 전문가를 의미합니다. SQLD의 상위 자격증입니다

2. 응시자격

SQLD

별도의 응시자격 제한 요건이 없습니다.

SQLP

필기 시험일 기준으로 경력/학력 또는 자격기준 중 한 가지 이상 요건 충족시에만 응시가 가능합니다

경력/학력 기준

• 학사학위 이상 취득자
• 전문학사학위 취득 후 실무경력 2년 이상인 자
• 고등학교 졸업 후 실무경력 4년 이상인 자

자격기준

• 국내·외 데이터베이스 관련 자격을 취득한 자
• 데이터아키텍처 전문가(DAP), 데이터아키텍처 준전문가(DAsP), SQL 개발자(SQLD) 자격을 취득한 자

3. 시험과목

SQLD (90분 - 50문항)

1과목 데이터 모델링의 이해 (10문항)
         - 데이터 모델링의 이해
         - 데이터 모델과 성능

2과목 SQL 기본 및 활용 (40문항)
         - SQL 기본
         - SQL 활용
         - SQL 최적화 기본 원리

SQLP (180분 - 필기 70문항 / 실기 2문항)

필기

1과목 데이터 모델링의 이해 (10문항)
         - 데이터 모델링의 이해
         - 데이터 모델과 성능

2과목 SQL 기본 및 활용 (20문항)
         - SQL 기본
         - SQL 활용
         - SQL 최적화 기본 원리

3과목 SQL 고급활용 및 튜닝 (40문항)
         - 아키텍처 기반 튜닝원리
         - Lock과 트랜잭션 동시성 제어
         - SQL 옵티마이저 원리
         - 인덱스와 조인
         - 고급 SQL 튜닝

실기

SQL 고급활용 및 튜닝 실무 (2문항)

4. 합격기준

SQLD : 100점 만점 기준 60점 이상, 과락 기준 40점 미만

SQLP : 100점 만점 기준 75점 이상, 과락 기준 40점 미만 + 응시자격심의 서류 통과자

5. 시험일정

2021년 기준 시험일정입니다.

6. 응시수수료와 실시기관 홈페이지

- 응시료 (2021. 09. 12 기준)

SQLD : 50,000원

SQLP : 100,000원

- 실시기관 및 시험 전반에 대한 안내 : KData(한국데이터산업진흥원)

7. 유효기간

SQLD, SQLP : 2년 (보수교육 이수 후 영구자격으로 전환)

8. SQLD, SQLP 자격증을 취득해야하는 이유?

• 높은 취득 난이도로 인한 SQL 스킬 증명
  SQLD의 경우에도 SQL에 전문성이 강화된 시험으로 60점 합격의 시험치고도 꽤나 어려운 난이도를 자랑하고 있어 인정받는 시험이고, SQLP의 경우에는 75점 합격에 실기까지 포함된 굉장히 어려운 시험으로 취득 자체만으로도 SQL에 대한 높은 이해능력을 인정받을 수 있습니다.
• 보수교육 이수만 하면 영구자격
  이전에 알아본 CCNA CCNP와 같은 자격은 3년의 자격 유효기간이 있으나 SQLD, SQLP는 보수교육을 이수하면 영구자격으로 전환되어 추후에 다시 자격시험에 응시하지 않아도 되는 장점이 있습니다.
• DB 실무에 도움이 되는 자격
  Oracle 이외에도 MySQL, MS-SQL, 요즘 핫한 PostgreSQL 등 모두에 공통적으로 활용가능한 SQL 기본 문법에 대한 능력에 대한 평가를 받을 수 있기 때문에 DB 실무에서도 폭넓에 활용이 가능한 지식을 다루는 자격이라고 볼 수 있습니다. 

최근 DB와 관련된 수업을 들으면서 관심이 생긴 SQLD, SQLP 자격에 대한 정리를 해보았습니다. SQLP의 경우 상당히 난이도가 있고 합격 기준 또한 높아서 쉽지 않더라도, SQLD의 경우는 한 번 도전해볼만한 메리트가 있다고 생각합니다. 다만 다른 국가공인 자격에 비해 응시료가 높은 편이라 충분히 준비되었을 때 응시하는 것이 좋아보입니다. 

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

이번 시간에는 각 기사(Article)를 선택할 때 표시될 수 있는 핸들러와 템플릿을 추가하도록 하겠습니다.

1. 라우터 설정

이전 라우터와 동일한 방식으로 단일 기사에 대한 요청을 처리하기 위해 새 라우터를 설정하도록 합니다. 모든 기사들의 핸들러는 동일하겠지만, 각 기사별 URL은 다를 수 있다는 점을 고려해야 합니다. Gin을 사용하면 다음과 같이 경로 매개변수를 정의해서 해당 조건을 처리할 수 있습니다.

router.GET("/article/view/:article_id", getArticle)

이 라우터는 위 경로와 맞는 요청에 대해 라우터를 일치시키고, 라우터의 마지막 부분 값을 article_id 에 저장하도록 합니다. 이 라우터는 getArticle을 정의합니다.

이로 인해 업데이트된 routes.go 파일의 코드는 다음과 같습니다.

▶ routes.go

// routes.go

package main

func initializeRoutes() {

  // 인덱스 라우터 처리(Handle)
  router.GET("/", showIndexPage)

  // /article/view/some_article_id 부분에 대한 GET 요청 처리
  router.GET("/article/view/:article_id", getArticle)

}

2. 뷰 템플릿 작성

우리는 templates/article.html 이라는 이름으로 새로운 템플릿을 생성할 필요가 생겼습니다. 해당 파일은 index.html 템플릿과 유사한 방법으로 만들 수 있습니다. 다만 이 경우 기사 목록이 포함된 Payload 변수 대신 단일의 기사가 포함될 것입니다.

▶ article.html

<!--article.html-->

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

<!--기사 제목을 표시합니다-->
<h1>{{.payload.Title}}</h1>

<!--기사 본문 내용을 표시합니다-->
<p>{{.payload.Content}}</p>

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

3. 라우터 핸들러 생성

기사 페이지 핸들러 getArticle은 다음의 작업을 수행합니다.

3-1. 표시할 기사의 ID를 추출합니다

알맞는 기사를 가져와 표시하려면 먼저 Context에서 ID를 추출해야 합니다. 추출하는 방법은 다음과 같습니다.

c.Param("article_id")

여기서의 c 는 Gin을 사용할 때 라우터 핸들러의 매개변수인 Gin Context를 의미합니다.

3-2. 기사 가져오기

이 부분은 models.article.go 파일에 정의된 getArticleByID() 함수를 통해 수행할 수 있습니다.

article, err := getArticleByID(articleID)

models.article.go에 포함된 getArticleByID 함수는 다음과 같습니다

func getArticleByID(id int) (*article, error) {
  for _, a := range articleList {
    if a.ID == id {
      return &a, nil
    }
  }
  return nil, errors.New("기사를 찾을 수 없습니다")
}

이 함수는 기사 목록을 반복하고 ID가 전달된 ID와 일치하는 기사를 반환합니다. 일치하는 기사가 없으면 오류를 반환합니다.

3-3. 기사를 전달하는 article.html 템플릿을 렌더링합니다

다음과 같은 코드를 사용해 수행할 수 있습니다.

c.HTML(
    // ----- HTTP Status를 200(OK)로 설정합니다 ------ //
    http.StatusOK,
    // ----- article.html 템플릿을 사용합니다 ------ //
    "article.html",
    // ---- 페이지에서 사용하는 데이터를 전달합니다 ----- //
    gin.H{
        "title":   article.Title,
        "payload": article,
    },
)

위의 코드를 포함하여 업데이트된 handlers.article.go 파일은 다음과 같이 구성될 것입니다.

▶ handlers.article.go

// handlers.article.go

package main

import (
  "net/http"
  "strconv"

  "github.com/gin-gonic/gin"
)

func showIndexPage(c *gin.Context) {
  articles := getAllArticles()

  // 템플릿 렌더링을 위해 Context의 HTML 메소드 호출
  c.HTML(
    // ----- HTTP Status를 200(OK)로 설정합니다 ------ //
    http.StatusOK,
    // ----- article.html 템플릿을 사용합니다 ------ //
    "index.html",
    // ---- 페이지에서 사용하는 데이터를 전달합니다 ----- //
    gin.H{
      "title":   "Home Page",
      "payload": articles,
    },
  )
}

func getArticle(c *gin.Context) {
  // ----- 기사 ID가 유효한지 확인합니다 ----- //
  if articleID, err := strconv.Atoi(c.Param("article_id")); err == nil {
    // ----- 기사가 존재하는지 확인합니다 ----- //
    if article, err := getArticleByID(articleID); err == nil {
      // Call the HTML method of the Context to render a template
      c.HTML(
        http.StatusOK,
        "article.html",
        gin.H{
          "title":   article.Title,
          "payload": article,
        },
      )

    } else {
      // ---- 기사를 찾을 수 없는 경우 오류와 함께 중단합니다 ---- //
      c.AbortWithError(http.StatusNotFound, err)
    }

  } else {
    // ---- URL에 잘못된 기사 ID가 지정된 경우 오류와 함께 중단합니다 ---- //
    c.AbortWithStatus(http.StatusNotFound)
  }
}

이제 어플리케이션을 Build하고 실행시켜봅니다. http://localhost:8080/article/view/1 에 접속하면 다음과 같은 화면이 뜨게됩니다.