🌟 λΈ”λ‘œκ·Έλ₯Ό μ‹œμž‘ν•˜λ©°

Cjaewon β€’ October 31, 2020

λΈ”λ‘œκ·Έ

ν•œμ€„ μš”μ•½ λΈ”λ‘œκ·Έλ₯Ό μ‹œμž‘ν•©λ‹ˆλ‹€. λ§Žμ€ 관심 λΆ€νƒλ“œλ¦½λ‹ˆλ‹€. πŸ™‡

λΈ”λ‘œκ·Έ 유λͺ©μƒν™œ

개발자의 μˆ™λͺ…인 κΈ€μ“°κΈ°λ₯Ό μ–Έμ  κ°„ μ‹œμž‘ν•΄μ•Όλœλ‹€κ³  μƒκ°ν–ˆλ‹€.
그러기 μœ„ν•΄μ„œλŠ” λ¨Όμ € 글을 μ“°κΈ° μ•žμ„œμ„œλŠ” ν”Œλž«νΌμ„ κ²°μ •ν•΄μ•Ό ν–ˆμ—ˆλ‹€.

λ‚΄κ°€ κ³ λ €ν–ˆλ˜ ν”Œλž«νΌ 은 총 3κ°œκ°€ μžˆμ—ˆλ‹€.

  • Velog νŠΈλžœλ”© μ‹œμŠ€ν…œμ„ 톡해 κΈ€ λ…ΈμΆœμ΄ μ‹Άλ‹€λŠ” 점, ν•œκ΅­μΈ κ°œλ°œμžλΆ„λ“€μ΄ λŒ€λΆ€λΆ„μ΄μ…”μ„œ ν”Όλ“œλ°±μ΄ ν™œλ°œν•œ 점
  • Medium νŽ˜μ΄μ§€ μ»€μŠ€ν…€μ΄ κ°€λŠ₯ν•œ 점, 정말 ν™˜μƒμ μΈ 에디터
  • Static Site(ν”Œλž«νΌ X) 맀우 높은 μžμœ λ„, 도메인 μ—°κ²° κ°€λŠ₯

사싀상 λ‚˜λŠ” Velog 에 주둜 글을 썻닀. ν•˜μ§€λ§Œ κ·Έλ•ŒκΉŒμ§€λ„ μœ„ μ„Έκ°œ ν”Œλž«νΌ 쀑에 결정을 λͺ» ν•œ μƒνƒœμ˜€λ‹€. λ˜ν•œ μ΄λŠ” λΈ”λ‘œκΉ… ν•˜λŠ” 것을 λ§μ„€μ΄κ²Œ ν•˜λŠ” κ²½ν–₯도 μžˆμ—ˆλ‹€. λͺ‡ 달간 λΈ”λ‘œκΉ…μ„ 멈좘 μƒνƒœμ—μ„œ κΉƒν—ˆλΈŒ νŠΈλžœλ”© μ—μ„œ 정적 μ‚¬μ΄νŠΈλ‘œ λ§Œλ“€μ–΄μ§„ 멋진 λΈ”λ‘œκ·Έλ“€μ„ λ³΄κ²Œλ˜μ—ˆλ‹€. κ²°κ΅­ 정적 μ‚¬μ΄νŠΈμ— 맀료되고 μ •μ°©ν•˜μžκ³  λ§ˆμŒμ„ λ¨Ήμ—ˆλ‹€.

기술적 이야기

정적 μ‚¬μ΄νŠΈ

λΈ”λ‘œκ·Έμ˜ 노선을 정적 μ‚¬μ΄νŠΈλ‘œ μ •ν•˜κ³  λ‚˜μ„œ 기술 μŠ€νƒμ„ 선택해야 ν–ˆμ—ˆλ‹€. κ΄€μ‹¬μžˆκ²Œ λ΄€μ—ˆλ˜ 정적 μ‚¬μ΄νŠΈ 생성기 μ€‘μ—λŠ” Gastby, Hugo κ°€ μžˆμ—ˆλ‹€.

  • βš›οΈ Gatsby
    React 와 Graphql λ₯Ό μ‚¬μš©ν•˜λŠ” 정적 μ‚¬μ΄νŠΈ μƒμ„±κΈ°λ‘œ λ¦¬μ•‘νŠΈμ™€ 정적 μ‚¬μ΄νŠΈμ˜ μž₯점을 λ‹€ ν¬ν•¨ν•œλ‹€λŠ”κ²Œ μΈμƒκΉŠμ—ˆλ‹€.

  • πŸš€ Hugo
    λΉ λ₯Έ λΉŒλ“œ 속도와 Go μ–Έμ–΄μ˜ Template λ₯Ό μ§€μ›ν•˜κ³  무엇보닀 단일 λ°”μ΄λ„ˆλ¦¬λΌλŠ” 점이 λ§˜μ— λ“€μ—ˆλ‹€.


κ·Έλ ‡κ²Œ 2개 λ‹€ μ‚¬μš©ν•΄λ³Έ κ²°κ³Ό Hugo λ₯Ό μ„ νƒν•˜κ²Œ λ˜μ—ˆλ‹€. Gatsby 같은 κ²½μš°λŠ” κΈ°λŠ₯을 μ‚¬μš©ν• λ•Œλ§ˆλ‹€ ν•„μš”ν•œ plugin λ“€, sharp 리사이징 였λ₯˜ λ“± μžˆλ‹€λŠ” 점이 λΆ€λ‹΄μŠ€λŸ¬μ› λ‹€.

μ§€κΈˆ 글을 μ“°λŠ” μ‹œμ μ—μ„œ λŠλ‚€ 점은 Hugo λ₯Ό μ„ νƒν•œ 것은 쒋은 μ„ νƒμ΄μ˜€λ˜ 것 κ°™λ‹€. Hugo(ν™•μž₯ κΈ°λŠ₯)μ—μ„œ 자체적으둜 μ œκ³΅ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λ²ˆλ“€λŸ¬(esbuild), scss λ²ˆλ“€λŸ¬λ„ λ„ˆλ¬΄ 도움이 됐닀.

SPA 흉내내기

Gatsby (React) λ₯Ό μ“Έ λ•Œ μ•±μ²˜λŸΌ μ΄λ™λ˜λŠ” spa νŠΉμ„±μ΄ λΆ€λŸ¬μ› λ‹€. μ–΄λŠ λ‚  Github λŒ€μ‹œλ³΄λ“œμ—μ„œ νŒ”λ‘œμž‰ ν•˜λŠ” 뢄이 turbolinks 라이브러리 μŠ€νƒ€λ₯Ό λˆ„λ₯΄μ‹  것을 보고 처음 μ•Œκ²Œλ˜μ—ˆλ‹€.

import turbolinks from 'turbolinks';

turbolinks.start();

κ°„λ‹¨ν•œ μ½”λ“œλ₯Ό 톡해 정적 μ‚¬μ΄νŠΈμ—μ„œ 보닀 높은 μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•  수 있게 λ˜μ—ˆλ‹€.

μžλ™λΉŒλ“œ

λΈ”λ‘œκ·Έ 글을 μ—…λ°μ΄νŠΈμ™€ μ½”λ“œλ₯Ό μˆ˜μ •μ„ ν• λ•Œ λ§ˆλ‹€ 맀번 λΉŒλ“œ, 배포λ₯Ό ν•˜λŠ” 일은 자주 λ°œμƒν•  것 κ°™μ•„ μžλ™ν™”κ°€ ν•„μš”ν–ˆμ—ˆλ‹€. github page μ—μ„œ ν˜ΈμŠ€νŒ… λ˜λŠ” κ²Έ Github Action 을 μ‚¬μš©ν•˜μ—¬ μžλ™λΉŒλ“œλ₯Ό κ΅¬ν˜„ν–ˆλ‹€.

- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: '0.78.0'
    extended: true
      
- name: Setup Nodejs
  uses: actions/setup-node@v1
  with:
      node-version: '14'
      
- name: Build
  run: |
    npm install --prefix ./assets/scripts
    hugo --gc --minify
    echo "c.cjaewon.com" > ./public/CNAME
    touch ./public/.nojekyll
        
- name: Deploy to GitHub Pages
  uses: JamesIves/github-pages-deploy-action@3.7.1
  with: 
    GIT_CONFIG_NAME: github-actions[bot]
    GIT_CONFIG_EMAIL: github-actions[bot]@users.noreply.github.com
    BRANCH: gh-pages # The branch the action should deploy to.
    FOLDER: public # The folder the action should deploy.
    CLEAN: true # Automatically remove deleted files from the deploy branch

μ•žμœΌλ‘œ

πŸ™ λ‹€λ₯Έ κ°œλ°œμžλΆ„λ“€μ΄ 그랬던 것 처럼 기술 κ΄€λ ¨ κΈ€, κ°•μ’Œ λ“± λ‚˜λ§Œμ˜ 이야기λ₯Ό μ¨λ³΄λŠ” 계기가 되면 쒋을 것 κ°™λ‹€. ( 전에와 λ‹€λ₯΄κ²Œ λΈ”λ‘œκ·Έ 글을 μ„±μ‹€ν•˜κ²Œ 썻으면 μ’‹κ² λ‹€. )

RSS κ΅¬λ…ν•˜κΈ°
λ©”μΈμœΌλ‘œ