2021-11-26 게시 됨2021-12-11 업데이트 됨git8분안에 읽기 (약 1193 단어)

git flow 이해하기

gitflow는 git을 이용해 개발하는 방법론이다.

gitflow?

git flow는 5개의 branch를 사용한다.

main : 제품을 배포하는 branch이다. 실제 사용자가 사용하는 프로덕트의 코드가 이를 통해 배포된다.
release : main으로 보내기 전 검사하고 메시지를 작성하는 branch이다.
develop : 개발하는 branch고 개발자들이 이 branch를 기준으로 새로운 branch를 만들어 여기에 merge한다.
feature : 단위 기능을 개발하는 branch로 기능 개발이 끝날 경우 develop branch에 합친다.
hotfix : 배포후에 긴급히 수정해야할 버그가 발생했을 때 수정하는 branch이다

main과 develop가 메인으로 나머지 브랜치들은 상황에 따라 만들었다 지웠다 한다.

초기 설정

repo가 있어야 한다.
github에서 repo를 만들고 초기 설정을 해준다.

git flow 초기화를 해준다.
맨 위 두 개의 branch명만 확인하면 된다.
기본값이 지정되어 있을 경우 엔터를 누르면 된다.

1	git flow init

develop이 생성되었는지 확인한다.
현재 gitflow 작업이 끝남에 따라 자동으로 develop 브랜치로 이동하였다.

1	git branch

만들어진 develop을 원격 저장소에 알린다.
로컬엔 develop가 있지만 원격저장소에선 push하기 전 까지 알 수 없다.

1	git push -u origin develop

이걸로 main과 develop은 같은 상태가 되었다.

git flow 이용하기.

git flow를 이용한 개발은 다음과 같이 이루어진다.

기능 개발을 위해선 develop에서 feature/기능명 을 만들고 작업한 후 develop에 merge한다.
여러 기능들이 각각의 feature/기능명 브랜치에서 작업이 완료되었을 경우 release에 merge하고
부족한 점을 보완하고 버그를 픽스하고 기술문서를 작성한다.
release 를 develop과 main에 merge한다.
main에서 버전 태그를 붙여서 배포한다.

git으로 작업한다면 상당히 복잡하지만 git flow를 통해 작업을 편하게 할 수 있다.
window기준으로 git설치시 git flow도 자동으로 설치된다. macOS의 경우 별도의 설치가 필요하다.

차례대로 진행해보자.

feature/기능명 만들기
git flow에선 다음의 커맨드를 이용하여 기능개발을 시작할 수 있다.
나는 README라는 기능명으로 만들었다.

1	git flow feature start '기능명'

생성된 브랜치를 확인하면

1	git branch

feature/'기능명'이 잘 생성된 것을 확인할 수 있다.

작업하기
git flow에서 feature 명령어를 사용할 경우 자동으로 기능개발을 위한 branch로 이동한다.

이 상태에서 README를 임의로 수정하였다.

기능개발 종료하기
작업이 끝났으면 기능 개발 단위별로 변경사항을 add하고 commit 해준다. push는 하지 않아도 된다.

1
2
3

git status
git add [변경된 파일들]
git commit -m "커밋 메시지"

그 후 기능개발을 끝내는 커맨드를 입력한다.
이 커맨드는 develop와 feature/기능명의 내용을 비교하고 변경점을 적용한 후 merge한다.

merge가 완료되면 현재 branch를 develop으로 옮긴다.
작업이 완료된 후 git branch로 확인하면 feature 기능명이 없어진 걸 확인할 수 있다.
변경사항을 develop 으로 push 해준다.
push전에 pull을 통해 최신상태로 유지해준다.

git flow feature finish "기능명"
git branch
git status
git pull origin develop
git push origin develop

릴리즈하기

위 작업을 끝냈다면 develop엔 변경사항이 적용되어 있다.
릴리즈하는 명령어는 다음과 같다.
명령어 입력후 커밋 메시지를 작성할 수 있다.

1 2	git flow release start [version] git flow release finish [version]

변경사항을 main branch에도 적용하기

다음 명령어를 통해 main에 tags와 변경 사항등을 적용할 수 있다.
여기까지 했다면 main과 develop은 같은 상태로 기능 추가가 무사히 완료되었다.

1
2
3

git checkout main
git push --tags
git push origin main

느낀점

git flow는 굉장히 좋은 툴 같다.
브랜치를 만들어 작업하고 변경사항을 적용하는 것이 기존의 사용자에게 영향을 주지 않고 기능들을 추가할 수 있어 안정적이라고 생각한다.
gitflow를 이용한 협업과 프로젝트 관리도 간단히 경험해보았는데 상당히 유익한 경험이였다.
이것 또한 조만간 문서로 작성해보아야 겠다.

2021-11-26 게시 됨2021-12-19 업데이트 됨blog3분안에 읽기 (약 396 단어)

hexo에서 이미지 업로드하기

++ 수정

아래의 방법은 간단하지만 랜더링 최적화를 위해선 정적 이미지파일을 사용하는 것을 추천합니다!

hexo는 Markdown으로 게시글을 작성한다. 때문에 이미지를 업로드 하는 과정이 쉽지 않다.

hexo-icarus테마-수정하기 게시글을 작성하며 사진을 업로드 할 때는

_posts의 상의 폴더인 source 폴더에 img 폴더를 만들고 거기에 이미지를 저장해서 img태그의 src속성에 상대경로를 적어 사용하였다.

이렇게 하니 home으로 접근할 때는 정상적으로 이미지를 출력하지만 tag 탭이라든지 경로가 바뀌면 이미지가 다음과 같이 깨졌다.

어떻게 해결할지 고민하다가 hexo 소스들을 정리해둔 private 레포가 생각났다.

블로그 관련 레포에 모든 정보를 모아서 관리하면 수월할 것이라 생각해 issue탭에 이미지를 업로드하고(깃허브 서버에 올린 뒤) 이 링크를 받아서 사용하였다.

그랬더니 현재 경로와 상관없이 정상적으로 이미지 출력에 성공하였다.

하지만 이미지를 하나씩 업로드 하는 방식이 효율적이진 않은데, 다음에 이미지를 업로드 할 때는 레포에 업로드 해보고 이용할 수 있는지 해봐야겠다.

2021-11-26 게시 됨2021-12-13 업데이트 됨blog5분안에 읽기 (약 688 단어)

hexo icarus 테마 내 정보 수정하기

Icarus 테마를 이용해 배포는 완료했지만 블로그가 예쁘지 못하다.
또한 사이트 내에 표시되는 내 정보를 수정해주었다.
이를 수정해주었다.

hexo에는 두 개의 yml 파일이 있다.
_config.yml 파일과 _config.icarus.yml파일이다.

사이트 제목 바꾸기

_config.yml에선 웹페이지에 대한 정보를 설정할 수 있다.
_config.yml의 # Site를 다음과 같이 수정해주었다.

# Site
title: 개발 블로그
subtitle: ""
description: 프론트엔드를 공부하고 있습니다.
keywords:
author: 박성현
language: ko
timezone: "Asia/Seoul"

favicon과 홈버튼 바꾸기

_config.yml에선 favicon과 icon도 설정할 수 있다.

# Version of the configuration file
version: 4.0.0
# Icarus theme variant, can be "default" or "cyberpunk"
variant: default
# Path or URL to the website's logo
logo: /img/logo.svg
# Page metadata configurations
head:
  # URL or path to the website's icon
  favicon: /img/favicon.svg

나는 themes/icarus/source/iimg의 favicon.svg와 logo.svg파일을 아주귀여운강아지에서 찾아 svg를 바꾸어 주었다.

_config.yml에 대한 더 많은 정보는 Hexo 공식문서에서 찾아볼 수 있다.

자기소개와 설명 바꾸기

위에서 소개와 이름을 작성해도 실제 사이트에 접속하면 자기소개에 반영되지 않는다
_config.yml에서 설정한 정보들은 다음 그림과 같이 <head>태그에 들어간다

사이트에 표시될 정보들은 _config.icarus.yml 에서 설정해주어야 한다.
_config.icarus.yml 파일을 다음과 같이 수정해주었다.

깃허브와 facebook등은 천천히 수정할 예정이다.

widgets:
  # Profile widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: profile
    # Author name
    author: 박성현
    # Author title
    author_title: 프론트엔드를 공부하고 있습니다
    # Author's current location
    location: Seoul
    # URL or path to the avatar image
    avatar: /img/profile.webp
    # Whether show the rounded avatar image
    avatar_rounded: true
    # Email address for the Gravatar
    gravatar:
    # URL or path for the follow button
    # Links to be shown on the bottom of the profile widget
    social_links:
      Github:
        icon: fab fa-github
        url: "https://github.com/pshdev1030"
      Linkedin:
        icon: fab fa-linkedin
        url: "https://www.linkedin.com/in/pshdev1030"
  # Table of contents widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: toc
    # Whether to show the index of each heading
    index: true
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: true
    # Maximum level of headings to show (1-6)
    depth: 3
  # Recommendation links widget configurations
  # Categories widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: categories
  # Recent posts widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: recent_posts
  # Archives widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: archives
  # Tags widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: tags
  # Google FeedBurner email subscription widget configurations
  # Google AdSense unit configurations
# Plugin configurations
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/

2021-11-25 게시 됨2021-11-30 업데이트 됨blog4분안에 읽기 (약 631 단어)

hexo +github를 이용하여 블로그 만들기

hexo와 github를 이용하여 블로그를 만들었다.

환경

node.js
github

Hexo 설치

1	npm install hexo-cli -g

원하는 디렉토리로 이동하여 hexo 초기설치를 해준다.

1
2
3

hexo init [블로그명]
cd [블로그명]
npm install

설치가 완료되면

1	hexo server

localhost:4000에 접속하여 확인할 수 있다.

icarus 테마 적용하기

[블로그명] 디렉토리의 thems 폴더에 가서 icarus repo를 clone한다.

1 2	cd ./themes git clone https://github.com/ppoffice/hexo-theme-icarus.git

그리고 clone된 hexo-theme-icarus 폴더의 이름을 icarus로 바꾼다.

1	mv hexo-theme-icarus icarus

그리고 나서 로컬로 다시 실행한다

1	hexo server

에러가 뜨면 필요한 패키지들을 설치한다.
설치가 안 될 경우 –legacy-peer-deps 플래그를 붙인다.

1	npm install --save [모듈들]... --legacy-peer-deps

설치 후 로컬로 다시 실행하면 icarus 테마가 적용된다

적용되지 않을 경우 ide를 껐다가 다시 킨 후 실행하면 된다.

1	hexo server

배포하기

깃허브는 사용자계정.github.io로 무료 호스팅된 페이지를 사용할 수 있게 해준다.

사용자계정.githob.io라는 이름의 저장소와 블로그 소스파일을 저장할 저장소 총 두 개의 저장소를 만든다.

그리고 Settings 페이지의 Github Pages 항목에서 Source 옵션을 Master or Main으로 설정한다.

다음 루트경로의 _config.yml 파일의 deploy항목을 다음과 같이 수정한다

deploy:
  type: git
  repo: https://github.com/사용자계정/사용자계정.github.io.git
  branch: 브랜치명

배포를 위해선 플러그인도 설치해주어야 한다.

1	npm install --save hexo-deployer-git

정적 리소스 생성하고 배포하기

정적 리소스는 다음과 같이 생성한다.

1	hexo generate

배포는 다음과 같이 한다.

1	hexo deploy

정적 리소스를 삭제하는 명령어는 다음과 같다.
수정했는데 업데이트가 되지 않을 경우 사용하면 된다.

1	hexo clean

정적 리소스 생성 및 배포는 다음과 같이 하면 된다.

1	hexo deploy --generate

소스파일 저장하기

git init
git remote add origin 소스파일을 저장할 저장소
git add .
git commit -m "메시지"
git push origin master

Reference

https://velog.io/@recordboy/%ED%97%A5%EC%86%8CHEXO%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B9%83%ED%97%88%EB%B8%8C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0