작성일 | Edited on | In | 댓글:

Vue.js

Vue.js는 개발자 ‘에반 유(Evan You)’가 MVVM 패턴(애플리케이션 개발 디자인 패턴)에서 영감을 받아 만들었으며, MVVM 패턴 중 ViewModel(VM) 부분의 기능을 담당하는 프레임워크입니다.

MVVM 패턴이란?

Vue.js 특징

  • 가상 DOM을 사용합니다.
  • 컴포넌트를 제공합니다.
  • 뷰에만 집중을 하고 있고, 라우터, 상태관리를 위해선 써드파티 라이브러리를 사용합니다.

MVVM 패턴

View

1
2
3
<div id="simple">
	<h2> {{ message }} </h2>
</div>

View Model

1
2
3
var simple = new Vue({
  ...
})

Model

1
2
3
var model = {
	message: "..."
}

｛{ message }｝ : 보간법(Interpolation), 콧수염 표현식(Mustache Expression)

HTML 요소에는 <div>｛{ message }｝</div>와 같이 괄호로 감싼 템플릿 표현식을 사용해 선언적으로 HTML DOM에 데이터를 렌더링합니다.

<template>태그

렌더링 내용에는 포함되지 않는 태그. 단지 요소들을 그룹으로 묶어주기 위한 용도로만 사용합니다.

참고 링크

작성일 | Edited on | In | 댓글:

데모이자 도큐먼트 페이지 보자마자 너무 이뻐서 선택하게된 테마, 도큐먼트도 상세하게 잘 설명되어있어 마음에 쏙 들었다.

설치하기(Installation)

1. 테마 설치

1
2
$ cd [myBlog] # 내 블로그(Hexo Project) 폴더로 이동
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

2. Hexo 환경파일(_config.yml)의 theme 속성 변경

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

3. Hexo 서버 재시작

1
2
hexo clean
hexo s # hexo server

테마 환경 설정

테마 환경파일 위치 : themes/next/_config.yml

  • 아카이브(Archive) 내에 응원메세지(cheers) 비활성화 하기.
    (한국어로 “음..! 총 n개의 포스트 포스트를 마저 작성하세요”라는 메세지가 출력되는데 마치 내 포스트가 전부 미완성인 것만 같다.)

    1
    2
    # Enable "cheers" for archive page.
    cheers: false

    themes/next/languages/ko.yml파일에 있는 해당 문구를 변경해도 된다.

  • 공통 아이콘
    환경 파일 내부에서 사용되는 아이콘의 이름은 모두 font-awesome(4.7버전)을 사용한다. 각 아이콘의 이름은 다음 링크를 참고한다.
    font-awesome (https://fontawesome.com/v4.7.0/icons/)

메뉴항목(페이지) 추가하기

공통 : 설정파일에 원하는 메뉴항목을 추가해준다. 각 항목은 Key: value 쌍으로 이루어져있으며, ‘Key’는 해당 메뉴의 이름, ‘value’는 URL params값과 보여지는 아이콘 이름을 설정할 수 있다. 두 개의 값은 ||로 구분한다.

1
2
3
4
5
6
7
8
9
10
# themes/next/_config.yml
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat

카테고리

1) 환경파일(themes/next/_config.yml)의 categories 항목을 추가해주고, 다음을 입력하여 페이지를 추가해준다.

1
$ hexo new page categories

2) 추가된 파일(/source/categories/index.md)을 다음과 같이 수정해준다.

1
2
3
4
5
6
---
title: 카테고리(categories)
date: 2019-05-16 10:10:40
type: "categories"
comments: false
---

3) 포스트 작성 시 상단 헤드 내용에 categories 항목을 추가 작성해준다.

1
2
3
4
5
---
title: Hexo 테마 - Next
categories: Blog
...
---

(TIP: /scaffolds/폴더 내부 파일에 항목을 추가해주면 hexo new명령어로 포스트 작성 시 항목이 자동으로 붙는다.)

tags

1) 환경파일(themes/next/_config.yml)의 tags 항목을 추가해주고, 다음을 입력하여 페이지를 추가해준다.

1
$ hexo new page tags

2) 추가된 파일(/source/tags/index.md)을 다음과 같이 수정해준다.

1
2
3
4
5
6
---
title: 태그(tags)
date: 2019-05-16 10:10:40
type: "tags"
comments: false
---

3) 포스트 작성 시 상단 헤드 내용에 tags 항목을 추가 작성해준다. 태그들은 하이픈(-)의 리스트 형태로 구분한다.

1
2
3
4
5
6
7
8
9
---
title: Hexo 테마 - Next
tags:
- blog
- hexo
- theme
- next
...
---

(TIP: /scaffolds/폴더 내부 파일에 항목을 추가해주면 hexo new명령어로 포스트 작성 시 항목이 자동으로 붙는다.)

Widgets

참고 링크

작성일 | Edited on | In | 댓글:

Hexo를 이용해 Markdown(.md)으로 글 포스팅을 하다보면 코딩하는 것과 비슷한 느낌을 받는다.(포스팅을 VScode로 해서그런가…)
프론트 페이지 작업을 하다보면, 저장할 때마다 Refresh(F5)를 해주는게 너무 귀찮은일이 아닐 수 없다.
이런 불편함을 해소하기 위해 나온게 live-reload(browsersync) 기능인데, Hexo에도 이런 기능을 하는 플러그인이 있길래 설치해본다.

설치하기(Installation)

1
2
$ npm install hexo-browsersync --save
$ hexo server --draft --open # 서버 재시작

실행하기

모듈을 설치하고 그냥 똑같이 hexo server 명령어를 통해 실행하면 함께 시작된다.

1
2
3
4
5
6
7
8
9
$ hexo server --draft --open
INFO  Start processing
[Browsersync] Access URLs:
 ----------------------------------
          UI: http://localhost:3001
 ----------------------------------
 UI External: http://localhost:3001
 ----------------------------------
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

시작하고 페이지에 들어가보면, 아래와 같이 우측상단에 Browsersync: connected라는 연결메세지가 나타난다.

연결된 후 글을 수정하고 저장을 하면 다음과 같이 출력되면서 페이지가 자동으로 새로고침된다.

1
2
3
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...

문제

어떤 조건이 되면, 일부 페이지가 정상적으로 렌더링되지 않는 현상이 있다.

작성일 | Edited on | In | 댓글:

Github을 사용하고 있는 개발자들이 많이 사용하고 있는 Github Pages를 활용한 블로그를 만들어본다.
방법은 정적 사이트 생성기(Generator, 마크다운.md파일을 HTML.html파일로 변환해준다)를 활용하는데, 알려진 제너레이터로는 :

  • jekyll
  • hugo
  • gatsby
  • hexo

등이 있다.

나는 여기에서 Hexo를 사용해보도록 한다.

시작하기(Setup)

  • NodeJS 설치
  • Git 설치
  • Github에 Repository 2개 생성
    1. 배포(호스팅)용 Tip : 저장소 이름은 <github계정>.github.io로 하면 편합니다.
    2. Hexo프로젝트 리소스 관리용 Tip : 저장소 이름은 상관없습니다.

Hexo 시작

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Hexo cli 설치(글로벌)
$ npm install -g hexo-cli

# Hexo 초기화
$ hexo init myblog
$ cd myblog

# 내부 모듈 설치
$ npm install

# Github 저장소에 배포를 위한 hexo-deployer-git을 설치
$ npm install hexo-deployer-git --save

# 로컬 서버 시작(기본 http://localhost:4000)
$ hexo server

Hexo 블로그 프로젝트 폴더 구조

1
2
3
4
5
6
7
8
├── _config.yml # Hexo 환경설정 파일
├── package.json # npm 환경 파일
├── scaffolds # 포스트 생성시 참조되는 레이아웃(page, post, draft) 파일들이 있는 폴더
├── source # 포스트(.md) 파일들이 저장되는 폴더
|   ├── _drafts # 임시 저장하는 포스트가 담기는 폴더. generate 명령어 실행시 제외 됨, publish 명령어로 source/_posts/ 폴더로 이동
|   └── _posts # 실제 포스트되는 파일이 담기는 폴더. generate 명령어로 public/ 폴더로 이동
├── public # source/ 의 포스트 파일들이 .html파일로 변환(generate)되어 저장되는 위치. clean 명령어로 지울 수 있고. deploy 명령어로 실제 서버에 배포된다.
└── themes # 블로그 테마가 설치되는 폴더

프로젝트 리소스 관리를 위한 github commit & push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 버전관리 폴더 생성 .git/
$ git init

# 파일 add
$ git add .

# 최초 commit
$ git commit -m "first commit"

# github 저장소에 remote
$ git remote add origin https://github.com/seungseop/seungseop.github.io.src.git

# github 저장소에 push
$ git push -u origin master

환경설정(Configuration)

_config.yml 파일 내부에서 환경 설정을 수정할 수 있습니다.
환경설정은 최소한 필요한 것만 다루고, 별도로 상세하게 다루도록 하겠다.
공식문서 >

Site 정보

1
2
3
4
5
6
7
8
9
10
11
12
13
## 웹 사이트의 제목. <title> 태그에 포함됨(테마에 따라 페이지에 노출)
title: Sam's
## 웹 사이트의 부제(테마에 따라 페이지에 노출)
subtitle: Web Story
## 웹 사이트에 대한 설명. <meta> 태그의 description 속성 값에 포함됨
description: Web Developer
## 작성자 이름
author: Sam
## 웹 사이트의 주 사용언어. <html> 태그의 lang 속성 값에 포함됨. 기본 값은 en
language: ko
## 웹 사이트에서 사용하는 timezone. 기본적으로 PC의 시간값을 사용.
## https://en.wikipedia.org/wiki/List_of_tz_database_time_zones에서 확인.
timezone: Asia/Seoul

URL 정보

1
2
3
4
5
6
7
8
9
## 이 웹 사이트의 URL
url: https://seungseop.github.io/
## 웹 사이트의 루트 디렉토리
root: /
## 게시글의 Permalinks 형식.
## https://hexo.io/ko/docs/permalinks 에서 확인.
permalink: :year/:month/:day/:title/
## Permalink 각 부분(segment)의 기본값
permalink_defaults:

Deployment 정보

1
2
3
4
5
6
deploy:
  type: git
  ## 자신의 Github의 Repository 정보를 입력
	repo: https://github.com/seungseop/seungseop.github.io
	branch: master
	message:

포스트 작성하기

new : 새 포스트 작성하기

1
2
# layout을 생략하면 환경설정 파일에 있는 'default_layout'값을 기준으로 생성된다.
$ hexo new [layout] <title>

생성하면 다음과 같은 경로에 Markdown(.md) 파일이 생성 된다.

1
2
3
ㄴ source
  ㄴ _posts
    - <title>.md

생성된 파일의 기본 내용은 scaffolds/폴더 내에 있는 레이아웃 이름의 파일(템플릿)에서 가져온다.

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
categories: 
tags:
---

< 이곳에 Markdown으로 내용을 작성한다. >

배포하기(Deploy)

배포 전에는 항상 clean명령어로 정적 리소스 폴더를 지워주는게 좋다.

1
$ hexo clean

정적 리소스(public/ 폴더) 생성하기

1
$ hexo generate

배포하기

1
2
3
$ hexo deploy
# Generate와 Deploy를 동시에 할 수도 있다.
$ hexo deploy --generate

초안(_draft) 작성하기

Hexo는 게시글의 초안 작성은 source/_drafts폴더에서 할 수 있습니다.
환경 설정(_config.yml)의 default_layout 항목을 post가 아닌 draft로 설정한다면 (레이아웃 생략한)new 명령어로 draft상태의 게시글을 작성할 수 있습니다.

초안을 로컬 서버에서 보고 싶다면 --draft옵션을 주면됩니다.

1
$ hexo server --draft

매번 --draft옵션을 주기 싫다면 환경 파일의 render-drafts 항목을 true로 변경해주세요.

1
render_drafts: true

작성된 초안은 source/_posts폴더로 게시 할 수 있습니다.

1
$ hexo publish [layout] <filename>

배포가 완료되면 설정했던 URL 주소(https://seungseop.github.io/)로 접근해서 정상적으로 반영이 되었는지 확인한다.

0%