뷰프레스 사전준비

뷰프레스를 쓰려면, 어렵지는 않지만 필요한 몇 가지가 있어요.

1. 뷰프레스에 대한 기본적인 이해가 필요해요.(위 뷰프레스:소개 문서 정도만 알아도 무방해요.)
2. 깃허브를 몇 번 쓴 경험이 있다면 좋아요.
   • 없다면 아래 깃허브:소개문단을 참고해보세요.
3. 마지막으로, 아래 설명되어있는 과정을 잘 따라가시면 돼요.

오류를 찾으셨다면, 메일주세요!

밑에 오는 내용들 중 오류가 있다면, audgkwns44@gmail.com 으로 메일 부탁드려요!
메일 제목이 [UNTIL][오류제보] 로 시작되면 더 좋구요.

깃허브:소개

항상 저는, 오피셜 가이드를 먼저 추천해요.

오피셜 가이드open in new window만큼 완벽한 설명은 없으니까요. 물론 이번에도 영어구요 😃
아래 쓰여지는 내용도 오피셜 가이드를 많이 참고하여 쓰여졌어요.

여기서 하는 깃허브에 대한 이야기는

어디까지나 블로그를 만들기 위한 정말 '기본적인 이야기'들만 적어놓은 거에요. 더 많은 쓰임새나 사용법을 알고싶으시다면, 음...따로 공부하셔야 해요!

영어로는 GitHub, 한글로는 '깃허브'가 되겠죠. (간혹 '짓허브'라고 읽기도 해요.)
깃허브는 허브라는 이름에 어울리게, 공유 에 가장 큰 초점을 두고 있는 플랫폼이에요.

가능한 한 쉽게 설명하기 위해, 줄글보다 QnA식으로 적어놓을게요. 괜찮죠?

뭘 공유하나요?

---

음, 아주 핵심을 꿰뚫는 질문이네요. 깃허브는 그 이름에서 알 수 있듯이 '깃'을 위한 '허브'에요.
'공유하는 것==깃' 이라는 말은 아니구요, '깃 하기 위한 허브(저장소)' 쯤이 맞겠네요.

'깃' 하면서 여러분이 공유하는 것은, 여러분의 코드, 여러분의 프로그램, 여러분의 프로젝트에요.

그래서 깃이 도대체 뭔데요?

---

'깃'은 버전 관리 시스템이에요. 코드의 버전 관리와 공동 작업을 돕는 것이 깃의 주 역할이랍니다.

버전 관리라고 하면, 앱스토어 같은 곳에서의 버전 업데이트를 떠올리기 쉬워요. 하지만 그것보다는 구글 독스의 버전 관리(수정사항 업데이트) 내지는, 여러분의 레포트가 '보고서_최종.docx'에서 '보고서_최종_마지막.docx'이 되는 버전 관리에 가까워요.

지속적으로 일어나는 코드의 변화를 담고, 개발 과정이 저장되는 거죠. 이것들이 저장되는 공간이 바로 깃허브의 '레포지토리(저장소)' 구요.

로그인과 '깃'의 설치가 되어 있다면 깃허브를 통해 로컬 저장소에 코드나 프로그램을 불러올 수도 있어요. 개발 과정에서 변화가 생겼을 때 무엇이 바뀌었는지 볼 수도 있죠.

아래 그림은 제 블로그 설정파일 (.vuepress/config.js)의 변화 예시에요. 위와 같이, '기존 47번 줄의 ~~내용이 새로운 47번 줄 ~~로 바뀌었구나'는 걸 한 눈에 볼 수 있죠.

개발 과정이 저장된다는 점에서,
깃허브를 '사람들이 프로그램을 개발하는 과정'이라고 부풀려 말하기도 해요.

그렇다면 공동 작업은 어떻게 도울까요? 깃허브의 기능, '브랜치'가 바로 그 해답이에요.

아래 그림은 공식 가이드open in new window에 있는 브랜치에 대한 설명이에요.

• Create branch 마스터 브랜치에서 당신만의 새 브런치(복사본)를 만들어서,

• Commit changes 수정사항을 작업하고,

• Pull Request 해당 수정사항을 마스터 브랜치에 반영해달라고 요청하게 돼요.

• Discuss 동료들과 변경사항에 대해 토론해 '변경사항이 적합하다'고 판단되면

• Merge 마스터 브랜치와 합치게 되는 겁니다.

용어

---

깃허브와 깃을 이해하기 위해서, 마지막으로 알아야 할 것은 몇몇 용어들이에요.

한글	영어	뜻
커밋	commit	코드를 수정한 후, 수정사항을 반영하고자 신청하는 것
풀	pull	(특히 공동 작업에서) 변경된 사항들을 내 로컬 저장소로 가져오는 것
푸시	push	올라온 커밋(수정사항)을 레포지토리에 꽂아버리는 것
풀 리퀘스트	pull request	브랜치를 쪼개 올린 커밋에 대해, 수정이 끝난 브랜치를 마스터 브랜치에 머지해달라고 요청하는 것
클론	clone	'git clone'과 같은 명령어로 사용하게 되며, 특정 레포지토리를 내 로컬 저장소로 복사(다운로드)하는 것

푸시와 풀 리퀘스트의 차이가 뭔가요?

푸시(git push)는 커밋(commit, 수정사항)을 바로 반영해버리는 것(꽂는 것)이구,
풀 리퀘(pull request)는 수정사항을 반영해도 될까요? 하고 묻는 거에요.

이걸로, 깃허브:소개는 마칠게요. 이제는 블로그 개발 과정과 본격적으로 준비해야 하는 것들이에요 😃

대략적인 블로그 개발 과정

블로그를 어느 정도 구성한 다음, 내용이 추가될 때 마다 거치는 작업은 다음과 같아요.

1. 내용을 추가/수정/삭제한다.
   • 이 과정에서, dev를 이용해 제대로 수정되었는지 반복 검토하게 돼요.
2. 해당 수정 사항들을 Stage에 올린다(commit하기 전 검토 단계 쯤이라고 보면 돼요.)
3. Stage에 올라간 수정사항들을 Commit 한다.
4. Commit된 수정사항을 Push한다. (레포지토리 업데이트)
5. Deploying을 통해 블로그를 업데이트한다.

준비물 0: VScode

VScode, 비쥬얼 스튜디오 코드(Visual Studio Code)는 꼭 준비해야 할 필수품은 아니에요. 다만, 뷰프레스를 이용하여 편하게 블로그 문서를 작성하고, 관리하려면 권장되는 준비물일 뿐이죠.
VScode는 '소스코드 편집기'에요. 우리가 쓸 .md(마크다운) .js(자바스크립트) 등을 비롯해 다양한 코드나 파일을 읽고, 편집할 수 있어요.

코드블럭이나 Dev C++와 같은 IDE(개발 환경)이라고 보기에는 무리가 있지만, 정말 깔끔하고 편한 에디터에요.

VScode로 할 수 있는 것들?

거의 모든 언어를 편집할 수 있어요. 여러분이 확장팩(Extension)만 잘 깔아준다면요.
Python Extension을 깔아주면, python으로 코딩하고 빌드해볼 수 있구요,
C/C++ Extension을 깔아주면, C/C++의 구문 강조, 코드 편집 등이 가능하죠.

준비물 1: GitHub repository

내 블로그를 이루는 설정파일, 글, 디렉토리 등등...모든 것이 저장된 저장소가 가장 먼저 필요하겠죠?
그게 바로 레포지토리에요. 깃헙 오피셜 가이드:헬로월드open in new window를 보면 기본적인 레포지토리 만들기를 따라하실 수 있을거에요. 레포지토리 만들기는 정말 정말 쉬우니, 한 번 따라해보세요.
레포지토리 이름은 블로그 이름과는 관계없어요. 여러분이 하고 싶으신 대로 하면 돼요.

제 경우 블로그 이름은 "하준's 학습블로그"지만, 레포지토리 이름은 'study_b'에요.

네이밍 규칙

가능하면, 레포지토리 이름에 영문 대문자는 포함시키지 마세요. 나중에 고생할 수 있습니다.
숫자로 시작하지 않기, 특수문자 쓰지 않기, 공백 넣지 않기 등등 기본적인 것들도 지키시구요.

준비물 2: Git

레포지토리를 잘 만드셨나요? 이제 Gitopen in new window을 설치하세요.
깃을 설치해야 레포지토리를 로컬 저장소로 가져올 수 있고, 수정 사항을 깃허브로 보낼 수 있습니다.

준비물 3: Clone it

깃과 레포지토리가 모두 준비되었다면, 레포지토리를 가져옵시다.
깃허브 레포지토리에 들어가면, 오른쪽 위에 초록색 '↓Code' 버튼이 있어요.
이 버튼을 눌러서 나오는 주소를 복사해두세요.

자 이제, 스크립팅 환경을 켜주세요. CMD가 될 수도 있고, Windows PowerShell이 될 수도 있겠죠.
만약 VScode를 설치하셨다면, ctrl+백틱 을 통해 Windows PowerShell을 VScode 안에서 열 수도 있어요. 맥은...잘 모르겠어요 😓

자, cd 명령어를 통해 깃허브 레포지토리 복사하기 적당한 디렉토리로 이동하세요.
저는 깃 특성 상 가깝고 한글 디렉토리 이름이 없는, documents(문서)폴더 안에 깃허브용 폴더를 하나 만드시는 걸 추천드려요.

cd c:/
cd users
cd Username # Username 자리에 본인 컴퓨터 계정명을 입력해야 해요
cd documents

mkdir directoryname # directoryname이라는 이름을 가진 폴더를 만드는 명령어에요.
# 임의로 원하는 폴더명을 지정해도 좋아요. 단, 대문자는 지양해요.

cd directoryname # 위에서 임의 폴더명을 넣었다면 여기도 그걸로 실행하세요.

이제 레포지토리를 클론하세요:

git clone https://github.com/username/foo.git # 복사한 레포지토리 주소를 붙여넣으세요.

클론까지 다 되었네요. 수고하셨어요!

준비물 4: Node 와 yarn

앞으로 꼭 필요한 Node와 yarn을 설치할게요.
Node는 이 사이트open in new window에서 다운 및 설치가능하구(LTS로 받으세요!), yarn은 Node를 통해서 설치할거에요.

Node를 설치하실 때

Node 하나만 설치하세요. Node가 설치해준다고 하는 다른 들러리들은 모두 없어도 돼요.

설치하셨나요? 이제 확인해봅시다.

npm -version

했을 때, 버젼(x.xx.x)이 출력되면 정상이에요.

잠깐만요, 저는 npm이라는 걸 설치한 적이 없는데요?

앗 맞아요, 여러분이 설치한 건 Node.js지 NPM이 아니죠!
하지만, NPM 이 Node Package Manager 이랍니다. 안심하고 점검하세요!

yarn을 깔아야겠죠?

npm install yarn

마찬가지로, yarn이 잘 깔렸는지 확인합시다.

yarn -version

이번에도 버젼(x.xx.x)이 출력되면 잘 된거에요.

혹시 yarn -version 명령어가 실행되지 않나요?

'여기'를 클릭해서open in new window 파워쉘 보안 문제인지 확인해보세요!

준비물 마지막: yarn 초기화와 뷰프레스

yarn을 깔았다면, 초기 셋팅을 해 주어야 겠죠?
초기 셋팅은 언제나 프로젝트 디렉토리에서 하는 것 잊지 마시구요.

디렉토리로 이동하는 거, 다시 알고싶으면 누르세요. :)

cd c:/users/<username>/documents/<directoryName>

쉬운 명령어에요.

yarn install
yarn init -y

여기까지 하면, 뷰프레스를 '설치'할 준비가 끝난거에요. 축하해요!

바로, 뷰프레스를 여러분 블로그 폴더(레포지토리 클론)에 설치만 해 둡시다.😃

yarn add vuepress -D

-D 태그는, 현재 폴더에만 의존성으로 설치하는 거에요. (-G, 글로벌과 반대) 우리는 뷰프레스를 이 폴더에서(이 블로그를 위해) 사용할 거니까, 여기에다만 설치하면 되거든요.

축하드려요, 여기까지만 하면 뷰프레스로 블로그를 만들 '준비'는 모두 끝났어요.
다음 글에서는, 본격적으로 뷰프레스 공식 가이드 번역 작업이 시작돼요. 마지막 글에는 제가 겪은 오류들을 정리해 놓을 거구요. 혹시 뜻대로 진행되지 않고 오류가 발생된다면, 마지막 글에서 같은 오류가 있지는 않나 한 번 찾아보셔요!

사실, 준비물 4번부터는 뷰프레스 공식 가이드에도 중복되는 내용이랍니다.
뭐, 미리 준비하면 편하잖아요?