]({{ site.baseurl }}/)
10 |
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | gem 'github-pages', group: :jekyll_plugins
3 |
4 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | activesupport (4.2.10)
5 | i18n (~> 0.7)
6 | minitest (~> 5.1)
7 | thread_safe (~> 0.3, >= 0.3.4)
8 | tzinfo (~> 1.1)
9 | addressable (2.5.2)
10 | public_suffix (>= 2.0.2, < 4.0)
11 | coffee-script (2.4.1)
12 | coffee-script-source
13 | execjs
14 | coffee-script-source (1.11.1)
15 | colorator (1.1.0)
16 | commonmarker (0.17.9)
17 | ruby-enum (~> 0.5)
18 | concurrent-ruby (1.0.5)
19 | dnsruby (1.60.2)
20 | em-websocket (0.5.1)
21 | eventmachine (>= 0.12.9)
22 | http_parser.rb (~> 0.6.0)
23 | ethon (0.11.0)
24 | ffi (>= 1.3.0)
25 | eventmachine (1.2.7)
26 | execjs (2.7.0)
27 | faraday (0.15.2)
28 | multipart-post (>= 1.2, < 3)
29 | ffi (1.9.25)
30 | forwardable-extended (2.6.0)
31 | gemoji (3.0.0)
32 | github-pages (186)
33 | activesupport (= 4.2.10)
34 | github-pages-health-check (= 1.8.1)
35 | jekyll (= 3.7.3)
36 | jekyll-avatar (= 0.5.0)
37 | jekyll-coffeescript (= 1.1.1)
38 | jekyll-commonmark-ghpages (= 0.1.5)
39 | jekyll-default-layout (= 0.1.4)
40 | jekyll-feed (= 0.9.3)
41 | jekyll-gist (= 1.5.0)
42 | jekyll-github-metadata (= 2.9.4)
43 | jekyll-mentions (= 1.3.0)
44 | jekyll-optional-front-matter (= 0.3.0)
45 | jekyll-paginate (= 1.1.0)
46 | jekyll-readme-index (= 0.2.0)
47 | jekyll-redirect-from (= 0.13.0)
48 | jekyll-relative-links (= 0.5.3)
49 | jekyll-remote-theme (= 0.3.1)
50 | jekyll-sass-converter (= 1.5.2)
51 | jekyll-seo-tag (= 2.4.0)
52 | jekyll-sitemap (= 1.2.0)
53 | jekyll-swiss (= 0.4.0)
54 | jekyll-theme-architect (= 0.1.1)
55 | jekyll-theme-cayman (= 0.1.1)
56 | jekyll-theme-dinky (= 0.1.1)
57 | jekyll-theme-hacker (= 0.1.1)
58 | jekyll-theme-leap-day (= 0.1.1)
59 | jekyll-theme-merlot (= 0.1.1)
60 | jekyll-theme-midnight (= 0.1.1)
61 | jekyll-theme-minimal (= 0.1.1)
62 | jekyll-theme-modernist (= 0.1.1)
63 | jekyll-theme-primer (= 0.5.3)
64 | jekyll-theme-slate (= 0.1.1)
65 | jekyll-theme-tactile (= 0.1.1)
66 | jekyll-theme-time-machine (= 0.1.1)
67 | jekyll-titles-from-headings (= 0.5.1)
68 | jemoji (= 0.9.0)
69 | kramdown (= 1.16.2)
70 | liquid (= 4.0.0)
71 | listen (= 3.1.5)
72 | mercenary (~> 0.3)
73 | minima (= 2.4.1)
74 | nokogiri (>= 1.8.2, < 2.0)
75 | rouge (= 2.2.1)
76 | terminal-table (~> 1.4)
77 | github-pages-health-check (1.8.1)
78 | addressable (~> 2.3)
79 | dnsruby (~> 1.60)
80 | octokit (~> 4.0)
81 | public_suffix (~> 2.0)
82 | typhoeus (~> 1.3)
83 | html-pipeline (2.8.3)
84 | activesupport (>= 2)
85 | nokogiri (>= 1.4)
86 | http_parser.rb (0.6.0)
87 | i18n (0.9.5)
88 | concurrent-ruby (~> 1.0)
89 | jekyll (3.7.3)
90 | addressable (~> 2.4)
91 | colorator (~> 1.0)
92 | em-websocket (~> 0.5)
93 | i18n (~> 0.7)
94 | jekyll-sass-converter (~> 1.0)
95 | jekyll-watch (~> 2.0)
96 | kramdown (~> 1.14)
97 | liquid (~> 4.0)
98 | mercenary (~> 0.3.3)
99 | pathutil (~> 0.9)
100 | rouge (>= 1.7, < 4)
101 | safe_yaml (~> 1.0)
102 | jekyll-avatar (0.5.0)
103 | jekyll (~> 3.0)
104 | jekyll-coffeescript (1.1.1)
105 | coffee-script (~> 2.2)
106 | coffee-script-source (~> 1.11.1)
107 | jekyll-commonmark (1.2.0)
108 | commonmarker (~> 0.14)
109 | jekyll (>= 3.0, < 4.0)
110 | jekyll-commonmark-ghpages (0.1.5)
111 | commonmarker (~> 0.17.6)
112 | jekyll-commonmark (~> 1)
113 | rouge (~> 2)
114 | jekyll-default-layout (0.1.4)
115 | jekyll (~> 3.0)
116 | jekyll-feed (0.9.3)
117 | jekyll (~> 3.3)
118 | jekyll-gist (1.5.0)
119 | octokit (~> 4.2)
120 | jekyll-github-metadata (2.9.4)
121 | jekyll (~> 3.1)
122 | octokit (~> 4.0, != 4.4.0)
123 | jekyll-mentions (1.3.0)
124 | activesupport (~> 4.0)
125 | html-pipeline (~> 2.3)
126 | jekyll (~> 3.0)
127 | jekyll-optional-front-matter (0.3.0)
128 | jekyll (~> 3.0)
129 | jekyll-paginate (1.1.0)
130 | jekyll-readme-index (0.2.0)
131 | jekyll (~> 3.0)
132 | jekyll-redirect-from (0.13.0)
133 | jekyll (~> 3.3)
134 | jekyll-relative-links (0.5.3)
135 | jekyll (~> 3.3)
136 | jekyll-remote-theme (0.3.1)
137 | jekyll (~> 3.5)
138 | rubyzip (>= 1.2.1, < 3.0)
139 | jekyll-sass-converter (1.5.2)
140 | sass (~> 3.4)
141 | jekyll-seo-tag (2.4.0)
142 | jekyll (~> 3.3)
143 | jekyll-sitemap (1.2.0)
144 | jekyll (~> 3.3)
145 | jekyll-swiss (0.4.0)
146 | jekyll-theme-architect (0.1.1)
147 | jekyll (~> 3.5)
148 | jekyll-seo-tag (~> 2.0)
149 | jekyll-theme-cayman (0.1.1)
150 | jekyll (~> 3.5)
151 | jekyll-seo-tag (~> 2.0)
152 | jekyll-theme-dinky (0.1.1)
153 | jekyll (~> 3.5)
154 | jekyll-seo-tag (~> 2.0)
155 | jekyll-theme-hacker (0.1.1)
156 | jekyll (~> 3.5)
157 | jekyll-seo-tag (~> 2.0)
158 | jekyll-theme-leap-day (0.1.1)
159 | jekyll (~> 3.5)
160 | jekyll-seo-tag (~> 2.0)
161 | jekyll-theme-merlot (0.1.1)
162 | jekyll (~> 3.5)
163 | jekyll-seo-tag (~> 2.0)
164 | jekyll-theme-midnight (0.1.1)
165 | jekyll (~> 3.5)
166 | jekyll-seo-tag (~> 2.0)
167 | jekyll-theme-minimal (0.1.1)
168 | jekyll (~> 3.5)
169 | jekyll-seo-tag (~> 2.0)
170 | jekyll-theme-modernist (0.1.1)
171 | jekyll (~> 3.5)
172 | jekyll-seo-tag (~> 2.0)
173 | jekyll-theme-primer (0.5.3)
174 | jekyll (~> 3.5)
175 | jekyll-github-metadata (~> 2.9)
176 | jekyll-seo-tag (~> 2.0)
177 | jekyll-theme-slate (0.1.1)
178 | jekyll (~> 3.5)
179 | jekyll-seo-tag (~> 2.0)
180 | jekyll-theme-tactile (0.1.1)
181 | jekyll (~> 3.5)
182 | jekyll-seo-tag (~> 2.0)
183 | jekyll-theme-time-machine (0.1.1)
184 | jekyll (~> 3.5)
185 | jekyll-seo-tag (~> 2.0)
186 | jekyll-titles-from-headings (0.5.1)
187 | jekyll (~> 3.3)
188 | jekyll-watch (2.0.0)
189 | listen (~> 3.0)
190 | jemoji (0.9.0)
191 | activesupport (~> 4.0, >= 4.2.9)
192 | gemoji (~> 3.0)
193 | html-pipeline (~> 2.2)
194 | jekyll (~> 3.0)
195 | kramdown (1.16.2)
196 | liquid (4.0.0)
197 | listen (3.1.5)
198 | rb-fsevent (~> 0.9, >= 0.9.4)
199 | rb-inotify (~> 0.9, >= 0.9.7)
200 | ruby_dep (~> 1.2)
201 | mercenary (0.3.6)
202 | mini_portile2 (2.3.0)
203 | minima (2.4.1)
204 | jekyll (~> 3.5)
205 | jekyll-feed (~> 0.9)
206 | jekyll-seo-tag (~> 2.1)
207 | minitest (5.11.3)
208 | multipart-post (2.0.0)
209 | nokogiri (1.8.3)
210 | mini_portile2 (~> 2.3.0)
211 | octokit (4.9.0)
212 | sawyer (~> 0.8.0, >= 0.5.3)
213 | pathutil (0.16.1)
214 | forwardable-extended (~> 2.6)
215 | public_suffix (2.0.5)
216 | rb-fsevent (0.10.3)
217 | rb-inotify (0.9.10)
218 | ffi (>= 0.5.0, < 2)
219 | rouge (2.2.1)
220 | ruby-enum (0.7.2)
221 | i18n
222 | ruby_dep (1.5.0)
223 | rubyzip (1.2.1)
224 | safe_yaml (1.0.4)
225 | sass (3.5.6)
226 | sass-listen (~> 4.0.0)
227 | sass-listen (4.0.0)
228 | rb-fsevent (~> 0.9, >= 0.9.4)
229 | rb-inotify (~> 0.9, >= 0.9.7)
230 | sawyer (0.8.1)
231 | addressable (>= 2.3.5, < 2.6)
232 | faraday (~> 0.8, < 1.0)
233 | terminal-table (1.8.0)
234 | unicode-display_width (~> 1.1, >= 1.1.1)
235 | thread_safe (0.3.6)
236 | typhoeus (1.3.0)
237 | ethon (>= 0.9.0)
238 | tzinfo (1.2.5)
239 | thread_safe (~> 0.1)
240 | unicode-display_width (1.4.0)
241 |
242 | PLATFORMS
243 | ruby
244 |
245 | DEPENDENCIES
246 | github-pages
247 |
248 | BUNDLED WITH
249 | 1.16.4
250 |
251 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Frontend Developers
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > March, 2016: If you're on an old version of Jekyll Now and run into a) build warnings or b) syntax highlighting issues caused by [Jekyll 3 and GitHub Pages updates](https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0), just :sparkles:[update your _config.yml](https://github.com/barryclark/jekyll-now/pull/445/files):sparkles: and you'll be set!
2 |
3 | # Jekyll Now
4 |
5 | **Jekyll** is a static site generator that's perfect for GitHub hosted blogs ([Jekyll Repository](https://github.com/jekyll/jekyll))
6 |
7 | **Jekyll Now** makes it easier to create your Jekyll blog, by eliminating a lot of the up front setup.
8 |
9 | - You don't need to touch the command line
10 | - You don't need to install/configure ruby, rvm/rbenv, ruby gems :relaxed:
11 | - You don't need to install runtime dependencies like markdown processors, Pygments, etc
12 | - If you're on Windows, this will make setting up Jekyll a lot easier
13 | - It's easy to try out, you can just delete your forked repository if you don't like it
14 |
15 | In a few minutes you'll be set up with a minimal, responsive blog like the one below giving you more time to spend on writing epic blog posts!
16 |
17 | 
18 |
19 | ## Quick Start
20 |
21 | ### Step 1) Fork Jekyll Now to your User Repository
22 |
23 | Fork this repo, then rename the repository to yourgithubusername.github.io.
24 |
25 | Your Jekyll blog will often be viewable immediately at {{ page.title }}
8 | 9 |
10 | {{ content }}
11 |
12 |
3 |
4 |
15 |
16 |
17 | {% endif %}
--------------------------------------------------------------------------------
/_includes/meta.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {% if page.excerpt %}
7 |
8 |
9 | {% else %}
10 |
11 |
12 | {% endif %}
13 |
14 |
15 | {% if page.title %}
16 |
17 |
18 | {% endif %}
--------------------------------------------------------------------------------
/_includes/svg-icons.html:
--------------------------------------------------------------------------------
1 | {% if site.footer-links.dribbble %}{% endif %}
2 | {% if site.footer-links.email %}{% endif %}
3 | {% if site.footer-links.facebook %}{% endif %}
4 | {% if site.footer-links.flickr %}{% endif %}
5 | {% if site.footer-links.github %}{% endif %}
6 | {% if site.footer-links.instagram %}{% endif %}
7 | {% if site.footer-links.linkedin %}{% endif %}
8 | {% if site.footer-links.pinterest %}{% endif %}
9 | {% if site.footer-links.rss %}{% endif %}
10 | {% if site.footer-links.twitter %}{% endif %}
11 | {% if site.footer-links.stackoverflow %}{% endif %}
12 | {% if site.footer-links.youtube %}{% endif %}
13 | {% if site.footer-links.googleplus %}{% endif %}
--------------------------------------------------------------------------------
/_includes/translater.html:
--------------------------------------------------------------------------------
1 | {% assign translater = site.data.translaters[page.translater] %}
2 |
3 | {% if translater %}
4 |
5 | {% if translater.web %}
6 | Translated by {{ translater.name }}
7 | {% else if translater.email %}
8 | Translated by {{ translater.name }}
9 | {% else %}
10 | Translated by {{ translater.name }}
11 | {% endif %}
12 |
13 | {% endif %}
--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
36 |
37 |
21 |
22 | 
23 |
24 |
34 |
35 |
25 |
28 |
29 |
33 | {{ site.name }}
26 |{{ site.description }}
27 |
38 | {{ content }}
39 |
40 |
41 |
48 |
49 | {% include analytics.html %}
50 |
51 |
52 |
--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {{ page.title }}
7 | 8 |
9 | {{ content }}
10 |
11 |
12 |
13 | Written on {{ page.date | date: "%B %e, %Y" }}
14 |
15 |
16 | {% include translater.html %}
17 | {% include disqus.html %}
18 |
209 | {{message}}
210 |
211 |
219 | ```
220 |
221 | 심플합니다. 아무런 학습이나 새로운 기술 없이도 뷰를 사용할 수 있습니다.
222 |
223 | ### 양방향 데이터 바인딩
224 | ```js
225 | // 리엑트
226 | var Message = React.createClass({
227 | getInitialState() {
228 | return { message: '' };
229 | },
230 | handleMessageChange(e) {
231 | this.setSate({message: e.target.value});
232 | },
233 | render() {
234 | return (
235 |
236 |
237 | {this.state.message}
238 |
239 | }
240 | }
241 | });
242 |
243 | // 뷰
244 | var Message = new Vue({
245 | el: '#message',
246 | data: { message: '' }
247 | })
248 |
249 |
250 |
251 | {{message}}
252 |
253 | ```
254 |
255 | 뷰에서 v-model 디렉티브를 사용하면 양방향 바인딩은 매우 간단합니다. 리엑트에서는 엄청 길죠.
256 |
257 | ### 반복문
258 |
259 | ```js
260 | // 리엑트
261 | var Iteration = React.crateClass({
262 | getInitialState() {
263 | return { array: [1,2,3,4] }
264 | },
265 | render() {
266 | this.state.array.map(function(value) {
267 | return (
268 | {value}
269 | );
270 | }
271 | }
272 | });
273 | ReactDOM>render(
274 |
285 | {{value}}
286 |
287 | ```
288 |
289 | 여기서도 더 적은 라인과 간단한 코드로 뷰가 이겼네요.
290 |
291 | ### 뷰와 리엑트 결론
292 |
293 | 이러한 예제 코드는 뷰가 배우기 쉽고 바로 프로덕션에서 사용할 수 있다는 사실을 보여줍니다. 또한 대규모 코드베이스 관리를 위해 새로운 도구와 패턴을 간단하게 사용하는 방법을 제공합니다. 뷰는 당신의 지식과 함께 확장할 수 있어서 업데이트된 도구와 베스트 프랙티스를 바로 배울수 있습니다.
294 |
295 | ## 앵귤러, 리액트, 뷰 비교표
296 | 
297 |
298 | ## 결론
299 | 현재 뷰는 페이스북의 리액트나 구글의 앵귤러2 만큼 인기 있는건 아닙니다. 하지만 많은 개발자들이 뷰로 옮기고 있죠. 라라벨(Laravel) 커뮤니티도 그 친구들이 선호하는 프론트엔드 프레임웍으로써 뷰를 고려하고 있다고 합니다.
300 |
301 | > 전반적으로 뷰는 리엑트와 앵귤러의 이슈들에대한 해답을 가지고 있다. 그리고 더 간단하고 쉬운 코드를 제공한다.
302 |
303 |
--------------------------------------------------------------------------------
/_posts/2017/2017-08-17-80-20-guide-to-express-error-handling.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 에러 처리를 위한 익스프레스 가이드
4 | translater: jeonghwan_kim
5 | ---
6 |
7 | 이 글은 Valeri Karpov의 [The 80/20 Guide to Express Error Handling](http://thecodebarbarian.com/80-20-guide-to-express-error-handling.html)를 번역한 포스트입니다.
8 | 오역이나 오타 등 고칠내용을 발견하시면 댓글 부탁드립니다.
9 |
10 | [익스프레스의 에러 처리 미들웨어](http://expressjs.com/en/guide/error-handling.html)는 HTTP 응답 로직을 견고하게 만드는 파워풀한 도구입니다. 아래는 익스프레스 코드로 작성한 코드입니다.
11 |
12 | ```js
13 | app.get('/User', async function(req, res) {
14 | let users;
15 | try {
16 | users = await db.collection('User').find().toArray();
17 | } catch (error) {
18 | res.status(500).json({ error: error.toString() });
19 | }
20 | res.json({ users });
21 | });
22 | ```
23 |
24 | 한 두 개 엔드포인트라면 이런 패턴이 잘 동작할테지만 여러 개를 유지해야한다면 금새 혼란스러워 질 것입니다. HTTP 응답코드중 500번 보다 503이 더 적합하다고 해보죠. 그럼 여러분은 모든 엔드포인드를 수정해야 합니다. 여러분의 개발환경에서 에러응답에 스택 트레이스를 추가해야 한다면요? 진심으로 모든 HTTP와 데이터베이스 요청 코드 주위에 `try/catch`를 추가하기 원하시나요? 물론 "책임있고" "잘 훈련된" 일이지만, 실제 프로그래밍에서는 확장하기 어려운 코드입니다. 익스프레스의 오류 처리 미들웨어와 함께 더 좋은 코드를 만들어 보겠습니다.
25 |
26 | ## 에러 처리 미들웨어 정의하기
27 |
28 | 익스프레스 미들웨어는 인자의 갯수에 따라 여러가지 유형이 있습니다. 4개의 인자를 취하는 미들웨어를 "오류 처리 미들웨어"라고 부르는데 오류 발생시에만 호출됩니다.
29 |
30 | ```js
31 | const app = require('express')();
32 |
33 | app.get('*', function(req, res, next) {
34 | // 이 미들웨어가 에러를 던지면 익스프레스는 곧바로 다음 오류 처리기로 이동합니다
35 | throw new Error('woops');
36 | });
37 |
38 | app.get('*', function(req, res, next) {
39 | // 이 미들웨어는 오휴 처리기가 아닙니다 (3개 인자만 취함)
40 | // 이전 미들웨어에서 에러가 발생했기 때문에 익스프레스는 이 미들웨어를 스킵할 것입니다.
41 | console.log('this will not print');
42 | });
43 |
44 | app.use(function(error, req, res, next) {
45 | // 이 서버로 들어온 모든 요청은 여기에 올 것이고
46 | // 에러 메세지 'woops'와 함께 HTTP 응답을 보낼 것입니다
47 | res.json({ message: error.message });
48 | });
49 |
50 | app.listen(3000);
51 | ```
52 |
53 | 미들웨어에서는 익스프레스로 에러를 알리는 가지 방법이 있습니다. 하나는 위에서 보았듯이 동일 틱(tick)에서 예외를 던지는 것입니다. 자바스크립트의 비동기 본성 때문에 이것은 그렇게 쓸모 있지 못합니다. 에러를 비동기로 던질 경우 서버는 망가지게 될 것입니다.
54 |
55 | ```js
56 | const app = require('express')();
57 |
58 | app.get('*', function(req, res, next) {
59 | // 모든 HTTP 요청에 서버를 망가뜨릴 것입니다
60 | setImmediate(() => { throw new Error('woops'); });
61 | });
62 |
63 | app.use(function(error, req, res, next) {
64 | // 익스프레스는 위 에러를 잡지 못하기 때문에 여기에 도달하지 못합니다
65 | res.json({ message: error.message });
66 | });
67 |
68 | app.listen(3000);
69 | ```
70 |
71 | 에러 처리를 사용하기 위헤 익스프레스로 에러를 알리는 유일한 방법은 일반적인 미들웨어로 세번째 인자 `next()`를 사용하는 것입니다. 평범한 라우트 처리기 (`app.get('/User', function(req, res) {})` 같은)는 `next()` 함수를 인자로 취할 수 있습니다.
72 |
73 | ```js
74 | const app = require('express')();
75 |
76 | app.get('*', function(req, res, next) {
77 | // 비동기 오류를 보고하려면 반드시 next()를 통과해야 합니다
78 | setImmediate(() => { next(new Error('woops')); });
79 | });
80 |
81 | app.use(function(error, req, res, next) {
82 | // 여기에 도달할 것입니다
83 | res.json({ message: error.message });
84 | });
85 |
86 | app.listen(3000);
87 | ```
88 |
89 | 익스프레스는 **순서대로** 실행된다는 것을 기억하세요. 오류 처리기를 다른 모든 미들웨어의 뒤에 정의해야 합니다. 그렇지 않으면 오류 처리기는 호출되지 않을 것입니다.
90 |
91 | ```js
92 | const app = require('express')();
93 |
94 | app.use(function(error, req, res, next) {
95 | // 호출되지 않을 것입니다.
96 | // 에러 본문의 error.toString()를 반환하는
97 | // 익스프레스 기본 오류 처리기를 사용할 것입니다.
98 | console.log('will not print');
99 | res.json({ message: error.message });
100 | });
101 |
102 | app.get('*', function(req, res, next) {
103 | setImmediate(() => { next(new Error('woops')); });
104 | });
105 |
106 | app.listen(3000);
107 |
108 | ```
109 |
110 | ## Async/Await 사용하기
111 |
112 | 프라미스(promise)와의 귀찮은 통합은 익스프레스 API에서 균열이 나타나기 시작했습니다. 익스프레스는 ES6가 나오기 전인 2011-2014년에 거의 작성되었고 [async/await keyword](http://thecodebarbarian.com/80-20-guide-to-async-await-in-node.js)를 다루는 방법에 대한 좋은 답변이 여전히 부족합니다. 예를 들어, 아래 서버는 절대 HTTP 응답을 성공적으로 보내지 못할 것입니다. [프라미스 리젝션이 절대 처리되지 않을 것이기 때문](http://thecodebarbarian.com/unhandled-promise-rejections-in-node.js)이죠.
113 |
114 | ```js
115 | const app = require('express')();
116 |
117 | app.get('*', function(req, res) {
118 | // 비동기 오류는 next() 를 통해 보고 해야 합니다
119 | return new Promise((resolve, reject) => {
120 | setImmediate(() => reject(new Error('woops')))
121 | })
122 | });
123 |
124 | app.use(function(error, req, res, next) {
125 | // 호출되지 않을 것입니다.
126 | // 에러 본문의 error.toString()를 반환하는
127 | // 익스프레스 기본 오류 처리기를 사용할 것입니다.
128 | console.log('will not print');
129 | res.json({ message: error.message });
130 | });
131 |
132 | app.listen(3000);
133 | ```
134 |
135 | 하지만, 작은 헬퍼 함수로 익스프레스 오류 처리 미들웨어에서 async/await을 사용할 수 있습니다. `async` 함수는 프라미스를 반환한다는 것을 기억하세요 그리고 모든 에러는 `.catch()`로 잡고 `next()` 로 전달하세요.
136 |
137 | ```js
138 | function wrapAsync(fn) {
139 | return function(req, res, next) {
140 | // 모든 오류를 .catch() 처리하고 체인의 next() 미들웨어에 전달하세요
141 | // (이 경우에는 오류 처리기)
142 | fn(req, res, next).catch(next);
143 | };
144 | }
145 | ```
146 |
147 | 모든 비동기 미들웨어 함수에서 `wrapAsync()` 를 호출하면 모든 비동기 예외가 익스프레스 오류 처리기에서 종료됩니다.
148 |
149 | ```js
150 | const app = require('express')();
151 |
152 | app.get('*', wrapAsync(async function(req, res) {
153 | await new Promise(resolve => setTimeout(() => resolve(), 50));
154 | // 비동기 에러
155 | throw new Error('woops');
156 | }));
157 |
158 | app.use(function(error, req, res, next) {
159 | // wrapAsync() 때문에 호출될 것입니다
160 | res.json({ message: error.message });
161 | });
162 |
163 | app.listen(3000);
164 |
165 | function wrapAsync(fn) {
166 | return function(req, res, next) {
167 | // 모든 오류를 .catch() 처리하고 체인의 next() 미들웨어에 전달하세요
168 | // (이 경우에는 오류 처리기)
169 | fn(req, res, next).catch(next);
170 | };
171 | }
172 | ```
173 |
174 | 이것이 오류 처리 미들웨어의 진짜 힘입니다. ([Golang](https://blog.golang.org/error-handling-and-go) 같은) 다른 언어에서는 모든 I/O 작업에서 반드시 오류를 체크 해야하고 수동으로 버블링해야 합니다. 이런 지루한 연습은 프로그래밍 소양을 기르는 습관이라고 확신하지만, 실제로는 코드를 복잡하고 리펙토링하기 어렵게 합니다.
175 |
176 | `wrapAsync()`를 이용하면 오류 처리 미들웨어에서 모든 비동기 오류를 처리할 수 있습니다. "모든 검증오류는 HTTP 400을 응답한다", "모든 데이터베이스 오류는 HTTP 503을 응답한다" 라는 규칙을 정의할 수 있게 되었습니다.
177 |
178 | ```js
179 | const { AssertionError } = require('assert');
180 | const { MongoError } = require('mongodb');
181 |
182 | app.use(function handleAssertionError(error, req, res, next) {
183 | if (error instanceof AssertionError) {
184 | res.status(400).json({
185 | type: 'AssertionError',
186 | message: error.message
187 | });
188 | }
189 | next(error);
190 | });
191 |
192 | app.use(function handleDatabaseError(error, req, res, next) {
193 | if (error instanceof MongoError) {
194 | res.status(503).json({
195 | type: 'MongoError',
196 | message: error.message
197 | });
198 | }
199 | next(error);
200 | });
201 | ```
202 |
203 | 개별 라우트에서 일회용으로 오류 처리를 정의하는 대신 거대한 `handleError()` 함수에서 구별된 처리기를 정의해서 특정 오류를 담당하도록 할 수 있습니다. API가 데이터베이스에 연결할수 없을 때, 유저 요청이 스키마에 맞지 않을 경우, 외부 API가 실패할 때 발생하는 것에 대한 오류 처리를 정의할 수 있습니다.
204 |
205 | ## 계속하기
206 |
207 | 익스프레스 오류 처리 미들웨어는 최대한 관심사를 분리(separation of concerns)하는 방법으로 오류를 다룰수 있도록 합니다. `try/catch`를 사용하지 않고 `async/awat`을 사용하면 비지니스 로직에서 오류를 처리하지 않아도 됩니다. 이런 오류는 오류 처리기로 버블링되어 요청에 어떤 응답을 줄지 결정할 수 있습니다. 다음 익스프레스 어플리케이션에서 이런 파워풀한 기능의 장점을 사용해 보세요.
208 |
209 | *만약에 노드 6을 사용하지만 async/await을 사용해야 한다면 [co, The 80/20 Guide to ES2015 Generators](http://es2015generators.com/)를 읽어보세요. Co/yield는 노드 버전 4 이상에서 플래그 없이 async/await을 대체할 수 있습니다. async/await과 co/yield 두 패러다임은 일부 고급 사용법을 제외하고는 대체 가능합니다.*
--------------------------------------------------------------------------------
/_posts/2018/2018-01-01-'멋진'-Vue-컴포넌트를-만드는-방법.md:
--------------------------------------------------------------------------------
1 | > [How To Build Vue Components That Play Nice](https://vuejsdevelopers.com/2018/06/18/vue-components-play-nicely/) 를 번역한 글입니다.
2 |
3 | Vue 컴포넌트를 처음부터 오픈소스로 사용하려고 만드는 사람은 많지 않습니다.
4 |
5 | 대부분의 사람은 본인들을 위해서 컴포넌트를 만듭니다. 문제가 생기면, 컴포넌트를 만들어서 해결하려고 하죠.
6 | 가끔 우리는 각기 다른 코드들에서 같은 문제를 해결하기 원하는 경우가 있습니다. 그럴 때 우리는 컴포넌트를 리팩토링해서 재사용 할 수 있도록 만듭니다.
7 | 그런 다음, 이 컴포넌트를 다른 프로젝트에서 사용하고 싶어집니다. 그러면 이제 독립된 패키지로 만들어버리죠. 그런 다음 우리는 "음, 그냥 이걸 모든 사람과 공유하는 건 어떨까?" 하고는 오픈소스로 올려버립니다.
8 |
9 | 이건 멋진 일입니다. Vue 개발자들을 위한 오픈 소스 컴포넌트의 큰 성장 가능성을 의미하죠. ([npmjs.com](https://www.npmjs.com/search?q=vue) 에서 vue로 검색하면 14,000개 이상의 패키지가 나옵니다.)
10 | 반면에, 대부분의 컴포넌트는 특정 상황에서 만들어졌고, 다양한 환경에서 재사용할 수 있도록 설계하지 않았기 때문에 많은 컴포넌트가 '멋지게' 작동하지 않습니다.
11 |
12 | '멋진' 컴포넌트란 무엇일까요?
13 | Vue 개발자들에게는 자연스럽게 작동하는 것을 의미하며, 모든 종류의 어플리케이션에서 통합하고 확장하기 쉬운 컴포넌트를 말합니다.
14 |
15 |
16 | 오픈 소스 컴포넌트를 살펴본 결과 '멋진' Vue 컴포넌트를 만드는 방법은:
17 |
18 | 1. `v-model` 호환성 구현
19 | 2. 알기 쉬운 이벤트
20 | 3. 엘리먼트에 정확하게 속성 등록하기
21 | 4. 브라우저 표준 채택
22 | 5. 콜백보다는 이벤트를 사용하기
23 | 6. 제한적인 내부 스타일
24 |
25 | ## `v-model` 호환성 구현
26 |
27 | 사용자가 데이터를 지정할 수 있으며 추가 기능이 붙어있는 단일 필드, 예를 들면 자동완성 검색이나 달력 날짜와 같이 기본적인 Form 형태인 컴포넌트의 경우, '멋진' 컴포넌트가 되기 위해 가장 중요한 것은 `v-model`을 지원하는 것입니다.
28 |
29 | [Vue 컴포넌트 가이드](https://kr.vuejs.org/v2/guide/components.html#%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%ED%8F%BC-%EC%9E%85%EB%A0%A5-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0)에 따르면 컴포넌트의 `v-model`은 기본적으로 `value` prop을 전달하고, `input` 이벤트 핸들러를 등록하여 작동합니다.
30 |
31 | 예를 들어, 만약 우리가 input에 date picker를 구현하려고 한다면, 우리는 datepicker에 `value` prop을 넘겨주고 날짜 선택 시 `input` 이벤트를 날려줍니다. 아래 코드를 봅시다.
32 |
33 | ```javascript
34 | import datepicker from 'my-magic-datepicker';
35 |
36 | export default {
37 | props: ['value'],
38 | mounted() {
39 | datepicker(this.$el, {
40 | date: this.value,
41 | onDateSelected: (date) => {
42 | this.$emit('input', date);
43 | },
44 | });
45 | }
46 | }
47 | ```
48 |
49 | ## 알기 쉬운 이벤트
50 | `v-model`을 구현하기 위해서 컴포넌트는 `input` 이벤트가 있어야 합니다. 그러나 클릭 이벤트나 키보드 이벤트처럼 다른 이벤트의 경우는 어떨까요? 네이티브 이벤트가 HTML에서 버블링 되지만, Vue의 이벤트는 버블링 되지 않습니다.
51 | 예를 들어, 아래 예제의 이벤트는 작동되지 않습니다.
52 |
53 | ```vue
54 |
64 |
65 |
66 | ```
67 |
68 | 이제 컴포넌트에 전달된 이벤트 리스너가 textarea에 잘 할당되어 작동합니다.
69 |
70 | ## 엘리먼트에 정확하게 속성 등록하기
71 | textarea의 `rows` 속성이나 간단한 툴팁을 추가하기 위한 `title` 속성의 경우를 생각해 봅시다.
72 |
73 | 기본적으로 Vue는 컴포넌트에 등록된 속성들을 컴포넌트의 최상위 엘리먼트에 할당합니다. 이 방식은 자주 쓰이지만, 여러분이 항상 원하는 방식은 아닐 거에요.
74 | 다시 위로 올라가서 textarea 컴포넌트를 살펴봅시다. 저 경우에는 `div` 태그보다는 `textarea` 태그에 속성이 할당되는 게 맞는 방식이죠.
75 | 루트 엘리먼트가 아닌, 특정 엘리먼트에 속성을 할당하기 위해서는 자동으로 속성을 할당하는 옵션을 꺼야 합니다. 그리고 `$attrs` 객체를 사용해서 엘리먼트에 직접 할당을 해주면 됩니다.
76 |
77 | 컴포넌트의 자바스크립트 부분
78 |
79 | ```javascript
80 | export default {
81 | inheritAttrs: false,
82 | }
83 | ```
84 |
85 | 템플릿 부분
86 |
87 | ```vue
88 |
89 |
90 |
91 | ```
92 |
93 | ## 브라우저 표준 채택
94 | 접근성과 키보드 탐색은 웹 개발 과정에서 가장 깜빡하기 쉬운 부분이기도 하지만 '멋진' 컴포넌트를 만들기 위해서는 가장 중요한 부분이기도 합니다.
95 | 예를 들어 탭 키로 form 필드들을 선택하거나 enter 키로 버튼이나 링크를 활성화 하는 것들, 다시 말해서 접근성과 키보드 탐색은 여러분의 컴포넌트가 브라우저 표준을 준수하는지 확인하는 것을 의미합니다.
96 |
97 | 키보드 탐색 권장 사항 목록은 [W3C 웹사이트](https://www.w3.org/TR/wai-aria-practices/#aria_ex)에서 전부 확인할 수 있습니다.
98 | 이 권장 사항들을 따른다면 여러분의 컴포넌트는 접근성에 관심이 없는 사용자뿐 아니라 모든 어플리케이션에서 사용할 수 있습니다.
99 |
100 | ## 콜백보다는 이벤트를 사용하기
101 |
102 | 여러분의 컴포넌트에서 컴포넌트의 부모로의 데이터나 사용자 인터렉션에 대한 통신은 일반적으로 두 가지 옵션이 있습니다: 콜백 함수를 prop으로 넘겨주기, 그리고 이벤트입니다. Vue의 커스텀 이벤트는 네이티브 브라우저 이벤트처럼 버블링이 되지 않기 때문에 기능적으로는 비슷합니다. 하지만 재사용을 하기 위한 컴포넌트에서는 콜백을 넘겨주는 것보다는 이벤트 사용을 강력하게 권장합니다. 왜냐구요?
103 |
104 | [Fullstack Radio의 에피소드](http://www.fullstackradio.com/87)중에서 Vue 핵심 멤버인 Chris Fritz가 얘기한 내용입니다.
105 |
106 | 1. 이벤트를 사용하는 것은 부모 컴포넌트가 확실하게 알 수 있도록 합니다. `부모로부터 받는 것`과 `부모로 보내는 것`을 완벽하게 분리할 수 있습니다.
107 | 2. 여러분은 표현식을 이벤트 핸들러 부분에서 바로 사용할 수 있습니다. 단순한 핸들링의 경우에는 아주 간단하게 처리할 수 있습니다.
108 | 3. 훨씬 자연스럽습니다. Vue 예제나 문서에서도 이벤트를 부모 간의 통신 목적으로 사용하는 경우가 있습니다.
109 | 다행히도 여러분이 현재 콜백 방식을 사용하고 있다면, 이벤트 방식으로 변경하는 것은 어렵지 않습니다.
110 |
111 | 콜백 방식을 사용하는 컴포넌트의 구조는 이렇습니다.
112 |
113 | ```javascript
114 | // my-custom-component.vue
115 | export default {
116 | props: ['onActionHappened', ...]
117 | methods() {
118 | handleAction() {
119 | ... // your custom code
120 | if (typeof this.onActionHappened === 'function') {
121 | this.onActionHappened(data);
122 | }
123 | }
124 | }
125 | }
126 | ```
127 |
128 | 그리고 위 컴포넌트를 사용하는 방법
129 |
130 | ```vue
131 |
167 |
168 |
169 |
170 | ```
171 |
172 | 컴포넌트의 자바스크립트 부분
173 |
174 | ```javascript
175 | export default {
176 | props: {
177 | disableStyles: {
178 | type: Boolean,
179 | default: false
180 | }
181 | },
182 | computed: {
183 | isStyledClass() {
184 | if (!this.disableStyles) {
185 | return 'is-styled';
186 | }
187 | },
188 | }
189 | ```
190 |
191 | CSS에서는 이렇게 사용하면 됩니다.
192 |
193 | ```css
194 | @import 'my-component-styles';
195 | .is-styled {
196 | @include my-component-styles();
197 | }
198 | ```
199 |
200 | 이렇게 하면 즉각적인 스타일링을 원하는 대로 할 수 있지만, 커스터마이즈를 원하는 사용자는 높은 명시도의 css선택자를 오버리이딩 할 필요가 없어집니다. 그냥 `disableStyles` prop으로 스타일을 해제하고 다른 mixin을 사용하거나 아예 처음부터 스타일을 다시 만들 수 있습니다.
--------------------------------------------------------------------------------
/_posts/2018/2018-01-01-(ES6)-webpack과-Babel을-이용하여-ES6-간단한-사용환경-설치하기.md:
--------------------------------------------------------------------------------
1 | **[원본링크가기](https://leanpub.com/setting-up-es6/read#sec_webpack-babel)**
2 |
3 | 역자: ES6를 로컬에서 간단하게 사용하기위한 방법이 잘 정리되어 있는거 같아 번역해보았습니다 :)
4 |
5 | #3.3 webpack과 Babel을 이용하여 ES6 사용하기
6 |
7 | 해당 파트(#3.3)는 client-side ES6를 아래 열거된 기술을 이용하여 작동시키는 방법을 알아봅니다
8 |
9 | - [webpack](http://webpack.github.io/) : client-side 모듈 빌더이자 모듈 로더
10 | - [npm](https://www.npmjs.com/) : 패키지 매니저
11 | - [Babel](http://babeljs.io/) : ES6를 ES5로 변환시켜주는 트랜스파일러~코드변환기~ (우리는 ES6를 사용합니다)
12 |
13 | ## 3.3.1 webpack 설명
14 | webpack의 특성 중 우리가 살펴볼만한 부분은 다음과 같습니다
15 | - 지원하는 모듈 포맷: AMD, CommonJS
16 | - 지원하는 패키지 매니저: Bower, npm
17 | - non-code를 위한 로더: CSS, templates, ...
18 | - 온디맨드~on demand~ 로딩(chunked transfer)
19 | - 자동으로 브라우저를 새로고침~refresh~해주는 **hot module reloading** 를 지원하는 자체 개발 서버 지원 (개발할때 편리합니다)
20 | - **Dead code elimination** (tree shaking 이라고도 알려져 있습니다)
21 |
22 | ## 3.3.2 데모 프로젝트 설치하기
23 |
24 | 데모 프로젝트를 분석해보겠습니다. 원하신다면 아래와 같이 직접 설치하실 수도 있습니다.
25 | - 다음 깃헙 repository로 가서 다운로드 또는 clone 하세요 [webpack-babel-demo](https://github.com/rauschma/webpack-babel-demo)
26 | - `cd webpack-babel-demo/`
27 | - `npm install`
28 |
29 | 모든 건 로컬에 설치됩니다.
30 |
31 | ## 3.3.3 데모 프로젝트의 구조
32 | ```
33 | build/
34 | bundle.js
35 | bundle.js.map
36 | index.html
37 | html/
38 | index.html
39 | js/
40 | main.js
41 | world.js
42 | node_modules/
43 | package.json
44 | webpack.config.js
45 | ```
46 | 설정 파일과 라이브러리 :
47 | - `package.json` npm을 설정하는 역할을 합니다. 이를 통해 모든 부품이 설치되어 돌아갈 수 있습니다. 이 프로젝르는 webpack과 Babel 만 필요합니다.
48 | - `node-modules/` npm이 package들을 설치하는 디렉토리~폴더~입니다.
49 | - `webpack.config.js` webpack을 설정합니다. 해당 프로젝트의 경우, 트랜스파일러~transpiler~이자 빌드툴~build tool~의 역할을 맡습니다.
50 |
51 | Input 디렉토리 :
52 | - `js/` ES6 코드를 지니는 디렉토리이며, webpack이 ES5로 트랜스파일할 파일이 위치합니다.
53 | - `html/` 수정되지 않은 체 output으로 내보낼 파일들을 지닌 디렉토리입니다.
54 |
55 | Output 디렉토리 :
56 | - `build/` weback의 결과물이 위치할 디렉토리입니다. 결과물은 webpack, Babel, npm에 기대지 않는~NOT dependent~ **plain HTML, ES5 코드**입니다. 다음 리스트는 빌드 순서~build step에 따라 만들어집니다.
57 | - `bundle.js` 모든 자바스크립트의 묶음입니다.
58 | - `bundle.js,map` 브라우저가 ES5 코드를 작동시킬 수 있도록 가능하게 해주는 source map 입니다. 디버그는 ES6로 합니다.
59 | - `index.html` 는 `html/`에서 복사해 가져온 것입니다.
60 |
61 | ## 3.3.4 파일 패키지 package.json
62 | package.json은 npm 설정을 관리합니다.
63 | ```
64 | {
65 | "devDependencies": {
66 | "babel-loader": "^6.1.0",
67 | "babel-preset-es2015": "^6.1.18",
68 | "babel-polyfill": "^6.3.14",
69 | "webpack": "^1.12.6",
70 | "webpack-dev-server": "^1.12.1",
71 | "copy-webpack-plugin": "^0.2.0"
72 | },
73 | "scripts": {
74 | "build": "webpack",
75 | "watch": "webpack --watch",
76 | "start": "webpack-dev-server --hot --inline"
77 | },
78 | "babel": {
79 | "presets": ["es2015"]
80 | }
81 | }
82 | ```
83 |
84 | `devDependencies`는 개발에 필요한 npm package를 의미합니다
85 | - `webpack`은 webpack을 로컬에 설치합니다
86 | - `webpack-dev-server`는 webpack에 hot-reloading 개발 웹서버를 추가합니다
87 | - `copy-webpack-plugin`은 build 디렉토리에 파일을 복사하는 webpack 플러그인입니다
88 | - `babel-loader`는 webpack이 Babel을 이용하여 자바스크립트를 트랜스파일할 수 있도록 기능을 제공합니다. 이 패키지는 내부적으로 몇 가지 핵심적인 Babel 패키지를 가지고 옵니다~import~
89 | - `babel-preset-es2015`은 ES6를 ES5로 컴파일하기 위해 쓰이는 Babel 프리셋~preset~입니다.
90 |
91 | `scripts`는 webpack을 작동하는 다양한 방법을 적어놓았습니다
92 | - 한번만 Build
93 | - `npm run build`
94 | - 웹 브라우저에서 `build/index.html`을 연다
95 | - 파일(들)을 감시~watch~한다. 그 중 하나가 바뀌면 rebuild한다.
96 | - `npm run watch`
97 | - 웹 브라우저에서 `build/index.html`을 연다. 변경사항이 있으면 웹페이지를 새로고침한다.
98 | - webpack 개발 서버를 이용한 hot reloading
99 | - `npm start` (`npm run start` 의 줄임 )
100 | - `http://loacalhost:8080/` 을 연다. 변경사항이 있으면 자동으로 새로고침된다.
101 |
102 | `babel`은 Babel이 프리셋 중에서`es2015`를 사용하도록 알려줍니다.
103 |
104 | ## 3.3.5 Directory js/
105 | 두 개의 작은 파일이 모든 자바스크립트 코드를 지니고 있습니다.
106 |
107 | 먼저, `js/main.js`
108 | ```
109 | import 'babel-polyfill';
110 | import world from './world';
111 |
112 | document.getElementById('output').innerHTML = `Hello ${world}!`;
113 | ```
114 | `babel-polyfill`을 가져오는 첫번째 줄을 통하여 (역자: ES6를 쓰기 위해 필요한) ES6 기본 library를 global 변수로 가지고 옵니다. (`Object.assign()`, 새로운 ES6 string 메소드 등)
115 |
116 | 둘째로는 `js/world.js`
117 | ```
118 | export defualt 'WORLD';
119 | ```
120 | build 과정 중에 web-pack은 이 파일들을 모두 모아 하나의 파일, ` build/bundle.js`로 묶습니다. 그리고 그 파일을 위한 source map을 `build.js.map`이라는 파일로 만듭니다.
121 |
122 | ## 3.3.6 File html/index.html
123 |
124 | HTML파일은 `
139 |