Assemble , Middleman ๋๋ Jekyll๊ณผ ๊ฐ์ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ๋ ํ ํ๋ฆฟ ์๋จ์์ YAML ๋จธ๋ฆฌ๋ง์ ์ง์ํฉ๋๋ค. ์ด๋ฌํ ํ ํ๋ฆฟ์์ html beautify๋ฅผ ์คํํ๋ฉด ์๋ถ๋ถ์ด ์๋ง์ด ๋ฉ๋๋ค.
๋ฐ๋ผ์ ์ด yaml ๋จธ๋ฆฌ๋ง:
title: Test
is-test: true
---
๋ค์์ผ๋ก ๋ณํ:
--- title: Test is-test: true ---
์ธ ๊ฐ์ ๋์ ์ฌ์ด์ "๊ฐ๊ฒจ์ง" ๋ชจ๋ ๊ฒ์ ๋ฌด์ํ๊ฑฐ๋ ์ถ๊ฐ ์ต์ ์ ์ถ๊ฐํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ถ๊ฐ ์ ๋ณด: http://assemble.io/docs/YAML.html ๋๋ http://middlemanapp.com/basics/frontmatter/
์ฌ๋๋ค์ด js, html ๋ฐ css์ ํจ๊ป ์ฌ์ฉํ ํ
ํ๋ฆฟ ์์คํ
์ด ๋๋ฌด ๋ง์ต๋๋ค.
@einars , @evocateur ๋น์ ์ ๋ฏธํ๋ฅผ ์์ ํ ์ ์๋์ง ์ฌ๋ถ(๋๋ ์ด๋ป๊ฒ)์ ๋ํ ์๊ฐ/์๊ฒฌ์ด ์์ต๋๊น? ๊ทธ๋์ ์ฐ๋ฆฌ๋ ์ด ๋ชจ๋ ๊ฒ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋ชจ๋ ํต์ฌ ์ฝ๋์ ํน๋ณํ ๊ฒฝ์ฐ๋ฅผ ์ถ๊ฐํ์ง ์์ต๋๋ค.
๊ฐ๋ ฅํ AST ํ์(์: Esprima )๋ฅผ ์ฌ์ฉํ์ฌ ๊ทน์ ์ผ๋ก ๋ฆฌํฉํ ๋งํ๊ณ ์ด๋ฌํ AST๋ฅผ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ์ฌ Python ๋ฒ์ ์ ํฌ๊ธฐํ๋ ๊ฒ ์ธ์๋ ์ด๋ฐ ์ผ์ด ๋ฐ์ํ์ง ์์ต๋๋ค. (๊ทธ๋ฆฌ๊ณ escodegen๊ณผ ๊ฐ์ ๊ฑฐ์ ๋ชจ๋ AST ์ฝ๋ ์์ฑ๊ธฐ๋ ์ฌ์ฉ์ ์ ์ํ๊ธฐ ๋งค์ฐ ์ด๋ ค์ด ์ถ๋ ฅ์ ์์ฑํฉ๋๋ค.)
์ข ๋ ์ง์ค์ ์ผ๋ก ๋งํ์๋ฉด, ์ด ํ๋ก์ ํธ๋ JS๋ฅผ ์๋ฆ๋ต๊ฒ ํ๋ ๊ฒ ์ด์์ ํด์๋ ์ ๋ฉ๋๋ค. HTML๊ณผ CSS๋ฅผ ์๋ตํ์ง๋ง ๊ทธ๋๋ก ์ ์งํด์ผ ํ๋ค๋ฉด CSS์ HTML๋ง ์๋ฆ๋ต๊ฒ ํด์ผ ํฉ๋๋ค. ๋ชจ๋ ์ฌ์ ๋ฐ ์ฌํ ํ๋ก์ธ์์ ์๋ชป๋ ๊ตฌ๋ฌธ "์คํ"์ ํ์ฉํ๋๋ก ์ ์ ํ์๋ฅผ ์๊ณกํ๋ ค๋ ์๋๋ ์๊ฐ ๋ญ๋น์ ์ธ ์ด๋ฆฌ์์์ ๋๋ค.
์ฐ๋ฆฌ๋ YAML์ด๋ Markdown/LESS/SASS/React/Go/Ruby/Brainfuck์ ๋ฏธํํ์ง ์์ต๋๋ค. ๊น๋ค๋ก์์ ์ ์ณ๋๊ณ , ์ฐ๋ฆฌ์ ์ด์ํ๊ณ ์๋ฆ๋ค์ด ํ๋ก ํธ ์๋ ์ฅ์ธ ์ปค๋ฎค๋ํฐ๊ฐ ๊ฟ๊พธ๋ ๋ชจ๋ ์ด์ํ ๋ฉํ ๊ตฌ๋ฌธ ์ด๋ณ์ ์ง์ํ๋ ์ ์ํ๋ ๋ณต์ก์ฑ์ ๋จ์ง ์ด๋ฆฌ์์ ์ผ์ ๋๋ค. ์ค๋๋ ์๋ AST ๊ฐ๋๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ์๋ํ๋ ๋ค๋ฅธ ๋ฏธํ๊ฐ ์์ต๋๋ค(ํ๋ฌ๊ทธ์ธ API๊ฐ ์กด์ฌํ๋๋ผ๋ ๋งค์ฐ ๋ฏธ์ฑ์ํ ๊ฒฝํฅ์ด ์์).
๋งค์ฐ ํฉ๋ฆฌ์ ์ ๋๋ค. "beautifier๋ ๋ฒ์ฉ ํฌ๋งทํฐ๊ฐ ์๋๋๋ค"์ ๊ฐ์ ์๋ฆฌ์ ๋๋ค.
js beautifier๋ ๋ค๋ฅธ beautifier ์์ ๋ํํ๊ธฐ ์ํ ์ฌ์ด API๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๊ฒ์ด ๋ฐ๋ก html beautifier๊ฐ ํ๋ ์ผ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ง๋๋ฉด html beautifier๊ฐ ์ ์ด๋ฅผ js beautifier์ ๋๊ธด ๋ค์ ์ถ๋ ฅ์ ํตํฉํฉ๋๋ค. ์ฌ๋๋ค์ ์ด ํ๋ก์ ํธ์์ ์ ๊ณตํ๋ ๊ตฌ์ฑ ์์๋ฅผ ๋ฉํํ๊ฑฐ๋ ์์ ํ์ฌ ์์ ๋ง์ ๊ตฌ์ฑ ์์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ฌ๋๋ค์ด ๊ด์ฌ์ ๊ฐ๊ณ ์ฑ ์์ ์ง๊ณ /๊ณต์ ํ ์ํฅ์ด ์๋ค๋ฉด ํ๋ก์ ํธ๋ฅผ beautify-web์ ์ผ๋ถ๋ก ๋ง๋ค ์ ์์ต๋๋ค.
๋จ๊ธฐ์ ์ผ๋ก๋ html, css ๋ฐ javascript ์ธ๋ถ์ ๊ธฐ๋ฐํ ๋ฒ๊ทธ ์์ฒญ์ ํ์ํ๊ธฐ ์์ํ ๋ค์ ๊ฑฐ๊ธฐ์์ ์ด๋๋ก ๊ฐ์ง ๊ฒฐ์ ํด์ผ ํฉ๋๋ค.
๋๋ beautifier๊ฐ preservenewlines
์ ๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๊ฐ์ ธ์ผ ํ๋ค๊ณ ๋ฏฟ์ต๋๋ค. ์ด๋ฏธ ์๋ ๊ฒฝ์ฐ ํ
์คํธ์ ์ ์ค์ ์ ์งํฉ๋๋ค. ์์ ๋ฌธ์ ๋ง์ ์๋๋ค. ์๋ฅผ ๋ค์ด HTML ์ฝ๋๊ฐ ์๊ณ ์ผ๋ถ ์ฌ๋๋ค์ VS Code์์ ์์
ํ๊ณ ๋ค๋ฅธ ์ฌ๋๋ค์ ์๋ฒ์ MidnightCommander์์ ๋ฐ๋ก ์์
ํ๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. ์ด๊ฒ์ด ๋ชจ๋ ํ
์คํธ๊ฐ ์ด์ ๊ฐ์ ํ์์ผ๋ก ์ง์ ๋๋ ์ด์ ์
๋๋ค.
<p>
This is multiple
line text, that is
easy to read in
MC
</p>
์ด๊ฒ์ HTML์ด ๋ ๋๋ง๋๊ณ MC์์๋ ๋ณผ ์ ์์ ๋ ๋ฐ๋ก ์๋ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋๊ตฐ๊ฐ๊ฐ beautifier๋ก ํฌ๋งทํ๋ฉด ์ด๊ฒ์ ์ฌ๋ผ์ง๋๋ค.
๋ฐ๋ผ์ ํ ์คํธ์ ์ ์ค์ ์ ์งํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ํด๊ฒฐ๋์๋ค๊ณ ์๊ฐํ๋ค. ํ ์คํธ๊ฐ ํ์ํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ beautifier๊ฐ
preservenewlines
์ ๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๊ฐ์ ธ์ผ ํ๋ค๊ณ ๋ฏฟ์ต๋๋ค. ์ด๋ฏธ ์๋ ๊ฒฝ์ฐ ํ ์คํธ์ ์ ์ค์ ์ ์งํฉ๋๋ค. ์์ ๋ฌธ์ ๋ง์ ์๋๋ค. ์๋ฅผ ๋ค์ด HTML ์ฝ๋๊ฐ ์๊ณ ์ผ๋ถ ์ฌ๋๋ค์ VS Code์์ ์์ ํ๊ณ ๋ค๋ฅธ ์ฌ๋๋ค์ ์๋ฒ์ MidnightCommander์์ ๋ฐ๋ก ์์ ํ๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. ์ด๊ฒ์ด ๋ชจ๋ ํ ์คํธ๊ฐ ์ด์ ๊ฐ์ ํ์์ผ๋ก ์ง์ ๋๋ ์ด์ ์ ๋๋ค.์ด๊ฒ์ HTML์ด ๋ ๋๋ง๋๊ณ MC์์๋ ๋ณผ ์ ์์ ๋ ๋ฐ๋ก ์๋ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋๊ตฐ๊ฐ๊ฐ beautifier๋ก ํฌ๋งทํ๋ฉด ์ด๊ฒ์ ์ฌ๋ผ์ง๋๋ค.
๋ฐ๋ผ์ ํ ์คํธ์ ์ ์ค์ ์ ์งํ๋ ๊ฒ์ด ์ข์ต๋๋ค.