-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (139 loc) · 35.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>Daun's DevLog</title><link rel="manifest" href="/manifest.json"><meta name="application-name" content="Daun's DevLog"><meta name="msapplication-TileImage" content="/img/favicon.ico"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Daun's DevLog"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="description" content="개발일지 &amp; 스터디내용을 공유하는 공간입니다."><meta property="og:type" content="blog"><meta property="og:title" content="Daun's DevLog"><meta property="og:url" content="https://daunjung-dev.github.io/"><meta property="og:site_name" content="Daun's DevLog"><meta property="og:description" content="개발일지 &amp; 스터디내용을 공유하는 공간입니다."><meta property="og:locale" content="ko_KR"><meta property="og:image" content="https://daunjung-dev.github.io/img/og_image.png"><meta property="article:author" content="Daun Jung"><meta property="article:tag" content="개발 블로그"><meta property="twitter:card" content="summary"><meta property="twitter:image" content="/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://daunJung-Dev.github.io"},"headline":"Daun's DevLog","image":["https://daunjung-dev.github.io/img/og_image.png"],"author":{"@type":"Person","name":"Daun Jung"},"description":"개발일지 & 스터디내용을 공유하는 공간입니다."}</script><link rel="icon" href="/img/favicon.ico"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&family=Source+Code+Pro"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><script src="https://www.googletagmanager.com/gtag/js?id=G-BLP45CYPLE" async></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BLP45CYPLE');</script><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script><!--!--><!--!--><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/rss2.xml" title="Daun's DevLog" type="application/rss+xml">
</head><body class="is-2-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/img/logo.png" alt="Daun's DevLog" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">Home</a><a class="navbar-item" href="/archives">Archives</a><a class="navbar-item" href="/categories">Categories</a><a class="navbar-item" href="/tags">Tags</a><a class="navbar-item" href="/about">About</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a><a class="navbar-item search" title="검색" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-8-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-04-05T13:43:47.930Z" title="4/5/2021, 10:43:47 PM">2021-04-05</time> 게시 됨</span><span class="level-item"><time dateTime="2021-04-06T13:57:09.989Z" title="4/6/2021, 10:57:09 PM">2021-04-06</time> 업데이트 됨</span><span class="level-item">13분안에 읽기 (약 1967 단어)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/04/05/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2-React/">알고있는거 정리하기(2) React</a></h1><div class="content"><h2 id="목차"><a href="#목차" class="headerlink" title="목차"></a>목차</h2><hr>
<p><a href="#learning_for_react">1. Learning For React</a><br><a href="#what_is_react?">2. What is React?</a></p>
<hr>
<h2 id="Learnig-For-React"><a href="#Learnig-For-React" class="headerlink" title="Learnig For React"></a>Learnig For React</h2><h3 id="Javascript"><a href="#Javascript" class="headerlink" title="Javascript"></a>Javascript</h3><p>리액트를 배우기 위해서는 선행되어야 할 것으로는 <code>javascript</code>, <code>html</code>,<code>css</code> 등등 여러가지가 있겠지만, 단연 javascript는 그 중 핵심이라고 할 수 있다. 리액트 자체가 자바스크립트로 만들어진 라이브러리인만큼 자바스크립트가 어떤 언어인지 잘 아는 것 외에 리액트를 빠르고 깊게 이해하는 방법은 없다고 해도 무방하다.</p>
<p><code>javascript</code>는 스크립트에 대한 <a href="%22https://developer.mozilla.org/ko/docs/Web/JavaScript%22">MDN</a> 소개를 따르면,</p>
<blockquote>
<p>JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지의 스크립트 언어로서 제일 유명하지만 Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있습니다. JavaScript는 프로토타입 기반의 동적 다중 패러다임 스크립트 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다. 자세한 내용은 JavaScript에 대하여를 참고하세요.<br>이 문서는 JavaScript 언어 자체만 다루며 웹 페이지를 비롯한 다른 사용 환경에 대해서는 다루지 않습니다. 웹 페이지의 특정 API에 대하여 알고 싶다면 웹 API와 DOM을 참고하시기 바랍니다.<br>JavaScript의 표준은 ECMAScript입니다. 2012년 기준 최신 브라우저는 모두 ECMAScript 5.1을 온전히 지원합니다. 이전 브라우저의 경우는 최소한 ECMAScript 3까지는 지원합니다. 2015년 6월 17일 ECMA International에서는 공식명 ECMAScript 2015 로 불리는 ECMAScript의 6번째 주 버전을 발표했습니다(보통 ECMAScript 6 혹은 ES6으로 불립니다). 그 이후 ECMAScript 표준의 출시 주기는 1년입니다. 이 문서는 최신 초안(현재 ECMAScript 2020)에 기반을 둡니다.<br>JavaScript를 Java 프로그래밍 언어와 혼동해서는 안 됩니다. “Java”와 “JavaScript” 두 가지 모두 Oracle이 미국 및 기타 국가에 등록한 상표입니다. 하지만, 두 언어는 문법 체계와 사용 방법이 전혀 다릅니다.<br>안내서 및 자습서와 함께 JavaScript 프로그램을 짜는 법을 알아보세요.</p>
</blockquote>
<p>javascript가 어떤 기능들을 제공하는지, 그리고 흔히 할 수 있는 오해로 <code>java</code>와 <code>javascript</code>를 혼동하지 말라는 친절한 안내까지 말하는 것을 볼 수 있다.</p>
<p>하지만 둘 다 배워본 바로 두 언어 모두 개념상 통하는 부분들이 상당히 많고, 파이썬을 비롯한 C#, c++ 등의 현대 프로그래밍 언어는 상당한 개념들을 공유하고 있기 때문에, 어떤 언어든 하나를 제대로 익히기만 하면 다른 언어도 금방익힌다는 많은 개발자들의 조언이 꽤나 합리적이란 생각이 든다. 쨋든, <code>javascript</code>를 잘 이해하는 사람이 React를 잘 한다!</p>
<p><code>javascript</code>개발자를 찾는 구인 공고를 보면 꼭 보이는 말이 있다.</p>
<blockquote>
<p>ES6 및 최신 javascript 문법에 익숙한 자</p>
</blockquote>
<p><code>왜 최신 문법에 익숙한 사람을 찾을까?</code>에 대한 고민을 가졌던 적이 있다. 실무를 하면서 그에 대한 나름의 답을 내려보자면, <a href="%22https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%22">ECMA</a>를 통해 매년 자바스크립트의 새로운 문법이 개발자들에게 소개되고, 이것은 웹 개발의 표준으로 작동하기 때문에, 최신 자바스크립트 문법을 사용할줄 모른다면, 지금 쓰이는 라이브러리들을 활용할 수 없는 능력을 지녔다는 것으로 생각될 수 있다. 따라서 <code>최신 스펙에 대한 이해 == 시대에 맞는 개발자</code>라는 공식이 되는 것이다.</p>
<p>심지어 React의 공식문서에서는 이렇게 말한다.</p>
<blockquote>
<p>JavaScript의 최신 버전인 ES6의 몇 가지 기능을 사용한다는 사실에 주목해주세요. 자습서에서는 화살표 함수, 클래스, let, const를 사용합니다. Babel REPL을 사용하여 ES6 코드가 어떻게 컴파일되는지 확인할 수 있습니다.</p>
</blockquote>
<p>적어도, ES6는 이해해야 React를 배울 준비가 됐다고 할 수 있다.</p>
<h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><p><code>React</code>는 javascript를 이용해 <a href="%22https://wit.nts-corp.com/2019/02/14/5522%22">DOM</a>을 동적으로 렌더링하는 라이브러리다. 따라서, <code>DOM</code>이 무엇인지 알아야 하는게 선행되어야 한다</p>
<p>DOM에 대한 자세한 설명은 링크를 통해 확인해보면 좋다. 내용을 요약한 부분을 인용하자면 이렇다.</p>
<blockquote>
<p>DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,<br>둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.<br>DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.</p>
<ul>
<li>항상 유효한 HTML 형식입니다.</li>
<li>자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.</li>
<li>가상 요소를 포함하지 않습니다. (Ex. ::after)</li>
<li>보이지 않는 요소를 포함합니다. (Ex. display: none)</li>
</ul>
</blockquote>
<p>자, 이제 그럼 DOM을 동적으로 생성해주는 강력한 라이브러리 <code>React</code>에 대해서 알아보자.</p>
<h2 id="What-is-React"><a href="#What-is-React" class="headerlink" title="What is React?"></a>What is React?</h2><blockquote>
<p>React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.</p>
</blockquote>
<p><a href="%22https:reactjs.org/tutorial/tutorial.html%22">공식문서</a>의 설명이다. 리액트는 컴포넌트라는 작은 파편(마치 html 코드 조각)들을 떼어내서 조립하는 것 마냥 화면을 쉽게 구성하고 또한 재사용하기도 쉽게끔 해주는 javascript 라이브러리다. JSP와 같이 Static한 html 파일을 서버에서 생성하여 사용자에게 제공하던 기존의 웹 개발 프레임을 완전히 달라지게 했다고 할 수 있다. 동적으로 화면이 구성되게 하며, 사용자의 액션에 따라 server로부터 새로운 정보를 불러들이기도 하고, 상호작용 할 수 있게끔 하는 것이다.</p>
<p>React 내부 api 들에 대한 설명들도 블로그에 남기면 좋겠지만, 같은 걸 두벌 남기는 꼴밖에 되지 않을 것이다. Javascript ES6까지 끝냈고, html, css의 기본에 대해서 공부를 했다면, 공식문서의 자습서를 통해 바로 리액트를 시작해보는걸 추천한다. CRA(create-react-app)을 통해서 5분도 되지 않아 작은 웹페이지 개발을 할 수 있을 것이다.</p>
<h2 id="마무리"><a href="#마무리" class="headerlink" title="마무리"></a>마무리</h2><p>알고있는 것에 대해 천천히 다쓰기에는 javascript, react, 등등 너무 양이 많을것 같다… 일단은 지금 쓰고 있는 것들에 대한 정리를 먼저 시작해야겠다.<br>최근 실제 프로젝트에 처음 사용해보았던 <code>recoil</code>에 대한 후기를 적어보고, 더 나은 사용방법이 있었는지 한번 회고해봐야겠다. 오늘은 여기까지! 굿밤!</p>
</div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-04-02T13:42:41.000Z" title="4/2/2021, 10:42:41 PM">2021-04-02</time> 게시 됨</span><span class="level-item"><time dateTime="2021-04-03T06:28:26.118Z" title="4/3/2021, 3:28:26 PM">2021-04-03</time> 업데이트 됨</span><span class="level-item">6분안에 읽기 (약 923 단어)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/04/02/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-1-React/">알고있는거 정리하기(1) React</a></h1><div class="content"><h2 id="목차"><a href="#목차" class="headerlink" title="목차"></a>목차</h2><hr>
<ul>
<li><a href="#%EA%B0%9C%EB%B0%9C%EC%9E%90">개발자?</a></li>
<li><a href="#react,-%EC%A0%95%EC%B2%B4%EA%B0%80-%EB%AD%90%EC%A7%80">React, 정체가 뭐지?</a></li>
</ul>
<hr>
<h2 id="개발자"><a href="#개발자" class="headerlink" title="개발자?"></a>개발자?</h2><p>개발자가 되기로 결심을 했을 때만 해도 부트캠프라는게 생소하던 시절이었다. 그 당시 나는 그저 돈을 벌 수단이 될만한 직업이 필요했고, 마땅한 배경이 없던 차에 국비지원 교육을 듣게 되었다. ‘빅데이터 전문가 양성’이라는 제목의 수업이었기에 당시에 나는 내가 수료 후에 주니어 데이터 사이언티스트가 될줄로만 믿었다.<br>그러나 대부분의 국비지원 학원이 그렇듯이 내가 다닌곳 또한 우리나라 IT 업체의 주를 이루고 있는 SI와 정부지원 사업에 최적화된 인재를 기르는 <code>JAVA개발자</code> 양성소였다. 내가 생각하고 배우기를 원했던 빅데이터 관련 수업은 6개월 과정중 2-3주에 지나지 않았고, 그마저도 자바 프로젝트와 병행하면서 진행되었기에 개발자가 된 2년이 된 지금은 뭘 배웠는지도 잘 모르겠다.<br>일찍이 내가 배운 것에 대해서 확신이 서지않았던 수업중 잠시 <code>jquery</code>로만 경험했던 javascript에 흥미를 갖게 되었고, 페이스북에서 만들어진 <code>React</code>라는 라이브러리에 매료되었다. HTML + CSS + Javascript가 마치 all-in-one으로 들어가있는 것처럼 보이는 이 라이브러리는 그 당시(2019.05)에도 이미 거대한 커뮤니티를 구축하고 있었지만, 국내 개발자 중에는 시니어가 없을 정도로 구인에 어려움을 겪고있단 소리에 혼자서 공부를 시작했다.</p>
<p><code>늦게 시작했다고 생각하는순간 더 늦는다. 일단 행동하자.</code></p>
<h2 id="React-정체가-뭐지"><a href="#React-정체가-뭐지" class="headerlink" title="React, 정체가 뭐지?"></a>React, 정체가 뭐지?</h2><p>React는 <code>Facebook</code>진영에서 만든 자바스크립트 라이브러리로 React의 <a href="%22http://reactjs.org%22">공식 홈페이지</a>에서는 다음과 같이 리액트에 대해 정의한다.</p>
<blockquote>
<p>React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.</p>
</blockquote>
<p>React는 javascript를 이용해서 UI 컴퍼넌트를 직관적으로 작성하는데 도움을 준다. 그 방식이 직관적이고, 리액트만의 컴포넌트 라이프사이클은 효율적인 개발을 돕는다. 많은 개발자들이 React를 사랑(?)한다고 그러고 React만한(비록 Vue가 더 쉽다는 이야기가 많지만;) 라이브러리는 없다고 말하는 이유는 유연하면서도 효율적인 컴포넌트의 구성방식에 있지 않을까 싶다. 뿐만아니라 <code>v16</code>에서부터 시작된 <code>hooks</code>는 혁명적이었던것 같다. class형 컴포넌트에서 작성되던 코드가 단 몇줄의 hooks로 대체되는 것을 경험하게 된다면 이전으로 돌아가는 일을 꿈꾸기란 쉽지않다.(물론, class형 컴포넌트도 필요한 경우가 있고, 객체지향 패턴에 있어서 클래스 컴포넌트는 매우 중요하단 사실을 안다.)</p>
<p>자 그러면, React가 좋은 것은 알겠으니 어떤식으로 React가 렌더를 진행하는지를 이해해보자.(다음글에서..)</p>
</div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-03-31T14:49:38.000Z" title="3/31/2021, 11:49:38 PM">2021-03-31</time> 게시 됨</span><span class="level-item"><time dateTime="2021-04-03T06:28:26.118Z" title="4/3/2021, 3:28:26 PM">2021-04-03</time> 업데이트 됨</span><span class="level-item">5분안에 읽기 (약 694 단어)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/31/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EC%97%88%EC%9C%BC%EB%8B%88-github%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/">hexo로 블로그 만들었으니 github에 배포하기</a></h1><div class="content"><p>hexo로 블로그를 어제 로컬에서 띄우는걸 성공했다!</p>
<p>그러나 실제로 올리기까지 해야 성공했다고 말할 수 있으니, 이제 배포하는 방법을 포스팅 해보자.</p>
<h2 id="Hexo는-두개의-Repository가-필요하다"><a href="#Hexo는-두개의-Repository가-필요하다" class="headerlink" title="Hexo는 두개의 Repository가 필요하다."></a>Hexo는 두개의 Repository가 필요하다.</h2><p><a target="_blank" rel="noopener" href="https://hexo.io/">hexo</a>는 두개의 repository를 필요로 한다.<br>static 으로 생성된 페이지가 저장되어있는 repository와 외부에서 접속할 수 있게끔 deploy 되어진 <code>[사용자이름].github.io</code> 라는 명칭의 repository 가 필요하다.<br>따라서 먼저 두개의 repository 를 만들어준다.</p>
<blockquote>
<p>[사용자이름].github.io</p>
</blockquote>
<blockquote>
<p>hexo-blog</p>
</blockquote>
<h2 id="초기-세팅"><a href="#초기-세팅" class="headerlink" title="초기 세팅"></a>초기 세팅</h2><p><code>npm</code>을 이용하여 전역으로 hexo를 설치해주자.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br></pre></td></tr></table></figure>
<p>아까 만든 repository 중 <code>hexo-blog</code>를 로컬 컴퓨터로 클론하여<br>아래와 같이 초기 패키지를 설치해주자.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo init ./</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>
<p>설치 후에 터미널에서</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo server</span><br></pre></td></tr></table></figure>
<p>명령어를 실행해주면 <a target="_blank" rel="noopener" href="http://localhost:4000/">localhost:4000</a>에 나만의 블로그가 개설이 되는것을 확인할 수 있다.</p>
<h2 id="깃허브-페이지에-배포하기"><a href="#깃허브-페이지에-배포하기" class="headerlink" title="깃허브 페이지에 배포하기"></a>깃허브 페이지에 배포하기</h2><p>아까 만들어둔 repository에서 배포를 하기 위해서는 <code>_config.yml</code>파일을 수정해주어야 한다. 파일을 열어 <code>deploy</code>부분을 찾아주면 아래와 같이 타입이 비어있다.</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">""</span></span><br></pre></td></tr></table></figure>
<p>이 부분을 다음과 같이 수정하여주자.</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">"git"</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">"https://github.com/[사용자이름]/[사용자이름].github.io.git"</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">"master"</span></span><br></pre></td></tr></table></figure>
<h2 id="배포-플러그인-설치"><a href="#배포-플러그인-설치" class="headerlink" title="배포 플러그인 설치"></a>배포 플러그인 설치</h2><p>깃허브 페이지를 배포하기 위해선 <code>hexo-deployer-git</code> 플러그인을 설치해줘야 한다. 아래 명령어를 통해 설치해주자.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-deployer-git</span><br></pre></td></tr></table></figure>
<h2 id="정적-리소스-생성하기"><a href="#정적-리소스-생성하기" class="headerlink" title="정적 리소스 생성하기"></a>정적 리소스 생성하기</h2><p>배포를 하기 전 정적리소스를 생성해주고 배포를 한다.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo generate</span><br></pre></td></tr></table></figure>
<h2 id="배포하기"><a href="#배포하기" class="headerlink" title="배포하기"></a>배포하기</h2><p>이제 끝났다. 아래 명령어만 실행해주자.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo deploy</span><br></pre></td></tr></table></figure>
<p><code>https://[사용자이름].github.io</code>로 접속이 잘 되는걸 확인해보자.</p>
<p>글을 추가후 배포를 했거나 했을때 혹 업데이트가 되지 않는다면 캐쉬의 문제일 가능성이 있다. 그런 경우에는</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<p>을 사용해서 캐시를 초기화해주면 되겠다.</p>
<h2 id="마무리"><a href="#마무리" class="headerlink" title="마무리"></a>마무리</h2><p>여기까지 정말 간략하게 hexo로 블로그 만든 후 배포하는 과정을 기록해봤는데, 일단 블로그는 만드는것보단 얼마나 글을 잘남기느냐가 중요한거 같다. 이제 곧 회사가 이사를 가게 되어 뭔가 마음이 기대감에 차있다. 좋은 기대감과 함께 블로그도 잘 작성해봐야지. :)</p>
</div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2021-03-30T14:51:42.000Z" title="3/30/2021, 11:51:42 PM">2021-03-30</time> 게시 됨</span><span class="level-item"><time dateTime="2021-04-03T06:28:26.118Z" title="4/3/2021, 3:28:26 PM">2021-04-03</time> 업데이트 됨</span><span class="level-item">2분안에 읽기 (약 301 단어)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/30/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0/">hexo로 블로그 만들기</a></h1><div class="content"><p>회사에서 개발 중 에러처리를 위해 구글링을 하다가 예쁘게 만들어진 블로그를 발견했다.<br>hexo.io로 개발이 되어진 것을 어렵지 않게 확인할 수 있어서 퇴근 후에 한번 만들어봐야겠다는 생각으로<br><a target="_blank" rel="noopener" href="https://hexo.io/">hexo.io</a>에 들어가서 <code>GET_STARTED</code>를 살펴보았다.</p>
<p>원래 <a target="_blank" rel="noopener" href="https://strapi.io/">strapi.io</a>를 이용해서 CMS 기반의 서버가 필요없는 블로그를 개발해보려고했는데,<br>GraphQL이나 DB에 대한 설정을 잡아주는 등 손이 가면서도 안가는게 많아(?) 진도가 나가지 않았는데</p>
<p><code>hexo.io</code>는 생각보다도 쉽게 작성이 가능한 프레임워크였다.</p>
<p>로컬에서 실행해서 이 글을 작성하기까지의 시간은 10분 채 걸리지 않았다.<br>이제 남은건 github 블로그로 배포해서 나만의 블로그 글을 차곡차곡 쌓아가기.</p>
<p>내일 나는 배포에 대한 글을 쓸것이고, 그 말을 어기면 나는 글러먹은 놈일테다. :)</p>
<p>12시가 땡치면 이제 잠을 자러가야지. 굿밤.</p>
</div></article></div></div><!--!--><div class="column column-right is-4-tablet is-4-desktop is-4-widescreen order-3"><div class="card widget" data-type="profile"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="avatar" src="/img/logo.png" alt="Daun Jung"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">Daun Jung</p><p class="is-size-6 is-block">Front-End DEV</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>Seoul, Korea</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">포스트</p><a href="/archives"><p class="title">4</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">카테고리</p><a href="/categories"><p class="title">0</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">태그</p><a href="/tags"><p class="title">3</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/daunJung-Dev" target="_blank" rel="noopener">팔로우</a></div><div class="level is-mobile is-multiline"><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Github" href="https://github.com/daunJung-Dev"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Facebook" href="https://www.facebook.com/teamdaun"><i class="fab fa-facebook"></i></a></div></div></div><!--!--><div class="card widget" data-type="links"><div class="card-content"><div class="menu"><h3 class="menu-label">링크</h3><ul class="menu-list"><li><a class="level is-mobile" href="https://github.com/daunJung-Dev" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">GitHub</span></span><span class="level-right"><span class="level-item tag">github.com</span></span></a></li></ul></div></div></div><!--!--><div class="card widget" data-type="recent-posts"><div class="card-content"><h3 class="menu-label">최근 글</h3><article class="media"><div class="media-content"><p class="date"><time dateTime="2021-04-05T13:43:47.930Z">2021-04-05</time></p><p class="title"><a href="/2021/04/05/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2-React/">알고있는거 정리하기(2) React</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2021-04-02T13:42:41.000Z">2021-04-02</time></p><p class="title"><a href="/2021/04/02/%EC%95%8C%EA%B3%A0%EC%9E%88%EB%8A%94%EA%B1%B0-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-1-React/">알고있는거 정리하기(1) React</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2021-03-31T14:49:38.000Z">2021-03-31</time></p><p class="title"><a href="/2021/03/31/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EC%97%88%EC%9C%BC%EB%8B%88-github%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/">hexo로 블로그 만들었으니 github에 배포하기</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2021-03-30T14:51:42.000Z">2021-03-30</time></p><p class="title"><a href="/2021/03/30/hexo%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0/">hexo로 블로그 만들기</a></p></div></article></div></div><div class="card widget" data-type="archives"><div class="card-content"><div class="menu"><h3 class="menu-label">아카이브</h3><ul class="menu-list"><li><a class="level is-mobile" href="/archives/2021/04/"><span class="level-start"><span class="level-item">4월 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/03/"><span class="level-start"><span class="level-item">3월 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></div></div></div><div class="card widget" data-type="tags"><div class="card-content"><div class="menu"><h3 class="menu-label">태그</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/hexo-github-%EB%B0%B0%ED%8F%AC-deploy/"><span class="tag">hexo github 배포 deploy</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/hexo-io-hexo%EB%B8%94%EB%A1%9C%EA%B7%B8/"><span class="tag">hexo.io, hexo블로그</span><span class="tag">1</span></a></div></div></div></div></div><div class="card widget" data-type="subscribe-email"><div class="card-content"><div class="menu"><h3 class="menu-label">업데이트 소식 받기</h3><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=DaunsDevlog','popupwindow','scrollbars=yes,width=550,height=520');return true"><input type="hidden" value="DaunsDevlog" name="uri"><input type="hidden" name="loc" value="en_US"><div class="field has-addons"><div class="control has-icons-left is-expanded"><input class="input" name="email" type="email" placeholder="Email"><span class="icon is-small is-left"><i class="fas fa-envelope"></i></span></div><div class="control"><input class="button" type="submit" value="구독"></div></div></form></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="/img/logo.png" alt="Daun's DevLog" height="28"></a><p class="is-size-7"><span>© 2021 Daun Jung</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p></div><div class="level-end"><div class="field has-addons"><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a></p></div></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment-with-locales.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js" defer></script><script>moment.locale("ko");</script><script>var IcarusThemeSettings = {
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script src="/js/column.js"></script><script src="/js/animation.js"></script><a id="back-to-top" title="맨 위로" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script src="/js/back_to_top.js" defer></script><!--!--><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.js" defer></script><script>window.addEventListener("load", () => {
window.cookieconsent.initialise({
type: "info",
theme: "edgeless",
static: false,
position: "bottom-left",
content: {
message: "이 웹 사이트는 귀하의 경험을 향상시키기 위해 Cookie를 사용합니다.",
dismiss: "무시",
allow: "허용",
deny: "거부",
link: "더 알아보기",
policy: "Cookie 정책",
href: "https://www.cookiesandyou.com/",
},
palette: {
popup: {
background: "#edeff5",
text: "#838391"
},
button: {
background: "#4b81e8"
},
},
});
});</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><!--!--><!--!--><!--!--><script src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="입력 하세요..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script src="/js/insight.js" defer></script><script>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"입력 하세요...","untitled":"(제목 없음)","posts":"포스트","pages":"페이지","categories":"카테고리","tags":"태그"});
});</script></body></html>